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

Variables

Easily customize Bulma to match your design


{% assign initial_variables = site.data.variables.utilities.initial-variables %} {% assign initial_vars = initial_variables.vars %} {% assign derived_variables = site.data.variables.utilities.derived-variables %} {% assign derived_vars = derived_variables.vars %}

Bulma has two variable files divided into 4 sections:

  1. Initial variables: where you define variables by literal value, like:
    • colors: {{ initial_vars.blue.name }}: {{ initial_vars.blue.value }}
    • font sizes: {{ initial_vars.size-1.name }}: {{ initial_vars.size-1.value }}
    • dimensions: {{ initial_vars.gap.name }}: {{ initial_vars.gap.value }}
    • other values: {{ initial_vars.easing.name }}: {{ initial_vars.easing.value }} or {{ initial_vars.radius-large.name }}: {{ initial_vars.radius-large.value }}
  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:
      • {{ derived_vars.primary.name }}: {{ derived_vars.primary.value }}
      • {{ derived_vars.link.name }}: {{ derived_vars.link.value }}
      • {{ derived_vars.info.name }}: {{ derived_vars.info.value }}
      • {{ derived_vars.success.name }}: {{ derived_vars.success.value }}
      • {{ derived_vars.warning.name }}: {{ derived_vars.warning.value }}
      • {{ derived_vars.danger.name }}: {{ derived_vars.danger.value }}
      • {{ derived_vars.dark.name }}: {{ derived_vars.dark.value }}
      • {{ derived_vars.text.name }}: {{ derived_vars.text.value }}
    • {{ derived_vars.background.name }}: {{ derived_vars.background.value }}: a general background color
    • {{ derived_vars.link.name }}: {{ derived_vars.link.value }}: the links use the primary color
    • {{ derived_vars.family-primary.name }}: {{ derived_vars.family-primary.value }}: the primary font family is the sans-serif one
    • Lists and maps which are collections so already defined variables:
      • {{ derived_vars.colors.name }}: {{ derived_vars.colors.value }}
      • {{ derived_vars.shades.name }}: {{ derived_vars.shades.value }}
      • {{ derived_vars.sizes.name }}: {{ derived_vars.sizes.value }}

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 variable_hash in initial_vars %} {% assign variable = variable_hash[1] %} {% assign starts_with = variable.value | slice: 0, 3 %} {% endfor %}
{{ variable.name }} {% if starts_with == 'hsl' %} {% endif %} {{ variable.value }}
{% capture custom_message %} These are variables with a value that references another variable. {% endcapture %} {% include variables.html anchor_name = 'Derived variables' data = derived_variables custom_message = custom_message table_class = 'is-bordered is-striped' %} {% capture custom_message %} You can use the following generic variables for general customization. Simply set one or multiple of these variables before importing Bulma. Learn how. {% endcapture %} {% include variables.html anchor_name = 'Generic variables' tab = 'base' subtab = 'generic' custom_message = custom_message table_class = 'is-bordered is-striped' %}