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,16 +1,14 @@
-<section class="section bd-typo">
+<div class="bd-typo">
-  <div class="container">
+  <p class="has-text-grey-light">
-    <p class="has-text-grey-light">
+    <a href="{{ site.url }}/made-with-bulma/">
-      <a href="{{ site.url }}/made-with-bulma/">
+      <img src="{{ site.url }}/images/made-with-bulma.png" alt="Made with Bulma" width="128" height="24">
-        <img src="{{ site.url }}/images/made-with-bulma.png" alt="Made with Bulma" width="128" height="24">
+    </a>
-      </a>
+    <br>
-      <br>
+    This page is <strong class="has-text-grey">open source</strong>.
-      This page is <strong class="has-text-grey">open source</strong>.
+    Noticed a typo? Or something unclear?
-      Noticed a typo? Or something unclear?
+    <br>
-      <br>
+    <a class="has-text-grey" href="https://github.com/jgthms/bulma/blob/master/docs/{{ page.path }}" style="border-bottom: 1px solid currentColor;">
-      <a class="has-text-grey" href="https://github.com/jgthms/bulma/blob/master/docs/{{ page.path }}" style="border-bottom: 1px solid currentColor;">
+      Improve this page on GitHub
-        Improve this page on GitHub
+    </a>
-      </a>
+  </p>
-    </p>
+</div>
-  </div>
-</section>

docs/_layouts/documentation.html

@@ -41,27 +41,29 @@ route: documentation
             </ul>
           </nav>
 
-          <nav class="bd-prev-next">
+          {% if previous_link or next_link %}
-            {% if previous_link %}
+            <nav class="bd-prev-next">
-              <a href="{{ site.url }}{{ previous_link.path }}" title="{{ previous_link.name }}">
+              {% if previous_link %}
-                ←
+                <a href="{{ site.url }}{{ previous_link.path }}" title="{{ previous_link.name }}">
-              </a>
+                  ←
-            {% else %}
+                </a>
-              <span>
+              {% else %}
-                ←
+                <span>
-              </span>
+                  ←
-            {% endif %}
+                </span>
+              {% endif %}
 
-            {% if next_link %}
+              {% if next_link %}
-              <a href="{{ site.url }}{{ next_link.path }}" title="{{ next_link.name }}">
+                <a href="{{ site.url }}{{ next_link.path }}" title="{{ next_link.name }}">
-                →
+                  →
-              </a>
+                </a>
-            {% else %}
+              {% else %}
-              <span>
+                <span>
-                →
+                  →
-              </span>
+                </span>
-            {% endif %}
+              {% endif %}
-          </nav>
+            </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">
+  <p>
-    <h1 class="title">Box</h1>
+    The <code>.box</code> element is simply a container with a shadow, a border, a radius, and some padding.
-    <h2 class="subtitle">
+    <br>
-      A white <strong>box</strong> to contain other elements
+    For example, you can include a media object:
-    </h2>
+  </p>
-    {%
+</div>
-      include meta.html
-      colors=false
-      sizes=false
-      variables=true
-    %}
 
-    <hr>
+{% include snippet.html content=box_example more=true %}
 
-    <div class="content">
+{% include variables.html type='element' %}
-      <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>
-
-    {% include snippet.html content=box_example more=true %}
-
-    {% 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,87 +111,67 @@ doc-subtab: content
 </div>
 {% endcapture %}
 
-{% include subnav/subnav-elements.html %}
+<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>
+    <li><code>&lt;ul&gt;</code> <code>&lt;ol&gt;</code> <code>&lt;dl&gt;</code> lists</li>
+    <li><code>&lt;h1&gt;</code> to <code>&lt;h6&gt;</code> headings</li>
+    <li><code>&lt;blockquote&gt;</code> quotes</li>
+    <li><code>&lt;em&gt;</code> and <code>&lt;strong&gt;</code></li>
+    <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>
 
-<section class="section">
+{% include snippet.html content=content_example %}
-  <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>
+{% include anchor.html name="Sizes" %}
-
-    <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>
-        <li><code>&lt;ul&gt;</code> <code>&lt;ol&gt;</code> <code>&lt;dl&gt;</code> lists</li>
-        <li><code>&lt;h1&gt;</code> to <code>&lt;h6&gt;</code> headings</li>
-        <li><code>&lt;blockquote&gt;</code> quotes</li>
-        <li><code>&lt;em&gt;</code> and <code>&lt;strong&gt;</code></li>
-        <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>
-
-    {% include snippet.html content=content_example %}
-
-    {% include anchor.html name="Sizes" %}
-
-    <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 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>
-        <h2>Second level</h2>
-        <p>Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.</p>
-        <ul>
-          <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
-          <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
-          <li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
-          <li>Ut non enim metus.</li>
-        </ul>
-      </div>
-    </div>
-    <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>
-        <h2>Second level</h2>
-        <p>Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.</p>
-        <ul>
-          <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
-          <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
-          <li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
-          <li>Ut non enim metus.</li>
-        </ul>
-      </div>
-    </div>
-    <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>
-        <h2>Second level</h2>
-        <p>Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.</p>
-        <ul>
-          <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
-          <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
-          <li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
-          <li>Ut non enim metus.</li>
-        </ul>
-      </div>
-    </div>
-
-    {% include variables.html type='element' %}
 
+<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 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>
+    <h2>Second level</h2>
+    <p>Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.</p>
+    <ul>
+      <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
+      <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
+      <li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
+      <li>Ut non enim metus.</li>
+    </ul>
   </div>
-</section>
+</div>
+<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>
+    <h2>Second level</h2>
+    <p>Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.</p>
+    <ul>
+      <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
+      <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
+      <li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
+      <li>Ut non enim metus.</li>
+    </ul>
+  </div>
+</div>
+<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>
+    <h2>Second level</h2>
+    <p>Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.</p>
+    <ul>
+      <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
+      <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
+      <li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
+      <li>Ut non enim metus.</li>
+    </ul>
+  </div>
+</div>
+
+{% include variables.html type='element' %}

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">
+  <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>
 
-<section class="section">
+{% include snippet.html content=cross_example %}
-  <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>
+{% include anchor.html name="Sizes" %}
 
-    <div class="content">
+<div class="content">
-      <p>
+  <p>
-        The <code>.delete</code> element is a stand-alone element that can be used in different contexts.
+    It comes in <strong>4 sizes</strong>:
-      </p>
+  </p>
-      <p>
+</div>
-        On its own, it's a simple circle with a cross:
-      </p>
-    </div>
 
-    {% include snippet.html content=cross_example %}
+{% include snippet.html content=cross_sizes_example %}
 
-    {% include anchor.html name="Sizes" %}
+{% include anchor.html name="Combinations" %}
 
-    <div class="content">
+<div class="content">
-      <p>
+  <p>
-        It comes in <strong>4 sizes</strong>:
+    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>
+  </p>
-    </div>
+</div>
 
-    {% include snippet.html content=cross_sizes_example %}
+{% include snippet.html content=cross_elements_example %}
-
-    {% include anchor.html name="Combinations" %}
-
-    <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>
-
-    {% include snippet.html content=cross_elements_example %}
-
-  </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,151 +35,131 @@ dimensions:
 </figure>
 {% endcapture %}
 
-{% include subnav/subnav-elements.html %}
+<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>
 
-<section class="section">
+{% include snippet.html content=image %}
-  <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>
+{% include anchor.html name="Fixed square images" %}
 
-    <div class="content">
+<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>
+  <p>There are <strong>7</strong> dimensions to choose from, useful for <strong>avatars</strong>:</p>
-    </div>
+</div>
 
-    {% include snippet.html content=image %}
+<table class="table is-bordered">
+  <tbody>
+    {% for dimension in page.dimensions %}
+      <tr>
+        <td><code>image is-{{ dimension }}x{{ dimension }}</code></td>
+        <td><figure class="image is-{{ dimension }}x{{ dimension }}"><img src="{{site.url}}/images/placeholders/{{ dimension }}x{{ dimension }}.png"></figure></td>
+        <td>{{ dimension }}x{{ dimension }}px</td>
+      </tr>
+    {% endfor %}
+  </tbody>
+</table>
 
-    {% include anchor.html name="Fixed square images" %}
+{% include anchor.html name="Retina images" %}
 
-    <div class="content">
+<div class="content">
-      <p>There are <strong>7</strong> dimensions to choose from, useful for <strong>avatars</strong>:</p>
+  <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>
 
-    <table class="table is-bordered">
+{% include snippet.html content=retina_image %}
-      <tbody>
-        {% for dimension in page.dimensions %}
-          <tr>
-            <td><code>image is-{{ dimension }}x{{ dimension }}</code></td>
-            <td><figure class="image is-{{ dimension }}x{{ dimension }}"><img src="{{site.url}}/images/placeholders/{{ dimension }}x{{ dimension }}.png"></figure></td>
-            <td>{{ dimension }}x{{ dimension }}px</td>
-          </tr>
-        {% endfor %}
-      </tbody>
-    </table>
 
-    {% include anchor.html name="Retina images" %}
+{% include anchor.html name="Responsive images with ratios" %}
 
-    <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>
+  <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>
 
-    {% include snippet.html content=retina_image %}
+<table id="images" class="table is-bordered">
+  <tbody>
+    <tr>
+      <td><code>image is-square</code></td>
+      <td><figure class="image is-square"><img src="{{site.url}}/images/placeholders/480x480.png"></figure></td>
+      <td>Square (or 1 by 1)</td>
+    </tr>
+    <tr>
+      <td><code>image is-1by1</code></td>
+      <td><figure class="image is-1by1"><img src="{{site.url}}/images/placeholders/480x480.png"></figure></td>
+      <td>1 by 1</td>
+    </tr>
+    <tr>
+      <td><code>image is-5by4</code></td>
+      <td><figure class="image is-5by4"><img src="{{site.url}}/images/placeholders/600x480.png"></figure></td>
+      <td>5 by 4</td>
+    </tr>
+    <tr>
+      <td><code>image is-4by3</code></td>
+      <td><figure class="image is-4by3"><img src="{{site.url}}/images/placeholders/640x480.png"></figure></td>
+      <td>4 by 3</td>
+    </tr>
+    <tr>
+      <td><code>image is-3by2</code></td>
+      <td><figure class="image is-3by2"><img src="{{site.url}}/images/placeholders/480x320.png"></figure></td>
+      <td>3 by 2</td>
+    </tr>
+    <tr>
+      <td><code>image is-5by3</code></td>
+      <td><figure class="image is-5by3"><img src="{{site.url}}/images/placeholders/800x480.png"></figure></td>
+      <td>5 by 3</td>
+    </tr>
+    <tr>
+      <td><code>image is-16by9</code></td>
+      <td><figure class="image is-16by9"><img src="{{site.url}}/images/placeholders/640x360.png"></figure></td>
+      <td>16 by 9</td>
+    </tr>
+    <tr>
+      <td><code>image is-2by1</code></td>
+      <td><figure class="image is-2by1"><img src="{{site.url}}/images/placeholders/640x320.png"></figure></td>
+      <td>2 by 1</td>
+    </tr>
+    <tr>
+      <td><code>image is-3by1</code></td>
+      <td><figure class="image is-3by1"><img src="{{site.url}}/images/placeholders/720x240.png"></figure></td>
+      <td>3 by 1</td>
+  </tr>
+    <tr>
+      <td><code>image is-4by5</code></td>
+      <td><figure class="image is-4by5"><img src="{{site.url}}/images/placeholders/480x600.png"></figure></td>
+      <td>4 by 5</td>
+  </tr>
+    <tr>
+      <td><code>image is-3by4</code></td>
+      <td><figure class="image is-3by4"><img src="{{site.url}}/images/placeholders/480x640.png"></figure></td>
+      <td>3 by 4</td>
+  </tr>
+  <tr>
+      <td><code>image is-2by3</code></td>
+      <td><figure class="image is-2by3"><img src="{{site.url}}/images/placeholders/320x480.png"></figure></td>
+      <td>2 by 3</td>
+  </tr>
+    <tr>
+      <td><code>image is-3by5</code></td>
+      <td><figure class="image is-3by5"><img src="{{site.url}}/images/placeholders/480x800.png"></figure></td>
+      <td>3 by 5</td>
+    </tr>
+  <tr>
+      <td><code>image is-9by16</code></td>
+      <td><figure class="image is-9by16"><img src="{{site.url}}/images/placeholders/360x640.png"></figure></td>
+      <td>9 by 16</td>
+  </tr>
+  <tr>
+      <td><code>image is-1by2</code></td>
+      <td><figure class="image is-1by2"><img src="{{site.url}}/images/placeholders/320x640.png"></figure></td>
+      <td>1 by 2</td>
+  </tr>
+  <tr>
+    <td><code>image is-1by3</code></td>
+    <td><figure class="image is-1by3"><img src="{{site.url}}/images/placeholders/240x720.png"></figure></td>
+    <td>1 by 3</td>
+  </tr>
+</tbody>
+</table>
 
-    {% include anchor.html name="Responsive images with ratios" %}
+<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 class="content">
+{% include variables.html type='element' %}
-      <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>
-
-    <table id="images" class="table is-bordered">
-      <tbody>
-        <tr>
-          <td><code>image is-square</code></td>
-          <td><figure class="image is-square"><img src="{{site.url}}/images/placeholders/480x480.png"></figure></td>
-          <td>Square (or 1 by 1)</td>
-        </tr>
-        <tr>
-          <td><code>image is-1by1</code></td>
-          <td><figure class="image is-1by1"><img src="{{site.url}}/images/placeholders/480x480.png"></figure></td>
-          <td>1 by 1</td>
-        </tr>
-        <tr>
-          <td><code>image is-5by4</code></td>
-          <td><figure class="image is-5by4"><img src="{{site.url}}/images/placeholders/600x480.png"></figure></td>
-          <td>5 by 4</td>
-        </tr>
-        <tr>
-          <td><code>image is-4by3</code></td>
-          <td><figure class="image is-4by3"><img src="{{site.url}}/images/placeholders/640x480.png"></figure></td>
-          <td>4 by 3</td>
-        </tr>
-        <tr>
-          <td><code>image is-3by2</code></td>
-          <td><figure class="image is-3by2"><img src="{{site.url}}/images/placeholders/480x320.png"></figure></td>
-          <td>3 by 2</td>
-        </tr>
-        <tr>
-          <td><code>image is-5by3</code></td>
-          <td><figure class="image is-5by3"><img src="{{site.url}}/images/placeholders/800x480.png"></figure></td>
-          <td>5 by 3</td>
-        </tr>
-        <tr>
-          <td><code>image is-16by9</code></td>
-          <td><figure class="image is-16by9"><img src="{{site.url}}/images/placeholders/640x360.png"></figure></td>
-          <td>16 by 9</td>
-        </tr>
-        <tr>
-          <td><code>image is-2by1</code></td>
-          <td><figure class="image is-2by1"><img src="{{site.url}}/images/placeholders/640x320.png"></figure></td>
-          <td>2 by 1</td>
-        </tr>
-        <tr>
-          <td><code>image is-3by1</code></td>
-          <td><figure class="image is-3by1"><img src="{{site.url}}/images/placeholders/720x240.png"></figure></td>
-          <td>3 by 1</td>
-	    </tr>
-        <tr>
-          <td><code>image is-4by5</code></td>
-          <td><figure class="image is-4by5"><img src="{{site.url}}/images/placeholders/480x600.png"></figure></td>
-          <td>4 by 5</td>
-	    </tr>
-        <tr>
-          <td><code>image is-3by4</code></td>
-          <td><figure class="image is-3by4"><img src="{{site.url}}/images/placeholders/480x640.png"></figure></td>
-          <td>3 by 4</td>
-	    </tr>
-	    <tr>
-          <td><code>image is-2by3</code></td>
-          <td><figure class="image is-2by3"><img src="{{site.url}}/images/placeholders/320x480.png"></figure></td>
-          <td>2 by 3</td>
-	    </tr>
-        <tr>
-          <td><code>image is-3by5</code></td>
-          <td><figure class="image is-3by5"><img src="{{site.url}}/images/placeholders/480x800.png"></figure></td>
-          <td>3 by 5</td>
-        </tr>
-	    <tr>
-          <td><code>image is-9by16</code></td>
-          <td><figure class="image is-9by16"><img src="{{site.url}}/images/placeholders/360x640.png"></figure></td>
-          <td>9 by 16</td>
-	    </tr>
-	    <tr>
-          <td><code>image is-1by2</code></td>
-          <td><figure class="image is-1by2"><img src="{{site.url}}/images/placeholders/320x640.png"></figure></td>
-          <td>1 by 2</td>
-	    </tr>
-	    <tr>
-	      <td><code>image is-1by3</code></td>
-	      <td><figure class="image is-1by3"><img src="{{site.url}}/images/placeholders/240x720.png"></figure></td>
-	      <td>1 by 3</td>
-	    </tr>
-		</tbody>
-    </table>
-
-    <div class="content">
-      <p>The <code>.image</code> container will take up the <strong>whole width</strong> while maintaining the perfect ratio.</p>
-    </div>
-
-    {% 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,292 +315,274 @@ doc-subtab: table
 </table>
 {% endcapture %}
 
-{% include subnav/subnav-elements.html %}
+<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>
-<section class="section">
+  <ul>
-  <div class="container">
+    <li>
-    <h1 class="title">Tables</h1>
+      <code>table</code> the main <strong>container</strong>
-    <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>
-          <code>table</code> the main <strong>container</strong>
+          <code>thead</code> the optional <strong>top</strong> part of the table
+        </li>
+        <li>
+          <code>tfoot</code> the optional <strong>bottom</strong> part of the table
+        </li>
+        <li>
+          <code>tbody</code> the main <strong>content</strong> of the table
           <ul>
             <li>
-              <code>thead</code> the optional <strong>top</strong> part of the table
+              <code>tr</code> each table <strong>row</strong>
-            </li>
-            <li>
-              <code>tfoot</code> the optional <strong>bottom</strong> part of the table
-            </li>
-            <li>
-              <code>tbody</code> the main <strong>content</strong> of the table
               <ul>
                 <li>
-                  <code>tr</code> each table <strong>row</strong>
+                  <code>th</code> a table cell <strong>heading</strong>
-                  <ul>
+                </li>
-                    <li>
+                <li>
-                      <code>th</code> a table cell <strong>heading</strong>
+                  <code>td</code> a table <strong>cell</strong>
-                    </li>
-                    <li>
-                      <code>td</code> a table <strong>cell</strong>
-                    </li>
-                  </ul>
                 </li>
               </ul>
             </li>
           </ul>
         </li>
       </ul>
-      <p>
+    </li>
-        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>
+  </ul>
-      </p>
+  <p>
-    </div>
+    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>
 
-    {% 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="column">
-        <p>Add <strong>borders</strong> to all the cells.</p>
-      </div>
-      <div class="column">
-        <code>table is-bordered</code>
-      </div>
-      <div class="column is-half">
-        <table class="table is-bordered">
-          <thead>
-            <tr>
-              <th>One</th>
-              <th>Two</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>Three</td>
-              <td>Four</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-
-    <div class="columns">
-      <div class="column">
-        <p>Add <strong>stripes</strong> to the table.</p>
-      </div>
-      <div class="column">
-        <code>table is-striped</code>
-      </div>
-      <div class="column is-half">
-        <table class="table is-striped">
-          <thead>
-            <tr>
-              <th>One</th>
-              <th>Two</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>Three</td>
-              <td>Four</td>
-            </tr>
-            <tr>
-              <td>Five</td>
-              <td>Six</td>
-            </tr>
-            <tr>
-              <td>Seven</td>
-              <td>Eight</td>
-            </tr>
-            <tr>
-              <td>Nine</td>
-              <td>Ten</td>
-            </tr>
-            <tr>
-              <td>Eleven</td>
-              <td>Twelve</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-
-    <div class="columns">
-      <div class="column">
-        <p>Make the cells <strong>narrower</strong>.</p>
-      </div>
-      <div class="column">
-        <code>table is-narrow</code>
-      </div>
-      <div class="column is-half">
-        <table class="table is-narrow">
-          <thead>
-            <tr>
-              <th>One</th>
-              <th>Two</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>Three</td>
-              <td>Four</td>
-            </tr>
-            <tr>
-              <td>Five</td>
-              <td>Six</td>
-            </tr>
-            <tr>
-              <td>Seven</td>
-              <td>Eight</td>
-            </tr>
-            <tr>
-              <td>Nine</td>
-              <td>Ten</td>
-            </tr>
-            <tr>
-              <td>Eleven</td>
-              <td>Twelve</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-
-    <div class="columns">
-      <div class="column">
-        <p>You can add a <strong>hover effect</strong> on each row</p>
-      </div>
-      <div class="column">
-        <code>table is-hoverable</code>
-      </div>
-      <div class="column is-half">
-        <table class="table is-hoverable">
-          <thead>
-            <tr>
-              <th>One</th>
-              <th>Two</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>Three</td>
-              <td>Four</td>
-            </tr>
-            <tr>
-              <td>Five</td>
-              <td>Six</td>
-            </tr>
-            <tr>
-              <td>Seven</td>
-              <td>Eight</td>
-            </tr>
-            <tr>
-              <td>Nine</td>
-              <td>Ten</td>
-            </tr>
-            <tr>
-              <td>Eleven</td>
-              <td>Twelve</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-
-    <div class="columns">
-      <div class="column">
-        <p>You can have a <strong>fullwidth</strong> table.</p>
-      </div>
-      <div class="column">
-        <code>table is-fullwidth</code>
-      </div>
-      <div class="column is-half">
-        <table class="table is-fullwidth">
-          <thead>
-            <tr>
-              <th>One</th>
-              <th>Two</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>Three</td>
-              <td>Four</td>
-            </tr>
-            <tr>
-              <td>Five</td>
-              <td>Six</td>
-            </tr>
-            <tr>
-              <td>Seven</td>
-              <td>Eight</td>
-            </tr>
-            <tr>
-              <td>Nine</td>
-              <td>Ten</td>
-            </tr>
-            <tr>
-              <td>Eleven</td>
-              <td>Twelve</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-
-    <div class="columns">
-      <div class="column">
-        <p>You can <strong>combine</strong> all five modifiers.</p>
-      </div>
-      <div class="column">
-        <code>table is-bordered is-striped is-narrow is-hoverable is-fullwidth</code>
-      </div>
-      <div class="column is-half">
-        <table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
-          <thead>
-            <tr>
-              <th>One</th>
-              <th>Two</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>Three</td>
-              <td>Four</td>
-            </tr>
-            <tr>
-              <td>Five</td>
-              <td>Six</td>
-            </tr>
-            <tr>
-              <td>Seven</td>
-              <td>Eight</td>
-            </tr>
-            <tr>
-              <td>Nine</td>
-              <td>Ten</td>
-            </tr>
-            <tr>
-              <td>Eleven</td>
-              <td>Twelve</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-
-    {% include variables.html type='element' %}
 
+<div class="columns">
+  <div class="column">
+    <p>Add <strong>borders</strong> to all the cells.</p>
   </div>
-</section>
+  <div class="column">
+    <code>table is-bordered</code>
+  </div>
+  <div class="column is-half">
+    <table class="table is-bordered">
+      <thead>
+        <tr>
+          <th>One</th>
+          <th>Two</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Three</td>
+          <td>Four</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+
+<div class="columns">
+  <div class="column">
+    <p>Add <strong>stripes</strong> to the table.</p>
+  </div>
+  <div class="column">
+    <code>table is-striped</code>
+  </div>
+  <div class="column is-half">
+    <table class="table is-striped">
+      <thead>
+        <tr>
+          <th>One</th>
+          <th>Two</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Three</td>
+          <td>Four</td>
+        </tr>
+        <tr>
+          <td>Five</td>
+          <td>Six</td>
+        </tr>
+        <tr>
+          <td>Seven</td>
+          <td>Eight</td>
+        </tr>
+        <tr>
+          <td>Nine</td>
+          <td>Ten</td>
+        </tr>
+        <tr>
+          <td>Eleven</td>
+          <td>Twelve</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+
+<div class="columns">
+  <div class="column">
+    <p>Make the cells <strong>narrower</strong>.</p>
+  </div>
+  <div class="column">
+    <code>table is-narrow</code>
+  </div>
+  <div class="column is-half">
+    <table class="table is-narrow">
+      <thead>
+        <tr>
+          <th>One</th>
+          <th>Two</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Three</td>
+          <td>Four</td>
+        </tr>
+        <tr>
+          <td>Five</td>
+          <td>Six</td>
+        </tr>
+        <tr>
+          <td>Seven</td>
+          <td>Eight</td>
+        </tr>
+        <tr>
+          <td>Nine</td>
+          <td>Ten</td>
+        </tr>
+        <tr>
+          <td>Eleven</td>
+          <td>Twelve</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+
+<div class="columns">
+  <div class="column">
+    <p>You can add a <strong>hover effect</strong> on each row</p>
+  </div>
+  <div class="column">
+    <code>table is-hoverable</code>
+  </div>
+  <div class="column is-half">
+    <table class="table is-hoverable">
+      <thead>
+        <tr>
+          <th>One</th>
+          <th>Two</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Three</td>
+          <td>Four</td>
+        </tr>
+        <tr>
+          <td>Five</td>
+          <td>Six</td>
+        </tr>
+        <tr>
+          <td>Seven</td>
+          <td>Eight</td>
+        </tr>
+        <tr>
+          <td>Nine</td>
+          <td>Ten</td>
+        </tr>
+        <tr>
+          <td>Eleven</td>
+          <td>Twelve</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+
+<div class="columns">
+  <div class="column">
+    <p>You can have a <strong>fullwidth</strong> table.</p>
+  </div>
+  <div class="column">
+    <code>table is-fullwidth</code>
+  </div>
+  <div class="column is-half">
+    <table class="table is-fullwidth">
+      <thead>
+        <tr>
+          <th>One</th>
+          <th>Two</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Three</td>
+          <td>Four</td>
+        </tr>
+        <tr>
+          <td>Five</td>
+          <td>Six</td>
+        </tr>
+        <tr>
+          <td>Seven</td>
+          <td>Eight</td>
+        </tr>
+        <tr>
+          <td>Nine</td>
+          <td>Ten</td>
+        </tr>
+        <tr>
+          <td>Eleven</td>
+          <td>Twelve</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+
+<div class="columns">
+  <div class="column">
+    <p>You can <strong>combine</strong> all five modifiers.</p>
+  </div>
+  <div class="column">
+    <code>table is-bordered is-striped is-narrow is-hoverable is-fullwidth</code>
+  </div>
+  <div class="column is-half">
+    <table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
+      <thead>
+        <tr>
+          <th>One</th>
+          <th>Two</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Three</td>
+          <td>Four</td>
+        </tr>
+        <tr>
+          <td>Five</td>
+          <td>Six</td>
+        </tr>
+        <tr>
+          <td>Seven</td>
+          <td>Eight</td>
+        </tr>
+        <tr>
+          <td>Nine</td>
+          <td>Ten</td>
+        </tr>
+        <tr>
+          <td>Eleven</td>
+          <td>Twelve</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+
+{% include variables.html type='element' %}

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,274 +189,257 @@ doc-subtab: tag
 </div>
 {% endcapture %}
 
-<section class="section">
+<div class="columns">
-  <div class="container">
+  <div class="column is-4">
-    <h1 class="title">Tags</h1>
+    By default, a <strong>tag</strong> is a 1.5rem high label.
-    <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>
-      <div class="column is-2">
-        <span class="tag">
-          Tag label
-        </span>
-      </div>
-      <div class="column is-6">
-        {% highlight html %}{{ tag }}{% endhighlight %}
-      </div>
-    </div>
-
-    {% include anchor.html name="Colors" %}
-
-    <div class="columns">
-      <div class="column is-4">
-        Like with buttons, there are <strong>10 different colors</strong> available.
-      </div>
-      <div class="column is-2">
-        <p class="field">
-          <span class="tag is-black">
-            Black
-          </span>
-        </p>
-        <p class="field">
-          <span class="tag is-dark">
-            Dark
-          </span>
-        </p>
-        <p class="field">
-          <span class="tag is-light">
-            Light
-          </span>
-        </p>
-        <p class="field">
-          <span class="tag is-white">
-            White
-          </span>
-        </p>
-        <p class="field">
-          <span class="tag is-primary">
-            Primary
-          </span>
-        </p>
-        <p class="field">
-          <span class="tag is-link">
-            Link
-          </span>
-        </p>
-        <p class="field">
-          <span class="tag is-info">
-            Info
-          </span>
-        </p>
-        <p class="field">
-          <span class="tag is-success">
-            Success
-          </span>
-        </p>
-        <p class="field">
-          <span class="tag is-warning">
-            Warning
-          </span>
-        </p>
-        <span class="tag is-danger">
-          Danger
-        </span>
-      </div>
-      <div class="column is-6">
-        {% highlight html %}{{ tags_colors }}{% endhighlight %}
-      </div>
-    </div>
-
-    {% include anchor.html name="Sizes" %}
-
-    <div class="columns">
-      <div class="column is-4">
-        And <strong>2 additional</strong> sizes.
-      </div>
-      <div class="column is-2">
-        <p class="field">
-          <span class="tag is-primary is-medium">
-            Medium
-          </span>
-        </p>
-        <p class="field">
-          <span class="tag is-info is-large">
-            Large
-          </span>
-        </p>
-      </div>
-      <div class="column is-6">
-        {% highlight html %}{{ sizes }}{% endhighlight %}
-      </div>
-    </div>
-
-    {% include anchor.html name="Modifiers" %}
-
-    <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>
-      <div class="column is-2">
-        {{ rounded }}
-      </div>
-      <div class="column is-6">
-        {% highlight html %}{{ rounded }}{% endhighlight %}
-      </div>
-    </div>
-
-    <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>
-      <div class="column is-2">
-        {{ is_delete }}
-      </div>
-      <div class="column is-6">
-        {% highlight html %}{{ is_delete }}{% endhighlight %}
-      </div>
-    </div>
-
-    {% include anchor.html name="Combinations" %}
-
-    <div class="columns">
-      <div class="column is-4">
-        You can append a <strong>delete button</strong>.
-      </div>
-      <div class="column is-2">
-        <p class="field">
-          <span class="tag is-success">
-            Bar
-            <button class="delete is-small"></button>
-          </span>
-        </p>
-        <p class="field">
-          <span class="tag is-warning is-medium">
-            Hello
-            <button class="delete is-small"></button>
-          </span>
-        </p>
-        <p class="field">
-          <span class="tag is-danger is-large">
-            World
-            <button class="delete"></button>
-          </span>
-        </p>
-      </div>
-      <div class="column is-6">
-        {% highlight html %}{{ delete }}{% endhighlight %}
-      </div>
-    </div>
-
-    {% include anchor.html name="List of tags" %}
-
-    <div class="columns">
-      <div class="column">
-        <div class="content">
-          <p>
-            You can now create a <strong>list of tags</strong> with the <code>.tags</code> container.
-          </p>
-        </div>
-        <div class="bd-example">
-          {{ tags }}
-        </div>
-      </div>
-      <div class="column">
-        {% highlight html %}{{ tags }}{% endhighlight %}
-      </div>
-    </div>
-
-    <div class="columns">
-      <div class="column">
-        <div class="content">
-          <p>
-            If the list is <strong>very long</strong>, it will automatically wrap on <strong>multiple lines</strong>, while keeping all tags <strong>evenly spaced</strong>.
-          </p>
-        </div>
-        <div class="bd-example">
-          {{ tags_multiple }}
-        </div>
-      </div>
-      <div class="column highlight-full">
-        {% highlight html %}{{ tags_multiple }}{% endhighlight %}
-      </div>
-    </div>
-
-    <div class="columns">
-      <div class="column">
-        <div class="content">
-          <p>
-            You can <strong>attach tags together</strong> with the <code>.has-addons</code> modifier.
-          </p>
-        </div>
-        <div class="bd-example">
-          {{ tags_addons }}
-        </div>
-      </div>
-      <div class="column highlight-full">
-        {% highlight html %}{{ tags_addons }}{% endhighlight %}
-      </div>
-    </div>
-
-    <div class="columns">
-      <div class="column">
-        <div class="content">
-          <p>
-            You can attach a <strong>text</strong> tag with a <strong>delete</strong> tag together.
-          </p>
-        </div>
-        <div class="bd-example">
-          {{ tags_delete_addons }}
-        </div>
-      </div>
-      <div class="column highlight-full">
-        {% highlight html %}{{ tags_delete_addons }}{% endhighlight %}
-      </div>
-    </div>
-
-    <div class="columns">
-      <div class="column">
-        <div class="content">
-          <p>
-            If you want to attach <code>.tags</code> containers <strong>together</strong>, simply use the <code>.field</code> element with the <code>.is-grouped</code> and <code>.is-grouped-multiline</code> modifiers.
-          </p>
-        </div>
-        <div class="bd-example">
-          {{ tags_field_addons }}
-        </div>
-      </div>
-      <div class="column highlight-full">
-        {% highlight html %}{{ tags_field_addons }}{% endhighlight %}
-      </div>
-    </div>
-
-    <div class="columns">
-      <div class="column">
-        <div class="content">
-          <p>
-            This can be useful for a long list of <strong>blog tags</strong>.
-          </p>
-        </div>
-        <div class="bd-example">
-          {{ tags_blog_addons }}
-        </div>
-      </div>
-      <div class="column">
-        {% highlight html %}{{ tags_blog_addons }}{% endhighlight %}
-      </div>
-    </div>
-
-    {% include variables.html type='element' %}
   </div>
-</section>
+  <div class="column is-2">
+    <span class="tag">
+      Tag label
+    </span>
+  </div>
+  <div class="column is-6">
+    {% highlight html %}{{ tag }}{% endhighlight %}
+  </div>
+</div>
+
+{% include anchor.html name="Colors" %}
+
+<div class="columns">
+  <div class="column is-4">
+    Like with buttons, there are <strong>10 different colors</strong> available.
+  </div>
+  <div class="column is-2">
+    <p class="field">
+      <span class="tag is-black">
+        Black
+      </span>
+    </p>
+    <p class="field">
+      <span class="tag is-dark">
+        Dark
+      </span>
+    </p>
+    <p class="field">
+      <span class="tag is-light">
+        Light
+      </span>
+    </p>
+    <p class="field">
+      <span class="tag is-white">
+        White
+      </span>
+    </p>
+    <p class="field">
+      <span class="tag is-primary">
+        Primary
+      </span>
+    </p>
+    <p class="field">
+      <span class="tag is-link">
+        Link
+      </span>
+    </p>
+    <p class="field">
+      <span class="tag is-info">
+        Info
+      </span>
+    </p>
+    <p class="field">
+      <span class="tag is-success">
+        Success
+      </span>
+    </p>
+    <p class="field">
+      <span class="tag is-warning">
+        Warning
+      </span>
+    </p>
+    <span class="tag is-danger">
+      Danger
+    </span>
+  </div>
+  <div class="column is-6">
+    {% highlight html %}{{ tags_colors }}{% endhighlight %}
+  </div>
+</div>
+
+{% include anchor.html name="Sizes" %}
+
+<div class="columns">
+  <div class="column is-4">
+    And <strong>2 additional</strong> sizes.
+  </div>
+  <div class="column is-2">
+    <p class="field">
+      <span class="tag is-primary is-medium">
+        Medium
+      </span>
+    </p>
+    <p class="field">
+      <span class="tag is-info is-large">
+        Large
+      </span>
+    </p>
+  </div>
+  <div class="column is-6">
+    {% highlight html %}{{ sizes }}{% endhighlight %}
+  </div>
+</div>
+
+{% include anchor.html name="Modifiers" %}
+
+<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>
+  <div class="column is-2">
+    {{ rounded }}
+  </div>
+  <div class="column is-6">
+    {% highlight html %}{{ rounded }}{% endhighlight %}
+  </div>
+</div>
+
+<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>
+  <div class="column is-2">
+    {{ is_delete }}
+  </div>
+  <div class="column is-6">
+    {% highlight html %}{{ is_delete }}{% endhighlight %}
+  </div>
+</div>
+
+{% include anchor.html name="Combinations" %}
+
+<div class="columns">
+  <div class="column is-4">
+    You can append a <strong>delete button</strong>.
+  </div>
+  <div class="column is-2">
+    <p class="field">
+      <span class="tag is-success">
+        Bar
+        <button class="delete is-small"></button>
+      </span>
+    </p>
+    <p class="field">
+      <span class="tag is-warning is-medium">
+        Hello
+        <button class="delete is-small"></button>
+      </span>
+    </p>
+    <p class="field">
+      <span class="tag is-danger is-large">
+        World
+        <button class="delete"></button>
+      </span>
+    </p>
+  </div>
+  <div class="column is-6">
+    {% highlight html %}{{ delete }}{% endhighlight %}
+  </div>
+</div>
+
+{% include anchor.html name="List of tags" %}
+
+<div class="columns">
+  <div class="column">
+    <div class="content">
+      <p>
+        You can now create a <strong>list of tags</strong> with the <code>.tags</code> container.
+      </p>
+    </div>
+    <div class="bd-example">
+      {{ tags }}
+    </div>
+  </div>
+  <div class="column">
+    {% highlight html %}{{ tags }}{% endhighlight %}
+  </div>
+</div>
+
+<div class="columns">
+  <div class="column">
+    <div class="content">
+      <p>
+        If the list is <strong>very long</strong>, it will automatically wrap on <strong>multiple lines</strong>, while keeping all tags <strong>evenly spaced</strong>.
+      </p>
+    </div>
+    <div class="bd-example">
+      {{ tags_multiple }}
+    </div>
+  </div>
+  <div class="column highlight-full">
+    {% highlight html %}{{ tags_multiple }}{% endhighlight %}
+  </div>
+</div>
+
+<div class="columns">
+  <div class="column">
+    <div class="content">
+      <p>
+        You can <strong>attach tags together</strong> with the <code>.has-addons</code> modifier.
+      </p>
+    </div>
+    <div class="bd-example">
+      {{ tags_addons }}
+    </div>
+  </div>
+  <div class="column highlight-full">
+    {% highlight html %}{{ tags_addons }}{% endhighlight %}
+  </div>
+</div>
+
+<div class="columns">
+  <div class="column">
+    <div class="content">
+      <p>
+        You can attach a <strong>text</strong> tag with a <strong>delete</strong> tag together.
+      </p>
+    </div>
+    <div class="bd-example">
+      {{ tags_delete_addons }}
+    </div>
+  </div>
+  <div class="column highlight-full">
+    {% highlight html %}{{ tags_delete_addons }}{% endhighlight %}
+  </div>
+</div>
+
+<div class="columns">
+  <div class="column">
+    <div class="content">
+      <p>
+        If you want to attach <code>.tags</code> containers <strong>together</strong>, simply use the <code>.field</code> element with the <code>.is-grouped</code> and <code>.is-grouped-multiline</code> modifiers.
+      </p>
+    </div>
+    <div class="bd-example">
+      {{ tags_field_addons }}
+    </div>
+  </div>
+  <div class="column highlight-full">
+    {% highlight html %}{{ tags_field_addons }}{% endhighlight %}
+  </div>
+</div>
+
+<div class="columns">
+  <div class="column">
+    <div class="content">
+      <p>
+        This can be useful for a long list of <strong>blog tags</strong>.
+      </p>
+    </div>
+    <div class="bd-example">
+      {{ tags_blog_addons }}
+    </div>
+  </div>
+  <div class="column">
+    {% highlight html %}{{ tags_blog_addons }}{% endhighlight %}
+  </div>
+</div>
+
+{% include variables.html type='element' %}

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,139 +60,119 @@ doc-subtab: title
 <p class="subtitle is-5">Subtitle 5</p>
 {% endcapture %}
 
-{% include subnav/subnav-elements.html %}
+<div class="columns">
-
+  <div class="column">
-<section class="section">
+    <div class="content">
-  <div class="container">
+      <p>There are <strong>2 types</strong> of heading:</p>
-    <h1 class="title">Titles</h1>
+      <ul>
-    <h2 class="subtitle">
+        <li>
-      Simple <strong>headings</strong> to add depth to your page
+          <code>.title</code>
-    </h2>
+        </li>
-    {%
+        <li>
-      include meta.html
+          <code>.subtitle</code>
-      colors=false
+        </li>
-      sizes=true
+      </ul>
-      variables=true
-    %}
-
-    <hr>
-
-    <div class="columns">
-      <div class="column">
-        <div class="content">
-          <p>There are <strong>2 types</strong> of heading:</p>
-          <ul>
-            <li>
-              <code>.title</code>
-            </li>
-            <li>
-              <code>.subtitle</code>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div class="column">
-        <p class="title">Title</p>
-        <p class="subtitle">Subtitle</p>
-      </div>
-      <div class="column">
-        {% highlight html %}{{ default }}{% endhighlight %}
-      </div>
     </div>
-
-    {% include anchor.html name="Sizes" %}
-
-    <div class="columns">
-      <div class="column">
-        <p>There are <strong>6 sizes</strong> available:</p>
-      </div>
-      <div class="column">
-        <p class="title is-1">Title 1</p>
-        <p class="title is-2">Title 2</p>
-        <p class="title is-3">Title 3 (default size)</p>
-        <p class="title is-4">Title 4</p>
-        <p class="title is-5">Title 5</p>
-        <p class="title is-6">Title 6</p>
-      </div>
-      <div class="column">
-        {% highlight html %}{{ title_sizes }}{% endhighlight %}
-      </div>
-    </div>
-
-    <div class="columns">
-      <div class="column"></div>
-      <div class="column">
-        <p class="subtitle is-1">Subtitle 1</p>
-        <p class="subtitle is-2">Subtitle 2</p>
-        <p class="subtitle is-3">Subtitle 3</p>
-        <p class="subtitle is-4">Subtitle 4</p>
-        <p class="subtitle is-5">Subtitle 5 (default size)</p>
-        <p class="subtitle is-6">Subtitle 6</p>
-      </div>
-      <div class="column">
-        {% highlight html %}{{ subtitle_sizes }}{% endhighlight %}
-      </div>
-    </div>
-
-    <hr>
-
-    <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>
-          <p>As a rule of thumb, it is recommended to use a size difference of <strong>two</strong>. So if you use a <code>title is-1</code>, combine it with a <code>subtitle is-3</code>.</p>
-        </div>
-      </div>
-      <div class="column">
-        <div class="block">
-          <p class="title is-1">Title 1</p>
-          <p class="subtitle is-3">Subtitle 3</p>
-        </div>
-        <div class="block">
-          <p class="title is-2">Title 2</p>
-          <p class="subtitle is-4">Subtitle 4</p>
-        </div>
-        <div class="block">
-          <p class="title is-3">Title 3</p>
-          <p class="subtitle is-5">Subtitle 5</p>
-        </div>
-      </div>
-      <div class="column">
-        {% highlight html %}{{ combine }}{% endhighlight %}
-      </div>
-    </div>
-
-    <hr>
-
-    <div class="columns">
-      <div class="column">
-        <div class="content">
-          <p>
-            <span class="tag is-success">New!</span>
-          </p>
-          <p>You can maintain the normal spacing between titles and subtitles if you use the <code>is-spaced</code> modifier on the first element.</p>
-        </div>
-      </div>
-      <div class="column">
-        <div class="block">
-          <p class="title is-1 is-spaced">Title 1</p>
-          <p class="subtitle is-3">Subtitle 3</p>
-        </div>
-        <div class="block">
-          <p class="title is-2 is-spaced">Title 2</p>
-          <p class="subtitle is-4">Subtitle 4</p>
-        </div>
-        <div class="block">
-          <p class="title is-3 is-spaced">Title 3</p>
-          <p class="subtitle is-5">Subtitle 5</p>
-        </div>
-      </div>
-      <div class="column">
-        {% highlight html %}{{ spaced }}{% endhighlight %}
-      </div>
-    </div>
-
-    {% include variables.html type='element' %}
-
   </div>
-</section>
+  <div class="column">
+    <p class="title">Title</p>
+    <p class="subtitle">Subtitle</p>
+  </div>
+  <div class="column">
+    {% highlight html %}{{ default }}{% endhighlight %}
+  </div>
+</div>
+
+{% include anchor.html name="Sizes" %}
+
+<div class="columns">
+  <div class="column">
+    <p>There are <strong>6 sizes</strong> available:</p>
+  </div>
+  <div class="column">
+    <p class="title is-1">Title 1</p>
+    <p class="title is-2">Title 2</p>
+    <p class="title is-3">Title 3 (default size)</p>
+    <p class="title is-4">Title 4</p>
+    <p class="title is-5">Title 5</p>
+    <p class="title is-6">Title 6</p>
+  </div>
+  <div class="column">
+    {% highlight html %}{{ title_sizes }}{% endhighlight %}
+  </div>
+</div>
+
+<div class="columns">
+  <div class="column"></div>
+  <div class="column">
+    <p class="subtitle is-1">Subtitle 1</p>
+    <p class="subtitle is-2">Subtitle 2</p>
+    <p class="subtitle is-3">Subtitle 3</p>
+    <p class="subtitle is-4">Subtitle 4</p>
+    <p class="subtitle is-5">Subtitle 5 (default size)</p>
+    <p class="subtitle is-6">Subtitle 6</p>
+  </div>
+  <div class="column">
+    {% highlight html %}{{ subtitle_sizes }}{% endhighlight %}
+  </div>
+</div>
+
+<hr>
+
+<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>
+      <p>As a rule of thumb, it is recommended to use a size difference of <strong>two</strong>. So if you use a <code>title is-1</code>, combine it with a <code>subtitle is-3</code>.</p>
+    </div>
+  </div>
+  <div class="column">
+    <div class="block">
+      <p class="title is-1">Title 1</p>
+      <p class="subtitle is-3">Subtitle 3</p>
+    </div>
+    <div class="block">
+      <p class="title is-2">Title 2</p>
+      <p class="subtitle is-4">Subtitle 4</p>
+    </div>
+    <div class="block">
+      <p class="title is-3">Title 3</p>
+      <p class="subtitle is-5">Subtitle 5</p>
+    </div>
+  </div>
+  <div class="column">
+    {% highlight html %}{{ combine }}{% endhighlight %}
+  </div>
+</div>
+
+<hr>
+
+<div class="columns">
+  <div class="column">
+    <div class="content">
+      <p>
+        <span class="tag is-success">New!</span>
+      </p>
+      <p>You can maintain the normal spacing between titles and subtitles if you use the <code>is-spaced</code> modifier on the first element.</p>
+    </div>
+  </div>
+  <div class="column">
+    <div class="block">
+      <p class="title is-1 is-spaced">Title 1</p>
+      <p class="subtitle is-3">Subtitle 3</p>
+    </div>
+    <div class="block">
+      <p class="title is-2 is-spaced">Title 2</p>
+      <p class="subtitle is-4">Subtitle 4</p>
+    </div>
+    <div class="block">
+      <p class="title is-3 is-spaced">Title 3</p>
+      <p class="subtitle is-5">Subtitle 5</p>
+    </div>
+  </div>
+  <div class="column">
+    {% highlight html %}{{ spaced }}{% endhighlight %}
+  </div>
+</div>
+
+{% include variables.html type='element' %}

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