Add gap

docs/_includes/anchor.html

@@ -1,6 +1,6 @@
 <hr style="margin-bottom: 0;">
 
-<h3 id="{{ include.name | slugify }}" class="title bd-anchor-title">
+<h3 id="{{ include.name | slugify }}" class="title is-4 bd-anchor-title">
   {{ include.name }}
   <a class="bd-anchor-link" href="#{{ include.name | slugify }}">
     #

docs/_includes/comparison.html

@@ -6,7 +6,7 @@
 </tr>
 <tr>
   <td>
-    <a href="{{ site.url }}/documentation/grid/columns/">
+    <a href="{{ site.url }}/documentation/columns/basics/">
       columns
     </a>
   </td>
@@ -18,7 +18,7 @@
 </tr>
 <tr>
   <td>
-    <a href="{{ site.url }}/documentation/grid/columns/">
+    <a href="{{ site.url }}/documentation/columns/basics/">
       column
     </a>
   </td>
@@ -30,7 +30,7 @@
 </tr>
 <tr>
   <td class="bd-is-unique">
-    <a href="{{ site.url }}/documentation/grid/tiles/">
+    <a href="{{ site.url }}/documentation/layout/tiles/">
       tile
     </a>
   </td>

docs/_includes/subnav-columns.html

@@ -16,8 +16,8 @@
       <a class="navbar-item is-tab {% if page.doc-subtab == 'options' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/options/">
         Options
       </a>
-      <a class="navbar-item is-tab {% if page.doc-subtab == 'variable-gap' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/variable-gap/">
+      <a class="navbar-item is-tab {% if page.doc-subtab == 'gap' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/gap/">
-        Variable gap
+        Gap
       </a>
     </div>
   </div>

docs/_layouts/documentation.html

@@ -39,9 +39,6 @@ route: documentation
           <li {% if page.doc-tab == 'columns' %}class="is-active"{% endif %}>
             <a href="{{ site.url }}/documentation/columns/basics">Columns</a>
           </li>
-          <li {% if page.doc-tab == 'grid' %}class="is-active"{% endif %}>
-            <a href="{{ site.url }}/documentation/grid/columns">Grid</a>
-          </li>
           <li {% if page.doc-tab == 'layout' %}class="is-active"{% endif %}>
             <a href="{{ site.url }}/documentation/layout/container/">Layout</a>
           </li>

docs/_posts/2016-04-11-metro-ui-css-grid-with-bulma-tiles.md

@@ -1,15 +1,15 @@
 ---
 layout: post
 title: "Metro UI CSS grid with Bulma tiles"
-introduction: "Have you ever wanted to build a **Metro-UI-like grid in CSS**?<br>Thanks to Flexbox and the new [Bulma tiles](http://bulma.io/documentation/grid/tiles/), you now can! And it only requires 1 HTML element: the `tile` element."
+introduction: "Have you ever wanted to build a **Metro-UI-like grid in CSS**?<br>Thanks to Flexbox and the new [Bulma tiles](http://bulma.io/documentation/layout/tiles/), you now can! And it only requires 1 HTML element: the `tile` element."
 color: "info"
 name: "Metro UI"
 icon: "th-large"
 ---
 
 Have you ever wanted to build a **Metro-UI-like grid in CSS**?
-Thanks to Flexbox and the new [Bulma tiles](http://bulma.io/documentation/grid/tiles/), you now can! And it only requires 1 HTML element: the `tile` element.
+Thanks to Flexbox and the new [Bulma tiles](http://bulma.io/documentation/layout/tiles/), you now can! And it only requires 1 HTML element: the `tile` element.
 
-[![Metro UI grid tiles in CSS](/images/blog/metro-ui-css-grid-tiles.png)](http://bulma.io/documentation/grid/tiles/)
+[![Metro UI grid tiles in CSS](/images/blog/metro-ui-css-grid-tiles.png)](http://bulma.io/documentation/layout/tiles/)
 
-Check out the [documentation](http://bulma.io/documentation/grid/tiles/)!
+Check out the [documentation](http://bulma.io/documentation/layout/tiles/)!

docs/documentation/columns/gap.html

@@ -0,0 +1,43 @@
+---
+title: Columns gap
+layout: documentation
+doc-tab: columns
+doc-subtab: gap
+---
+
+{% capture columns_gap %}
+<div class="columns">
+  <div class="column">
+    First column
+  </div>
+  <div class="column">
+    Second column
+  </div>
+  <div class="column">
+    Third column
+  </div>
+  <div class="column">
+    Fourth column
+  </div>
+</div>
+{% endcapture %}
+
+{% include subnav-columns.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Columns gap</h1>
+    <h2 class="subtitle">A simple way to build <strong>responsive columns</strong></h2>
+    <hr>
+    <div class="content">
+      <p>Building a <strong>columns layout</strong> with Bulma is very simple:</p>
+      <ol>
+        <li>Add a <code>columns</code> container</li>
+        <li>Add as many <code>column</code> elements as you want</li>
+      </ol>
+      <p>Each column will have an <strong>equal width</strong>, no matter the number of columns.</p>
+    </div>
+
+    {% highlight html %}{{ columns_gap }}{% endhighlight %}
+  </div>
+</section>

docs/documentation/columns/options.html

@@ -72,6 +72,52 @@ doc-subtab: options
 </div>
 {% endcapture %}
 
+{% capture columns_mobile_centered %}
+<div class="columns is-mobile is-centered">
+  <div class="column is-half is-narrow">
+    <p class="bd-notification is-info">
+      <code class="html">is-half</code><br>
+      <code class="html">is-narrow</code>
+    </p>
+  </div>
+</div>
+{% endcapture %}
+
+{% capture columns_mobile_multiline_centered %}
+<div class="columns is-mobile is-multiline is-centered">
+  <div class="column is-narrow">
+    <p class="bd-notification is-info">
+      <code class="html">is-narrow</code><br>
+      First Column
+    </p>
+  </div>
+  <div class="column is-narrow">
+    <p class="bd-notification is-success">
+      <code class="html">is-narrow</code><br>
+      Our Second Column
+    </p>
+  </div>
+  <div class="column is-narrow">
+    <p class="bd-notification is-danger">
+      <code class="html">is-narrow</code><br>
+      Third Column
+    </p>
+  </div>
+  <div class="column is-narrow">
+    <p class="bd-notification is-info">
+      <code class="html">is-narrow</code><br>
+      The Fourth Column
+    </p>
+  </div>
+  <div class="column is-narrow">
+    <p class="bd-notification is-success">
+      <code class="html">is-narrow</code><br>
+      Fifth Column
+    </p>
+  </div>
+</div>
+{% endcapture %}
+
 {% capture columns_narrow %}
 <div class="columns">
   <div class="column is-narrow">
@@ -197,6 +243,66 @@ doc-subtab: options
 
     {% highlight html %}{{ columns_gapless_multiline }}{% endhighlight %}
 
+    {% include anchor.html name="Centering columns" %}
+
+    <div class="content">
+      <p>
+        While you can use <em>empty columns</em> (like <code>&lt;div class="column"&gt;&lt;/div&gt;</code>) to create horizontal space around <code>.column</code> elements, you can also use <code>.is-centered</code> on the parent <code>.columns</code> element:
+      </p>
+    </div>
+
+    <div class="columns is-mobile is-centered">
+      <div class="column is-half is-narrow">
+        <p class="bd-notification is-info">
+          <code class="html">is-half</code><br>
+          <code class="html">is-narrow</code>
+        </p>
+      </div>
+    </div>
+
+    {% highlight html %}{{ columns_mobile_centered }}{% endhighlight %}
+
+    <div class="content">
+      <p>
+        Use with <code>.is-multiline</code> to create a flexible, centered list (try resizing to see centering in different viewport sizes):
+      </p>
+    </div>
+
+    <div class="columns is-mobile is-multiline is-centered">
+      <div class="column is-narrow">
+        <p class="bd-notification is-info" style="padding: 1.25rem 1.5rem;">
+          <code class="html">is-narrow</code><br>
+          First Column
+        </p>
+      </div>
+      <div class="column is-narrow">
+        <p class="bd-notification is-success" style="padding: 1.25rem 1.5rem;">
+          <code class="html">is-narrow</code><br>
+          Our Second Column
+        </p>
+      </div>
+      <div class="column is-narrow">
+        <p class="bd-notification is-danger" style="padding: 1.25rem 1.5rem;">
+          <code class="html">is-narrow</code><br>
+          Third Column
+        </p>
+      </div>
+      <div class="column is-narrow">
+        <p class="bd-notification is-info" style="padding: 1.25rem 1.5rem;">
+          <code class="html">is-narrow</code><br>
+          The Fourth Column
+        </p>
+      </div>
+      <div class="column is-narrow">
+        <p class="bd-notification is-success" style="padding: 1.25rem 1.5rem;">
+          <code class="html">is-narrow</code><br>
+          Fifth Column
+        </p>
+      </div>
+    </div>
+
+    {% highlight html %}{{ columns_mobile_multiline_centered }}{% endhighlight %}
+
     {% include anchor.html name="Narrow column" %}
 
     <div class="content">

docs/index.html

@@ -66,7 +66,7 @@ route: index
           <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.url }}/documentation/grid/columns/">
+        <a class="column has-text-centered" href="{{ site.url }}/documentation/columns/basics/">
           <span class="icon is-large">
             <i class="fa fa-css3"></i>
           </span>
@@ -95,7 +95,7 @@ route: index
       <span class="icon is-medium">
         <i class="fa fa-pause"></i>
       </span>
-      <a href="{{ site.url }}/documentation/grid/columns">
+      <a href="{{ site.url }}/documentation/columns/basics">
         Simple <strong>columns</strong>
       </a>
     </h3>
@@ -197,7 +197,7 @@ route: index
       <span class="icon is-medium">
         <i class="fa fa-th-large"></i>
       </span>
-      <a href="{{ site.url }}/documentation/grid/tiles">
+      <a href="{{ site.url }}/documentation/layout/tiles">
         Magic <strong>tiles</strong>
       </a>
     </h3>