--- 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-sans-serif: "Helvetica Neue", "Helvetica", "Arial", sans-serif
    • font sizes: $size-1: 48px
    • other values: $nav-height: 50px or $easing: ease-out
  • 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: $grey-lighter: the page's main background is the lighter grey
    • $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 #111
$grey-darker #222324
$grey-dark #69707a
$grey #aeb1b5
$grey-light #d3d6db
$grey-lighter #f5f7fa
$white #fff
$blue #42afe3
$green #97cd76
$orange #f68b39
$purple #847bb9
$red #ed6c63
$turquoise #1fc8db
$yellow #fce473
Typography
$family-sans-serif"Helvetica Neue", "Helvetica", "Arial", sans-serif
$family-monospace"Source Code Pro", "Monaco", "Inconsolata", monospace
$size-148px
$size-240px
$size-328px
$size-424px
$size-518px
$size-614px
$size-711px
$weight-normal400
$weight-bold700
$weight-title-normal300
$weight-title-bold500
Breakpoints
$tablet769px
$desktop980px
$widescreen1180px
Miscellaneous
$easingease-out
$radius3px
$speed86ms
2. Primary colors
$primary$turquoise
$info$blue
$success$green
$warning$yellow
$danger$red
$light$grey-lighter
$dark$grey-dark
$text$grey-dark
3. Generated variables
Invert colors
$primary-invertfindColorInvert($primary)
$info-invertfindColorInvert($info)
$success-invertfindColorInvert($success)
$warning-invertfindColorInvert($warning)
$danger-invertfindColorInvert($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-invertfindColorInvert($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-background$grey-lighter
$link-hover-border$grey-darker
$link-active$grey-darker
$link-active-border$grey-darker
Control colors
$control$text-strong
$control-background$text-invert
$control-border$border
$control-hover$link-hover
$control-hover-border$border-hover
$control-active$link
$control-active-background$link
$control-active-background-invert$link-invert
$control-active-border$link
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-3
$size-huge$size-1
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