Do elements

docs/_data/links.json

@@ -40,10 +40,50 @@
       "name": "Elements",
       "path": "/documentation/elements"
     },
-    "button": {
+    "elements-box": {
+      "name": "Box",
+      "path": "/documentation/elements/box"
+    },
+    "elements-button": {
       "name": "Button",
       "path": "/documentation/elements/button"
     },
+    "elements-content": {
+      "name": "Content",
+      "path": "/documentation/elements/content"
+    },
+    "elements-delete": {
+      "name": "Delete",
+      "path": "/documentation/elements/delete"
+    },
+    "elements-icon": {
+      "name": "Icon",
+      "path": "/documentation/elements/icon"
+    },
+    "elements-image": {
+      "name": "Image",
+      "path": "/documentation/elements/image"
+    },
+    "elements-notification": {
+      "name": "Notification",
+      "path": "/documentation/elements/notification"
+    },
+    "elements-progress": {
+      "name": "Progress bars",
+      "path": "/documentation/elements/progress"
+    },
+    "elements-table": {
+      "name": "Table",
+      "path": "/documentation/elements/table"
+    },
+    "elements-tag": {
+      "name": "Tag",
+      "path": "/documentation/elements/tag"
+    },
+    "elements-title": {
+      "name": "Title",
+      "path": "/documentation/elements/title"
+    },
     "components": {
       "name": "Components",
       "path": "/documentation/components"
@@ -91,6 +131,7 @@
   },
   "order": {
     "columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"],
+    "elements": ["elements-box", "elements-button", "elements-content", "elements-delete", "elements-icon", "elements-image", "elements-notification", "elements-progress", "elements-table", "elements-tag", "elements-title"],
     "components": ["components-breadcrumb", "components-card", "components-dropdown", "components-menu", "components-message", "components-modal", "components-navbar", "components-pagination", "components-panel", "components-tabs"]
   }
 }

docs/_includes/elements/improve-page.html

@@ -1,5 +1,4 @@
-<section class="section bd-typo">
+<div class="bd-typo">
-  <div class="container">
   <p class="has-text-grey-light">
     <a href="{{ site.url }}/made-with-bulma/">
       <img src="{{ site.url }}/images/made-with-bulma.png" alt="Made with Bulma" width="128" height="24">
@@ -12,5 +11,4 @@
       Improve this page on GitHub
     </a>
   </p>
-  </div>
+</div>
-</section>

docs/_layouts/documentation.html

@@ -41,6 +41,7 @@ route: documentation
             </ul>
           </nav>
 
+          {% if previous_link or next_link %}
             <nav class="bd-prev-next">
               {% if previous_link %}
                 <a href="{{ site.url }}{{ previous_link.path }}" title="{{ previous_link.name }}">
@@ -62,6 +63,7 @@ route: documentation
                 </span>
               {% endif %}
             </nav>
+          {% endif %}
         </div>
 
         <header class="bd-header">
@@ -71,6 +73,15 @@ route: documentation
           <p class="subtitle is-4">
             {{ page.subtitle }}
           </p>
+
+          {% if page.meta %}
+            {%
+              include meta.html
+              colors=page.meta.colors
+              sizes=page.meta.sizes
+              variables=page.meta.variables
+            %}
+          {% endif %}
         </header>
 
         <div class="bd-content">

docs/_sass/main.sass

@@ -81,6 +81,7 @@
   .bd-main
     padding: 0 3rem
   .bd-lead
-    padding: 3rem 3rem 3rem 0
+    margin-left: -3rem
+    padding: 3rem
   .bd-side
     padding: 3rem 0 3rem 1.5rem

docs/_sass/native.sass

@@ -1,4 +1,5 @@
 .native-js
+  border-top: 2px solid $background
   display: none
   font-size: 1rem
   opacity: 0

docs/_sass/specific.sass

@@ -1,3 +1,6 @@
+.bd-typo
+  margin-top: 3rem
+
 .bd-has-text-rss
   color: $rss
 

docs/css/bulma-docs.css

@@ -34,7 +34,7 @@
   width: 0.5em;
 }
 
-.box:not(:last-child), .content:not(:last-child), .notification:not(:last-child), .progress:not(:last-child), .table-container:not(:last-child), .title:not(:last-child),
+.box:not(:last-child), .content:not(:last-child), .notification:not(:last-child), .progress:not(:last-child), .table:not(:last-child), .table-container:not(:last-child), .title:not(:last-child),
 .subtitle:not(:last-child), .block:not(:last-child), .highlight:not(:last-child), .breadcrumb:not(:last-child), .level:not(:last-child), .message:not(:last-child), .tabs:not(:last-child), .bd-snippet:not(:last-child), .bd-callout:not(:last-child) {
   margin-bottom: 1.5rem;
 }
@@ -4545,7 +4545,6 @@ a.box:active {
 .table {
   background-color: white;
   color: #363636;
-  margin-bottom: 1.5rem;
 }
 
 .table td,
@@ -9592,7 +9591,8 @@ label.panel-block:hover {
     padding: 0 3rem;
   }
   .bd-lead {
-    padding: 3rem 3rem 3rem 0;
+    margin-left: -3rem;
+    padding: 3rem;
   }
   .bd-side {
     padding: 3rem 0 3rem 1.5rem;
@@ -10391,6 +10391,10 @@ svg {
   text-decoration: underline;
 }
 
+.bd-typo {
+  margin-top: 3rem;
+}
+
 .bd-has-text-rss {
   color: #f26522;
 }
@@ -12330,6 +12334,7 @@ html.route-index .hero.is-primary a.column:hover .title strong {
 }
 
 .native-js {
+  border-top: 2px solid whitesmoke;
   display: none;
   font-size: 1rem;
   opacity: 0;

docs/documentation.html

@@ -0,0 +1,8 @@
+---
+title: Documentation
+subtitle: "Everything you need to <strong>create a website</strong> with Bulma"
+layout: documentation
+breadcrumb:
+- home
+- documentation
+---

docs/documentation/components/breadcrumb.html

@@ -10,10 +10,9 @@ breadcrumb:
 - components
 - components-breadcrumb
 meta:
-- since: "0.4.3"
+  variables: true
-- variables: true
+  colors: false
-- colors: false
+  sizes: true
-- sizes: true
 ---
 
 {% capture breadcrumb_example %}

docs/documentation/components/card.html

@@ -1,6 +1,6 @@
 ---
 title: Card
-subtile: "An all-around flexible and composable component"
+subtitle: "An all-around flexible and composable component"
 layout: documentation
 doc-tab: components
 doc-subtab: card
@@ -10,9 +10,9 @@ breadcrumb:
 - components
 - components-card
 meta:
-- variables: true
+  variables: true
-- colors: false
+  colors: false
-- sizes: false
+  sizes: false
 ---
 
 {% capture card_example %}

docs/documentation/components/dropdown.html

@@ -10,9 +10,9 @@ breadcrumb:
 - components
 - components-dropdown
 meta:
-- colors: false
+  colors: false
-- sizes: false
+  sizes: false
-- variables: true
+  variables: true
 ---
 
 {% capture dropdown_example %}

docs/documentation/components/menu.html

@@ -10,9 +10,9 @@ breadcrumb:
 - components
 - components-menu
 meta:
-- colors: false
+  colors: false
-- sizes: false
+  sizes: false
-- variables: true
+  variables: true
 ---
 
 {% capture menu_example %}

docs/documentation/components/message.html

@@ -4,15 +4,15 @@ subtitle: "Colored <strong>message</strong> blocks, to emphasize part of your pa
 layout: documentation
 doc-tab: components
 doc-subtab: message
-meta:
-- colors: true
-- sizes: true
-- variables: true
 breadcrumb:
 - home
 - documentation
 - components
 - components-message
+meta:
+  colors: true
+  sizes: true
+  variables: true
 ---
 
 {% capture message_example %}

docs/documentation/components/modal.html

@@ -4,15 +4,15 @@ subtitle: "A classic <strong>modal</strong> overlay, in which you can include <e
 layout: documentation
 doc-tab: components
 doc-subtab: modal
-meta:
-- colors: false
-- sizes: false
-- variables: true
 breadcrumb:
 - home
 - documentation
 - components
 - components-modal
+meta:
+  colors: false
+  sizes: false
+  variables: true
 ---
 
 {% capture modal %}

docs/documentation/components/navbar.html

@@ -10,9 +10,9 @@ breadcrumb:
 - components
 - components-navbar
 meta:
-- colors: true
+  colors: true
-- sizes: false
+  sizes: false
-- variables: true
+  variables: true
 ---
 
 {% capture navbar_example %}

docs/documentation/components/pagination.html

@@ -10,9 +10,9 @@ breadcrumb:
 - components
 - components-pagination
 meta:
-- colors: false
+  colors: false
-- sizes: true
+  sizes: true
-- variables: true
+  variables: true
 ---
 
 {% capture pagination_example %}

docs/documentation/components/panel.html

@@ -10,9 +10,9 @@ breadcrumb:
 - components
 - components-panel
 meta:
-- colors: false
+  colors: false
-- sizes: false
+  sizes: false
-- variables: true
+  variables: true
 ---
 
 {% capture panel_example %}

docs/documentation/components/tabs.html

@@ -10,9 +10,9 @@ breadcrumb:
 - components
 - components-tabs
 meta:
-- colors: false
+  colors: false
-- sizes: true
+  sizes: true
-- variables: true
+  variables: true
 ---
 
 {% capture tabs_example %}

docs/documentation/elements/box.html

@@ -1,12 +1,20 @@
 ---
 title: Box
+subtitle: "A white <strong>box</strong> to contain other elements"
 layout: documentation
 doc-tab: elements
 doc-subtab: box
+breadcrumb:
+- home
+- documentation
+- elements
+- elements-box
+meta:
+  colors: false
+  sizes: false
+  variables: true
 ---
 
-{% include subnav/subnav-elements.html %}
-
 {% capture box_example %}
 <div class="box">
   <article class="media">
@@ -47,32 +55,14 @@ doc-subtab: box
 </div>
 {% endcapture %}
 
-<section class="section">
+<div class="content">
-  <div class="container">
-    <h1 class="title">Box</h1>
-    <h2 class="subtitle">
-      A white <strong>box</strong> to contain other elements
-    </h2>
-    {%
-      include meta.html
-      colors=false
-      sizes=false
-      variables=true
-    %}
-
-    <hr>
-
-    <div class="content">
   <p>
     The <code>.box</code> element is simply a container with a shadow, a border, a radius, and some padding.
     <br>
     For example, you can include a media object:
   </p>
-    </div>
+</div>
 
-    {% include snippet.html content=box_example more=true %}
+{% include snippet.html content=box_example more=true %}
 
-    {% include variables.html type='element' %}
+{% include variables.html type='element' %}
-
-  </div>
-</section>

docs/documentation/elements/button.html

@@ -8,11 +8,11 @@ breadcrumb:
 - home
 - documentation
 - elements
-- button
+- elements-button
 meta:
-- colors: true
+  colors: true
-- sizes: true
+  sizes: true
-- variables: true
+  variables: true
 ---
 
 {% capture button_example %}

docs/documentation/elements/content.html

@@ -1,8 +1,18 @@
 ---
 title: Content
+subtitle: "A single class to handle WYSIWYG generated content, where only <strong>HTML tags</strong> are available"
 layout: documentation
 doc-tab: elements
 doc-subtab: content
+breadcrumb:
+- home
+- documentation
+- elements
+- elements-content
+meta:
+  colors: false
+  sizes: true
+  variables: true
 ---
 
 {% capture content_pre %}
@@ -101,24 +111,7 @@ doc-subtab: content
 </div>
 {% endcapture %}
 
-{% include subnav/subnav-elements.html %}
+<div class="content">
-
-<section class="section">
-  <div class="container">
-    <h1 class="title">Content</h1>
-    <h2 class="subtitle">
-      A single class to handle WYSIWYG generated content, where only <strong>HTML tags</strong> are available
-    </h2>
-    {%
-      include meta.html
-      colors=false
-      sizes=true
-      variables=true
-    %}
-
-    <hr>
-
-    <div class="content">
   <p>When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use <code>content</code> as container. It can handle almost any HTML tag:</p>
   <ul>
     <li><code>&lt;p&gt;</code> paragraphs</li>
@@ -129,16 +122,16 @@ doc-subtab: content
     <li><code>&lt;table&gt;</code> <code>&lt;tr&gt;</code> <code>&lt;th&gt;</code> <code>&lt;td&gt;</code> tables</li>
   </ul>
   <p>This <code>content</code> class can be used in <em>any</em> context where you just want to (or can only) write some <strong>text</strong>. For example, it's used for the paragraph you're currently reading.</p>
-    </div>
+</div>
 
-    {% include snippet.html content=content_example %}
+{% include snippet.html content=content_example %}
 
-    {% include anchor.html name="Sizes" %}
+{% include anchor.html name="Sizes" %}
 
-    <div class="content">
+<div class="content">
   <p>You can use the <code>is-small</code>, <code>is-medium</code> and <code>is-large</code> modifiers to change the font size.</p>
-    </div>
+</div>
-    <div class="bd-example">
+<div class="bd-example">
   <div class="content is-small">
     <h1>Hello World</h1>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.</p>
@@ -151,8 +144,8 @@ doc-subtab: content
       <li>Ut non enim metus.</li>
     </ul>
   </div>
-    </div>
+</div>
-    <div class="bd-example">
+<div class="bd-example">
   <div class="content is-medium">
     <h1>Hello World</h1>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.</p>
@@ -165,8 +158,8 @@ doc-subtab: content
       <li>Ut non enim metus.</li>
     </ul>
   </div>
-    </div>
+</div>
-    <div class="bd-example">
+<div class="bd-example">
   <div class="content is-large">
     <h1>Hello World</h1>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.</p>
@@ -179,9 +172,6 @@ doc-subtab: content
       <li>Ut non enim metus.</li>
     </ul>
   </div>
-    </div>
+</div>
 
-    {% include variables.html type='element' %}
+{% include variables.html type='element' %}
-
-  </div>
-</section>

docs/documentation/elements/delete.html

@@ -1,8 +1,18 @@
 ---
 title: Delete
+subtitle: "A versatile <strong>delete</strong> cross"
 layout: documentation
 doc-tab: elements
 doc-subtab: delete
+breadcrumb:
+- home
+- documentation
+- elements
+- elements-delete
+meta:
+  colors: false
+  sizes: true
+  variables: false
 ---
 
 {% capture cross_example %}
@@ -40,53 +50,33 @@ doc-subtab: delete
 </article>
 {% endcapture %}
 
-{% include subnav/subnav-elements.html %}
+<div class="content">
-
-<section class="section">
-  <div class="container">
-    <h1 class="title">Delete</h1>
-    <h2 class="subtitle">
-      A versatile <strong>delete</strong> cross
-    </h2>
-    {%
-      include meta.html
-      colors=false
-      sizes=true
-      variables=false
-    %}
-
-    <hr>
-
-    <div class="content">
   <p>
     The <code>.delete</code> element is a stand-alone element that can be used in different contexts.
   </p>
   <p>
     On its own, it's a simple circle with a cross:
   </p>
-    </div>
+</div>
 
-    {% include snippet.html content=cross_example %}
+{% include snippet.html content=cross_example %}
 
-    {% include anchor.html name="Sizes" %}
+{% include anchor.html name="Sizes" %}
 
-    <div class="content">
+<div class="content">
   <p>
     It comes in <strong>4 sizes</strong>:
   </p>
-    </div>
+</div>
 
-    {% include snippet.html content=cross_sizes_example %}
+{% include snippet.html content=cross_sizes_example %}
 
-    {% include anchor.html name="Combinations" %}
+{% include anchor.html name="Combinations" %}
 
-    <div class="content">
+<div class="content">
   <p>
     Bulma uses it for the <a href="/documentation/elements/tag/">tags</a>, the <a href="/documentation/elements/notification/">notifications</a>, and the <a href="/documentation/components/message/">messages</a>:
   </p>
-    </div>
+</div>
 
-    {% include snippet.html content=cross_elements_example %}
+{% include snippet.html content=cross_elements_example %}
-
-  </div>
-</section>

docs/documentation/elements/icon.html

@@ -1,5 +1,6 @@
 ---
 title: Icon
+subtitle: 'Bulma is compatible with <strong>all icon font libraries</strong>: <a href="https://fontawesome.com/">Font Awesome 5</a>, <a href="http://fontawesome.io/">Font Awesome 4</a>, <a href="https://materialdesignicons.com">Material Design Icons</a>, <a href="https://useiconic.com/open">Open Iconic</a>, <a href="http://ionicons.com/">Ionicons</a> etc.'
 fontawesome4: true
 iconic: true
 ionicons: true
@@ -7,6 +8,15 @@ mdi: true
 layout: documentation
 doc-tab: elements
 doc-subtab: icon
+breadcrumb:
+- home
+- documentation
+- elements
+- elements-icon
+meta:
+  colors: true
+  sizes: true
+  variables: true
 ---
 
 {% capture icon_example %}
@@ -48,63 +58,64 @@ doc-subtab: icon
 </span>
 {% endcapture %}
 
-{% include subnav/subnav-elements.html %}
+{% capture stacked_medium %}
+<span class="icon is-medium">
+  <span class="fa-stack">
+    <i class="fas fa-circle fa-stack-2x"></i>
+    <i class="fas fa-flag fa-stack-1x fa-inverse"></i>
+  </span>
+</span>
+{% endcapture %}
 
-<section class="section">
+{% capture stacked_large %}
-  <div class="container">
+<span class="icon is-large">
-    <h1 class="title">Icons</h1>
+  <span class="fa-stack fa-lg">
-    <h2 class="subtitle">
+    <i class="fas fa-camera fa-stack-1x"></i>
-      Bulma is compatible with <strong>all icon font libraries</strong>: <a href="https://fontawesome.com/">Font Awesome 5</a>, <a href="http://fontawesome.io/">Font Awesome 4</a>, <a href="https://materialdesignicons.com">Material Design Icons</a>, <a href="https://useiconic.com/open">Open Iconic</a>, <a href="http://ionicons.com/">Ionicons</a> etc.
+    <i class="fas fa-ban fa-stack-2x has-text-danger"></i>
-    </h2>
+  </span>
-    {%
+</span>
-      include meta.html
+{% endcapture %}
-      colors=true
-      sizes=true
-      variables=true
-    %}
 
-    <hr>
+<div class="content">
-
-    <div class="content">
   <p>
     The <code>icon</code> element is a <strong>container</strong> for any type of <strong>icon font</strong>. Because the icons can take a few seconds to load, and because you want control over the <strong>space</strong> the icons will take, you can use the <code>icon</code> class as a reliable square container that will prevent the page to "jump" on page load.</p>
-    </div>
+</div>
 
-    <div class="block bd-icon-size">
+<div class="block bd-icon-size">
   {% include snippet.html content=icon_example %}
-    </div>
+</div>
 
-    <div class="message is-info">
+<div class="message is-info">
   <div class="message-body">
     The <strong>yellow background</strong> is only here for demonstration purposes, to highlight the icon container's area.
   </div>
-    </div>
+</div>
 
 
-    <div class="content">
+<div class="content">
   <p>
     By default, the <code>icon</code> container will take up <em>exactly</em> <code>1.5rem x 1.5rem</code>. The icon itself is sized accordingly to the icon library you're using. For example, Font Awesome 5 icons will <strong>inherit</strong> the font size.</p>
-    </div>
+</div>
 
-    {% include anchor.html name="Colors" %}
+{% include anchor.html name="Colors" %}
 
-    <div class="content">
+<div class="content">
   <p>
     Since icon fonts are simply <strong>text</strong>, you can use the <a href="/documentation/modifiers/typography-helpers/#colors">text color modifiers</a> to change the icon's color.
   </p>
-    </div>
+</div>
 
-    {% include snippet.html content=icon_color_example %}
+{% include snippet.html content=icon_color_example %}
 
-    {% include anchor.html name="Sizes" %}
+{% include anchor.html name="Sizes" %}
 
-    <div class="content">
+<div class="content">
   <p>
     The Bulma <code>icon</code> container comes in <strong>4 sizes</strong>. It should always be <em>slightly bigger</em> than the icon it contains. For example, Font Awesome 5 icons use a font-size of <code>1em</code> by default (since it inherits the font size), but provides <a href="https://fontawesome.com/how-to-use/svg-with-js#additional-styling" target="_blank">additional sizes</a>.
   </p>
-    </div>
+</div>
 
-    <table class="table is-bordered">
+<table class="table is-bordered">
   <thead>
     <tr>
       <th>Container class</th>
@@ -270,11 +281,11 @@ doc-subtab: icon
       </td>
     </tr>
   </tbody>
-    </table>
+</table>
 
-    {% include anchor.html name="Font Awesome variations" %}
+{% include anchor.html name="Font Awesome variations" %}
 
-    <div class="content">
+<div class="content">
   <p>
     Font Awesome also provides modifier classes for:
   </p>
@@ -295,9 +306,9 @@ doc-subtab: icon
       stacked icons
     </li>
   </ul>
-    </div>
+</div>
 
-    <table class="table is-bordered">
+<table class="table is-bordered">
   <thead>
     <tr>
       <th>Type</th>
@@ -388,12 +399,7 @@ doc-subtab: icon
         Stacked
       </td>
       <td>
-            {% highlight html %}<span class="icon is-medium">
+        {% highlight html %}{{ stacked_medium }}{% endhighlight %}
-  <span class="fa-stack">
-    <i class="fas fa-circle fa-stack-2x"></i>
-    <i class="fas fa-flag fa-stack-1x fa-inverse"></i>
-  </span>
-</span>{% endhighlight %}
       </td>
       <td class="bd-icon-size">
         <span class="icon is-medium">
@@ -406,12 +412,7 @@ doc-subtab: icon
     </tr>
     <tr>
       <td>
-            {% highlight html %}<span class="icon is-large">
+        {% highlight html %}{{ stacked_large }}{% endhighlight %}
-  <span class="fa-stack fa-lg">
-    <i class="fas fa-camera fa-stack-1x"></i>
-    <i class="fas fa-ban fa-stack-2x has-text-danger"></i>
-  </span>
-</span>{% endhighlight %}
       </td>
       <td class="bd-icon-size">
         <span class="icon is-large">
@@ -423,17 +424,17 @@ doc-subtab: icon
       </td>
     </tr>
   </tbody>
-    </table>
+</table>
 
-    {% include anchor.html name="Material Design Icons" %}
+{% include anchor.html name="Material Design Icons" %}
 
-    <div class="content">
+<div class="content">
   <p>
     Here is how the <code>icon</code> container can be used with <a href="https://materialdesignicons.com">Material Design Icons</a>.
   </p>
-    </div>
+</div>
 
-    <table class="table is-bordered">
+<table class="table is-bordered">
   <thead>
     <tr>
       <th>Container class</th>
@@ -625,9 +626,9 @@ doc-subtab: icon
       </td>
     </tr>
   </tbody>
-    </table>
+</table>
 
-    <div class="content">
+<div class="content">
   <p>
     MDI also provides modifier classes for:
   </p>
@@ -639,9 +640,9 @@ doc-subtab: icon
       rotated &amp; flipped icons
     </li>
   </ul>
-    </div>
+</div>
 
-    <table class="table is-bordered">
+<table class="table is-bordered">
   <thead>
     <tr>
       <th>Type</th>
@@ -747,17 +748,17 @@ doc-subtab: icon
       </td>
     </tr>
   </tbody>
-    </table>
+</table>
 
-    {% include anchor.html name="Open Iconic" %}
+{% include anchor.html name="Open Iconic" %}
 
-    <div class="content">
+<div class="content">
   <p>
     Here is how the <code>icon</code> container can be used with <a href="https://useiconic.com/open">Open Iconic</a>.
   </p>
-    </div>
+</div>
 
-    <table class="table is-bordered">
+<table class="table is-bordered">
   <thead>
     <tr>
       <th>Container class</th>
@@ -845,17 +846,17 @@ doc-subtab: icon
       </td>
     </tr>
   </tbody>
-    </table>
+</table>
 
-    {% include anchor.html name="Ionicons" %}
+{% include anchor.html name="Ionicons" %}
 
-    <div class="content">
+<div class="content">
   <p>
     Here is how the <code>icon</code> container can be used with <a href="http://ionicons.com">Ionicons</a>.
   </p>
-    </div>
+</div>
 
-    <table class="table is-bordered">
+<table class="table is-bordered">
   <thead>
     <tr>
       <th>Container class</th>
@@ -943,9 +944,6 @@ doc-subtab: icon
       </td>
     </tr>
   </tbody>
-    </table>
+</table>
 
-    {% include variables.html type='element' %}
+{% include variables.html type='element' %}
-
-  </div>
-</section>

docs/documentation/elements/image.html

@@ -1,5 +1,6 @@
 ---
 title: Image
+subtitle: "A container for <strong>responsive images</strong>"
 layout: documentation
 doc-tab: elements
 doc-subtab: image
@@ -11,6 +12,15 @@ dimensions:
 - 64
 - 96
 - 128
+breadcrumb:
+- home
+- documentation
+- elements
+- elements-image
+meta:
+  colors: false
+  sizes: false
+  variables: true
 ---
 
 {% capture image %}
@@ -25,36 +35,19 @@ dimensions:
 </figure>
 {% endcapture %}
 
-{% include subnav/subnav-elements.html %}
+<div class="content">
-
-<section class="section">
-  <div class="container">
-    <h1 class="title">Images</h1>
-    <h2 class="subtitle">
-      A container for <strong>responsive images</strong>
-    </h2>
-    {%
-      include meta.html
-      colors=false
-      sizes=false
-      variables=true
-    %}
-
-    <hr>
-
-    <div class="content">
   <p>Because images can take a few seconds to load (or not at all), use the <code>.image</code> container to specify a <strong>precisely sized</strong> container so that your layout isn't broken because of image loading or image errors.</p>
-    </div>
+</div>
 
-    {% include snippet.html content=image %}
+{% include snippet.html content=image %}
 
-    {% include anchor.html name="Fixed square images" %}
+{% include anchor.html name="Fixed square images" %}
 
-    <div class="content">
+<div class="content">
   <p>There are <strong>7</strong> dimensions to choose from, useful for <strong>avatars</strong>:</p>
-    </div>
+</div>
 
-    <table class="table is-bordered">
+<table class="table is-bordered">
   <tbody>
     {% for dimension in page.dimensions %}
       <tr>
@@ -64,23 +57,23 @@ dimensions:
       </tr>
     {% endfor %}
   </tbody>
-    </table>
+</table>
 
-    {% include anchor.html name="Retina images" %}
+{% include anchor.html name="Retina images" %}
 
-    <div class="content">
+<div class="content">
   <p>Because the image is fixed in size, you can use an image that is <strong>twice as big</strong>. So for example, in a <code>128x128</code> container, you can use a <code>256x256</code> image, but resized to <strong>128x128</strong> pixels.</p>
-    </div>
+</div>
 
-    {% include snippet.html content=retina_image %}
+{% include snippet.html content=retina_image %}
 
-    {% include anchor.html name="Responsive images with ratios" %}
+{% include anchor.html name="Responsive images with ratios" %}
 
-    <div class="content">
+<div class="content">
   <p>If you don't know the exact dimensions but know the <strong>ratio</strong> instead, you can use one of the <strong>16 ratio modifiers</strong>, which include [common aspect ratios in still photography](https://en.wikipedia.org/wiki/Aspect_ratio_(image)#Still_photography):</p>
-    </div>
+</div>
 
-    <table id="images" class="table is-bordered">
+<table id="images" class="table is-bordered">
   <tbody>
     <tr>
       <td><code>image is-square</code></td>
@@ -162,14 +155,11 @@ dimensions:
     <td><figure class="image is-1by3"><img src="{{site.url}}/images/placeholders/240x720.png"></figure></td>
     <td>1 by 3</td>
   </tr>
-		</tbody>
+</tbody>
-    </table>
+</table>
 
-    <div class="content">
+<div class="content">
   <p>The <code>.image</code> container will take up the <strong>whole width</strong> while maintaining the perfect ratio.</p>
-    </div>
+</div>
 
-    {% include variables.html type='element' %}
+{% include variables.html type='element' %}
-
-  </div>
-</section>

docs/documentation/elements/notification.html

@@ -1,8 +1,18 @@
 ---
 title: Notification
+subtitle: "Bold <strong>notification</strong> blocks, to alert your users of something"
 layout: documentation
 doc-tab: elements
 doc-subtab: notification
+breadcrumb:
+- home
+- documentation
+- elements
+- elements-notification
+meta:
+  colors: true
+  sizes: false
+  variables: true
 ---
 
 {% capture notification %}
@@ -25,30 +35,10 @@ doc-subtab: notification
 {% endfor %}
 {% endcapture %}
 
-{% include subnav/subnav-elements.html %}
+{% include snippet.html content=notification %}
 
-<section class="section">
+{% include anchor.html name="Colors" %}
-  <div class="container">
-    <h1 class="title">Notifications</h1>
-    <h2 class="subtitle">
-      Bold <strong>notification</strong> blocks, to alert your users of something
-    </h2>
-    {%
-      include meta.html
-      colors=true
-      sizes=false
-      variables=true
-    %}
 
-    <hr>
+{% include snippet.html content=notification_colors %}
 
-    {% include snippet.html content=notification %}
+{% include variables.html type='element' %}
-
-    {% include anchor.html name="Colors" %}
-
-    {% include snippet.html content=notification_colors %}
-
-    {% include variables.html type='element' %}
-
-  </div>
-</section>

docs/documentation/elements/progress.html

@@ -1,8 +1,18 @@
 ---
 title: Progress Bar
+subtitle: "Native HTML <strong>progress</strong> bars"
 layout: documentation
 doc-tab: elements
 doc-subtab: progress
+breadcrumb:
+- home
+- documentation
+- elements
+- elements-progress
+meta:
+  colors: true
+  sizes: true
+  variables: true
 ---
 
 {% capture progress %}
@@ -25,34 +35,14 @@ doc-subtab: progress
 <progress class="progress is-large" value="60" max="100">60%</progress>
 {% endcapture %}
 
-{% include subnav/subnav-elements.html %}
+{% include snippet.html content=progress %}
 
-<section class="section">
+{% include anchor.html name="Colors" %}
-  <div class="container">
-    <h1 class="title">Progress bars</h1>
-    <h2 class="subtitle">
-      Native HTML <strong>progress</strong> bars
-    </h2>
-    {%
-      include meta.html
-      colors=true
-      sizes=true
-      variables=true
-    %}
 
-    <hr>
+{% include snippet.html content=progress_colors %}
 
-    {% include snippet.html content=progress %}
+{% include anchor.html name="Sizes" %}
 
-    {% include anchor.html name="Colors" %}
+{% include snippet.html content=progress_sizes %}
 
-    {% include snippet.html content=progress_colors %}
+{% include variables.html type='element' %}
-
-    {% include anchor.html name="Sizes" %}
-
-    {% include snippet.html content=progress_sizes %}
-
-    {% include variables.html type='element' %}
-
-  </div>
-</section>

docs/documentation/elements/table.html

@@ -1,8 +1,18 @@
 ---
 title: Table
+subtitle: "The inevitable HTML <strong>table</strong>, with special case cells"
 layout: documentation
 doc-tab: elements
 doc-subtab: table
+breadcrumb:
+- home
+- documentation
+- elements
+- elements-table
+meta:
+  colors: false
+  sizes: false
+  variables: true
 ---
 
 {% capture table_example %}
@@ -305,22 +315,7 @@ doc-subtab: table
 </table>
 {% endcapture %}
 
-{% include subnav/subnav-elements.html %}
+<div class="content">
-
-<section class="section">
-  <div class="container">
-    <h1 class="title">Tables</h1>
-    <h2 class="subtitle">The inevitable HTML <strong>table</strong>, with special case cells</h2>
-    {%
-      include meta.html
-      colors=false
-      sizes=false
-      variables=true
-    %}
-
-    <hr>
-
-    <div class="content">
   <p>You simply need to attach a single <code>.table</code> CSS class on a <code>&lt;table&gt;</code> with the following structure:</p>
   <ul>
     <li>
@@ -354,13 +349,13 @@ doc-subtab: table
   <p>
     You can set a table row as <strong>selected</strong> by appending the <code>is-selected</code> modifier on a <code>&lt;tr&gt;</code>
   </p>
-    </div>
+</div>
 
-    {% include snippet.html content=table_example horizontal=true more=true %}
+{% include snippet.html content=table_example horizontal=true more=true %}
 
-    {% include anchor.html name="Modifiers" %}
+{% include anchor.html name="Modifiers" %}
 
-    <div class="columns">
+<div class="columns">
   <div class="column">
     <p>Add <strong>borders</strong> to all the cells.</p>
   </div>
@@ -383,9 +378,9 @@ doc-subtab: table
       </tbody>
     </table>
   </div>
-    </div>
+</div>
 
-    <div class="columns">
+<div class="columns">
   <div class="column">
     <p>Add <strong>stripes</strong> to the table.</p>
   </div>
@@ -424,9 +419,9 @@ doc-subtab: table
       </tbody>
     </table>
   </div>
-    </div>
+</div>
 
-    <div class="columns">
+<div class="columns">
   <div class="column">
     <p>Make the cells <strong>narrower</strong>.</p>
   </div>
@@ -465,9 +460,9 @@ doc-subtab: table
       </tbody>
     </table>
   </div>
-    </div>
+</div>
 
-    <div class="columns">
+<div class="columns">
   <div class="column">
     <p>You can add a <strong>hover effect</strong> on each row</p>
   </div>
@@ -506,9 +501,9 @@ doc-subtab: table
       </tbody>
     </table>
   </div>
-    </div>
+</div>
 
-    <div class="columns">
+<div class="columns">
   <div class="column">
     <p>You can have a <strong>fullwidth</strong> table.</p>
   </div>
@@ -547,9 +542,9 @@ doc-subtab: table
       </tbody>
     </table>
   </div>
-    </div>
+</div>
 
-    <div class="columns">
+<div class="columns">
   <div class="column">
     <p>You can <strong>combine</strong> all five modifiers.</p>
   </div>
@@ -588,9 +583,6 @@ doc-subtab: table
       </tbody>
     </table>
   </div>
-    </div>
+</div>
 
-    {% include variables.html type='element' %}
+{% include variables.html type='element' %}
-
-  </div>
-</section>

docs/documentation/elements/tag.html

@@ -1,8 +1,18 @@
 ---
 title: Tags
+subtitle: "Small <strong>tag labels</strong> to insert anywhere"
 layout: documentation
 doc-tab: elements
 doc-subtab: tag
+breadcrumb:
+- home
+- documentation
+- elements
+- elements-tag
+meta:
+  colors: true
+  sizes: true
+  variables: true
 ---
 
 {% capture tag %}
@@ -179,22 +189,7 @@ doc-subtab: tag
 </div>
 {% endcapture %}
 
-<section class="section">
+<div class="columns">
-  <div class="container">
-    <h1 class="title">Tags</h1>
-    <h2 class="subtitle">
-      Small <strong>tag labels</strong> to insert anywhere
-    </h2>
-    {%
-      include meta.html
-      colors=true
-      sizes=true
-      variables=true
-    %}
-
-    <hr>
-
-    <div class="columns">
   <div class="column is-4">
     By default, a <strong>tag</strong> is a 1.5rem high label.
   </div>
@@ -206,11 +201,11 @@ doc-subtab: tag
   <div class="column is-6">
     {% highlight html %}{{ tag }}{% endhighlight %}
   </div>
-    </div>
+</div>
 
-    {% include anchor.html name="Colors" %}
+{% include anchor.html name="Colors" %}
 
-    <div class="columns">
+<div class="columns">
   <div class="column is-4">
     Like with buttons, there are <strong>10 different colors</strong> available.
   </div>
@@ -267,11 +262,11 @@ doc-subtab: tag
   <div class="column is-6">
     {% highlight html %}{{ tags_colors }}{% endhighlight %}
   </div>
-    </div>
+</div>
 
-    {% include anchor.html name="Sizes" %}
+{% include anchor.html name="Sizes" %}
 
-    <div class="columns">
+<div class="columns">
   <div class="column is-4">
     And <strong>2 additional</strong> sizes.
   </div>
@@ -290,11 +285,11 @@ doc-subtab: tag
   <div class="column is-6">
     {% highlight html %}{{ sizes }}{% endhighlight %}
   </div>
-    </div>
+</div>
 
-    {% include anchor.html name="Modifiers" %}
+{% include anchor.html name="Modifiers" %}
 
-    <div class="columns">
+<div class="columns">
   <div class="column is-4">
     You can add the <code>is-rounded</code> modifier to make a <strong>rounded</strong> tag.
   </div>
@@ -304,9 +299,9 @@ doc-subtab: tag
   <div class="column is-6">
     {% highlight html %}{{ rounded }}{% endhighlight %}
   </div>
-    </div>
+</div>
 
-    <div class="columns">
+<div class="columns">
   <div class="column is-4">
     You can add the <code>is-delete</code> modifier to turn the tag into a <strong>delete button</strong>.
   </div>
@@ -316,11 +311,11 @@ doc-subtab: tag
   <div class="column is-6">
     {% highlight html %}{{ is_delete }}{% endhighlight %}
   </div>
-    </div>
+</div>
 
-    {% include anchor.html name="Combinations" %}
+{% include anchor.html name="Combinations" %}
 
-    <div class="columns">
+<div class="columns">
   <div class="column is-4">
     You can append a <strong>delete button</strong>.
   </div>
@@ -347,11 +342,11 @@ doc-subtab: tag
   <div class="column is-6">
     {% highlight html %}{{ delete }}{% endhighlight %}
   </div>
-    </div>
+</div>
 
-    {% include anchor.html name="List of tags" %}
+{% include anchor.html name="List of tags" %}
 
-    <div class="columns">
+<div class="columns">
   <div class="column">
     <div class="content">
       <p>
@@ -365,9 +360,9 @@ doc-subtab: tag
   <div class="column">
     {% highlight html %}{{ tags }}{% endhighlight %}
   </div>
-    </div>
+</div>
 
-    <div class="columns">
+<div class="columns">
   <div class="column">
     <div class="content">
       <p>
@@ -381,9 +376,9 @@ doc-subtab: tag
   <div class="column highlight-full">
     {% highlight html %}{{ tags_multiple }}{% endhighlight %}
   </div>
-    </div>
+</div>
 
-    <div class="columns">
+<div class="columns">
   <div class="column">
     <div class="content">
       <p>
@@ -397,9 +392,9 @@ doc-subtab: tag
   <div class="column highlight-full">
     {% highlight html %}{{ tags_addons }}{% endhighlight %}
   </div>
-    </div>
+</div>
 
-    <div class="columns">
+<div class="columns">
   <div class="column">
     <div class="content">
       <p>
@@ -413,9 +408,9 @@ doc-subtab: tag
   <div class="column highlight-full">
     {% highlight html %}{{ tags_delete_addons }}{% endhighlight %}
   </div>
-    </div>
+</div>
 
-    <div class="columns">
+<div class="columns">
   <div class="column">
     <div class="content">
       <p>
@@ -429,9 +424,9 @@ doc-subtab: tag
   <div class="column highlight-full">
     {% highlight html %}{{ tags_field_addons }}{% endhighlight %}
   </div>
-    </div>
+</div>
 
-    <div class="columns">
+<div class="columns">
   <div class="column">
     <div class="content">
       <p>
@@ -445,8 +440,6 @@ doc-subtab: tag
   <div class="column">
     {% highlight html %}{{ tags_blog_addons }}{% endhighlight %}
   </div>
-    </div>
+</div>
 
-    {% include variables.html type='element' %}
+{% include variables.html type='element' %}
-  </div>
-</section>

docs/documentation/elements/title.html

@@ -1,8 +1,18 @@
 ---
 title: Title and Subtitle
+subtitle: "Simple <strong>headings</strong> to add depth to your page"
 layout: documentation
 doc-tab: elements
 doc-subtab: title
+breadcrumb:
+- home
+- documentation
+- elements
+- elements-title
+meta:
+  colors: false
+  sizes: true
+  variables: true
 ---
 
 {% capture default %}
@@ -50,24 +60,7 @@ doc-subtab: title
 <p class="subtitle is-5">Subtitle 5</p>
 {% endcapture %}
 
-{% include subnav/subnav-elements.html %}
+<div class="columns">
-
-<section class="section">
-  <div class="container">
-    <h1 class="title">Titles</h1>
-    <h2 class="subtitle">
-      Simple <strong>headings</strong> to add depth to your page
-    </h2>
-    {%
-      include meta.html
-      colors=false
-      sizes=true
-      variables=true
-    %}
-
-    <hr>
-
-    <div class="columns">
   <div class="column">
     <div class="content">
       <p>There are <strong>2 types</strong> of heading:</p>
@@ -88,11 +81,11 @@ doc-subtab: title
   <div class="column">
     {% highlight html %}{{ default }}{% endhighlight %}
   </div>
-    </div>
+</div>
 
-    {% include anchor.html name="Sizes" %}
+{% include anchor.html name="Sizes" %}
 
-    <div class="columns">
+<div class="columns">
   <div class="column">
     <p>There are <strong>6 sizes</strong> available:</p>
   </div>
@@ -107,9 +100,9 @@ doc-subtab: title
   <div class="column">
     {% highlight html %}{{ title_sizes }}{% endhighlight %}
   </div>
-    </div>
+</div>
 
-    <div class="columns">
+<div class="columns">
   <div class="column"></div>
   <div class="column">
     <p class="subtitle is-1">Subtitle 1</p>
@@ -122,11 +115,11 @@ doc-subtab: title
   <div class="column">
     {% highlight html %}{{ subtitle_sizes }}{% endhighlight %}
   </div>
-    </div>
+</div>
 
-    <hr>
+<hr>
 
-    <div class="columns">
+<div class="columns">
   <div class="column">
     <div class="content">
       <p>When you <strong>combine</strong> a title and a subtitle, they move closer together.</p>
@@ -150,11 +143,11 @@ doc-subtab: title
   <div class="column">
     {% highlight html %}{{ combine }}{% endhighlight %}
   </div>
-    </div>
+</div>
 
-    <hr>
+<hr>
 
-    <div class="columns">
+<div class="columns">
   <div class="column">
     <div class="content">
       <p>
@@ -180,9 +173,6 @@ doc-subtab: title
   <div class="column">
     {% highlight html %}{{ spaced }}{% endhighlight %}
   </div>
-    </div>
+</div>
 
-    {% include variables.html type='element' %}
+{% include variables.html type='element' %}
-
-  </div>
-</section>

sass/elements/table.sass

@@ -20,9 +20,9 @@ $table-striped-row-even-background-color: $white-bis !default
 $table-striped-row-even-hover-background-color: $white-ter !default
 
 .table
+  +block
   background-color: $table-background-color
   color: $table-color
-  margin-bottom: 1.5rem
   td,
   th
     border: $table-cell-border