Everything you need to create a website with Bulma


Utility functions to calculate colors and other values

Bulma uses 5 custom functions to help define the values and colors dynamically:

  • powerNumber($number, $exp): calculates the value of a number exposed to another one. Returns a number.
  • colorLuminance($color): defines if a color is dark or light. Return a decimal number between 0 and 1 where <= 0.5 is dark and > 0.5 is light.
  • findColorInvert($color): returns either 70% transparent black or 100% opaque white depending on the luminance of the color.
  • removeUnit($number): removes the unit of a Sass number. So "10px" becomes "10" and "3.5rem" returns "3.5". Used for string concatenation.
  • roundToEvenNumber($number): rounds a number to the closest but lower even one. So 23 becomes 22, and 7.5 returns 6.

Bulma Newsletter

Get notified when v1 is ready!