bulma/docs/documentation/customize/concepts.html

83 lines
2.2 KiB
HTML
Raw Normal View History

2018-07-13 23:42:07 +00:00
---
title: Concepts
layout: documentation
doc-tab: customize
doc-subtab: concepts
breadcrumb:
- home
- documentation
- customize
- customize-concepts
---
2018-07-14 17:38:27 +00:00
{% assign variables_link = site.data.links.by_id['customize-node-sass'] %}
2018-07-13 23:42:07 +00:00
<div class="content">
<p>
Bulma is highly customizable thanks to <strong>415 Sass variables</strong> living across <strong>28 files</strong>.
</p>
<p>
2018-07-14 17:38:27 +00:00
These variables exist at 4 levels:
2018-07-13 23:42:07 +00:00
</p>
<ul>
<li>
2018-07-14 17:38:27 +00:00
<strong><a href="{{ site.url }}{{ variables_link.path }}#initial-variables">initial variables</a></strong>: global variables with <strong>literal</strong> values
</li>
<li>
<strong><a href="{{ site.url }}{{ variables_link.path }}#derived-variables">derived variables</a></strong>: global variables with values that reference other variables, or are computed
2018-07-13 23:42:07 +00:00
</li>
<li>
2018-07-14 17:38:27 +00:00
<strong><a href="{{ site.url }}{{ variables_link.path }}#generic-variables">generic variables</a></strong>: for the HTML elements which carry no CSS class
2018-07-13 23:42:07 +00:00
</li>
<li>
<strong>element/component variables</strong>: variables that are specific to a Bulma element/component
</li>
</ul>
2018-07-14 13:18:43 +00:00
<p>
Since these variables carry the <code>!default</code> flat, they can be assigned a <strong>new value</strong> either before or after having been imported.
</p>
2018-07-13 23:42:07 +00:00
</div>
{% include elements/anchor.html name="Strategy" %}
2018-07-14 17:38:27 +00:00
{% assign node_sass_link = site.data.links.by_id['customize-node-sass'] %}
{% assign sass_cli_link = site.data.links.by_id['customize-sass-cli'] %}
{% assign webpack_link = site.data.links.by_id['customize-webpack'] %}
2018-07-13 23:42:07 +00:00
<div class="content">
<p>
To customize Bulma, you will need to:
</p>
<ul>
<li>
<strong>install</strong> (or download) Bulma
</li>
<li>
have a working <strong>Sass setup</strong>
</li>
<li>
create your own <code>.scss</code> or <code>.sass</code> file
</li>
</ul>
2018-07-14 17:38:27 +00:00
<p>
This can be achieved with:
</p>
<ul>
<li>
with <a href="{{ site.url }}{{ node_sass_link.path }}">node-sass</a>
</li>
<li>
with the <a href="{{ site.url }}{{ sass_cli_link.path }}">Sass CLI</a>
</li>
<li>
with <a href="{{ site.url }}{{ webpack_link.path }}">Webpack</a>
</li>
</ul>
2018-07-13 23:42:07 +00:00
</div>