Fix tiles

docs/_includes/snippet.html

@@ -16,6 +16,7 @@
     {% if include.clipped %}bd-is-clipped{% endif %}
     {% if include.size %}bd-is-{{ include.size }}{% endif %}
     {% if include.one_fifth %}bd-is-one-fifth{% endif %}
+    {% if include.fullwidth %}bd-is-fullwidth{% endif %}
     ">
     <div class="bd-snippet-preview {% if include.paddingless %}is-paddingless{% endif %}">
       {{ include.content }}

docs/_sass/example.sass

@@ -81,6 +81,10 @@
   .bd-snippet-code
     overflow: auto
 
+.bd-snippet.bd-is-fullwidth
+  border-radius: 0
+  border-width: 1px 0
+
 +desktop
   .bd-snippet.bd-is-vertical
     align-items: stretch

docs/_sass/specific.sass

@@ -1,5 +1,6 @@
 .bd-typo
-  margin-top: 3rem
+  &:not(:first-child)
+    margin-top: 3rem
 
 .bd-has-text-rss
   color: $rss

docs/css/bulma-docs.css

@@ -10402,7 +10402,7 @@ svg {
   text-decoration: underline;
 }
 
-.bd-typo {
+.bd-typo:not(:first-child) {
   margin-top: 3rem;
 }
 
@@ -10939,6 +10939,11 @@ svg {
   overflow: auto;
 }
 
+.bd-snippet.bd-is-fullwidth {
+  border-radius: 0;
+  border-width: 1px 0;
+}
+
 @media screen and (min-width: 1024px) {
   .bd-snippet.bd-is-vertical {
     align-items: stretch;

docs/documentation/layout/footer.html

@@ -1,12 +1,12 @@
 ---
 title: Footer
+subtitle: "A simple responsive <strong>footer</strong> which can include anything: lists, headings, columns, icons, buttons, etc."
 layout: documentation
+hide_carbon: true
 doc-tab: layout
 doc-subtab: footer
 ---
 
-{% include subnav/subnav-layout.html %}
-
 {% capture footer_example %}
 <footer class="footer">
   <div class="container">
@@ -21,15 +21,10 @@ doc-subtab: footer
 </footer>
 {% endcapture %}
 
-<section class="section">
-  <div class="container">
-    <h1 class="title">Footer</h1>
-    <h2 class="subtitle">
-      A simple responsive <strong>footer</strong> which can include anything: lists, headings, columns, icons, buttons, etc.
-    </h2>
+{% include layout/main-close.html show_carbon=true %}
 
-    {% include snippet.html content=footer_example horizontal=true more=true %}
+{% include snippet.html content=footer_example horizontal=true more=true fullwidth=true %}
 
-    {% include variables.html %}
-  </div>
-</section>
+{% include layout/main-open.html %}
+
+{% include variables.html %}

docs/documentation/layout/hero.html

@@ -1,20 +1,13 @@
 ---
 title: Hero
+subtitle: "An imposing <strong>hero banner</strong> to showcase something"
 layout: documentation
+hide_carbon: true
 doc-tab: layout
 doc-subtab: hero
 ---
 
-{% include subnav/subnav-layout.html %}
-
-<section class="section">
-  <div class="container">
-    <h1 class="title">Hero</h1>
-    <h2 class="subtitle">
-      An imposing <strong>hero banner</strong> to showcase something
-    </h2>
-  </div>
-</section>
+{% include layout/main-close.html show_carbon=true %}
 
 <section class="section is-fullwidth">
   <div class="bd-example">
@@ -31,6 +24,7 @@ doc-subtab: hero
       </div>
     </section>
   </div>
+</section>
 
 {% highlight html %}
 <section class="hero">
@@ -654,3 +648,5 @@ doc-subtab: hero
   {% include snippet.html content=heroNavbarB horizontal=true more=true %}
   {% include snippet.html content=heroNavbarC horizontal=true more=true %}
 </section>
+
+{% include layout/main-open.html %}

docs/documentation/layout/level.html

@@ -1,5 +1,6 @@
 ---
 title: Level
+subtitle: "A multi-purpose <strong>horizontal level</strong>, which can contain almost any other element"
 layout: documentation
 doc-tab: layout
 doc-subtab: level
@@ -118,96 +119,84 @@ doc-subtab: level
 </nav>
 {% endcapture %}
 
-{% include subnav/subnav-layout.html %}
-
-<section class="section">
-  <div class="container">
-    <h1 class="title">Level</h1>
-    <h2 class="subtitle">A multi-purpose <strong>horizontal level</strong>, which can contain almost any other element</h2>
-
-    <hr>
-
-    <div class="content">
-      <p>The <strong>structure</strong> of a level is the following:</p>
+<div class="content">
+  <p>The <strong>structure</strong> of a level is the following:</p>
+  <ul>
+    <li>
+      <code>level</code>: main container
       <ul>
+        <li><code>level-left</code> for the left side
         <li>
-          <code>level</code>: main container
+          <code>level-right</code> for the right side
           <ul>
-            <li><code>level-left</code> for the left side
-            <li>
-              <code>level-right</code> for the right side
-              <ul>
-                <li><code>level-item</code> for each individual element</li>
-              </ul>
-            </li>
+            <li><code>level-item</code> for each individual element</li>
           </ul>
         </li>
       </ul>
-      <p>In a <code>level-item</code>, you can then insert almost <em>anything</em> you want: a title, a button, a text input, or just simple text. No matter what elements you put inside a Bulma <code>level</code>, they will always be <strong>vertically centered</strong>.</p>
-    </div>
-
-    <div class="bd-structure">
-      <nav class="level bd-structure-item bd-is-structure-container" title="level">
-        <div class="level-left bd-structure-item" title="level-left">
-          <div class="level-item">
-            <p class="subtitle is-5">
-              <strong>123</strong> posts
-            </p>
-          </div>
-          <div class="level-item">
-            <div class="field has-addons">
-              <p class="control">
-                <input class="input" type="text" placeholder="Find a post">
-              </p>
-              <p class="control">
-                <button class="button">
-                  Search
-                </button>
-              </p>
-            </div>
-          </div>
-        </div>
-        <div class="level-right bd-structure-item" title="level-right">
-          <p class="level-item">
-            <strong>All</strong>
-          </p>
-          <p class="level-item">
-            <a>Published</a>
-          </p>
-          <p class="level-item">
-            <a>Drafts</a>
-          </p>
-          <p class="level-item">
-            <a>Deleted</a>
+    </li>
+  </ul>
+  <p>In a <code>level-item</code>, you can then insert almost <em>anything</em> you want: a title, a button, a text input, or just simple text. No matter what elements you put inside a Bulma <code>level</code>, they will always be <strong>vertically centered</strong>.</p>
+</div>
+
+<div class="bd-structure">
+  <nav class="level bd-structure-item bd-is-structure-container" title="level">
+    <div class="level-left bd-structure-item" title="level-left">
+      <div class="level-item">
+        <p class="subtitle is-5">
+          <strong>123</strong> posts
+        </p>
+      </div>
+      <div class="level-item">
+        <div class="field has-addons">
+          <p class="control">
+            <input class="input" type="text" placeholder="Find a post">
           </p>
-          <p class="level-item">
-            <a class="button is-success">
-              New
-            </a>
+          <p class="control">
+            <button class="button">
+              Search
+            </button>
           </p>
         </div>
-      </nav>
+      </div>
     </div>
+    <div class="level-right bd-structure-item" title="level-right">
+      <p class="level-item">
+        <strong>All</strong>
+      </p>
+      <p class="level-item">
+        <a>Published</a>
+      </p>
+      <p class="level-item">
+        <a>Drafts</a>
+      </p>
+      <p class="level-item">
+        <a>Deleted</a>
+      </p>
+      <p class="level-item">
+        <a class="button is-success">
+          New
+        </a>
+      </p>
+    </div>
+  </nav>
+</div>
 
-    {% include snippet.html content=nav_example horizontal=true more=true %}
-
-    {% include anchor.html name="Centered level" %}
+{% include snippet.html content=nav_example horizontal=true more=true %}
 
-    <div class="content">
-      If you want a <strong>centered level</strong>, you can use as many <code>level-item</code> as you want, as long as they are <strong>direct</strong> children of the <code>level</code> container.
-    </div>
+{% include anchor.html name="Centered level" %}
 
-    {% include snippet.html content=nav_centered_example horizontal=true more=true %}
+<div class="content">
+  If you want a <strong>centered level</strong>, you can use as many <code>level-item</code> as you want, as long as they are <strong>direct</strong> children of the <code>level</code> container.
+</div>
 
-    {% include snippet.html content=nav_centered_bis_example horizontal=true more=true %}
+{% include snippet.html content=nav_centered_example horizontal=true more=true %}
 
-    {% include anchor.html name="Mobile level" %}
+{% include snippet.html content=nav_centered_bis_example horizontal=true more=true %}
 
-    <div class="content">
-      By default, for space concerns, the level is vertical on mobile. If you want the level to be horizontal on mobile as well, add the <code>is-mobile</code> modifier on the <code>level</code> container.
-    </div>
+{% include anchor.html name="Mobile level" %}
 
-    {% include snippet.html content=nav_mobile_example horizontal=true more=true %}
+<div class="content">
+  By default, for space concerns, the level is vertical on mobile. If you want the level to be horizontal on mobile as well, add the <code>is-mobile</code> modifier on the <code>level</code> container.
+</div>
 
-  </div>
-</section>
+{% include snippet.html content=nav_mobile_example horizontal=true more=true %}

docs/documentation/layout/media-object.html

@@ -1,5 +1,6 @@
 ---
 title: Media Object
+subtitle: "The famous <strong>media object</strong> prevalent in social media interfaces, but useful in any context"
 layout: documentation
 doc-tab: layout
 doc-subtab: media-object
@@ -156,69 +157,57 @@ doc-subtab: media-object
 </article>
 {% endcapture %}
 
-{% include subnav/subnav-layout.html %}
+<div class="content">
+  <p>The <a href="http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code">media object</a> is a UI element perfect for repeatable and nestable content.</p>
+</div>
 
-<section class="section">
-  <div class="container">
-    <h1 class="title">Media Object</h1>
-    <h2 class="subtitle">The famous <strong>media object</strong> prevalent in social media interfaces, but useful in any context</h2>
-
-    <hr>
-
-    <div class="content">
-      <p>The <a href="http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code">media object</a> is a UI element perfect for repeatable and nestable content.</p>
-    </div>
-
-    <div class="bd-structure">
-      <article class="media">
-        <figure class="media-left bd-structure-item" title="media-left">
-          <p class="image is-64x64">
-            <img src="{{site.url}}/images/placeholders/128x128.png">
-          </p>
-        </figure>
-        <div class="media-content bd-structure-item bd-is-structure-right" title="media-content">
-          <div class="content">
-            <p>
-              <strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
-              <br>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
-            </p>
-          </div>
-          <nav class="level">
-            <div class="level-left">
-              <a class="level-item">
-                <span class="icon is-small"><i class="fas fa-reply"></i></span>
-              </a>
-              <a class="level-item">
-                <span class="icon is-small"><i class="fas fa-retweet"></i></span>
-              </a>
-              <a class="level-item">
-                <span class="icon is-small"><i class="fas fa-heart"></i></span>
-              </a>
-            </div>
-          </nav>
-        </div>
-        <div class="media-right bd-structure-item" title="media-right">
-          <button class="delete"></button>
+<div class="bd-structure">
+  <article class="media">
+    <figure class="media-left bd-structure-item" title="media-left">
+      <p class="image is-64x64">
+        <img src="{{site.url}}/images/placeholders/128x128.png">
+      </p>
+    </figure>
+    <div class="media-content bd-structure-item bd-is-structure-right" title="media-content">
+      <div class="content">
+        <p>
+          <strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
+          <br>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
+        </p>
+      </div>
+      <nav class="level">
+        <div class="level-left">
+          <a class="level-item">
+            <span class="icon is-small"><i class="fas fa-reply"></i></span>
+          </a>
+          <a class="level-item">
+            <span class="icon is-small"><i class="fas fa-retweet"></i></span>
+          </a>
+          <a class="level-item">
+            <span class="icon is-small"><i class="fas fa-heart"></i></span>
+          </a>
         </div>
-      </article>
+      </nav>
     </div>
-
-    {% include snippet.html content=media_example horizontal=true more=true %}
-
-    <div class="content">
-      <p>You can include <em>any</em> other Bulma element, like inputs, textareas, icons, buttons... or even a <strong>nav bar</strong>.</p>
+    <div class="media-right bd-structure-item" title="media-right">
+      <button class="delete"></button>
     </div>
+  </article>
+</div>
 
-    {% include snippet.html content=media_bis_example horizontal=true more=true %}
+{% include snippet.html content=media_example horizontal=true more=true %}
 
-    {% include anchor.html name="Nesting" %}
+<div class="content">
+  <p>You can include <em>any</em> other Bulma element, like inputs, textareas, icons, buttons... or even a <strong>nav bar</strong>.</p>
+</div>
 
-    <div class="content">
-      <p>You can nest media objects up to <strong>3 levels</strong> deep.</p>
-    </div>
+{% include snippet.html content=media_bis_example horizontal=true more=true %}
 
-    {% include snippet.html content=media_nested_example horizontal=true more=true %}
+{% include anchor.html name="Nesting" %}
 
-  </div>
-</section>
+<div class="content">
+  <p>You can nest media objects up to <strong>3 levels</strong> deep.</p>
+</div>
+
+{% include snippet.html content=media_nested_example horizontal=true more=true %}

docs/documentation/layout/section.html

@@ -1,26 +1,12 @@
 ---
 title: Section
+subtitle: "A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading"
 layout: documentation
 doc-tab: layout
 doc-subtab: section
 ---
 
-{% include subnav/subnav-layout.html %}
-
-<section class="section">
-  <div class="container">
-    <h1 class="title">Section</h1>
-    <h2 class="subtitle">
-      A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading
-    </h2>
-
-    <hr>
-
-    <div class="content">
-      <p>Use sections as <strong>direct</strong> children of <code>body</code>.</p>
-    </div>
-
-{% highlight html %}
+{% capture section_example %}
 <body>
   <section class="section">
     <div class="container">
@@ -31,13 +17,16 @@ doc-subtab: section
     </div>
   </section>
 </body>
-{% endhighlight %}
+{% endcapture %}
 
-    <div class="content">
-      <p>You can use the modifiers <code>is-medium</code> and <code>is-large</code> to change the <strong>spacing</strong>.</p>
-    </div>
+<div class="content">
+  <p>Use sections as <strong>direct</strong> children of <code>body</code>.</p>
+</div>
+
+{% highlight html %}{{ section_example }}{% endhighlight %}
 
-    {% include variables.html %}
+<div class="content">
+  <p>You can use the modifiers <code>is-medium</code> and <code>is-large</code> to change the <strong>spacing</strong>.</p>
+</div>
 
-  </div>
-</section>
+{% include variables.html %}

docs/documentation/layout/tiles.html

@@ -1,80 +1,18 @@
 ---
 title: Tiles powered by Flexbox
+subtitle: "A <strong>single tile</strong> element to build 2-dimensional Metro-like, Pinterest-like, or whatever-you-like grids"
 layout: documentation
 doc-tab: layout
 doc-subtab: tiles
 ---
 
-{% include subnav/subnav-layout.html %}
-
-<section class="section">
-  <div class="container">
-    <h1 class="title">Tiles</h1>
-    <h2 class="subtitle">A <strong>single tile</strong> element to build 2-dimensional Metro-like, Pinterest-like, or whatever-you-like grids</h2>
-
-    <hr>
-
-    <div class="content">
-      <p>To build intricate 2-dimensional layouts, you only need a <strong>single element</strong>: the <code>tile</code>:</p>
-    </div>
-
-{% highlight html %}
+{% capture tile_empty %}
 <div class="tile">
   <!-- The magical tile element! -->
 </div>
-{% endhighlight %}
-
-    {% include anchor.html name="Example" %}
-
-    <div class="tile is-ancestor">
-      <div class="tile is-vertical is-8">
-        <div class="tile">
-          <div class="tile is-parent is-vertical">
-            <article class="tile is-child notification is-primary">
-              <p class="title">Vertical...</p>
-              <p class="subtitle">Top tile</p>
-            </article>
-            <article class="tile is-child notification is-warning">
-              <p class="title">...tiles</p>
-              <p class="subtitle">Bottom tile</p>
-            </article>
-          </div>
-          <div class="tile is-parent">
-            <article class="tile is-child notification is-info">
-              <p class="title">Middle tile</p>
-              <p class="subtitle">With an image</p>
-              <figure class="image is-4by3">
-                <img src="{{site.url}}/images/placeholders/640x480.png">
-              </figure>
-            </article>
-          </div>
-        </div>
-        <div class="tile is-parent">
-          <article class="tile is-child notification is-danger">
-            <p class="title">Wide tile</p>
-            <p class="subtitle">Aligned with the right tile</p>
-            <div class="content">
-              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
-            </div>
-          </article>
-        </div>
-      </div>
-      <div class="tile is-parent">
-        <article class="tile is-child notification is-success">
-          <div class="content">
-            <p class="title">Tall tile</p>
-            <p class="subtitle">With even more content</p>
-            <div class="content">
-              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
-              <p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
-              <p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
-            </div>
-          </div>
-        </article>
-      </div>
-    </div>
+{% endcapture %}
 
-{% highlight html %}
+{% capture tile_default %}
 <div class="tile is-ancestor">
   <div class="tile is-vertical is-8">
     <div class="tile">
@@ -120,63 +58,15 @@ doc-subtab: tiles
     </article>
   </div>
 </div>
-{% endhighlight %}
-
-    {% include anchor.html name="Modifiers" %}
-
-
-    <div class="content">
-      <p>The <code>tile</code> element has <strong>16 modifiers</strong>:</p>
-      <ul>
-        <li>
-          <strong>3 contextual</strong> modifiers
-          <ul>
-            <li><code>is-ancestor</code></li>
-            <li><code>is-parent</code></li>
-            <li><code>is-child</code></li>
-          </ul>
-        </li>
-        <li>
-          <strong>1 directional</strong> modifier
-          <ul>
-            <li><code>is-vertical</code></li>
-          </ul>
-        </li>
-        <li>
-          <strong>12 horizontal size</strong> modifiers
-          <ul>
-            <li>from <code>is-1</code></li>
-            <li>to <code>is-12</code></li>
-          </ul>
-        </li>
-      </ul>
-    </div>
-
-    {% include anchor.html name="How it works: Nesting" %}
-
-    <div class="content">
-      <p>Everything is a tile! To create a grid of tiles, you only need to <strong>nest</strong> <code>tile</code> elements.</p>
-    </div>
+{% endcapture %}
 
-    <div class="columns">
-      <div class="column is-one-third">
-        <p>Start with an <strong>ancestor</strong> tile that will wrap all other tiles:</p>
-      </div>
-      <div class="column is-two-thirds">
-{% highlight html %}
+{% capture tile_ancestor %}
 <div class="tile is-ancestor">
   <!-- All other tile elemnts -->
 </div>
-{% endhighlight %}
-      </div>
-    </div>
+{% endcapture %}
 
-    <div class="columns">
-      <div class="column is-one-third">
-        <p>Add tile elements that will distribute themselves <strong>horizontally</strong>:</p>
-      </div>
-      <div class="column is-two-thirds">
-{% highlight html %}
+{% capture tile_horizontal %}
 <div class="tile is-ancestor">
   <div class="tile">
     <!-- Add content or other tiles -->
@@ -185,20 +75,9 @@ doc-subtab: tiles
     <!-- Add content or other tiles -->
   </div>
 </div>
-{% endhighlight %}
-      </div>
-    </div>
+{% endcapture %}
 
-    <div class="columns">
-      <div class="column is-one-third">
-        <p>
-          You can <strong>resize</strong> any tile according to a <strong>12 column</strong> grid.
-          <br>
-          For example, <code>is-4</code> will take up 1/3 of the horizontal space:
-        </p>
-      </div>
-      <div class="column is-two-thirds">
-{% highlight html %}
+{% capture tile_resize %}
 <div class="tile is-ancestor">
   <div class="tile is-4">
     <!-- 1/3 -->
@@ -207,16 +86,9 @@ doc-subtab: tiles
     <!-- This tile will take the rest: 2/3 -->
   </div>
 </div>
-{% endhighlight %}
-      </div>
-    </div>
+{% endcapture %}
 
-    <div class="columns">
-      <div class="column is-one-third">
-        <p>If you want to stack tiles <strong>vertically</strong>, add <code>is-vertical</code> on the parent tile:</p>
-      </div>
-      <div class="column is-two-thirds">
-{% highlight html %}
+{% capture tile_vertical %}
 <div class="tile is-ancestor">
   <div class="tile is-4 is-vertical">
     <div class="tile">
@@ -230,23 +102,9 @@ doc-subtab: tiles
     <!-- This tile will take up the whole vertical space -->
   </div>
 </div>
-{% endhighlight %}
-      </div>
-    </div>
+{% endcapture %}
 
-    <div class="columns">
-      <div class="column is-one-third">
-        <div class="content">
-          <p>As soon as you want to add <strong>content</strong> to a tile, just:</p>
-          <ul>
-            <li>add <em>any</em> class you want, like <code>box</code></li>
-            <li>add the <code>is-child</code> modifier on the tile</li>
-            <li>add the <code>is-parent</code> modifier on the <em>parent</em> tile</li>
-          </ul>
-        </div>
-      </div>
-      <div class="column is-two-thirds">
-{% highlight html %}
+{% capture tile_123 %}
 <div class="tile is-ancestor">
   <div class="tile is-4 is-vertical is-parent">
     <div class="tile is-child box">
@@ -262,32 +120,9 @@ doc-subtab: tiles
     </div>
   </div>
 </div>
-{% endhighlight %}
-      </div>
-    </div>
-
-    <div class="tile is-ancestor">
-      <div class="tile is-4 is-vertical is-parent">
-        <div class="tile is-child box">
-          <p class="title">One</p>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
-        </div>
-        <div class="tile is-child box">
-          <p class="title">Two</p>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
-        </div>
-      </div>
-      <div class="tile is-parent">
-        <div class="tile is-child box">
-          <p class="title">Three</p>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
-          <p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
-          <p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
-        </div>
-      </div>
-    </div>
+{% endcapture %}
 
-{% highlight html %}
+{% capture tile_lorem %}
 <div class="tile is-ancestor">
   <div class="tile is-4 is-vertical is-parent">
     <div class="tile is-child box">
@@ -308,37 +143,17 @@ doc-subtab: tiles
     </div>
   </div>
 </div>
-{% endhighlight %}
-
-    {% include anchor.html name="Nesting requirements" %}
+{% endcapture %}
 
-
-    <article class="message is-danger">
-      <div class="message-header">
-        3 levels deep at least...
-      </div>
-      <div class="message-body">
-        <div class="content">
-          <p>You need at least <strong>3 levels</strong> of hierarchy:</p>
-{% highlight markdown %}
+{% capture md_3_levels %}
 tile is-ancestor
 |
 └───tile is-parent
     |
     └───tile is-child
-{% endhighlight %}
-        </div>
-      </div>
-    </article>
+{% endcapture %}
 
-    <article class="message is-success">
-      <div class="message-header">
-        ...but more levels if you want!
-      </div>
-      <div class="message-body">
-        <div class="content">
-          <p>You can, however, nest tiles deeper than that, and mix it up!</p>
-{% highlight markdown %}
+{% capture md_nesting %}
 tile is-ancestor
 |
 ├───tile is-vertical is-8
@@ -357,60 +172,9 @@ tile is-ancestor
 |
 └───tile is-parent
     └───tile is-child
-{% endhighlight %}
-        </div>
-      </div>
-    </article>
-
-    <div class="tile is-ancestor">
-      <div class="tile is-vertical is-8">
-        <div class="tile">
-          <div class="tile is-parent is-vertical">
-            <article class="tile is-child box">
-              <p class="title">Vertical tiles</p>
-              <p class="subtitle">Top box</p>
-            </article>
-            <article class="tile is-child box">
-              <p class="title">Vertical tiles</p>
-              <p class="subtitle">Bottom box</p>
-            </article>
-          </div>
-          <div class="tile is-parent">
-            <article class="tile is-child box">
-              <p class="title">Middle box</p>
-              <p class="subtitle">With an image</p>
-              <figure class="image is-4by3">
-                <img src="{{site.url}}/images/placeholders/640x480.png">
-              </figure>
-            </article>
-          </div>
-        </div>
-        <div class="tile is-parent">
-          <article class="tile is-child box">
-            <p class="title">Wide column</p>
-            <p class="subtitle">Aligned with the right column</p>
-            <div class="content">
-              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
-            </div>
-          </article>
-        </div>
-      </div>
-      <div class="tile is-parent">
-        <article class="tile is-child box">
-          <div class="content">
-            <p class="title">Tall column</p>
-            <p class="subtitle">With even more content</p>
-            <div class="content">
-              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
-              <p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
-              <p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
-            </div>
-          </div>
-        </article>
-      </div>
-    </div>
+{% endcapture %}
 
-{% highlight html %}
+{% capture tile_any_content %}
 <div class="tile is-ancestor">
   <div class="tile is-vertical is-8">
     <div class="tile">
@@ -440,103 +204,9 @@ tile is-ancestor
     </article>
   </div>
 </div>
-{% endhighlight %}
-
-    {% include anchor.html name="3 columns" %}
-
-
-    <div class="tile is-ancestor">
-      <div class="tile is-parent">
-        <article class="tile is-child box">
-          <p class="title">Hello World</p>
-          <p class="subtitle">What is up?</p>
-        </article>
-      </div>
-      <div class="tile is-parent">
-        <article class="tile is-child box">
-          <p class="title">Foo</p>
-          <p class="subtitle">Bar</p>
-        </article>
-      </div>
-      <div class="tile is-parent">
-        <article class="tile is-child box">
-          <p class="title">Third column</p>
-          <p class="subtitle">With some content</p>
-          <div class="content">
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
-          </div>
-        </article>
-      </div>
-    </div>
-    <div class="tile is-ancestor">
-      <div class="tile is-vertical is-8">
-        <div class="tile">
-          <div class="tile is-parent is-vertical">
-            <article class="tile is-child box">
-              <p class="title">Vertical tiles</p>
-              <p class="subtitle">Top box</p>
-            </article>
-            <article class="tile is-child box">
-              <p class="title">Vertical tiles</p>
-              <p class="subtitle">Bottom box</p>
-            </article>
-          </div>
-          <div class="tile is-parent">
-            <article class="tile is-child box">
-              <p class="title">Middle box</p>
-              <p class="subtitle">With an image</p>
-              <figure class="image is-4by3">
-                <img src="{{site.url}}/images/placeholders/640x480.png">
-              </figure>
-            </article>
-          </div>
-        </div>
-        <div class="tile is-parent">
-          <article class="tile is-child box">
-            <p class="title">Wide column</p>
-            <p class="subtitle">Aligned with the right column</p>
-            <div class="content">
-              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
-            </div>
-          </article>
-        </div>
-      </div>
-      <div class="tile is-parent">
-        <article class="tile is-child box">
-          <div class="content">
-            <p class="title">Tall column</p>
-            <p class="subtitle">With even more content</p>
-            <div class="content">
-              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
-              <p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
-              <p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
-            </div>
-          </div>
-        </article>
-      </div>
-    </div>
-    <div class="tile is-ancestor">
-      <div class="tile is-parent">
-        <article class="tile is-child box">
-          <p class="title">Side column</p>
-          <p class="subtitle">With some content</p>
-          <div class="content">
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
-          </div>
-        </article>
-      </div>
-      <div class="tile is-parent is-8">
-        <article class="tile is-child box">
-          <p class="title">Main column</p>
-          <p class="subtitle">With some content</p>
-          <div class="content">
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
-          </div>
-        </article>
-      </div>
-    </div>
+{% endcapture %}
 
-{% highlight html %}
+{% capture tile_3_columns %}
 <div class="tile is-ancestor">
   <div class="tile is-parent">
     <article class="tile is-child box">
@@ -629,137 +299,9 @@ tile is-ancestor
     </article>
   </div>
 </div>
-{% endhighlight %}
-
-    {% include anchor.html name="4 columns" %}
-
-
-    <div class="tile is-ancestor">
-      <div class="tile is-parent">
-        <article class="tile is-child box">
-          <p class="title">One</p>
-          <p class="subtitle">Subtitle</p>
-        </article>
-      </div>
-      <div class="tile is-parent">
-        <article class="tile is-child box">
-          <p class="title">Two</p>
-          <p class="subtitle">Subtitle</p>
-        </article>
-      </div>
-      <div class="tile is-parent">
-        <article class="tile is-child box">
-          <p class="title">Three</p>
-          <p class="subtitle">Subtitle</p>
-        </article>
-      </div>
-      <div class="tile is-parent">
-        <article class="tile is-child box">
-          <p class="title">Four</p>
-          <p class="subtitle">Subtitle</p>
-        </article>
-      </div>
-    </div>
-    <div class="tile is-ancestor">
-      <div class="tile is-vertical is-9">
-        <div class="tile">
-          <div class="tile is-parent">
-            <article class="tile is-child box">
-              <p class="title">Five</p>
-              <p class="subtitle">Subtitle</p>
-              <div class="content">
-                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
-              </div>
-            </article>
-          </div>
-          <div class="tile is-8 is-vertical">
-            <div class="tile">
-              <div class="tile is-parent">
-                <article class="tile is-child box">
-                  <p class="title">Six</p>
-                  <p class="subtitle">Subtitle</p>
-                </article>
-              </div>
-              <div class="tile is-parent">
-                <article class="tile is-child box">
-                  <p class="title">Seven</p>
-                  <p class="subtitle">Subtitle</p>
-                </article>
-              </div>
-            </div>
-            <div class="tile is-parent">
-              <article class="tile is-child box">
-                <p class="title">Eight</p>
-                <p class="subtitle">Subtitle</p>
-              </article>
-            </div>
-          </div>
-        </div>
-        <div class="tile">
-          <div class="tile is-8 is-parent">
-            <article class="tile is-child box">
-              <p class="title">Nine</p>
-              <p class="subtitle">Subtitle</p>
-              <div class="content">
-                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
-              </div>
-            </article>
-          </div>
-          <div class="tile is-parent">
-            <article class="tile is-child box">
-              <p class="title">Ten</p>
-              <p class="subtitle">Subtitle</p>
-              <div class="content">
-                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
-              </div>
-            </article>
-          </div>
-        </div>
-      </div>
-      <div class="tile is-parent">
-        <article class="tile is-child box">
-          <div class="content">
-            <p class="title">Eleven</p>
-            <p class="subtitle">Subtitle</p>
-            <div class="content">
-              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
-              <p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
-            </div>
-          </div>
-        </article>
-      </div>
-    </div>
-    <div class="tile is-ancestor">
-      <div class="tile is-parent">
-        <article class="tile is-child box">
-          <p class="title">Twelve</p>
-          <p class="subtitle">Subtitle</p>
-          <div class="content">
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.</p>
-          </div>
-        </article>
-      </div>
-      <div class="tile is-parent is-6">
-        <article class="tile is-child box">
-          <p class="title">Thirteen</p>
-          <p class="subtitle">Subtitle</p>
-          <div class="content">
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
-          </div>
-        </article>
-      </div>
-      <div class="tile is-parent">
-        <article class="tile is-child box">
-          <p class="title">Fourteen</p>
-          <p class="subtitle">Subtitle</p>
-          <div class="content">
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.</p>
-          </div>
-        </article>
-      </div>
-    </div>
+{% endcapture %}
 
-{% highlight html %}
+{% capture tile_4_columns %}
 <div class="tile is-ancestor">
   <div class="tile is-parent">
     <article class="tile is-child box">
@@ -886,6 +428,476 @@ tile is-ancestor
     </article>
   </div>
 </div>
-{% endhighlight %}
-  </div>
-</section>
+{% endcapture %}
+
+<div class="content">
+  <p>To build intricate 2-dimensional layouts, you only need a <strong>single element</strong>: the <code>tile</code>:</p>
+</div>
+
+{% highlight html %}{{ tile_empty }}{% endhighlight %}
+
+{% include anchor.html name="Example" %}
+
+<div class="tile is-ancestor">
+  <div class="tile is-vertical is-8">
+    <div class="tile">
+      <div class="tile is-parent is-vertical">
+        <article class="tile is-child notification is-primary">
+          <p class="title">Vertical...</p>
+          <p class="subtitle">Top tile</p>
+        </article>
+        <article class="tile is-child notification is-warning">
+          <p class="title">...tiles</p>
+          <p class="subtitle">Bottom tile</p>
+        </article>
+      </div>
+      <div class="tile is-parent">
+        <article class="tile is-child notification is-info">
+          <p class="title">Middle tile</p>
+          <p class="subtitle">With an image</p>
+          <figure class="image is-4by3">
+            <img src="{{site.url}}/images/placeholders/640x480.png">
+          </figure>
+        </article>
+      </div>
+    </div>
+    <div class="tile is-parent">
+      <article class="tile is-child notification is-danger">
+        <p class="title">Wide tile</p>
+        <p class="subtitle">Aligned with the right tile</p>
+        <div class="content">
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+        </div>
+      </article>
+    </div>
+  </div>
+  <div class="tile is-parent">
+    <article class="tile is-child notification is-success">
+      <div class="content">
+        <p class="title">Tall tile</p>
+        <p class="subtitle">With even more content</p>
+        <div class="content">
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
+          <p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
+          <p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
+        </div>
+      </div>
+    </article>
+  </div>
+</div>
+
+{% highlight html %}{{ tile_default }}{% endhighlight %}
+
+{% include anchor.html name="Modifiers" %}
+
+<div class="content">
+  <p>The <code>tile</code> element has <strong>16 modifiers</strong>:</p>
+  <ul>
+    <li>
+      <strong>3 contextual</strong> modifiers
+      <ul>
+        <li><code>is-ancestor</code></li>
+        <li><code>is-parent</code></li>
+        <li><code>is-child</code></li>
+      </ul>
+    </li>
+    <li>
+      <strong>1 directional</strong> modifier
+      <ul>
+        <li><code>is-vertical</code></li>
+      </ul>
+    </li>
+    <li>
+      <strong>12 horizontal size</strong> modifiers
+      <ul>
+        <li>from <code>is-1</code></li>
+        <li>to <code>is-12</code></li>
+      </ul>
+    </li>
+  </ul>
+</div>
+
+{% include anchor.html name="How it works: Nesting" %}
+
+<div class="content">
+  <p>Everything is a tile! To create a grid of tiles, you only need to <strong>nest</strong> <code>tile</code> elements.</p>
+</div>
+
+<div class="columns">
+  <div class="column is-one-third">
+    <p>Start with an <strong>ancestor</strong> tile that will wrap all other tiles:</p>
+  </div>
+  <div class="column is-two-thirds">
+    {% highlight html %}{{ tile_ancestor }}{% endhighlight %}
+  </div>
+</div>
+
+<div class="columns">
+  <div class="column is-one-third">
+    <p>Add tile elements that will distribute themselves <strong>horizontally</strong>:</p>
+  </div>
+  <div class="column is-two-thirds">
+    {% highlight html %}{{ tile_horizontal }}{% endhighlight %}
+  </div>
+</div>
+
+<div class="columns">
+  <div class="column is-one-third">
+    <p>
+      You can <strong>resize</strong> any tile according to a <strong>12 column</strong> grid.
+      <br>
+      For example, <code>is-4</code> will take up 1/3 of the horizontal space:
+    </p>
+  </div>
+  <div class="column is-two-thirds">
+    {% highlight html %}{{ tile_resize }}{% endhighlight %}
+  </div>
+</div>
+
+<div class="columns">
+  <div class="column is-one-third">
+    <p>If you want to stack tiles <strong>vertically</strong>, add <code>is-vertical</code> on the parent tile:</p>
+  </div>
+  <div class="column is-two-thirds">
+    {% highlight html %}{{ tile_vertical }}{% endhighlight %}
+  </div>
+</div>
+
+<div class="columns">
+  <div class="column is-one-third">
+    <div class="content">
+      <p>As soon as you want to add <strong>content</strong> to a tile, just:</p>
+      <ul>
+        <li>add <em>any</em> class you want, like <code>box</code></li>
+        <li>add the <code>is-child</code> modifier on the tile</li>
+        <li>add the <code>is-parent</code> modifier on the <em>parent</em> tile</li>
+      </ul>
+    </div>
+  </div>
+  <div class="column is-two-thirds">
+    {% highlight html %}{{ tile_123 }}{% endhighlight %}
+  </div>
+</div>
+
+<div class="tile is-ancestor">
+  <div class="tile is-4 is-vertical is-parent">
+    <div class="tile is-child box">
+      <p class="title">One</p>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+    </div>
+    <div class="tile is-child box">
+      <p class="title">Two</p>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+    </div>
+  </div>
+  <div class="tile is-parent">
+    <div class="tile is-child box">
+      <p class="title">Three</p>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
+      <p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
+      <p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
+    </div>
+  </div>
+</div>
+
+{% highlight html %}{{ tile_lorem }}{% endhighlight %}
+
+{% include anchor.html name="Nesting requirements" %}
+
+<article class="message is-danger">
+  <div class="message-header">
+    3 levels deep at least...
+  </div>
+  <div class="message-body">
+    <div class="content">
+      <p>You need at least <strong>3 levels</strong> of hierarchy:</p>
+      {% highlight markdown %}{{ md_3_levels }}{% endhighlight %}
+    </div>
+  </div>
+</article>
+
+<article class="message is-success">
+  <div class="message-header">
+    ...but more levels if you want!
+  </div>
+  <div class="message-body">
+    <div class="content">
+      <p>You can, however, nest tiles deeper than that, and mix it up!</p>
+      {% highlight markdown %}{{ md_nesting }}{% endhighlight %}
+    </div>
+  </div>
+</article>
+
+<div class="tile is-ancestor">
+  <div class="tile is-vertical is-8">
+    <div class="tile">
+      <div class="tile is-parent is-vertical">
+        <article class="tile is-child box">
+          <p class="title">Vertical tiles</p>
+          <p class="subtitle">Top box</p>
+        </article>
+        <article class="tile is-child box">
+          <p class="title">Vertical tiles</p>
+          <p class="subtitle">Bottom box</p>
+        </article>
+      </div>
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <p class="title">Middle box</p>
+          <p class="subtitle">With an image</p>
+          <figure class="image is-4by3">
+            <img src="{{site.url}}/images/placeholders/640x480.png">
+          </figure>
+        </article>
+      </div>
+    </div>
+    <div class="tile is-parent">
+      <article class="tile is-child box">
+        <p class="title">Wide column</p>
+        <p class="subtitle">Aligned with the right column</p>
+        <div class="content">
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+        </div>
+      </article>
+    </div>
+  </div>
+  <div class="tile is-parent">
+    <article class="tile is-child box">
+      <div class="content">
+        <p class="title">Tall column</p>
+        <p class="subtitle">With even more content</p>
+        <div class="content">
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
+          <p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
+          <p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
+        </div>
+      </div>
+    </article>
+  </div>
+</div>
+
+{% highlight html %}{{ tile_any_content }}{% endhighlight %}
+
+{% include anchor.html name="3 columns" %}
+
+<div class="tile is-ancestor">
+  <div class="tile is-parent">
+    <article class="tile is-child box">
+      <p class="title">Hello World</p>
+      <p class="subtitle">What is up?</p>
+    </article>
+  </div>
+  <div class="tile is-parent">
+    <article class="tile is-child box">
+      <p class="title">Foo</p>
+      <p class="subtitle">Bar</p>
+    </article>
+  </div>
+  <div class="tile is-parent">
+    <article class="tile is-child box">
+      <p class="title">Third column</p>
+      <p class="subtitle">With some content</p>
+      <div class="content">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+      </div>
+    </article>
+  </div>
+</div>
+<div class="tile is-ancestor">
+  <div class="tile is-vertical is-8">
+    <div class="tile">
+      <div class="tile is-parent is-vertical">
+        <article class="tile is-child box">
+          <p class="title">Vertical tiles</p>
+          <p class="subtitle">Top box</p>
+        </article>
+        <article class="tile is-child box">
+          <p class="title">Vertical tiles</p>
+          <p class="subtitle">Bottom box</p>
+        </article>
+      </div>
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <p class="title">Middle box</p>
+          <p class="subtitle">With an image</p>
+          <figure class="image is-4by3">
+            <img src="{{site.url}}/images/placeholders/640x480.png">
+          </figure>
+        </article>
+      </div>
+    </div>
+    <div class="tile is-parent">
+      <article class="tile is-child box">
+        <p class="title">Wide column</p>
+        <p class="subtitle">Aligned with the right column</p>
+        <div class="content">
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+        </div>
+      </article>
+    </div>
+  </div>
+  <div class="tile is-parent">
+    <article class="tile is-child box">
+      <div class="content">
+        <p class="title">Tall column</p>
+        <p class="subtitle">With even more content</p>
+        <div class="content">
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
+          <p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
+          <p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
+        </div>
+      </div>
+    </article>
+  </div>
+</div>
+<div class="tile is-ancestor">
+  <div class="tile is-parent">
+    <article class="tile is-child box">
+      <p class="title">Side column</p>
+      <p class="subtitle">With some content</p>
+      <div class="content">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+      </div>
+    </article>
+  </div>
+  <div class="tile is-parent is-8">
+    <article class="tile is-child box">
+      <p class="title">Main column</p>
+      <p class="subtitle">With some content</p>
+      <div class="content">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+      </div>
+    </article>
+  </div>
+</div>
+
+{% highlight html %}{{ tile_3_columns }}{% endhighlight %}
+
+{% include anchor.html name="4 columns" %}
+
+<div class="tile is-ancestor">
+  <div class="tile is-parent">
+    <article class="tile is-child box">
+      <p class="title">One</p>
+      <p class="subtitle">Subtitle</p>
+    </article>
+  </div>
+  <div class="tile is-parent">
+    <article class="tile is-child box">
+      <p class="title">Two</p>
+      <p class="subtitle">Subtitle</p>
+    </article>
+  </div>
+  <div class="tile is-parent">
+    <article class="tile is-child box">
+      <p class="title">Three</p>
+      <p class="subtitle">Subtitle</p>
+    </article>
+  </div>
+  <div class="tile is-parent">
+    <article class="tile is-child box">
+      <p class="title">Four</p>
+      <p class="subtitle">Subtitle</p>
+    </article>
+  </div>
+</div>
+<div class="tile is-ancestor">
+  <div class="tile is-vertical is-9">
+    <div class="tile">
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <p class="title">Five</p>
+          <p class="subtitle">Subtitle</p>
+          <div class="content">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
+          </div>
+        </article>
+      </div>
+      <div class="tile is-8 is-vertical">
+        <div class="tile">
+          <div class="tile is-parent">
+            <article class="tile is-child box">
+              <p class="title">Six</p>
+              <p class="subtitle">Subtitle</p>
+            </article>
+          </div>
+          <div class="tile is-parent">
+            <article class="tile is-child box">
+              <p class="title">Seven</p>
+              <p class="subtitle">Subtitle</p>
+            </article>
+          </div>
+        </div>
+        <div class="tile is-parent">
+          <article class="tile is-child box">
+            <p class="title">Eight</p>
+            <p class="subtitle">Subtitle</p>
+          </article>
+        </div>
+      </div>
+    </div>
+    <div class="tile">
+      <div class="tile is-8 is-parent">
+        <article class="tile is-child box">
+          <p class="title">Nine</p>
+          <p class="subtitle">Subtitle</p>
+          <div class="content">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+          </div>
+        </article>
+      </div>
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <p class="title">Ten</p>
+          <p class="subtitle">Subtitle</p>
+          <div class="content">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+          </div>
+        </article>
+      </div>
+    </div>
+  </div>
+  <div class="tile is-parent">
+    <article class="tile is-child box">
+      <div class="content">
+        <p class="title">Eleven</p>
+        <p class="subtitle">Subtitle</p>
+        <div class="content">
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
+          <p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
+        </div>
+      </div>
+    </article>
+  </div>
+</div>
+<div class="tile is-ancestor">
+  <div class="tile is-parent">
+    <article class="tile is-child box">
+      <p class="title">Twelve</p>
+      <p class="subtitle">Subtitle</p>
+      <div class="content">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.</p>
+      </div>
+    </article>
+  </div>
+  <div class="tile is-parent is-6">
+    <article class="tile is-child box">
+      <p class="title">Thirteen</p>
+      <p class="subtitle">Subtitle</p>
+      <div class="content">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+      </div>
+    </article>
+  </div>
+  <div class="tile is-parent">
+    <article class="tile is-child box">
+      <p class="title">Fourteen</p>
+      <p class="subtitle">Subtitle</p>
+      <div class="content">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.</p>
+      </div>
+    </article>
+  </div>
+</div>
+
+{% highlight html %}{{ tile_4_columns }}{% endhighlight %}