Bulma-utilities NPM

Bulma Utilities

Bulma Utilities is a Bulma Framework extension that add tons of utility classes.

Installation

NPM

npm install bulma-utilities

If you have custom Bulma variables, you can import bulma-utilities.sass after your variables file and it will use your custom $sizes and $colors lists.

Documentation

Bulma Utilities website and full documentation is currently a work in progress (just like the extension itself), however a preview will be displayed here.

Utility Classes

Chart legend: {x} - is a number that represents the position in $sizes (Bulma's derived variable) array (Example: has-margin-3){d} - is a letter that represents the direction, b stands for bottom, l for left, r for right and t for top (b, l, r, t, bl, br, bt, lr, lt, rt, blr, blt, brt, lrt) (Example: has-margin-b-3){c} - is the color used in the class (Example: has-bg-primary)

Class	Description
has-margin-{x}	Adds margin to element
has-margin-{d}-{x}	Adds margin to element in respective direction
has-padding-{x}	Adds padding to element
has-padding-{d}-{x}	Adds padding to element in respective direction
is-paddingless-{d}	Removes padding in respective direction
is-marginless-{d}	Removes margin in respective direction
has-bg-{c}	Changes background color to respective color
is-clickable	Changes cursor to pointer
is-zoom-in	Changes cursor to zoom-in
is-zoom-out	Changes cursor to zoom-out
is-cell	Changes cursor to cell
is-not-allowed	Changes cursor to not-allowed
can-move	Changes cursor to move
is-waiting	Changes cursor to wait
has-margin-x-auto	Adds 'margin: 0 auto' to element
hide-overflow	Hides overflow
hide-overflow-x	Hides horizontal overflow
hide-overflow-y	Hides vertical overflow
has-position-absolute	Adds position absolute to element
has-position-relative	Adds position relative to element
has-position-fixed	Adds position fixed to element
has-flex-center-items	Adds display flex and align-items center
has-flex-start-items	Adds display flex and align-items flex-start
has-flex-end-items	Adds display flex and align-items flex-end
has-border-dashed	Adds 'dashed' style to border
has-border-dotted	Adds 'dotted' style to border
has-border-double	Adds 'double' style to border
has-border-hidden	Adds 'hidden' style to border
has-border-solid	Adds 'solid' style to border
is-circle	Makes element circular adding border-radius: 60px
unbreakable-text	Makes text don't break lines
has-text-underlined	Adds 'text-decoration: underline' to element