Variables

Bulma has two variable files divided into 4 sections:

1. Initial variables: where you define variables by literal value, like:
   • colors: $blue: hsl(217, 71%, 53%)
   • font sizes: $size-1: 3rem
   • dimensions: $gap: 32px
   • other values: $easing: ease-out or $radius-large: 5px
2. Derived variables where variables are calculated from the values set in the previous file. For example, you can have:
   • Primary colors derived from the initial variables:
     • $primary: $turquoise
     • $link: $blue
     • $info: $cyan
     • $success: $green
     • $warning: $yellow
     • $danger: $red
     • $dark: $grey-darker
     • $text: $grey-dark
   • $background: $white-ter: a general background color
   • $link: $blue: the links use the primary color
   • $family-primary: $family-sans-serif: the primary font family is the sans-serif one
   • Lists and maps which are collections of already defined variables:
     • $colors: ("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "link": ($link, $link-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert))
     • $shades: ("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis)
     • $sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7

To override any of these variables, just set them before importing Bulma.

These are variables with a literal value.

These are variables with a value that references another variable.

You can use the following generic variables for general customization. Simply set one or multiple of these variables before importing Bulma. Learn how.