2016-09-11 11:00:49 +00:00
---
2017-07-29 12:02:00 +00:00
title: Variables
2016-09-11 11:00:49 +00:00
layout: documentation
doc-tab: overview
doc-subtab: variables
2018-04-09 16:32:12 +00:00
breadcrumb:
- home
- documentation
- overview
- overview-variables
2016-09-11 11:00:49 +00:00
---
2018-04-09 16:32:12 +00:00
{% 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 %}
2016-09-11 11:00:49 +00:00
2018-04-09 16:32:12 +00:00
< 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 > {{ initial_vars.blue.name }}: {{ initial_vars.blue.value }}< / code > < / li >
< li > < strong > font sizes< / strong > : < code > {{ initial_vars.size-1.name }}: {{ initial_vars.size-1.value }}< / code > < / li >
< li > < strong > dimensions< / strong > : < code > {{ initial_vars.gap.name }}: {{ initial_vars.gap.value }}< / code > < / li >
< li > < strong > other values< / strong > : < code > {{ initial_vars.easing.name }}: {{ initial_vars.easing.value }}< / code > or < code > {{ initial_vars.radius-large.name }}: {{ initial_vars.radius-large.value }}< / 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 >
2016-09-11 11:00:49 +00:00
< li >
2018-04-09 16:32:12 +00:00
< strong > Primary colors< / strong > derived from the initial variables:
2016-09-11 11:00:49 +00:00
< ul >
2018-04-09 16:32:12 +00:00
< li > < code > {{ derived_vars.primary.name }}: {{ derived_vars.primary.value }}< / code > < / li >
< li > < code > {{ derived_vars.link.name }}: {{ derived_vars.link.value }}< / code > < / li >
< li > < code > {{ derived_vars.info.name }}: {{ derived_vars.info.value }}< / code > < / li >
< li > < code > {{ derived_vars.success.name }}: {{ derived_vars.success.value }}< / code > < / li >
< li > < code > {{ derived_vars.warning.name }}: {{ derived_vars.warning.value }}< / code > < / li >
< li > < code > {{ derived_vars.danger.name }}: {{ derived_vars.danger.value }}< / code > < / li >
< li > < code > {{ derived_vars.dark.name }}: {{ derived_vars.dark.value }}< / code > < / li >
< li > < code > {{ derived_vars.text.name }}: {{ derived_vars.text.value }}< / code > < / li >
2016-09-11 11:00:49 +00:00
< / ul >
< / li >
2018-04-09 16:32:12 +00:00
< li > < code > {{ derived_vars.background.name }}: {{ derived_vars.background.value }}< / code > : a general background color< / li >
< li > < code > {{ derived_vars.link.name }}: {{ derived_vars.link.value }}< / code > : the links use the primary color< / li >
< li > < code > {{ derived_vars.family-primary.name }}: {{ derived_vars.family-primary.value }}< / code > : the primary font family is the sans-serif one< / li >
2016-09-11 11:00:49 +00:00
< li >
2018-04-09 16:32:12 +00:00
< strong > Lists and maps< / strong > which are collections of already defined variables:
2016-09-11 11:00:49 +00:00
< ul >
2018-04-09 16:32:12 +00:00
< li > < code > {{ derived_vars.colors.name }}: {{ derived_vars.colors.value }}< / code > < / li >
< li > < code > {{ derived_vars.shades.name }}: {{ derived_vars.shades.value }}< / code > < / li >
< li > < code > {{ derived_vars.sizes.name }}: {{ derived_vars.sizes.value }}< / code > < / li >
2016-09-11 11:00:49 +00:00
< / ul >
< / li >
2018-04-09 16:32:12 +00:00
< / ul >
< / li >
< / ol >
< p >
To < strong > override< / strong > any of these variables, just set them < em > before< / em > importing Bulma.
< / p >
< / div >
2016-09-11 11:00:49 +00:00
2018-04-09 16:32:12 +00:00
{% include anchor.html name="Initial variables" %}
2016-10-03 08:47:36 +00:00
2018-04-09 16:32:12 +00:00
< div class = "content" >
< p >
These are < a href = "{{ initial_variables.file_url }}" target = "_blank" > variables< / a > with a < strong > literal< / strong > value.
< / p >
< / div >
2017-12-06 23:48:35 +00:00
2018-04-09 16:32:12 +00:00
< table class = "table is-bordered is-striped" >
< tbody >
{% for variable_hash in initial_vars %}
{% assign variable = variable_hash[1] %}
{% assign starts_with = variable.value | slice: 0, 3 %}
< tr >
< td >
< code style = "white-space: nowrap;" > {{ variable.name }}< / code >
< / td >
< td >
{% if starts_with == 'hsl' %}
< span class = "bd-color" style = "background: {{ variable.value }};" > < / span >
{% endif %}
< code > {{ variable.value }}< / code >
< / td >
< / tr >
{% endfor %}
< tbody >
< / table >
2017-12-06 23:48:35 +00:00
2018-04-09 16:32:12 +00:00
{% capture custom_message %}
These are < a href = "{{ derived_variables.file_url }}" target = "_blank" > variables< / a > with a value that < strong > references< / strong > another variable.
{% endcapture %}
{%
include variables.html
anchor_name = 'Derived variables'
data = derived_variables
custom_message = custom_message
table_class = 'is-bordered is-striped'
%}
2017-12-06 23:48:35 +00:00
2018-04-09 16:32:12 +00:00
{% capture custom_message %}
You can use the following < a href = "{{ site.data.variables.base.generic.file_url }}" target = "_blank" > generic variables< / a > for general < strong > customization< / strong > . Simply set one or multiple of these variables < em > before< / em > importing Bulma. < a href = "{{ site.url }}/documentation/overview/customize/" > Learn how< / a > .
{% endcapture %}
{%
include variables.html
anchor_name = 'Generic variables'
tab = 'base'
subtab = 'generic'
custom_message = custom_message
table_class = 'is-bordered is-striped'
%}