Variables

See how Bulma uses Sass variables to allow easy customization

Bulma has two variable files divided into 4 sections:

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
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`