Throughout the codebase, Bulma uses Sass mixins to enhance and facilitate the CSS output. While these mixins are mainly used within the context of Bulma, they are of course available for you to re-use in your own projects.
Bulma Sass Mixins
Utility mixins for custom elements and other CSS helpers
Element Mixins #
These mixins create a visual HTML element.
Arrow #
The arrow()
mixin creates a down-facing arrow. The $color
parameter defines the color of the arrow.
Example
HTML
Burger #
The burger()
mixin creates a 16x16px set of 3 horizontal bars grouped within square. The dimensions of this square are defined by the $dimensions
parameter.
Example
HTML
Delete #
The delete()
mixin creates a 20x20px circle containing a cross. It comes with 3 modifiers: is-small
, is-medium
and is-large
.
Example
HTML
Loader #
The loader()
mixin creates a 1em spinning circle.
Example
HTML
Font Awesome container #
The fa()
mixin creates a square inline-block element, ideal for containing a Font Awesome icon, or any other type of icon font.
The first $size
parameter defines the icon font size.
The second $dimensions
parameter defines the dimensions of the square container.
Example
HTML
CSS Mixins #
These mixins add CSS rules to the element.
Block #
The block()
mixin adds spacing below an element, but only if it's not the last child.
The $spacing
parameter defines the value of the margin-bottom
.
Example
This element has a margin-bottom.
This element too.
Not this one because it's the last child.
HTML
Overlay #
The overlay()
mixin makes the element cover its closest positioned ancestor.
The $offset
parameter defines how far inside the element is positioned from each edge (top, bottom, left and right).
Example
HTML
Center #
The center()
mixin allows you to absolutely position an element with fixed dimensions at the center of its closest positioned ancestor.
The value of the $width
parameter should be the width of the element the mixin is applied on.
Unless the element has square dimensions, the second parameter $height
is required and its value should be the height of the element the mixin is applied on.
Example
HTML
Placeholder #
The placeholder()
mixin allows you to change the style of an input's placeholder.
The $offset
parameter defines how far inside the element is positioned from each edge (top, bottom, left and right).
Example
HTML
Clearfix #
The clearfix()
mixin adds a ::after
pseudo-element with a clear: both
rule.
Example
This is a short image description.
This text is following the clearfix element and is correctly placed after.
HTML
Reset #
The reset()
mixin applies a soft style reset. This is especially useful for <button>
elements.
Example
HTML
Unselectable #
The unselectable()
mixin makes an element not selectable. This is to prevent the text to be selected when double-clicked.
Example
This text is selectable.
This text is not selectable.
HTML
Overflow Touch #
The overflow-touch()
mixin add the -webkit-overflow-scrolling: touch;
rule to the element.
Direction Mixins #
Left-to-right and Right-to-left Mixins #
Bulma has a global $rtl
flag, which allows the framework to output a Right-to-left version of the CSS. By default, this flag's value is set to false
. This means the framework output a Left-to-right version.
The mixins @mixin ltr
and @mixin rtl
are here to output CSS rules based on the value of $rtl
:
-
if
$rtl: true
,@include mixins.ltr
outputs nothing -
if
$rtl: false
,@include mixins.rtl
outputs nothing
This is useful for properties that are specific to the side of an element.
Example
HTML
LTR Position #
The ltr-position()
mixin is a quick way to switch between left
and right
CSS properties when dealing with positioned elements.
The first $spacing
parameter defines the value of the offset, whether it's right or left.
The second $right
parameter defines if the property outputs right
(default) or left
.
Here is what the output looks like with a $spacing
parameter set to 1rem
:
Flag → | $rtl: false; |
$rtl: true; |
---|---|---|
@include mixins.ltr-position(1rem, true) |
right: 1rem |
left: 1rem |
@include mixins.ltr-position(1rem, false) |
left: 1rem |
right: 1rem |
Sass source
CSS output
Example
Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum.
HTML
LTR Property #
The ltr-property()
mixin works like the ltr-position()
mixin but allows you to choose which CSS property to set. The mixin will append -right
or -left
to that property. This is especially useful for margin
and padding
.
The first $property
parameter which property you want to "flip" left and right.
The second $spacing
parameter defines the value of the offset, whether it's right or left.
The third $right
parameter defines if the property outputs right
(default) or left
.
Here is what the output looks like with a $spacing
parameter set to 1rem
:
Flag → | $rtl: false; |
$rtl: true; |
---|---|---|
@include mixins.ltr-property("margin", 1rem, true) |
margin-right: 1rem |
margin-left: 1rem |
@include mixins.ltr-property("margin", 1rem, false) |
margin-left: 1rem |
margin-right: 1rem |
Sass source
CSS output
Example
Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum.
HTML