You are viewing the deprecated 0.9.3 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(229, 53%, 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(44, 100%, 77%)
$green color hsl(153, 53%, 53%)
$turquoise color hsl(171, 100%, 41%)
$cyan color hsl(207, 61%, 53%)
$blue color hsl(229, 53%, 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 9999px
$speed duration 86ms
$variable-columns boolean true
$rtl boolean false

Variables #

Name
Type
Value
Computed Value
Computed Type
$primary
variable
$turquoise
hsl(171, 100%, 41%)
color
$info
variable
$cyan
hsl(207, 61%,  53%)
color
$success
variable
$green
hsl(153, 53%,  53%)
color
$warning
variable
$yellow
hsl(44,  100%, 77%)
color
$danger
variable
$red
hsl(348, 86%, 61%)
color
$light
variable
$white-ter
hsl(0, 0%, 96%)
color
$dark
variable
$grey-darker
hsl(0, 0%, 21%)
color
$orange-invert
function
findColorInvert($orange)
#fff
color
$yellow-invert
function
findColorInvert($yellow)
rgba(0, 0, 0, 0.7)
color
$green-invert
function
findColorInvert($green)
#fff
color
$turquoise-invert
function
findColorInvert($turquoise)
#fff
color
$cyan-invert
function
findColorInvert($cyan)
#fff
color
$blue-invert
function
findColorInvert($blue)
#fff
color
$purple-invert
function
findColorInvert($purple)
#fff
color
$red-invert
function
findColorInvert($red)
#fff
color
$primary-invert
function
findColorInvert($primary)
#fff
color
$primary-light
compound
findLightColor($primary)
$primary-dark
compound
findDarkColor($primary)
$info-invert
function
findColorInvert($info)
#fff
color
$info-light
compound
findLightColor($info)
$info-dark
compound
findDarkColor($info)
$success-invert
function
findColorInvert($success)
#fff
color
$success-light
compound
findLightColor($success)
$success-dark
compound
findDarkColor($success)
$warning-invert
function
findColorInvert($warning)
#fff
color
$warning-light
compound
findLightColor($warning)
$warning-dark
compound
findDarkColor($warning)
$danger-invert
function
findColorInvert($danger)
#fff
color
$danger-light
compound
findLightColor($danger)
$danger-dark
compound
findDarkColor($danger)
$light-invert
function
findColorInvert($light)
#fff
color
$dark-invert
function
findColorInvert($dark)
#fff
color
$scheme-main
variable
$white
hsl(0, 0%, 100%)
color
$scheme-main-bis
variable
$white-bis
hsl(0, 0%, 98%)
color
$scheme-main-ter
variable
$white-ter
hsl(0, 0%, 96%)
color
$scheme-invert
variable
$black
hsl(0, 0%, 4%)
color
$scheme-invert-bis
variable
$black-bis
hsl(0, 0%, 7%)
color
$scheme-invert-ter
variable
$black-ter
hsl(0, 0%, 14%)
color
$background
variable
$white-ter
hsl(0, 0%, 96%)
color
$border
variable
$grey-lighter
hsl(0, 0%, 86%)
color
$border-hover
variable
$grey-light
hsl(0, 0%, 71%)
color
$border-light
variable
$grey-lightest
hsl(0, 0%, 93%)
color
$border-light-hover
variable
$grey-light
hsl(0, 0%, 71%)
color
$text
variable
$grey-dark
hsl(0, 0%, 29%)
color
$text-invert
function
findColorInvert($text)
#fff
color
$text-light
variable
$grey
hsl(0, 0%, 48%)
color
$text-strong
variable
$grey-darker
hsl(0, 0%, 21%)
color
$code
compound
darken($red, 15%)
$code-background
variable
$background
hsl(0, 0%, 96%)
color
$pre
variable
$text
hsl(0, 0%, 29%)
color
$pre-background
variable
$background
hsl(0, 0%, 96%)
color
$link
variable
$blue
hsl(229, 53%,  53%)
color
$link-invert
function
findColorInvert($link)
#fff
color
$link-light
compound
findLightColor($link)
$link-dark
compound
findDarkColor($link)
$link-visited
variable
$purple
hsl(271, 100%, 71%)
color
$link-hover
variable
$grey-darker
hsl(0, 0%, 21%)
color
$link-hover-border
variable
$grey-light
hsl(0, 0%, 71%)
color
$link-focus
variable
$grey-darker
hsl(0, 0%, 21%)
color
$link-focus-border
variable
$blue
hsl(229, 53%,  53%)
color
$link-active
variable
$grey-darker
hsl(0, 0%, 21%)
color
$link-active-border
variable
$grey-dark
hsl(0, 0%, 29%)
color
$family-primary
variable
$family-sans-serif
BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif
font-family
$family-secondary
variable
$family-sans-serif
BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif
font-family
$family-code
variable
$family-monospace
monospace
font-family
$size-small
variable
$size-7
0.75rem
size
$size-normal
variable
$size-6
1rem
size
$size-medium
variable
$size-5
1.25rem
size
$size-large
variable
$size-4
1.5rem
size
$shadow
shadow
0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)
$custom-colors
keyword
null
$custom-shades
keyword
null
$colors
map
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
map
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

Variables #

Name
Type
Value
Computed Value
Computed Type
$body-background-color
variable
$scheme-main
hsl(0, 0%, 100%)
color
$body-size
size
16px
$body-min-width
size
300px
$body-rendering
keyword
optimizeLegibility
$body-family
variable
$family-primary
BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif
font-family
$body-overflow-x
string
hidden
$body-overflow-y
string
scroll
$body-color
variable
$text
hsl(0, 0%, 29%)
color
$body-font-size
size
1em
$body-weight
variable
$weight-normal
400
font-weight
$body-line-height
unitless
1.5
$code-family
variable
$family-code
monospace
font-family
$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
variable
$background
hsl(0, 0%, 96%)
color
$hr-height
size
2px
$hr-margin
size
1.5rem 0
$strong-color
variable
$text-strong
hsl(0, 0%, 21%)
color
$strong-weight
variable
$weight-bold
700
font-weight
$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#

Newsletter Features, releases, showcase… stay in the loop!