bulma/docs/documentation/overview/variables.html

108 lines
5.0 KiB
HTML
Raw Normal View History

---
2017-07-29 12:02:00 +00:00
title: Variables
layout: documentation
doc-tab: overview
doc-subtab: variables
2018-04-09 16:32:12 +00:00
breadcrumb:
- home
- documentation
- overview
- overview-variables
---
2018-04-09 16:32:12 +00:00
{% assign initial_variables = site.data.variables.utilities.initial-variables %}
2018-06-17 00:05:48 +00:00
{% assign initial_vars = initial_variables.by_name %}
2018-04-09 16:32:12 +00:00
{% assign derived_variables = site.data.variables.utilities.derived-variables %}
2018-06-17 00:05:48 +00:00
{% assign derived_vars = derived_variables.by_name %}
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>
2018-06-17 00:05:48 +00:00
2018-04-09 16:32:12 +00:00
<ol>
<li>
<strong>Initial variables</strong>: where you define variables by <strong>literal value</strong>, like:
<ul>
2018-06-17 00:05:48 +00:00
<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>
2018-04-09 16:32:12 +00:00
</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>
2018-04-09 16:32:12 +00:00
<strong>Primary colors</strong> derived from the initial variables:
<ul>
2018-06-17 00:05:48 +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>
</ul>
</li>
2018-06-17 00:05:48 +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>
<li>
2018-04-09 16:32:12 +00:00
<strong>Lists and maps</strong> which are collections of already defined variables:
<ul>
2018-06-17 00:05:48 +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>
</ul>
</li>
2018-04-09 16:32:12 +00:00
</ul>
</li>
</ol>
2018-06-17 00:05:48 +00:00
2018-04-09 16:32:12 +00:00
<p>
To <strong>override</strong> any of these variables, just set them <em>before</em> importing Bulma.
</p>
</div>
2018-04-09 21:25:26 +00:00
{% include elements/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>
2018-06-17 00:05:48 +00:00
These are <a href="https://github.com/jgthms/bulma/blob/master/sass/{{ initial_variables.file_path }}" target="_blank" rel="nofollow">initial variables</a> with a <strong>literal</strong> value.
2018-04-09 16:32:12 +00:00
</p>
</div>
2017-12-06 23:48:35 +00:00
2018-06-17 00:05:48 +00:00
<table class="table is-bordered">
2018-04-09 16:32:12 +00:00
<tbody>
2018-06-17 00:05:48 +00:00
{% for variable_name in initial_variables.list %}
{% assign variable = initial_vars[variable_name] %}
{% include elements/variable-row.html variable=variable hide_computed =true%}
2018-04-09 16:32:12 +00:00
{% endfor %}
<tbody>
</table>
2017-12-06 23:48:35 +00:00
2018-04-09 16:32:12 +00:00
{% capture custom_message %}
2018-06-17 00:05:48 +00:00
These are <a href="https://github.com/jgthms/bulma/blob/master/sass/{{ derived_variables.file_path }}" target="_blank" rel="nofollow">variables</a> with a value that <strong>references</strong> another variable.
2018-04-09 16:32:12 +00:00
{% endcapture %}
2018-06-17 00:05:48 +00:00
2018-04-09 16:32:12 +00:00
{%
2018-04-09 21:25:26 +00:00
include elements/variables.html
2018-04-09 16:32:12 +00:00
anchor_name = 'Derived variables'
data = derived_variables
custom_message = custom_message
2018-06-17 00:05:48 +00:00
table_class = 'is-bordered'
2018-04-09 16:32:12 +00:00
%}
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 %}
2018-06-17 00:05:48 +00:00
2018-04-09 16:32:12 +00:00
{%
2018-04-09 21:25:26 +00:00
include elements/variables.html
2018-04-09 16:32:12 +00:00
anchor_name = 'Generic variables'
tab = 'base'
subtab = 'generic'
custom_message = custom_message
2018-06-17 00:05:48 +00:00
table_class = 'is-bordered'
2018-04-09 16:32:12 +00:00
%}