Blog

In this guide, we will discuss Bulma Functions and Mixins.

Description

Bulma uses some functions and mixins to define the color values and custom elements respectively. There are 3 types of custom functions in Bulma to specify the values and colors −

S.No.	Function	Description
1	powerNumber($number, $exp)	It sends back the number value by evaluating value of exposed number to another one.
2	colorLuminance($color)	It specifies the element color, either as dark or light between 0 and 1. The number <= 0.5 defines dark color and > 0.5 defines light color.
3	findColorInvert($color)	It defines 70% transparent as black or 100% as opaque white, based on the luminance (brightness) of the color.

Mixins

The following table lists down different types of mixins which can be used with Bulma −

S.No.	Mixin	Description
1	=arrow($color)	It specifies down arrow, which can be used for selecting dropdown.
2	=block	It is used for block elements and specifies the margin-bottom of 1.5rem.
3	=clearfix	It clears floated content within container and can be added at the end of an element.
4	=center($size)	It specifies the position of an element as center and often used for the spinner in a loading button.
5	=delete	It is used for deleting an element in modals, messages, tags etc.
6	=fa($size, $dimensions)	It defines style of Font Awesome icon container.
7	=hamburger($dimensions)	It is used for navbar toggling by creating the menu with 3 bars.
8	=loader	It defines the loading spinner for input and button spinners.
9	=overflow-touch	It sets the scrolling on iOS devices, when there is an overflow of content in the container.
10	=overlay($offset: 0)	It creates an overlay effect of an element by making the background transparent.
11	=placeholder	It defines style of an input placeholder.
12	=unselectable	It makes the buttons unselectable when clicking.

Next Topic : Click Here