bulma/docs/documentation/customize/concepts.html

---
title: Concepts
layout: documentation
doc-tab: customize
doc-subtab: concepts
breadcrumb:
- home
- documentation
- customize
- customize-concepts
---

<div class="content">
  <p>
    Bulma is highly customizable thanks to <strong>415 Sass variables</strong> living across <strong>28 files</strong>.
  </p>

  <p>
    These variables exist at 3 levels:
  </p>

  <ul>
    <li>
      <strong><a href="/documentation/overview/variables/#initial-variables">initial variables</a></strong>: global variables with <strong>literal</strong> values
    </li>
    <li>
      <strong><a href="/documentation/overview/variables/#derived-variables">derived variables</a></strong>: global variables with values that reference other variables, or are computed
    </li>
    <li>
      <strong>element/component variables</strong>: variables that are specific to a Bulma element/component
    </li>
  </ul>

  <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>
</div>

{% include elements/anchor.html name="Strategy" %}

<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>
</div>