--- 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: #42afe3
    • font families: $family-monospace: "Inconsolata", "Consolas", "Monaco", monospace
    • font sizes: $size-1: 3.5rem
    • 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:
    • $background: $white-ter: 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 "Inconsolata", "Consolas", "Monaco", monospace
$size-1 3.5rem
$size-2 2.75rem
$size-3 2rem
$size-4 1.5rem
$size-5 1.25rem
$size-6 14px
$size-7 0.75rem
$weight-light 300
$weight-normal 400
$weight-semibold 500
$weight-bold 700
Breakpoints
$tablet 769px
$desktop 1000px (960px + 40px container)
$widescreen 1192px (1152px+ 40px container)
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 1rem
$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