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

Variables

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: 6px
  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: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)
      • $shades: mergeColorMaps(("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), $custom-shades)
      • $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 initial variables with a literal value.

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

Derived variables #

These are variables with a value that references another variable.

Name Type Default value Computed value
Name Type Default value Computed value
$primary color $turquoise hsl(171, 100%, 41%)
$info color $cyan hsl(204, 71%, 53%)
$success color $green hsl(141, 53%, 53%)
$warning color $yellow hsl(48, 100%, 67%)
$danger color $red hsl(348, 86%, 61%)
$light color $white-ter hsl(0, 0%, 96%)
$dark color $grey-darker hsl(0, 0%, 21%)
$orange-invert color findColorInvert($orange) #fff
$yellow-invert color findColorInvert($yellow) rgba(0, 0, 0, 0.7)
$green-invert color findColorInvert($green) #fff
$turquoise-invert color findColorInvert($turquoise) #fff
$cyan-invert color findColorInvert($cyan) #fff
$blue-invert color findColorInvert($blue) #fff
$purple-invert color findColorInvert($purple) #fff
$red-invert color findColorInvert($red) #fff
$primary-invert color findColorInvert($primary) #fff
$primary-light compound findLightColor($primary)
$primary-dark compound findDarkColor($primary)
$info-invert color findColorInvert($info) #fff
$info-light compound findLightColor($info)
$info-dark compound findDarkColor($info)
$success-invert color findColorInvert($success) #fff
$success-light compound findLightColor($success)
$success-dark compound findDarkColor($success)
$warning-invert color findColorInvert($warning) #fff
$warning-light compound findLightColor($warning)
$warning-dark compound findDarkColor($warning)
$danger-invert color findColorInvert($danger) #fff
$danger-light compound findLightColor($danger)
$danger-dark compound findDarkColor($danger)
$light-invert color findColorInvert($light) #fff
$dark-invert color findColorInvert($dark) #fff
$scheme-main color $white hsl(0, 0%, 100%)
$scheme-main-bis color $white-bis hsl(0, 0%, 98%)
$scheme-main-ter color $white-ter hsl(0, 0%, 96%)
$scheme-invert color $black hsl(0, 0%, 4%)
$scheme-invert-bis color $black-bis hsl(0, 0%, 7%)
$scheme-invert-ter color $black-ter hsl(0, 0%, 14%)
$background color $white-ter hsl(0, 0%, 96%)
$border color $grey-lighter hsl(0, 0%, 86%)
$border-hover color $grey-light hsl(0, 0%, 71%)
$border-light color $grey-lightest hsl(0, 0%, 93%)
$border-light-hover color $grey-light hsl(0, 0%, 71%)
$text color $grey-dark hsl(0, 0%, 29%)
$text-invert color findColorInvert($text) #fff
$text-light color $grey hsl(0, 0%, 48%)
$text-strong color $grey-darker hsl(0, 0%, 21%)
$code color $red hsl(348, 86%, 61%)
$code-background color $background hsl(0, 0%, 96%)
$pre color $text hsl(0, 0%, 29%)
$pre-background color $background hsl(0, 0%, 96%)
$link color $blue hsl(217, 71%, 53%)
$link-invert color findColorInvert($link) #fff
$link-light compound findLightColor($link)
$link-dark compound findDarkColor($link)
$link-visited color $purple hsl(271, 100%, 71%)
$link-hover color $grey-darker hsl(0, 0%, 21%)
$link-hover-border color $grey-light hsl(0, 0%, 71%)
$link-focus color $grey-darker hsl(0, 0%, 21%)
$link-focus-border color $blue hsl(217, 71%, 53%)
$link-active color $grey-darker hsl(0, 0%, 21%)
$link-active-border color $grey-dark hsl(0, 0%, 29%)
$family-primary font-family $family-sans-serif BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif
$family-secondary font-family $family-sans-serif BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif
$family-code font-family $family-monospace monospace
$size-small size $size-7 0.75rem
$size-normal size $size-6 1rem
$size-medium size $size-5 1.25rem
$size-large size $size-4 1.5rem
$custom-colors keyword null
$custom-shades keyword null
$colors function mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)
$shades function mergeColorMaps(("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), $custom-shades)
$sizes map $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 Type Default value Computed value
Name Type Default value Computed value
$body-background-color color $scheme-main hsl(0, 0%, 100%)
$body-size size 16px
$body-min-width size 300px
$body-rendering keyword optimizeLegibility
$body-family font-family $family-primary BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif
$body-overflow-x string hidden
$body-overflow-y string scroll
$body-color color $text hsl(0, 0%, 29%)
$body-font-size size 1em
$body-weight font-weight $weight-normal 400
$body-line-height unitless 1.5
$code-family font-family $family-code monospace
$code-padding size 0.25em 0.5em 0.25em
$code-weight font-weight normal
$code-size size 0.875em
$small-font-size size 0.875em
$hr-background-color color $background hsl(0, 0%, 96%)
$hr-height size 2px
$hr-margin size 1.5rem 0
$strong-color color $text-strong hsl(0, 0%, 21%)
$strong-weight font-weight $weight-bold 700
$pre-font-size size 0.875em
$pre-padding size 1.25rem 1.5rem
$pre-code-font-size size 1em

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!