Add modularity

docs/documentation/overview/modular.html

@@ -0,0 +1,97 @@
+---
+layout: documentation
+doc-tab: overview
+doc-subtab: modular
+---
+
+{% include subnav-overview.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Modular</h1>
+    <h2 class="subtitle">Just import what you <strong>need</strong></h2>
+
+    <hr>
+
+    <div class="content">
+      <p>
+        Bulma consists of <strong>29</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> it directly:
+      </p>
+{% highlight sass %}
+@import "bulma/sass/grid/columns.sass"
+{% endhighlight %}
+      <p>
+        Now you can use the classes <code>.columns</code> (for the container) and <code>.column</code> directly:
+      </p>
+{% highlight html %}
+<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>
+{% endhighlight %}
+
+      <hr>
+
+      <p>
+        What if you only want the <strong>button</strong> styles instead?
+      </p>
+{% highlight sass %}
+@import "bulma/sass/elements/button.sass"
+{% 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-disabled</code>,
+          <code>.is-loading</code>
+        </li>
+      </ul>
+{% highlight html %}
+<a class="button">
+  Button
+</a>
+
+<a class="button is-primary">
+  Primary button
+</a>
+
+<a class="button is-large">
+  Large button
+</a>
+
+<a class="button is-loading">
+  Loading button
+</a>
+{% endhighlight %}
+    </div>
+  </div>
+</section>