Add modularity

diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html
index 465b56c40d32b8f9d5a5df22cf4a9112b274610d..c95dfacfa59dd50e8e5316b456df913331f70e6c 100644 (file)
--- a/docs/_includes/footer.html
+++ b/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;

diff --git a/docs/_includes/subnav-overview.html b/docs/_includes/subnav-overview.html
index a01b32f3855eb69b53d9d3465bf8540dd89614c4..b1a6a3c6102893a2aec13061a5dd27f3d12f1cc1 100644 (file)
--- a/docs/_includes/subnav-overview.html
+++ b/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>

diff --git a/docs/bulma-docs.sass b/docs/bulma-docs.sass
index 15e3ffd0341f8cd8b32a79f9b2376a22f6ea8bb2..db1cb750e6f56c66434891b0524f9fef5d89c88f 100644 (file)
--- a/docs/bulma-docs.sass
+++ b/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

diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 2b028cce79df6bdaf205c604ddf1d27acd6f1a68..8bcff189cdd14292d84e22bb6c7be1dcc304aa92 100644 (file)
--- a/docs/css/bulma-docs.css
+++ b/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;

diff --git a/docs/documentation/overview/modular.html b/docs/documentation/overview/modular.html
new file mode 100644 (file)
index 0000000..bf0a6bd
--- /dev/null
+++ b/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>

diff --git a/docs/index.html b/docs/index.html
index a925260b5c2e7592e36dc5d85f3af806e30435de..9794e9f0108f32c975b11f58b4821bde53fbb9bc 100644 (file)
--- a/docs/index.html
+++ b/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>
-        </div>
-        <div class="column has-text-centered">
+          <p class="title is-4"><strong>Responsive</strong></p>
+          <p class="subtitle">Designed for <strong>mobile</strong>-first</p>
+        </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>
-        </div>
-        <div class="column has-text-centered">
+          <p class="title is-4"><strong>Modern</strong></p>
+          <p class="subtitle">Built with <strong>Flexbox</strong></p>
+        </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>
-        </div>
+          <p class="title is-4"><strong>Free</strong></p>
+          <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>

diff --git a/sass/base/base.sass b/sass/base/base.sass
index b59b2fa1070e24f293e8ec2ad8bcbf29541ffb2e..e913d6ba394b4ce729fa230596c09360b9c4fd24 100644 (file)
--- a/sass/base/base.sass
+++ b/sass/base/base.sass
@@ -1,5 +1,5 @@
 @charset "utf-8"
 
-@import "minireset"
-@import "generic"
-@import "helpers"
+@import "minireset.sass"
+@import "generic.sass"
+@import "helpers.sass"

diff --git a/sass/base/generic.sass b/sass/base/generic.sass
index 635601352ba99d2c3f65d820290739b944976ecc..d0198f82bb9557eed347aa8f5f6e69cb9599a098 100644 (file)
--- a/sass/base/generic.sass
+++ b/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%

diff --git a/sass/components/components.sass b/sass/components/components.sass
index 7ea178fa77fa97552a08dfc4f6ec5bb9f2dfdd5f..0eaf7edea2a685776fefd449d91edab0606317bc 100644 (file)
--- a/sass/components/components.sass
+++ b/sass/components/components.sass
@@ -1,13 +1,13 @@
 @charset "utf-8"
 
-@import "card"
-@import "highlight"
-@import "level"
-@import "media"
-@import "menu"
-@import "message"
-@import "modal"
-@import "nav"
-@import "pagination"
-@import "panel"
-@import "tabs"
+@import "card.sass"
+@import "highlight.sass"
+@import "level.sass"
+@import "media.sass"
+@import "menu.sass"
+@import "message.sass"
+@import "modal.sass"
+@import "nav.sass"
+@import "pagination.sass"
+@import "panel.sass"
+@import "tabs.sass"

diff --git a/sass/elements/elements.sass b/sass/elements/elements.sass
index b1d20059b0788823a2f10cf05fa13dc0ed8890f5..e92f8de9dc3dcc51b7dae16c58a1fdbd108eac50 100644 (file)
--- a/sass/elements/elements.sass
+++ b/sass/elements/elements.sass
@@ -1,13 +1,13 @@
 @charset "utf-8"
 
-@import "box"
-@import "button"
-@import "content"
-@import "form"
-@import "image"
-@import "notification"
-@import "progress"
-@import "table"
-@import "title"
+@import "box.sass"
+@import "button.sass"
+@import "content.sass"
+@import "form.sass"
+@import "image.sass"
+@import "notification.sass"
+@import "progress.sass"
+@import "table.sass"
+@import "title.sass"
 
-@import "other"
+@import "other.sass"

diff --git a/sass/grid/columns.sass b/sass/grid/columns.sass
index e3f91aea59c5a31d9fd9e71ceca1ffb3d9dd09a5..f3e988f8eec61dc07f67dceb72081ebd4f11d8d7 100644 (file)
--- a/sass/grid/columns.sass
+++ b/sass/grid/columns.sass
@@ -2,6 +2,7 @@
 @import "../utilities/variables.sass"
 
 .column
+  display: block
   flex-basis: 0
   flex-grow: 1
   flex-shrink: 1

diff --git a/sass/grid/grid.sass b/sass/grid/grid.sass
index 92a4634a8ab6c5a33d93a69779f0bea08479d60e..e53070f6c32c6c3cca390dd596b5a373f737112a 100644 (file)
--- a/sass/grid/grid.sass
+++ b/sass/grid/grid.sass
@@ -1,4 +1,4 @@
 @charset "utf-8"
 
-@import "columns"
-@import "tiles"
+@import "columns.sass"
+@import "tiles.sass"

diff --git a/sass/grid/tiles.sass b/sass/grid/tiles.sass
index f4d5675ee0472f7258827bb31160b54e7e2d34c2..7c5220b39a991146822d9146b19e09e96874ce4a 100644 (file)
--- a/sass/grid/tiles.sass
+++ b/sass/grid/tiles.sass
@@ -3,6 +3,7 @@
 
 .tile
   align-items: stretch
+  display: block
   flex-basis: auto
   flex-grow: 1
   flex-shrink: 1

diff --git a/sass/layout/layout.sass b/sass/layout/layout.sass
index 8792926bfbc3fd822b481250715beae40783c0c9..143ada35be8f297e3bf9d70ec415fabd8291254e 100644 (file)
--- a/sass/layout/layout.sass
+++ b/sass/layout/layout.sass
@@ -1,5 +1,5 @@
 @charset "utf-8"
 
-@import "hero"
-@import "section"
-@import "footer"
+@import "hero.sass"
+@import "section.sass"
+@import "footer.sass"

diff --git a/sass/utilities/mixins.sass b/sass/utilities/mixins.sass
index 53a21d756b20bfd08eb5a395761ce0c3021aee15..46b9c8457607b736ffc283b6fb0723fb6ae5fd5b 100644 (file)
--- a/sass/utilities/mixins.sass
+++ b/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