bulma/docs/documentation/overview/variables.html

---
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: $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: 24px
- 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: $info
  value: $blue
- 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: $primary
- name: $link-invert
  value: $primary-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: $primary
- 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), "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
---

{% include subnav-overview.html %}

<section class="section">
  <div class="container">
    <h1 class="title">Variables</h1>
    <h2 class="subtitle">Easily <strong>customize</strong> Bulma to match your design</h2>

    <hr>

    <div class="content">
      <p>Bulma has <strong>two</strong> variable files divided into <strong>4</strong> sections:</p>
      <ol>
        <li>
          <strong>Initial variables</strong>: where you define variables by <strong>literal value</strong>, like:
          <ul>
            <li><strong>colors</strong>: <code>$blue: hsl(217, 71%,  53%)</code></li>
            <li><strong>font sizes</strong>: <code>$size-1: 3rem</code></li>
            <li><strong>dimensions</strong>: <code>$gap: 24px</code></li>
            <li><strong>other values</strong>: <code>$easing: ease-out</code> or <code>$radius-large: 5px</code></li>
          </ul>
        </li>
        <li>
          <strong>Derived variables</strong> where variables are <strong>calculated</strong> from the values set in the previous file. For example, you can have:
          <ul>
            <li>
              <strong>Primary colors</strong> derived from the initial variables:
              <ul>
                <li><code>$primary: $turquoise</code></li>
                <li><code>$info: $blue</code></li>
                <li><code>$success: $green</code></li>
                <li><code>$warning: $yellow</code></li>
                <li><code>$danger: $red</code></li>
                <li><code>$dark: $grey-darker</code></li>
                <li><code>$text: $grey-dark</code></li>
              </ul>
            </li>
            <li><code>$background: $white-ter</code>: a general background color</li>
            <li><code>$link: $primary</code>: the links use the primary color</li>
            <li><code>$family-primary: $family-sans-serif</code>: the primary font family is the sans-serif one</li>
            <li>
              <strong>Lists and maps</strong> which are collections so already defined variables:
              <ul>
                <li><code>$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))</code></li>
                <li><code>$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)</code></li>
                <li><code>$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6</code></li>
              </ul>
            </li>
          </ul>
        </li>
      </ol>
      <p>
        To <strong>override</strong> any of these variables, just set them <em>before</em> importing Bulma.
      </p>
    </div>

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

    <div class="content">
      <p>
        These are variables with a <strong>literal</strong> value.
      </p>
    </div>

    <table class="table is-bordered is-striped">
      {% for color in page.initial_colors %}
        <tr>
          <td>
            <code style="white-space: nowrap;">{{ color.name }}</code>
          </td>
          <td>
            <span class="color" style="background: {{ color.value }};"></span>
            <code>{{ color.value }}</code>
          </td>
        </tr>
      {% endfor %}
      {% for variable in page.initial_variables %}
        <tr>
          <td>
            <code style="white-space: nowrap;">{{ variable.name }}</code>
          </td>
          <td>
            <code>{{ variable.value }}</code>
          </td>
        </tr>
      {% endfor %}
    </table>

    {% include heading.html name="Derived variables" %}

    <div class="content">
      <p>
        These are variables with a value that <strong>references</strong> another variable.
      </p>
    </div>

    <table class="table is-bordered is-striped">
      {% for variable in page.derived_variables %}
        <tr>
          <td>
            <code style="white-space: nowrap;">{{ variable.name }}</code>
          </td>
          <td>
            <code>{{ variable.value }}</code>
          </td>
        </tr>
      {% endfor %}
    </table>
  </div>
</section>