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
Pingback: Bulma - Overview | Adglob Infosystem Pvt Ltd
Pingback: Bulma - Responsiveness and Colors | Adglob Infosystem Pvt Ltd