modular.html

---
title: Modularity
layout: documentation
doc-tab: overview
doc-subtab: modular
breadcrumb:
- home
- documentation
- overview
- overview-modular
---

{% capture import %}
@import "bulma/sass/utilities/_all.sass"
@import "bulma/sass/grid/columns.sass"
{% endcapture %}

{% capture columns %}
<div class="columns">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
  <div class="column">5</div>
</div>
{% endcapture %}

{% capture only_button %}
@import "bulma/sass/utilities/_all.sass"
@import "bulma/sass/elements/button.sass"
{% endcapture %}

{% capture buttons %}
<button class="button">
  Button
</button>

<button class="button is-primary">
  Primary button
</button>

<button class="button is-large">
  Large button
</button>

<button class="button is-loading">
  Loading button
</button>
{% endcapture %}

<div class="content">
  <p>
    Bulma consists of <strong>39</strong> <code>.sass</code> files that you can import <strong>individually.</strong>
  </p>
  <p>
    For example, let's say you only want the Bulma <strong>columns.</strong>
    <br>
    The file is located in the <code>bulma/sass/grid</code> folder.
    <br>
    Simply <strong>import</strong> the utilities dependencies, and then the files you need directly:
  </p>
  {% highlight sass %}{{ import }}{% endhighlight %}
  <p>
    Now you can use the classes <code>.columns</code> (for the container) and <code>.column</code> directly:
  </p>
  {% highlight html %}{{ columns }}{% endhighlight %}

  <hr>

  <p>
    What if you only want the <strong>button</strong> styles instead?
  </p>
  {% highlight sass %}{{ only_button }}{% endhighlight %}
  <p>
    You can now use the <code>.button</code> class, and all its modifiers:
  </p>
  <ul>
    <li>
      <code>.is-active</code>
    </li>
    <li>
      <code>.is-primary</code>,
      <code>.is-info</code>,
      <code>.is-success</code>...
    </li>
    <li>
      <code>.is-small</code>,
      <code>.is-medium</code>,
      <code>.is-large</code>
    </li>
    <li>
      <code>.is-outlined</code>,
      <code>.is-inverted</code>,
      <code>.is-link</code>
    </li>
    <li>
      <code>.is-loading</code>,
      <code>[disabled]</code>
    </li>
  </ul>

  {% highlight html %}{{ buttons }}{% endhighlight %}
</div>