--- title: Variables layout: documentation doc-tab: overview doc-subtab: variables initial_colors: - name: $black value: hsl(0, 0%, 4%) - name: $black-bis value: hsl(0, 0%, 7%) - name: $black-ter value: hsl(0, 0%, 14%) - name: $grey-darker value: hsl(0, 0%, 21%) - name: $grey-dark value: hsl(0, 0%, 29%) - name: $grey value: hsl(0, 0%, 48%) - name: $grey-light value: hsl(0, 0%, 71%) - name: $grey-lighter value: hsl(0, 0%, 86%) - name: $white-ter value: hsl(0, 0%, 96%) - name: $white-bis value: hsl(0, 0%, 98%) - name: $white value: hsl(0, 0%, 100%) - name: $orange value: hsl(14, 100%, 53%) - name: $yellow value: hsl(48, 100%, 67%) - name: $green value: hsl(141, 71%, 48%) - name: $turquoise value: hsl(171, 100%, 41%) - name: $cyan value: hsl(204, 86%, 53%) - name: $cyan value: hsl(204, 86%, 53%) - name: $blue value: hsl(217, 71%, 53%) - name: $purple value: hsl(271, 100%, 71%) - name: $red value: hsl(348, 100%, 61%) initial_variables: - name: $family-sans-serif value: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif - name: $family-monospace value: monospace - name: $render-mode value: optimizeLegibility - name: $size-1 value: 3rem - name: $size-2 value: 2.5rem - name: $size-3 value: 2rem - name: $size-4 value: 1.5rem - name: $size-5 value: 1.25rem - name: $size-6 value: 1rem - name: $size-7 value: 0.75rem - name: $weight-light value: 300 - name: $weight-normal value: 400 - name: $weight-medium value: 500 - name: $weight-semibold value: 600 - name: $weight-bold value: 700 - name: $gap value: 32px - name: $tablet value: 769px - name: $desktop value: 960px + (2 * $gap) - name: $widescreen value: 1152px + (2 * $gap) - name: $fullhd value: 1344px + (2 * $gap) - name: $easing value: ease-out - name: $radius-small value: 2px - name: $radius value: 3px - name: $radius-large value: 5px - name: $speed value: 86ms derived_variables: - name: $primary value: $turquoise - name: $link value: $blue - name: $info value: $cyan - name: $success value: $green - name: $warning value: $yellow - name: $danger value: $red - name: $light value: $white-ter - name: $dark value: $grey-darker - name: $orange-invert value: findColorInvert($orange) - name: $yellow-invert value: findColorInvert($yellow) - name: $green-invert value: findColorInvert($green) - name: $turquoise-invert value: findColorInvert($turquoise) - name: $blue-invert value: findColorInvert($blue) - name: $purple-invert value: findColorInvert($purple) - name: $red-invert value: findColorInvert($red) - name: $primary-invert value: $turquoise-invert - name: $info-invert value: $blue-invert - name: $success-invert value: $green-invert - name: $warning-invert value: $yellow-invert - name: $danger-invert value: $red-invert - name: $light-invert value: $dark - name: $dark-invert value: $light - name: $background value: $white-ter - name: $border value: $grey-lighter - name: $border-hover value: $grey-light - name: $text value: $grey-dark - name: $text-invert value: findColorInvert($text) - name: $text-light value: $grey - name: $text-strong value: $grey-darker - name: $code value: $red - name: $code-background value: $background - name: $pre value: $text - name: $pre-background value: $background - name: $link value: $blue - name: $link-invert value: $blue-invert - name: $link-visited value: $purple - name: $link-hover value: $grey-darker - name: $link-hover-border value: $grey-light - name: $link-focus value: $grey-darker - name: $link-focus-border value: $blue - name: $link-active value: $grey-darker - name: $link-active-border value: $grey-dark - name: $family-primary value: $family-sans-serif - name: $family-code value: $family-monospace - name: $size-small value: $size-7 - name: $size-normal value: $size-6 - name: $size-medium value: $size-5 - name: $size-large value: $size-4 - name: $colors value: '("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "link": ($link, $link-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert))' - name: $shades value: '("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)' - name: $sizes value: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 generic_variables: - name: $body-background-color value: '#fff' - name: $body-size value: 16px - name: $body-rendering value: optimizeLegibility - name: $body-family value: $family-primary - name: $body-color value: $text - name: $body-weight value: $weight-normal - name: $body-line-height value: 1.5 - name: $code-family value: $family-code - name: $code-padding value: 0.25em 0.5em 0.25em - name: $code-weight value: normal - name: $code-size value: 0.875em - name: $hr-background-color value: $border - name: $hr-height value: 1px - name: $hr-margin value: 1.5rem 0 - name: $strong-color value: $text-strong - name: $strong-weight value: $weight-bold --- {% include subnav-overview.html %}

Variables

Easily customize Bulma to match your design

Bulma has two variable files divided into 4 sections:

  1. 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: 5px
  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: $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: ("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "link": ($link, $link-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert))
      • $shades: ("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)
      • $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.

{% include anchor.html name="Initial variables" %}

These are variables with a literal value.

{% for color in page.initial_colors %} {% endfor %} {% for variable in page.initial_variables %} {% endfor %}
{{ color.name }} {{ color.value }}
{{ variable.name }} {{ variable.value }}
{% include anchor.html name="Derived variables" %}

These are variables with a value that references another variable.

{% for variable in page.derived_variables %} {% endfor %}
{{ variable.name }} {{ variable.value }}
{% include anchor.html name="Generic variables" %}

The following generic variables are provided in ./sass/base/generic.sass.

{% for variable in page.generic_variables %} {% endfor %}
{{ variable.name }} {{ variable.value }}