See how Bulma uses Sass variables to allow easy customization

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.

Initial variables #

These are variables with a literal value.

$black hsl(0, 0%, 4%)
$black-bis hsl(0, 0%, 7%)
$black-ter hsl(0, 0%, 14%)
$grey-darker hsl(0, 0%, 21%)
$grey-dark hsl(0, 0%, 29%)
$grey hsl(0, 0%, 48%)
$grey-light hsl(0, 0%, 71%)
$grey-lighter hsl(0, 0%, 86%)
$white-ter hsl(0, 0%, 96%)
$white-bis hsl(0, 0%, 98%)
$white hsl(0, 0%, 100%)
$orange hsl(14, 100%, 53%)
$yellow hsl(48, 100%, 67%)
$green hsl(141, 71%, 48%)
$turquoise hsl(171, 100%, 41%)
$cyan hsl(204, 86%, 53%)
$blue hsl(217, 71%, 53%)
$purple hsl(271, 100%, 71%)
$red hsl(348, 100%, 61%)
$family-sans-serif BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif
$family-monospace monospace
$render-mode optimizeLegibility
$size-1 3rem
$size-2 2.5rem
$size-3 2rem
$size-4 1.5rem
$size-5 1.25rem
$size-6 1rem
$size-7 0.75rem
$weight-light 300
$weight-normal 400
$weight-medium 500
$weight-semibold 600
$weight-bold 700
$gap 32px
$tablet 769px
$desktop 960px + (2 * $gap)
$widescreen 1152px + (2 * $gap)
$widescreen-enabled true
$fullhd 1344px + (2 * $gap)
$fullhd-enabled true
$easing ease-out
$radius-small 2px
$radius 3px
$radius-large 5px
$radius-rounded 290486px
$speed 86ms
$variable-columns true

Derived variables #

These are variables with a value that references another variable.

Name Default value
Name Default value
$primary $turquoise
$info $cyan
$success $green
$warning $yellow
$danger $red
$light $white-ter
$dark $grey-darker
$orange-invert findColorInvert($orange)
$yellow-invert findColorInvert($yellow)
$green-invert findColorInvert($green)
$turquoise-invert findColorInvert($turquoise)
$cyan-invert findColorInvert($cyan)
$blue-invert findColorInvert($blue)
$purple-invert findColorInvert($purple)
$red-invert findColorInvert($red)
$primary-invert $turquoise-invert
$info-invert $cyan-invert
$success-invert $green-invert
$warning-invert $yellow-invert
$danger-invert $red-invert
$light-invert $dark
$dark-invert $light
$background $white-ter
$border $grey-lighter
$border-hover $grey-light
$text $grey-dark
$text-invert findColorInvert($text)
$text-light $grey
$text-strong $grey-darker
$code $red
$code-background $background
$pre $text
$pre-background $background
$link $blue
$link-invert $blue-invert
$link-visited $purple
$link-hover $grey-darker
$link-hover-border $grey-light
$link-focus $grey-darker
$link-focus-border $blue
$link-active $grey-darker
$link-active-border $grey-dark
$family-primary $family-sans-serif
$family-code $family-monospace
$size-small $size-7
$size-normal $size-6
$size-medium $size-5
$size-large $size-4
$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

Generic variables #

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

Name Default value
Name Default value
$body-background-color #fff
$body-size 16px
$body-rendering optimizeLegibility
$body-family $family-primary
$body-color $text
$body-weight $weight-normal
$body-line-height 1.5
$code-family $family-code
$code-padding 0.25em 0.5em 0.25em
$code-weight normal
$code-size 0.875em
$hr-background-color $border
$hr-height 1px
$hr-margin 1.5rem 0
$strong-color $text-strong
$strong-weight $weight-bold

Made with Bulma
This page is open source. Noticed a typo? Or something unclear?
Improve this page on GitHub

#native_company# #native_desc#

The official Bulma book! 😲

by Jeremy Thomas, creator of Bulma, Oleksii Potiekhin,
Mikko Lauhakari, Aslam Shah and David Berning

A step-by-step guide that teaches you how to build a web interface from scratch using Bulma.

Formats available:
PDF Epub Mobi


Features, releases, showcase… stay in the loop!