Add modularity

docs/_includes/footer.html

@@ -95,6 +95,10 @@
       color: white;
     }
 
+    a.column:hover .title strong {
+      border-bottom: 1px solid;
+    }
+
     @media screen and (max-width: 979px) {
       .title.is-2 a {
         padding-left: 0;

docs/_includes/subnav-overview.html

@@ -7,12 +7,15 @@
       <a class="nav-item is-tab {% if page.doc-subtab == 'variables' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/overview/variables/">
         Variables
       </a>
-      <a class="nav-item is-tab {% if page.doc-subtab == 'classes' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/overview/classes/">
-        Classes
-      </a>
       <a class="nav-item is-tab {% if page.doc-subtab == 'responsiveness' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/overview/responsiveness/">
         Responsiveness
       </a>
+      <a class="nav-item is-tab {% if page.doc-subtab == 'modular' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/overview/modular/">
+        Modular
+      </a>
+      <a class="nav-item is-tab {% if page.doc-subtab == 'classes' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/overview/classes/">
+        Classes
+      </a>
     </div>
   </div>
 </nav>

docs/bulma-docs.sass

@@ -240,6 +240,7 @@ $structure-invert: $danger-invert
     border: solid $border
     border-width: 0 0 1px 1px
     color: $text-light
+    cursor: pointer
     outline: none
     position: absolute
     right: 0

docs/css/bulma-docs.css

@@ -160,7 +160,7 @@ hr {
   border: none;
   display: block;
   height: 1px;
-  margin: 40px 0;
+  margin: 20px 0;
 }
 
 img {
@@ -2613,12 +2613,13 @@ a.box:active {
   user-select: none;
   -moz-appearance: none;
   -webkit-appearance: none;
-  background-color: rgba(18, 18, 18, 0.2);
+  background-color: rgba(18, 18, 18, 0.1);
   border: none;
   border-radius: 290486px;
   cursor: pointer;
   display: inline-block;
   height: 24px;
+  outline: none;
   position: relative;
   vertical-align: top;
   width: 24px;
@@ -2646,7 +2647,7 @@ a.box:active {
 }
 
 .delete:hover {
-  background-color: rgba(18, 18, 18, 0.5);
+  background-color: rgba(18, 18, 18, 0.2);
 }
 
 .delete.is-small {
@@ -3641,12 +3642,13 @@ a.box:active {
   user-select: none;
   -moz-appearance: none;
   -webkit-appearance: none;
-  background-color: rgba(18, 18, 18, 0.2);
+  background-color: rgba(18, 18, 18, 0.1);
   border: none;
   border-radius: 290486px;
   cursor: pointer;
   display: inline-block;
   height: 24px;
+  outline: none;
   position: relative;
   vertical-align: top;
   width: 24px;
@@ -3680,7 +3682,7 @@ a.box:active {
 }
 
 .modal-close:hover {
-  background-color: rgba(18, 18, 18, 0.5);
+  background-color: rgba(18, 18, 18, 0.2);
 }
 
 .modal-close.is-small {
@@ -4367,6 +4369,7 @@ a.panel-block:hover {
 }
 
 .column {
+  display: block;
   flex-basis: 0;
   flex-grow: 1;
   flex-shrink: 1;
@@ -5137,6 +5140,7 @@ a.panel-block:hover {
 
 .tile {
   align-items: stretch;
+  display: block;
   flex-basis: auto;
   flex-grow: 1;
   flex-shrink: 1;
@@ -6529,6 +6533,7 @@ body.page-grid .column > .notification {
   border: solid #dbdbdb;
   border-width: 0 0 1px 1px;
   color: #b5b5b5;
+  cursor: pointer;
   outline: none;
   position: absolute;
   right: 0;

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>

docs/index.html

@@ -47,7 +47,7 @@ route: index
   <div class="hero-body">
     <div class="container">
       <nav class="columns">
-        <div class="column has-text-centered">
+        <a class="column has-text-centered" href="{{ site.baseurl }}/documentation/overview/responsiveness/">
           <span class="icon is-large" style="margin-right: -15px;">
             <i class="fa fa-mobile"></i>
           </span>
@@ -57,20 +57,36 @@ route: index
           <span class="icon is-large" style="margin-right: 10px;">
             <i class="fa fa-desktop"></i>
           </span>
-          <p class="title is-4"><strong>Responsive</strong> design</p>
+          <p class="title is-4"><strong>Responsive</strong></p>
-        </div>
+          <p class="subtitle">Designed for <strong>mobile</strong>-first</p>
-        <div class="column has-text-centered">
+        </a>
+        <a class="column has-text-centered" href="{{ site.baseurl }}/documentation/overview/modular/">
+          <span class="icon is-large" style="margin-right: -15px;">
+            <i class="fa fa-mobile"></i>
+          </span>
+          <span class="icon is-large">
+            <i class="fa fa-tablet"></i>
+          </span>
+          <span class="icon is-large" style="margin-right: 10px;">
+            <i class="fa fa-desktop"></i>
+          </span>
+          <p class="title is-4"><strong>Modular</strong></p>
+          <p class="subtitle">Just import what you <strong>need</strong></p>
+        </a>
+        <a class="column has-text-centered" href="{{ site.baseurl }}/documentation/grid/columns/">
           <span class="icon is-large">
             <i class="fa fa-css3"></i>
           </span>
-          <p class="title is-4">Built with <strong>Flexbox</strong></p>
+          <p class="title is-4"><strong>Modern</strong></p>
-        </div>
+          <p class="subtitle">Built with <strong>Flexbox</strong></p>
-        <div class="column has-text-centered">
+        </a>
+        <a class="column has-text-centered" href="{{ site.github }}">
           <span class="icon is-large">
             <i class="fa fa-github"></i>
           </span>
-          <p class="title is-4">Open source on <strong><a href="{{ site.github }}">GitHub</a></strong></p>
+          <p class="title is-4"><strong>Free</strong></p>
-        </div>
+          <p class="subtitle">Open source on <strong>GitHub</strong></p>
+        </a>
       </nav>
     </div>
   </div>
@@ -285,7 +301,7 @@ route: index
           </p>
         </div>
         <p class="level-item">
-          <a class="button is-success">
+          <a class="button is-primary">
             New
           </a>
         </p>

sass/base/base.sass

@@ -1,5 +1,5 @@
 @charset "utf-8"
 
-@import "minireset"
+@import "minireset.sass"
-@import "generic"
+@import "generic.sass"
-@import "helpers"
+@import "helpers.sass"

sass/base/generic.sass

@@ -62,7 +62,7 @@ hr
   border: none
   display: block
   height: 1px
-  margin: 40px 0
+  margin: 20px 0
 
 img
   max-width: 100%

sass/components/components.sass

@@ -1,13 +1,13 @@
 @charset "utf-8"
 
-@import "card"
+@import "card.sass"
-@import "highlight"
+@import "highlight.sass"
-@import "level"
+@import "level.sass"
-@import "media"
+@import "media.sass"
-@import "menu"
+@import "menu.sass"
-@import "message"
+@import "message.sass"
-@import "modal"
+@import "modal.sass"
-@import "nav"
+@import "nav.sass"
-@import "pagination"
+@import "pagination.sass"
-@import "panel"
+@import "panel.sass"
-@import "tabs"
+@import "tabs.sass"

sass/elements/elements.sass

@@ -1,13 +1,13 @@
 @charset "utf-8"
 
-@import "box"
+@import "box.sass"
-@import "button"
+@import "button.sass"
-@import "content"
+@import "content.sass"
-@import "form"
+@import "form.sass"
-@import "image"
+@import "image.sass"
-@import "notification"
+@import "notification.sass"
-@import "progress"
+@import "progress.sass"
-@import "table"
+@import "table.sass"
-@import "title"
+@import "title.sass"
 
-@import "other"
+@import "other.sass"

sass/grid/columns.sass

@@ -2,6 +2,7 @@
 @import "../utilities/variables.sass"
 
 .column
+  display: block
   flex-basis: 0
   flex-grow: 1
   flex-shrink: 1

sass/grid/grid.sass

@@ -1,4 +1,4 @@
 @charset "utf-8"
 
-@import "columns"
+@import "columns.sass"
-@import "tiles"
+@import "tiles.sass"

sass/grid/tiles.sass

@@ -3,6 +3,7 @@
 
 .tile
   align-items: stretch
+  display: block
   flex-basis: auto
   flex-grow: 1
   flex-shrink: 1

sass/layout/layout.sass

@@ -1,5 +1,5 @@
 @charset "utf-8"
 
-@import "hero"
+@import "hero.sass"
-@import "section"
+@import "section.sass"
-@import "footer"
+@import "footer.sass"

sass/utilities/mixins.sass

@@ -34,12 +34,13 @@
   +unselectable
   -moz-appearance: none
   -webkit-appearance: none
-  background-color: rgba($black, 0.2)
+  background-color: rgba($black, 0.1)
   border: none
   border-radius: 290486px
   cursor: pointer
   display: inline-block
   height: 24px
+  outline: none
   position: relative
   vertical-align: top
   width: 24px
@@ -60,7 +61,7 @@
   &:after
     transform: rotate(-45deg)
   &:hover
-    background-color: rgba($black, 0.5)
+    background-color: rgba($black, 0.2)
   // Sizes
   &.is-small
     height: 16px