You are viewing the deprecated 0.7.0 version of the website. Click here to view the latest version

Variables

See how Bulma uses Sass variables to allows 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#
#native_cta#
New!

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
or
Kindle

Newsletter

Features, releases, showcase… stay in the loop!