--- layout: documentation doc-tab: overview doc-subtab: variables --- {% include subnav-overview.html %}

Variables

Easily customize Bulma to match your design

Bulma has 1 variable file divided into 4 sections:

  • Initial variables: where you define variables by direct value, like:
    • colors: $blue: hsl(217, 71%, 53%)
    • font sizes: $size-1: 3rem
    • other values: $easing: ease-out or $radius-large: 5px
  • Primary colors derived from the initial variables:
    • $primary: $turquoise
    • $info: $blue
    • $success: $green
    • $warning: $yellow
    • $danger: $red
    • $dark: $grey-darker
    • $text: $grey-dark
  • Generated variables where variables are calculated from the values set in the previous file. For example, you can have:
    • $body-background: $white: the main background color
    • $link: $primary: 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 so already defined variables:
    • $colors: (dark: ($dark, $dark-invert), primary: ($primary, $primary-invert), info: ($info, $info-invert), success: ($success, $success-invert), warning: ($warning, $warning-invert), danger: ($danger, $danger-invert))
    • $sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6

To override any of these variables, just set them before importing Bulma.

1. Initial variables
Colors
$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%)
$blue hsl(217, 71%, 53%)
$purple hsl(271, 100%, 71%)
$red hsl(348, 100%, 61%)
Typography
$family-sans-serif -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
"Helvetica Neue", "Helvetica", "Arial", sans-serif
$family-monospace monospace
$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-semibold 500
$weight-bold 700
Body
$body-background $white
$body-size 16px
Breakpoints
$gap 24px
$tablet 769px
$desktop 1008px (960px + 2 * $gap)
$widescreen 1200px (1152px+ 2 * $gap)
$fullhd 1392px (1344px+ 2 * $gap)
Miscellaneous
$easing ease-out
$radius 3px
$speed 86ms
2. Primary colors
$primary $turquoise
$info $blue
$success $green
$warning $yellow
$danger $red
$light $white-ter
$dark $grey-darker
3. Generated variables
Invert colors
$primary-invert findColorInvert($primary)
$info-invert findColorInvert($info)
$success-invert findColorInvert($success)
$warning-invert findColorInvert($warning)
$danger-invert findColorInvert($danger)
$light-invert $dark
$dark-invert $light
General colors
$body-background $grey-lighter
$background $grey-lighter
$border $grey-light
$border-hover $grey
Text colors
$text $grey-dark
$text-invert findColorInvert($text)
$text-light $grey
$text-strong $grey-darker
Code colors
$code $red
$code-background $background
$pre $text
$pre-background $background
Link colors
$link $primary
$link-invert $primary-invert
$link-visited $purple
$link-hover $grey-darker
$link-hover-border $grey-darker
$link-focus $grey-darker
$link-focus-border $primary
$link-active $grey-darker
$link-active-border $grey-dark
Typography
$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
4. Lists and maps
$colors 
(
  white: ($white, $black),
  black: ($black, $white),
  light: ($light, $light-invert),
  dark: ($dark, $dark-invert),
  primary: ($primary, $primary-invert),
  info: ($info, $info-invert),
  success: ($success, $success-invert),
  warning: ($warning, $warning-invert),
  danger: ($danger, $danger-invert)
)
$sizes $size-1 $size-2 $size-3 $size-4 $size-5 $size-6