Library with missing Functional / Atomic CSS classes for Bulma framework, which doesn't require Bulma framework to work! ❤️

• bulma-helpers
  • Quick install
    • NPM
    • Yarn
    • Import
  • Compatibility with Bulma
  • Compatibility with other CSS frameworks
  • CSS only
  • Browser Support
  • Customization
    • Customizing ranges of generated classes
    • Customizing media queries
    • Customizing breakpoints
    • Choosing modules
  • Documentation
    • Spacing
      • Margin
        • Margin
        • Margin for one side
        • All available sides
        • Default available spacing values
      • Padding
        • Padding
        • Padding for one side
        • All available sides
        • Default available spacing values
    • Sizing
      • Width
      • Height
      • Default available sizing values
      • Max / min width / height
        • Max width
        • Min height
        • Default available sizing values
      • Fraction width / height
        • Full width
        • Default available sizing values
      • Full page width / height
        • Full page width
        • Default available sizing values
    • Media queries
      • Default breakpoints
      • Margin
        • Margin
        • Margin for one side
        • All available sides
        • Default available spacing values
      • Padding
        • Padding
        • Padding for one side
        • All available sides
        • Default available spacing values
    • Sizing
      • Width
      • Height
      • Default available sizing values
      • Max / min width / height
        • Max width
        • Min height
        • Default available sizing values
      • Fraction width / height
        • Full width
        • Default available sizing values
      • Full page width / height
        • Full page width
        • Default available sizing values
    • Flex
      • Row
      • Column
      • Align content start
      • Justify content center
      • Align self baseline
      • Align items flex-end
      • Nowrap
    • Border
      • Borderless
      • Border width
      • Border width for one side
      • All available sides
      • Default available sizing values
    • Cursor
      • Cursor's style
      • All available cursors
    • Misc
      • Blur
      • Blur medium
      • Blur hard
      • Default values for blurs
  • Copyright and license

Installation is nearly the same as pure Bulma framework.

npm install bulma-helpers

or

yarn add bulma-helpers

After installation, you can import the CSS file into your project using this snippet:

import 'bulma-helpers/css/bulma-helpers.min.css'

Bulma-helpers library complies with Bulma convention of naming classes. Most of classes are of the is-* and has-* type. Example:

.is-borderless

or

.has-padding-top-5

One exception are pure Flexbox classes, which names just reflect modifiers. Example:

.flex-row

or

.align-center

You can use Bulma-helpers with any other CSS framework or even as a standalone library, if you want to write Functional / Atomic CSS code. Keep in mind that Bulma-helpers library bases on Sass, so you will need basic knowledge of Sass to customize the library.

Bulma-helpers, equally to Bulma, is a CSS library. As such, the sole output is a single CSS file: bulma-helpers.css

You can either use that file, "out of the box", or download the Sass source files to customize the variables or choose which modules do you want to use.

There is no JavaScript included.

Bulma-helpers, equally to Bulma, uses autoprefixer to make (most) Flexbox features compatible with earlier browser versions. According to Can I use, Bulma is compatible with recent versions of:

• Chrome
• Edge
• Firefox
• Opera
• Safari

Internet Explorer (10+) is only partially supported.

All modules are toggled on and all variables have some values by default. You can customize these values by assigning your values to variables, defined in the library. All available variables you can find in corresponding files in variables directory. Toggling off media queries (variables for this you can find in sass/helpers/variables/media-queries.sass, for example $enable-flex-media-queries) will decrease size of the library dramatically.

For all generated classes (such as has-margin-bottom-*, where * is value from given range) there is a simple way to change range and interval of generated classes. You can change the following variables in corresponding sass files. All variables follow the same pattern, shown below.

$sizing-range-start: 50 !default
$sizing-range-end: 400 !default
$sizing-interval: 50 !default

We've got name of customized value, such as sizing or spacing, then variable's meaning, such as range-start, range-end and interval.

For media queries, the rule is the same. The only difference is that rest of variable's name is preceded by mq.

$mq-sizing-range-start: 50 !default
$mq-sizing-range-end: 400 !default
$mq-sizing-interval: 50 !default

You can decide whether you want to include media queries in your project or not. In variables/media-queries.sass file you can find variables which allows you to customize your Bulma-helpers. All of defined variables are built on top of the following pattern:

$enable-media-queries: true !default

This variables enables/disables all media queries in the project.

For choosing certain modules, such as max/min width/height sizing media queries, you can assign a value to variables such as:

$enable-sizing-max-min-width-height-media-queries: true !default

Breakpoints are same as default breapoints in Bulma. If you want to change them, then just override the same breakpoint variables as in Bulma, for example:

$tablet: 800px

By default, all modules are included in result build. Even so, you can decide on your own which modules do you want to use in your project. To achieve this, you have to remove unwanted sass modules imports from main _all.sass files in helpers directory or remove single file imports from _all.sass in corresponding modules directories.

All values are represented by pixels, so e.g. has-max-width-50 class means that this element's maximal width is 50px.

.has-margin-5

gives

margin: 5px !important

.has-margin-top-5

gives

margin-top: 5px !important

1. top
2. right
3. bottom
4. left

(5, 10, 15, ..., 150)

In the same way as above for margin.

.has-padding-5

.has-padding-top-5

1. top
2. right
3. bottom
4. left

(5, 10, 15, ..., 150)

.has-width-50

gives

width: 50px !important

.has-height-50

(50, 100, 150, ..., 400)

.has-max-width-50

gives

width: 50px !important

.has-min-height-50

gives

min-height: 50px !important

(50, 100, 150, ..., 400)

.is-full-width

gives

width: 100% !important

.is-half-height

gives

height: 50% !important

full (100%), half (50%), quarter (25%)

.has-page-width

gives

width: 100vw !important

full (100vw/vh), half (50vw/vh), quarter (25vw/vh)

By default, media queries for sizing and spacing are toggled on. You can use media queries in exactly the same as in Bulma framework. Just add postfix to classname with breakpoints name, such as -mobile or -widescreen-only.

There are few defined breakpoints - mobile, tablet, tablet-only, touch, desktop, desktop-only, widescreen, widescreen-only, fullhd. Everything as in Bulma! You can read more here.

$gap: 64px !default
$tablet: 769px !default
$desktop: 960px + (2 * $gap) !default
$widescreen: 1152px + (2 * $gap) !default
$widescreen-enabled: true !default
$fullhd: 1344px + (2 * $gap) !default
$fullhd-enabled: true !default

.has-margin-5-mobile

.has-margin-top-5-tablet

1. top
2. right
3. bottom
4. left

(5, 10, 15, ..., 150)

In the same way as above for margin.

.has-padding-5-fullhd

.has-padding-top-5-widescreen

1. top
2. right
3. bottom
4. left

(5, 10, 15, ..., 150)

For all flex classes you can do all the responsive things. For example:

.flex-mobile

.justify-center-desktop

.has-width-50-touch

.has-height-50-mobile

(50, 100, 150, ..., 400)

.has-max-width-50-desktop

.has-min-height-50-mobile

(50, 100, 150, ..., 400)

.is-full-width-tablet

.is-half-height-widescreen

full (100%), half (50%), quarter (25%)

.has-page-width-mobile

full (100vw/vh), half (50vw/vh), quarter (25vw/vh)

Names of classes reflect modifiers. There are modifiers for:

1. row
2. column
3. align-content
4. justify-content
5. align-self
6. align-items
7. wrap

Examples:

.flex-row

.flex-column

.align-start

.justify-center

.align-self-baseline

.align-items-flex-end

.nowrap

.is-borderless

Makes cascade of borderless (applies lack of border to all tr, td and th in the table).

.is-completely-borderless

.has-border-width-3

gives

border-width: 3px !important

.has-border-top-width-3

gives

border-top-width: 3px !important

1. top
2. right
3. bottom
4. left

(1, 2, 3, ..., 10)

.has-cursor-pointer

gives

cursor: pointer !important

1. pointer
2. grab
3. help
4. wait
5. crosshair
6. not-allowed
7. zoom-in

.is-blurred

gives

filter: blur(15px) !important

.is-blurred-medium

gives

filter: blur(40px) !important

.is-blurred-hard

gives

filter: blur(75px) !important

(15px, 40px, 75px)

Code copyright 2018 Jędrzej Maczan. Code released under the MIT license. README bases on Bulma README file.