Fix tiles

diff --git a/docs/_includes/snippet.html b/docs/_includes/snippet.html
index d19c39e32469e13c898747a893c0e92d99a95675..a9aa8ae2f9af2fc52835c24f0d5c7dd99002e3ba 100644 (file)
--- a/docs/_includes/snippet.html
+++ b/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 }}

diff --git a/docs/_sass/example.sass b/docs/_sass/example.sass
index 9faa5419637977ac1e08856ec81335ca49eec141..3936522b8ff5e655158793c2a2491c9887dab48b 100644 (file)
--- a/docs/_sass/example.sass
+++ b/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

diff --git a/docs/_sass/specific.sass b/docs/_sass/specific.sass
index e67d8bc398d669bdd6427f90435c348e5af3b556..c4884131618abe7fe3098c18b9cb12b868a7782d 100644 (file)
--- a/docs/_sass/specific.sass
+++ b/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

diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 1402495477e84a7074584b062234bb710663c2bc..3ea97d6bf5d37c815694ea5e3e35690815bc25cb 100644 (file)
--- a/docs/css/bulma-docs.css
+++ b/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;

diff --git a/docs/documentation/layout/footer.html b/docs/documentation/layout/footer.html
index 7226647fc30cdc18638a6cd0ed5c5b3733fc23b9..410a6b7acf4b64f8978fe71139cbe5b63936ef8b 100644 (file)
--- a/docs/documentation/layout/footer.html
+++ b/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 %}

diff --git a/docs/documentation/layout/hero.html b/docs/documentation/layout/hero.html
index 63058c43ae3153dcf3f9e3760284c136b1f12c59..f9e616d12d4a4b2c4dc9f248389b5e21a8740696 100644 (file)
--- a/docs/documentation/layout/hero.html
+++ b/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 %}

diff --git a/docs/documentation/layout/level.html b/docs/documentation/layout/level.html
index eeb4de7a498a85e19fc70048b1c207fa8087cd8b..0c4e746ad74121d1cd17864c5f4a659e571bd7f0 100644 (file)
--- a/docs/documentation/layout/level.html
+++ b/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 %}

diff --git a/docs/documentation/layout/media-object.html b/docs/documentation/layout/media-object.html
index 805ddc9614fd4f107010a85b08bb259bd5afcb46..a86900234fcb27b87da74a71785bbb28bbbefbff 100644 (file)
--- a/docs/documentation/layout/media-object.html
+++ b/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 %}

diff --git a/docs/documentation/layout/section.html b/docs/documentation/layout/section.html
index 49c6bd33c2fa642249be08ba9cfeccccc561ef0c..b1b2452e87d2124f4d3b46c92c2b047d05f019d8 100644 (file)
--- a/docs/documentation/layout/section.html
+++ b/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 %}

diff --git a/docs/documentation/layout/tiles.html b/docs/documentation/layout/tiles.html
index 3a295c919db6f4e5bac56677ab077ff7580525ff..6cdb413ab50cace21683e2e3abb8ba83e1296584 100644 (file)
--- a/docs/documentation/layout/tiles.html
+++ b/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 %}