Create links nav

docs/_data/links.json

@@ -0,0 +1,51 @@
+{
+  "by_id": {
+    "home": {
+      "name": "Home",
+      "path": ""
+    },
+    "documentation": {
+      "name": "Documentation",
+      "path": "/documentation"
+    },
+    "columns": {
+      "name": "Columns",
+      "path": "/documentation/columns"
+    },
+    "columns-basics": {
+      "name": "Basics",
+      "path": "/documentation/columns/basics"
+    },
+    "columns-gap": {
+      "name": "Gap",
+      "path": "/documentation/columns/gap"
+    },
+    "columns-nesting": {
+      "name": "Nesting",
+      "path": "/documentation/columns/nesting"
+    },
+    "columns-options": {
+      "name": "Options",
+      "path": "/documentation/columns/options"
+    },
+    "columns-responsiveness": {
+      "name": "Responsiveness",
+      "path": "/documentation/columns/responsiveness"
+    },
+    "columns-sizes": {
+      "name": "Sizes",
+      "path": "/documentation/columns/sizes"
+    },
+    "elements": {
+      "name": "Elements",
+      "path": "/documentation/elements"
+    },
+    "button": {
+      "name": "Button",
+      "path": "/documentation/elements/button"
+    }
+  },
+  "order": {
+    "columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"]
+  }
+}

docs/_data/variables/elements/title.json

@@ -31,6 +31,11 @@
       "name": "$title-strong-weight",
       "value": "inherit"
     },
+    "title-line-height": {
+      "id": "title-line-height",
+      "name": "$title-line-height",
+      "value": "1.125"
+    },
     "subtitle-color": {
       "id": "subtitle-color",
       "name": "$subtitle-color",
@@ -46,6 +51,11 @@
       "name": "$subtitle-weight",
       "value": "$weight-normal"
     },
+    "subtitle-line-height": {
+      "id": "subtitle-line-height",
+      "name": "$subtitle-line-height",
+      "value": "1.25"
+    },
     "subtitle-strong-color": {
       "id": "subtitle-strong-color",
       "name": "$subtitle-strong-color",
@@ -55,6 +65,11 @@
       "id": "subtitle-strong-weight",
       "name": "$subtitle-strong-weight",
       "value": "$weight-semibold"
+    },
+    "subtitle-negative-margin": {
+      "id": "subtitle-negative-margin",
+      "name": "$subtitle-negative-margin",
+      "value": "-1.25rem"
     }
   }
 }

docs/_includes/anchor.html

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

docs/_includes/elements/improve-page.html

@@ -1,6 +1,6 @@
 <section class="section bd-typo">
   <div class="container">
-    <p class="has-text-centered has-text-grey-light">
+    <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">
       </a>

docs/_layouts/documentation.html

@@ -5,6 +5,25 @@ route: documentation
 
 {% include navbar.html id="Documentation" %}
 
+{% assign current_link_id = page.breadcrumb | last %}
+{% assign category_links = site.data.links.order[page.doc-tab] %}
+
+{% for link_id in category_links %}
+  {% if link_id == current_link_id %}
+    {% unless forloop.first %}
+      {% assign previous_index = forloop.index0 | minus: 1 %}
+      {% assign previous_link_id = category_links[previous_index] %}
+      {% assign previous_link = site.data.links.by_id[previous_link_id] %}
+    {% endunless %}
+
+    {% unless forloop.last %}
+      {% assign next_index = forloop.index0 | plus: 1 %}
+      {% assign next_link_id = category_links[next_index] %}
+      {% assign next_link = site.data.links.by_id[next_link_id] %}
+    {% endunless %}
+  {% endif %}
+{% endfor %}
+
 <main class="bd-main">
   <div class="bd-side-background"></div>
   <div class="bd-main-container container">
@@ -13,27 +32,43 @@ route: documentation
         <div class="bd-breadcrumb">
           <nav class="breadcrumb" aria-label="breadcrumbs">
             <ul>
-              <li>
+              {% for key in page.breadcrumb %}
-                <a href="{{ site.url }}">Home</a>
+                {% assign link = site.data.links.by_id[key] %}
-              </li>
+                <li{% if forloop.last %} class="is-active"{% endif %}>
-              <li>
+                  <a href="{{ site.url }}{{ link.path }}">{{ link.name }}</a>
-                <a href="{{ site.url }}/documentation">Documentation</a>
+                </li>
-              </li>
+              {% endfor %}
-              <li>
-                <a href="{{ site.url }}/documentation/elements">Elements</a>
-              </li>
-              <li class="is-active">
-                <a href="#" aria-current="page">Button</a>
-              </li>
             </ul>
           </nav>
+
+          <nav class="bd-prev-next">
+            {% if previous_link %}
+              <a href="{{ site.url }}{{ previous_link.path }}" title="{{ previous_link.name }}">
+                ←
+              </a>
+            {% else %}
+              <span>
+                ←
+              </span>
+            {% endif %}
+
+            {% if next_link %}
+              <a href="{{ site.url }}{{ next_link.path }}" title="{{ next_link.name }}">
+                →
+              </a>
+            {% else %}
+              <span>
+                →
+              </span>
+            {% endif %}
+          </nav>
         </div>
 
         <header class="bd-header">
           <h1 class="title">
             {{ page.title }}
           </h1>
-          <p class="subtitle">
+          <p class="subtitle is-4">
             {{ page.subtitle }}
           </p>
         </header>
@@ -41,6 +76,8 @@ route: documentation
         <div class="bd-content">
           {{ content }}
         </div>
+
+        {% include elements/improve-page.html %}
       </div>
 
       <aside class="bd-side">
@@ -49,5 +86,3 @@ route: documentation
     </aside>
   </div>
 </main>
-
-{% include elements/improve-page.html %}

docs/_sass/main.sass

@@ -9,7 +9,27 @@
   position: relative
 
 .bd-breadcrumb
+  display: flex
+  justify-content: space-between
   margin-bottom: 2.5rem
+  .breadcrumb:not(:last-child)
+    margin-bottom: 0
+
+.bd-prev-next
+  align-items: flex-start
+  color: $grey-light
+  display: none
+  flex-grow: 0
+  flex-shrink: 0
+  margin-left: 0.5rem
+  text-align: center
+  a,
+  span
+    border-radius: $radius
+    width: 1.5rem
+  a
+    &:hover
+      background-color: $background
 
 .bd-header
   margin-bottom: 2.5rem
@@ -52,6 +72,8 @@
     overflow: hidden
     flex-grow: 1
     flex-shrink: 1
+  .bd-prev-next
+    display: flex
   .bd-side
     flex: 0 0 300px
 

docs/css/bulma-docs.css

@@ -347,10 +347,10 @@ code {
 }
 
 hr {
-  background-color: #dbdbdb;
+  background-color: whitesmoke;
   border: none;
   display: block;
-  height: 1px;
+  height: 2px;
   margin: 1.5rem 0;
 }
 
@@ -4960,7 +4960,7 @@ a.tag:hover {
 }
 
 .title:not(.is-spaced) + .subtitle {
-  margin-top: -1.5rem;
+  margin-top: -1.25rem;
 }
 
 .title.is-1 {
@@ -5004,7 +5004,7 @@ a.tag:hover {
 }
 
 .subtitle:not(.is-spaced) + .title {
-  margin-top: -1.5rem;
+  margin-top: -1.25rem;
 }
 
 .subtitle.is-1 {
@@ -5071,11 +5071,7 @@ a.tag:hover {
 }
 
 .breadcrumb {
-  align-items: stretch;
-  display: flex;
   font-size: 1rem;
-  overflow: hidden;
-  overflow-x: auto;
   white-space: nowrap;
 }
 
@@ -5107,15 +5103,15 @@ a.tag:hover {
 }
 
 .breadcrumb li + li::before {
-  color: #4a4a4a;
+  color: #b5b5b5;
   content: "\0002f";
 }
 
-.breadcrumb ul, .breadcrumb ol {
+.breadcrumb ul,
-  align-items: center;
+.breadcrumb ol {
+  align-items: flex-start;
   display: flex;
-  flex-grow: 1;
+  flex-wrap: wrap;
-  flex-shrink: 0;
   justify-content: flex-start;
 }
 
@@ -5127,11 +5123,11 @@ a.tag:hover {
   margin-left: 0.5em;
 }
 
-.breadcrumb.is-centered ol, .breadcrumb.is-centered ul {
+.breadcrumb.is-centered ol {
   justify-content: center;
 }
 
-.breadcrumb.is-right ol, .breadcrumb.is-right ul {
+.breadcrumb.is-right ol {
   justify-content: flex-end;
 }
 
@@ -9502,9 +9498,35 @@ label.panel-block:hover {
 }
 
 .bd-breadcrumb {
+  display: flex;
+  justify-content: space-between;
   margin-bottom: 2.5rem;
 }
 
+.bd-breadcrumb .breadcrumb:not(:last-child) {
+  margin-bottom: 0;
+}
+
+.bd-prev-next {
+  align-items: flex-start;
+  color: #b5b5b5;
+  display: none;
+  flex-grow: 0;
+  flex-shrink: 0;
+  margin-left: 0.5rem;
+  text-align: center;
+}
+
+.bd-prev-next a,
+.bd-prev-next span {
+  border-radius: 3px;
+  width: 1.5rem;
+}
+
+.bd-prev-next a:hover {
+  background-color: whitesmoke;
+}
+
 .bd-header {
   margin-bottom: 2.5rem;
 }
@@ -9557,6 +9579,9 @@ label.panel-block:hover {
     flex-grow: 1;
     flex-shrink: 1;
   }
+  .bd-prev-next {
+    display: flex;
+  }
   .bd-side {
     flex: 0 0 300px;
   }

docs/documentation/columns/basics.html

@@ -1,8 +1,14 @@
 ---
 title: Columns powered by Flexbox
+subtitle: "A simple way to build <strong>responsive columns</strong>"
 layout: documentation
 doc-tab: columns
 doc-subtab: basics
+breadcrumb:
+- home
+- documentation
+- columns
+- columns-basics
 ---
 
 {% capture columns %}
@@ -22,39 +28,30 @@ doc-subtab: basics
 </div>
 {% endcapture %}
 
-{% include subnav/subnav-columns.html %}
+<div class="content">
+  <p>Building a <strong>columns layout</strong> with Bulma is very simple:</p>
+  <ol>
+    <li>Add a <code>columns</code> container</li>
+    <li>Add as many <code>column</code> elements as you want</li>
+  </ol>
+  <p>Each column will have an <strong>equal width</strong>, no matter the number of columns.</p>
+</div>
 
-<section class="section">
+<div class="columns">
-  <div class="container">
+  <div class="column">
-    <h1 class="title">Columns</h1>
+    <p class="bd-notification is-primary">First column</p>
-    <h2 class="subtitle">A simple way to build <strong>responsive columns</strong></h2>
-    <hr>
-    <div class="content">
-      <p>Building a <strong>columns layout</strong> with Bulma is very simple:</p>
-      <ol>
-        <li>Add a <code>columns</code> container</li>
-        <li>Add as many <code>column</code> elements as you want</li>
-      </ol>
-      <p>Each column will have an <strong>equal width</strong>, no matter the number of columns.</p>
-    </div>
-
-    <div class="columns">
-      <div class="column">
-        <p class="bd-notification is-info">First column</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-success">Second column</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-warning">Third column</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-danger">Fourth column</p>
-      </div>
-    </div>
-
-    <div class="highlight-full">
-      {% highlight html %}{{ columns }}{% endhighlight %}
-    </div>
   </div>
-</section>
+  <div class="column">
+    <p class="bd-notification is-primary">Second column</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-primary">Third column</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-primary">Fourth column</p>
+  </div>
+</div>
+
+<div class="highlight-full">
+  {% highlight html %}{{ columns }}{% endhighlight %}
+</div>

docs/documentation/columns/gap.html

@@ -1,8 +1,14 @@
 ---
 title: Columns gap
+subtitle: Customize the <strong>gap</strong> between the columns
 layout: documentation
 doc-tab: columns
 doc-subtab: gap
+breadcrumb:
+- home
+- documentation
+- columns
+- columns-gap
 ---
 
 {% capture columns_default_gap %}
@@ -79,146 +85,134 @@ doc-subtab: gap
 </div>
 {% endcapture %}
 
-{% include subnav/subnav-columns.html %}
+{% include anchor.html name="Default gap" %}
 
-<section class="section">
+<div class="content">
-  <div class="container">
+  <p>
-    <h1 class="title">Columns gap</h1>
+    Each column has a <strong>gap</strong> equal to the <strong>variable</strong> <code>$column-gap</code>, which has a default value of <code>0.75rem</code>.
-    <h2 class="subtitle">
+    <br>
-      Customize the <strong>gap</strong> between the columns
+    Since the gap is on <em>each side</em> of a column, the gap between two adjacent columns will be twice the value of <code>$column-gap</code>, or <code>1.5rem</code> by default.
-    </h2>
+  </p>
+</div>
 
-    {% include anchor.html name="Default gap" %}
+{{ columns_default_gap }}
 
-    <div class="content">
+{% include anchor.html name="Gapless" %}
-      <p>
-        Each column has a <strong>gap</strong> equal to the <strong>variable</strong> <code>$column-gap</code>, which has a default value of <code>0.75rem</code>.
-        <br>
-        Since the gap is on <em>each side</em> of a column, the gap between two adjacent columns will be twice the value of <code>$column-gap</code>, or <code>1.5rem</code> by default.
-      </p>
-    </div>
 
-    {{ columns_default_gap }}
+<div class="content">
-
+  <p>
-    {% include anchor.html name="Gapless" %}
+    If you want to remove the <strong>space</strong> between the columns, add the <code>is-gapless</code> modifier on the <code>columns</code> container:
-
+  </p>
-    <div class="content">
+</div>
-      <p>
-        If you want to remove the <strong>space</strong> between the columns, add the <code>is-gapless</code> modifier on the <code>columns</code> container:
-      </p>
-    </div>
-
-    <div class="columns is-gapless">
-      <div class="column">
-        <p class="bd-notification is-info">First column</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-success">Second column</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-warning">Third column</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-danger">Fourth column</p>
-      </div>
-    </div>
-
-    <div class="highlight-full">
-      {% highlight html %}{{ columns_gapless }}{% endhighlight %}
-    </div>
-
-    <div class="content">
-      <p>You can combine it with the <code>is-multiline</code> modifier:</p>
-    </div>
-
-    <div class="columns is-multiline is-mobile is-gapless">
-      <div class="column is-one-quarter">
-        <p class="bd-notification is-info"><code>is-one-quarter</code></p>
-      </div>
-      <div class="column is-one-quarter">
-        <p class="bd-notification is-success"><code>is-one-quarter</code></p>
-      </div>
-      <div class="column is-one-quarter">
-        <p class="bd-notification is-warning"><code>is-one-quarter</code></p>
-      </div>
-      <div class="column is-one-quarter">
-        <p class="bd-notification is-danger"><code>is-one-quarter</code></p>
-      </div>
-      <div class="column is-half">
-        <p class="bd-notification is-info"><code>is-half</code></p>
-      </div>
-      <div class="column is-one-quarter">
-        <p class="bd-notification is-success"><code>is-one-quarter</code></p>
-      </div>
-      <div class="column is-one-quarter">
-        <p class="bd-notification is-warning"><code>is-one-quarter</code></p>
-      </div>
-      <div class="column is-one-quarter">
-        <p class="bd-notification is-danger"><code>is-one-quarter</code></p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-info">Auto</p>
-      </div>
-    </div>
-
-    <div class="highlight-full">
-      {% highlight html %}{{ columns_gapless_multiline }}{% endhighlight %}
-    </div>
-
-    {% include anchor.html name="Variable gap" %}
-
-    <div class="field is-grouped is-grouped-multiline">
-      <div class="control">
-        <div class="tags">
-          <span class="tag is-warning">Experimental</span>
-        </div>
-      </div>
-
-      <div class="control">
-        <div class="tags has-addons">
-          <span class="tag">New</span>
-          <span class="tag is-info">0.5.2</span>
-        </div>
-      </div>
-    </div>
-
-    <div class="content">
-      <p>
-         You can specify a <strong>custom column gap</strong> by appending one of <strong>9 modifiers</strong> on the <code>.columns</code> container.
-      </p>
-      <ul>
-        <li>
-          <code>is-0</code> will remove any gap (similar to <code>is-gapless</code>)
-        </li>
-        <li>
-          <code>is-3</code> is the <strong>default value</strong>, equivalent to the <code>0.75rem</code> value
-        </li>
-        <li>
-          <code>is-8</code> is the maximum gap of <code>2rem</code>
-        </li>
-      </ul>
-      <p>
-        Additionally, <code>.is-variable</code> should be added on the <code>.columns</code> container.
-      </p>
-    </div>
-
-    {% include klmn.html %}
-
-    <div class="message is-warning">
-      <div class="message-body">
-        <p>
-          This feature is only available in browsers that support <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables">CSS Variables</a>:
-        </p>
-      </div>
-    </div>
-
-    <div class="message is-info">
-      <div class="message-body">
-        <p>
-          If your Sass setup doesn't support CSS Variables, you can <strong>disable this feature</strong> by setting <code>$variable-columns</code> to <code>false</code>.
-        </p>
-      </div>
-    </div>
 
+<div class="columns is-gapless">
+  <div class="column">
+    <p class="bd-notification is-info">First column</p>
   </div>
-</section>
+  <div class="column">
+    <p class="bd-notification is-success">Second column</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-warning">Third column</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-danger">Fourth column</p>
+  </div>
+</div>
+
+<div class="highlight-full">
+  {% highlight html %}{{ columns_gapless }}{% endhighlight %}
+</div>
+
+<div class="content">
+  <p>You can combine it with the <code>is-multiline</code> modifier:</p>
+</div>
+
+<div class="columns is-multiline is-mobile is-gapless">
+  <div class="column is-one-quarter">
+    <p class="bd-notification is-info"><code>is-one-quarter</code></p>
+  </div>
+  <div class="column is-one-quarter">
+    <p class="bd-notification is-success"><code>is-one-quarter</code></p>
+  </div>
+  <div class="column is-one-quarter">
+    <p class="bd-notification is-warning"><code>is-one-quarter</code></p>
+  </div>
+  <div class="column is-one-quarter">
+    <p class="bd-notification is-danger"><code>is-one-quarter</code></p>
+  </div>
+  <div class="column is-half">
+    <p class="bd-notification is-info"><code>is-half</code></p>
+  </div>
+  <div class="column is-one-quarter">
+    <p class="bd-notification is-success"><code>is-one-quarter</code></p>
+  </div>
+  <div class="column is-one-quarter">
+    <p class="bd-notification is-warning"><code>is-one-quarter</code></p>
+  </div>
+  <div class="column is-one-quarter">
+    <p class="bd-notification is-danger"><code>is-one-quarter</code></p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-info">Auto</p>
+  </div>
+</div>
+
+<div class="highlight-full">
+  {% highlight html %}{{ columns_gapless_multiline }}{% endhighlight %}
+</div>
+
+{% include anchor.html name="Variable gap" %}
+
+<div class="field is-grouped is-grouped-multiline">
+  <div class="control">
+    <div class="tags">
+      <span class="tag is-warning">Experimental</span>
+    </div>
+  </div>
+
+  <div class="control">
+    <div class="tags has-addons">
+      <span class="tag">New</span>
+      <span class="tag is-info">0.5.2</span>
+    </div>
+  </div>
+</div>
+
+<div class="content">
+  <p>
+     You can specify a <strong>custom column gap</strong> by appending one of <strong>9 modifiers</strong> on the <code>.columns</code> container.
+  </p>
+  <ul>
+    <li>
+      <code>is-0</code> will remove any gap (similar to <code>is-gapless</code>)
+    </li>
+    <li>
+      <code>is-3</code> is the <strong>default value</strong>, equivalent to the <code>0.75rem</code> value
+    </li>
+    <li>
+      <code>is-8</code> is the maximum gap of <code>2rem</code>
+    </li>
+  </ul>
+  <p>
+    Additionally, <code>.is-variable</code> should be added on the <code>.columns</code> container.
+  </p>
+</div>
+
+{% include klmn.html %}
+
+<div class="message is-warning">
+  <div class="message-body">
+    <p>
+      This feature is only available in browsers that support <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables">CSS Variables</a>:
+    </p>
+  </div>
+</div>
+
+<div class="message is-info">
+  <div class="message-body">
+    <p>
+      If your Sass setup doesn't support CSS Variables, you can <strong>disable this feature</strong> by setting <code>$variable-columns</code> to <code>false</code>.
+    </p>
+  </div>
+</div>

docs/documentation/columns/nesting.html

@@ -1,79 +1,75 @@
 ---
 title: Nesting columns
+subtitle: "A simple way to build <strong>responsive columns</strong>"
 layout: documentation
 doc-tab: columns
 doc-subtab: nesting
+breadcrumb:
+- home
+- documentation
+- columns
+- columns-nesting
 ---
 
-{% include subnav/subnav-columns.html %}
+<div class="content">
-
+  <p>
-<section class="section">
+    You can <strong>nest</strong> columns to have more flexibility in your design. You only need to follow this structure:
-  <div class="container">
+  </p>
-    <h1 class="title">Nesting columns</h1>
+  <ul>
-    <h2 class="subtitle">A simple way to build <strong>responsive columns</strong></h2>
+    <li>
-    <hr>
+      <code>columns</code>: top-level columns container
-
-    <div class="content">
-      <p>
-        You can <strong>nest</strong> columns to have more flexibility in your design. You only need to follow this structure:
-      </p>
       <ul>
         <li>
-          <code>columns</code>: top-level columns container
+          <code>column</code>
           <ul>
             <li>
-              <code>column</code>
+              <code>columns</code>: nested columns
               <ul>
                 <li>
-                  <code>columns</code>: nested columns
+                  <code>column</code> and so on…
-                  <ul>
-                    <li>
-                      <code>column</code> and so on…
-                    </li>
-                  </ul>
                 </li>
               </ul>
             </li>
           </ul>
         </li>
       </ul>
-      <p>
+    </li>
-        The difference with <a href="{{ site.url }}/documentation/columns/options/#multiline">multiline columns</a> is the <strong>order</strong> in the HTML code: all the <strong class="has-text-info">blue</strong> columns appear <em>before</em> the <strong class="has-text-danger">red</strong> ones. Resize to a narrower viewport to see the result.
+  </ul>
-      </p>
+  <p>
-    </div>
+    The difference with <a href="{{ site.url }}/documentation/columns/options/#multiline">multiline columns</a> is the <strong>order</strong> in the HTML code: all the <strong class="has-text-info">blue</strong> columns appear <em>before</em> the <strong class="has-text-danger">red</strong> ones. Resize to a narrower viewport to see the result.
+  </p>
+</div>
 
-    <div class="columns">
+<div class="columns">
+  <div class="column">
+    <p class="bd-notification is-info">First column</p>
+    <div class="columns is-mobile">
       <div class="column">
-        <p class="bd-notification is-info">First column</p>
+        <p class="bd-notification is-info">First nested column</p>
-        <div class="columns is-mobile">
-          <div class="column">
-            <p class="bd-notification is-info">First nested column</p>
-          </div>
-          <div class="column">
-            <p class="bd-notification is-info">Second nested column</p>
-          </div>
-        </div>
       </div>
       <div class="column">
-        <p class="bd-notification is-danger">Second column</p>
+        <p class="bd-notification is-info">Second nested column</p>
-        <div class="columns is-mobile">
-          <div class="column is-half">
-            <p class="bd-notification is-danger">50%</p>
-          </div>
-          <div class="column">
-            <p class="bd-notification is-danger">Auto</p>
-          </div>
-          <div class="column">
-            <p class="bd-notification is-danger">Auto</p>
-          </div>
-        </div>
       </div>
     </div>
-
-    <div class="content">
-      <p>
-        Multiline columns will also have a <strong>gap</strong> between each <strong>line</strong>.
-      </p>
-    </div>
   </div>
-</section>
+  <div class="column">
+    <p class="bd-notification is-danger">Second column</p>
+    <div class="columns is-mobile">
+      <div class="column is-half">
+        <p class="bd-notification is-danger">50%</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-danger">Auto</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-danger">Auto</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="content">
+  <p>
+    Multiline columns will also have a <strong>gap</strong> between each <strong>line</strong>.
+  </p>
+</div>

docs/documentation/columns/options.html

@@ -1,8 +1,14 @@
 ---
 title: Column options
+subtitle: "Design different <strong>types</strong> of column layouts"
 layout: documentation
 doc-tab: columns
 doc-subtab: options
+breadcrumb:
+- home
+- documentation
+- columns
+- columns-options
 ---
 
 {% capture columns_multiline %}
@@ -83,111 +89,100 @@ doc-subtab: options
 </div>
 {% endcapture %}
 
-{% include subnav/subnav-columns.html %}
+{% include anchor.html name="Multiline" %}
 
-<section class="section">
+<div class="content">
-  <div class="container">
+  <p>Whenever you want to start a new line, you can close a <code>columns</code> container and start a new one. But you can also add the <code>is-multiline</code> modifier and add <strong>more</strong> column elements that would fit in a single row.</p>
-    <h1 class="title">Column options</h1>
+</div>
-    <h2 class="subtitle">
-      Design different <strong>types</strong> of column layouts
-    </h2>
 
-    {% include anchor.html name="Multiline" %}
+<div class="columns is-multiline is-mobile">
-
+  <div class="column is-one-quarter">
-    <div class="content">
+    <p class="bd-notification is-info"><code>is-one-quarter</code></p>
-      <p>Whenever you want to start a new line, you can close a <code>columns</code> container and start a new one. But you can also add the <code>is-multiline</code> modifier and add <strong>more</strong> column elements that would fit in a single row.</p>
-    </div>
-
-    <div class="columns is-multiline is-mobile">
-      <div class="column is-one-quarter">
-        <p class="bd-notification is-info"><code>is-one-quarter</code></p>
-      </div>
-      <div class="column is-one-quarter">
-        <p class="bd-notification is-success"><code>is-one-quarter</code></p>
-      </div>
-      <div class="column is-one-quarter">
-        <p class="bd-notification is-warning"><code>is-one-quarter</code></p>
-      </div>
-      <div class="column is-one-quarter">
-        <p class="bd-notification is-danger"><code>is-one-quarter</code></p>
-      </div>
-      <div class="column is-half">
-        <p class="bd-notification is-info"><code>is-half</code></p>
-      </div>
-      <div class="column is-one-quarter">
-        <p class="bd-notification is-success"><code>is-one-quarter</code></p>
-      </div>
-      <div class="column is-one-quarter">
-        <p class="bd-notification is-warning"><code>is-one-quarter</code></p>
-      </div>
-      <div class="column is-one-quarter">
-        <p class="bd-notification is-danger"><code>is-one-quarter</code></p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-info">Auto</p>
-      </div>
-    </div>
-
-    {% highlight html %}{{ columns_multiline }}{% endhighlight %}
-
-    {% include anchor.html name="Centering columns" %}
-
-    <div class="content">
-      <p>
-        While you can use <em>empty columns</em> (like <code>&lt;div class="column"&gt;&lt;/div&gt;</code>) to create horizontal space around <code>.column</code> elements, you can also use <code>.is-centered</code> on the parent <code>.columns</code> element:
-      </p>
-    </div>
-
-    <div class="columns is-mobile is-centered">
-      <div class="column is-half is-narrow">
-        <p class="bd-notification is-info">
-          <code class="html">is-half</code><br>
-          <code class="html">is-narrow</code>
-        </p>
-      </div>
-    </div>
-
-    {% highlight html %}{{ columns_mobile_centered }}{% endhighlight %}
-
-    <div class="content">
-      <p>
-        Use with <code>.is-multiline</code> to create a flexible, centered list (try resizing to see centering in different viewport sizes):
-      </p>
-    </div>
-
-    <div class="columns is-mobile is-multiline is-centered">
-      <div class="column is-narrow">
-        <p class="bd-notification is-info" style="padding: 1.25rem 1.5rem;">
-          <code class="html">is-narrow</code><br>
-          First Column
-        </p>
-      </div>
-      <div class="column is-narrow">
-        <p class="bd-notification is-success" style="padding: 1.25rem 1.5rem;">
-          <code class="html">is-narrow</code><br>
-          Our Second Column
-        </p>
-      </div>
-      <div class="column is-narrow">
-        <p class="bd-notification is-danger" style="padding: 1.25rem 1.5rem;">
-          <code class="html">is-narrow</code><br>
-          Third Column
-        </p>
-      </div>
-      <div class="column is-narrow">
-        <p class="bd-notification is-info" style="padding: 1.25rem 1.5rem;">
-          <code class="html">is-narrow</code><br>
-          The Fourth Column
-        </p>
-      </div>
-      <div class="column is-narrow">
-        <p class="bd-notification is-success" style="padding: 1.25rem 1.5rem;">
-          <code class="html">is-narrow</code><br>
-          Fifth Column
-        </p>
-      </div>
-    </div>
-
-    {% highlight html %}{{ columns_mobile_multiline_centered }}{% endhighlight %}
   </div>
-</section>
+  <div class="column is-one-quarter">
+    <p class="bd-notification is-success"><code>is-one-quarter</code></p>
+  </div>
+  <div class="column is-one-quarter">
+    <p class="bd-notification is-warning"><code>is-one-quarter</code></p>
+  </div>
+  <div class="column is-one-quarter">
+    <p class="bd-notification is-danger"><code>is-one-quarter</code></p>
+  </div>
+  <div class="column is-half">
+    <p class="bd-notification is-info"><code>is-half</code></p>
+  </div>
+  <div class="column is-one-quarter">
+    <p class="bd-notification is-success"><code>is-one-quarter</code></p>
+  </div>
+  <div class="column is-one-quarter">
+    <p class="bd-notification is-warning"><code>is-one-quarter</code></p>
+  </div>
+  <div class="column is-one-quarter">
+    <p class="bd-notification is-danger"><code>is-one-quarter</code></p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-info">Auto</p>
+  </div>
+</div>
+
+{% highlight html %}{{ columns_multiline }}{% endhighlight %}
+
+{% include anchor.html name="Centering columns" %}
+
+<div class="content">
+  <p>
+    While you can use <em>empty columns</em> (like <code>&lt;div class="column"&gt;&lt;/div&gt;</code>) to create horizontal space around <code>.column</code> elements, you can also use <code>.is-centered</code> on the parent <code>.columns</code> element:
+  </p>
+</div>
+
+<div class="columns is-mobile is-centered">
+  <div class="column is-half is-narrow">
+    <p class="bd-notification is-info">
+      <code class="html">is-half</code><br>
+      <code class="html">is-narrow</code>
+    </p>
+  </div>
+</div>
+
+{% highlight html %}{{ columns_mobile_centered }}{% endhighlight %}
+
+<div class="content">
+  <p>
+    Use with <code>.is-multiline</code> to create a flexible, centered list (try resizing to see centering in different viewport sizes):
+  </p>
+</div>
+
+<div class="columns is-mobile is-multiline is-centered">
+  <div class="column is-narrow">
+    <p class="bd-notification is-info" style="padding: 1.25rem 1.5rem;">
+      <code class="html">is-narrow</code><br>
+      First Column
+    </p>
+  </div>
+  <div class="column is-narrow">
+    <p class="bd-notification is-success" style="padding: 1.25rem 1.5rem;">
+      <code class="html">is-narrow</code><br>
+      Our Second Column
+    </p>
+  </div>
+  <div class="column is-narrow">
+    <p class="bd-notification is-danger" style="padding: 1.25rem 1.5rem;">
+      <code class="html">is-narrow</code><br>
+      Third Column
+    </p>
+  </div>
+  <div class="column is-narrow">
+    <p class="bd-notification is-info" style="padding: 1.25rem 1.5rem;">
+      <code class="html">is-narrow</code><br>
+      The Fourth Column
+    </p>
+  </div>
+  <div class="column is-narrow">
+    <p class="bd-notification is-success" style="padding: 1.25rem 1.5rem;">
+      <code class="html">is-narrow</code><br>
+      Fifth Column
+    </p>
+  </div>
+</div>
+
+{% highlight html %}{{ columns_mobile_multiline_centered }}{% endhighlight %}

docs/documentation/columns/responsiveness.html

@@ -1,8 +1,14 @@
 ---
 title: Columns responsiveness
+subtitle: "Handle <strong>different</strong> column layouts for each <strong>breakpoint</strong>"
 layout: documentation
 doc-tab: columns
 doc-subtab: responsiveness
+breadcrumb:
+- home
+- documentation
+- columns
+- columns-responsiveness
 ---
 
 {% capture columns_mobile %}
@@ -37,107 +43,96 @@ doc-subtab: responsiveness
 </div>
 {% endcapture %}
 
-{% include subnav/subnav-columns.html %}
+{% include anchor.html name="Mobile columns" %}
 
-<section class="section">
+<div class="content">
-  <div class="container">
+  <p>
-    <h1 class="title">Columns responsiveness</h1>
+    By default, columns are only activated from <strong>tablet</strong> onwards. This means columns are stacked on top of each other on <strong>mobile</strong>.
-    <h2 class="subtitle">
+    <br>
-      Handle <strong>different</strong> column layouts for each <strong>breakpoint</strong>
+    If you want columns to work on <strong>mobile too</strong>, just add the <code>is-mobile</code> modifier on the <code>columns</code> container:
-    </h2>
+  </p>
+</div>
 
-    {% include anchor.html name="Mobile columns" %}
+<div class="columns is-mobile">
-
+  <div class="column">
-    <div class="content">
+    <p class="bd-notification is-info">1</p>
-      <p>
-        By default, columns are only activated from <strong>tablet</strong> onwards. This means columns are stacked on top of each other on <strong>mobile</strong>.
-        <br>
-        If you want columns to work on <strong>mobile too</strong>, just add the <code>is-mobile</code> modifier on the <code>columns</code> container:
-      </p>
-    </div>
-
-    <div class="columns is-mobile">
-      <div class="column">
-        <p class="bd-notification is-info">1</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-success">2</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-warning">3</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-danger">4</p>
-      </div>
-    </div>
-
-    {% highlight html %}{{ columns_mobile }}{% endhighlight %}
-
-    <div class="message is-info">
-      <p class="message-header">
-        Resize
-      </p>
-      <p class="message-body">
-        If you want to see the difference, resize your browser and see <em>when</em> the columns are stacked and when they are horizontally distributed.
-      </p>
-    </div>
-
-    <div class="content">
-      <p>
-        If you <em>only</em> want columns on <strong>desktop</strong> upwards, just use the <code>is-desktop</code> modifier on the <code>columns</code> container:
-      </p>
-    </div>
-
-    <div class="columns is-desktop">
-      <div class="column">
-        <p class="bd-notification is-info">1</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-success">2</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-warning">3</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-danger">4</p>
-      </div>
-    </div>
-
-    {% highlight html %}{{ columns_desktop }}{% endhighlight %}
-
-    {% include anchor.html name="Different column sizes per breakpoint" %}
-
-    <div class="content">
-      <p>You can define a <strong>column size</strong> for <em>each</em> viewport size: mobile, tablet, and desktop.</p>
-    </div>
-
-    <div class="columns is-mobile">
-      <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">
-        <p class="bd-notification is-info">
-          <code>is-half-mobile</code><br>
-          <code>is-one-third-tablet</code><br>
-          <code>is-one-quarter-desktop</code>
-        </p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-success">1</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-warning">1</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-success">1</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-warning">1</p>
-      </div>
-    </div>
-
-    <div class="message is-info">
-      <p class="message-header">Resize</p>
-      <p class="message-body">If you want to see these classes in action, resize your browser window and see how the same column varies in width at each breakpoint.</p>
-    </div>
-
-    {% highlight html %}{{ columns_multiple_breakpoints }}{% endhighlight %}
   </div>
-</section>
+  <div class="column">
+    <p class="bd-notification is-success">2</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-warning">3</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-danger">4</p>
+  </div>
+</div>
+
+{% highlight html %}{{ columns_mobile }}{% endhighlight %}
+
+<div class="message is-info">
+  <p class="message-header">
+    Resize
+  </p>
+  <p class="message-body">
+    If you want to see the difference, resize your browser and see <em>when</em> the columns are stacked and when they are horizontally distributed.
+  </p>
+</div>
+
+<div class="content">
+  <p>
+    If you <em>only</em> want columns on <strong>desktop</strong> upwards, just use the <code>is-desktop</code> modifier on the <code>columns</code> container:
+  </p>
+</div>
+
+<div class="columns is-desktop">
+  <div class="column">
+    <p class="bd-notification is-info">1</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-success">2</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-warning">3</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-danger">4</p>
+  </div>
+</div>
+
+{% highlight html %}{{ columns_desktop }}{% endhighlight %}
+
+{% include anchor.html name="Different column sizes per breakpoint" %}
+
+<div class="content">
+  <p>You can define a <strong>column size</strong> for <em>each</em> viewport size: mobile, tablet, and desktop.</p>
+</div>
+
+<div class="columns is-mobile">
+  <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">
+    <p class="bd-notification is-info">
+      <code>is-half-mobile</code><br>
+      <code>is-one-third-tablet</code><br>
+      <code>is-one-quarter-desktop</code>
+    </p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-success">1</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-warning">1</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-success">1</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-warning">1</p>
+  </div>
+</div>
+
+<div class="message is-info">
+  <p class="message-header">Resize</p>
+  <p class="message-body">If you want to see these classes in action, resize your browser window and see how the same column varies in width at each breakpoint.</p>
+</div>
+
+{% highlight html %}{{ columns_multiple_breakpoints }}{% endhighlight %}

docs/documentation/columns/sizes.html

@@ -1,8 +1,14 @@
 ---
 title: Column sizes
+subtitle: "Define the <strong>size</strong> of each column <strong>individually</strong>"
 layout: documentation
 doc-tab: columns
 doc-subtab: sizes
+breadcrumb:
+- home
+- documentation
+- columns
+- columns-sizes
 ---
 
 {% capture columns_sizes %}
@@ -95,514 +101,501 @@ doc-subtab: sizes
 </div>
 {% endcapture %}
 
-{% include subnav/subnav-columns.html %}
+<div class="content">
+  <p>If you want to change the <strong>size</strong> of a single column, you can use one of the following classes:</p>
+  <ul>
+    <li>
+      <code>is-three-quarters</code>
+    </li>
+    <li>
+      <code>is-two-thirds</code>
+    </li>
+    <li>
+      <code>is-half</code>
+    </li>
+    <li>
+      <code>is-one-third</code>
+    </li>
+    <li>
+      <code>is-one-quarter</code>
+    </li>
+  </ul>
+  <p>The <em>other</em> columns will fill up the <strong>remaining</strong> space automatically.</p>
+</div>
 
-<section class="section">
+{% include elements/new-tag.html version="0.6.1" %}
-  <div class="container">
-    <h1 class="title">Column sizes</h1>
-    <h2 class="subtitle">
-      Define the <strong>size</strong> of each column <strong>individually</strong>
-    </h2>
 
-    <hr>
+<div class="content">
+  <p>You can now use the following multiples of <code>20%</code> as well:</p>
+  <ul>
+    <li>
+      <code>is-four-fifths</code>
+    </li>
+    <li>
+      <code>is-three-fifths</code>
+    </li>
+    <li>
+      <code>is-two-fifths</code>
+    </li>
+    <li>
+      <code>is-one-fifth</code>
+    </li>
+  </ul>
+</div>
 
-    <div class="content">
+<div class="columns">
-      <p>If you want to change the <strong>size</strong> of a single column, you can use one of the following classes:</p>
+  <div class="column is-four-fifths">
-      <ul>
+    <p class="bd-notification is-info">
-        <li>
+      <code class="html">is-four-fifths</code>
-          <code>is-three-quarters</code>
+    </p>
-        </li>
+  </div>
-        <li>
+  <div class="column">
-          <code>is-two-thirds</code>
+    <p class="bd-notification is-success">Auto</p>
-        </li>
+  </div>
-        <li>
+  <div class="column">
-          <code>is-half</code>
+    <p class="bd-notification is-warning">Auto</p>
-        </li>
+  </div>
-        <li>
+</div>
-          <code>is-one-third</code>
-        </li>
-        <li>
-          <code>is-one-quarter</code>
-        </li>
-      </ul>
-      <p>The <em>other</em> columns will fill up the <strong>remaining</strong> space automatically.</p>
-    </div>
 
-    {% include elements/new-tag.html version="0.6.1" %}
+<div class="columns">
+  <div class="column is-three-quarters">
+    <p class="bd-notification is-info">
+      <code class="html">is-three-quarters</code>
+    </p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-success">Auto</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-warning">Auto</p>
+  </div>
+</div>
 
-    <div class="content">
+<div class="columns">
-      <p>You can now use the following multiples of <code>20%</code> as well:</p>
+  <div class="column is-two-thirds">
-      <ul>
+    <p class="bd-notification is-info">
-        <li>
+      <code class="html">is-two-thirds</code>
-          <code>is-four-fifths</code>
+    </p>
-        </li>
+  </div>
-        <li>
+  <div class="column">
-          <code>is-three-fifths</code>
+    <p class="bd-notification is-success">Auto</p>
-        </li>
+  </div>
-        <li>
+  <div class="column">
-          <code>is-two-fifths</code>
+    <p class="bd-notification is-warning">Auto</p>
-        </li>
+  </div>
-        <li>
+</div>
-          <code>is-one-fifth</code>
-        </li>
-      </ul>
-    </div>
 
-    <div class="columns">
+<div class="columns">
-      <div class="column is-four-fifths">
+  <div class="column is-three-fifths">
-        <p class="bd-notification is-info">
+    <p class="bd-notification is-info">
-          <code class="html">is-four-fifths</code>
+      <code class="html">is-three-fifths</code>
-        </p>
+    </p>
-      </div>
+  </div>
-      <div class="column">
+  <div class="column">
-        <p class="bd-notification is-success">Auto</p>
+    <p class="bd-notification is-success">Auto</p>
-      </div>
+  </div>
-      <div class="column">
+  <div class="column">
-        <p class="bd-notification is-warning">Auto</p>
+    <p class="bd-notification is-warning">Auto</p>
-      </div>
+  </div>
-    </div>
+</div>
 
-    <div class="columns">
+<div class="columns">
-      <div class="column is-three-quarters">
+  <div class="column is-half">
-        <p class="bd-notification is-info">
+    <p class="bd-notification is-info">
-          <code class="html">is-three-quarters</code>
+      <code class="html">is-half</code>
-        </p>
+    </p>
-      </div>
+  </div>
-      <div class="column">
+  <div class="column">
-        <p class="bd-notification is-success">Auto</p>
+    <p class="bd-notification is-success">Auto</p>
-      </div>
+  </div>
-      <div class="column">
+  <div class="column">
-        <p class="bd-notification is-warning">Auto</p>
+    <p class="bd-notification is-warning">Auto</p>
-      </div>
+  </div>
-    </div>
+</div>
 
-    <div class="columns">
+<div class="columns">
-      <div class="column is-two-thirds">
+  <div class="column is-two-fifths">
-        <p class="bd-notification is-info">
+    <p class="bd-notification is-info">
-          <code class="html">is-two-thirds</code>
+      <code class="html">is-two-fifths</code>
-        </p>
+    </p>
-      </div>
+  </div>
-      <div class="column">
+  <div class="column">
-        <p class="bd-notification is-success">Auto</p>
+    <p class="bd-notification is-success">Auto</p>
-      </div>
+  </div>
-      <div class="column">
+  <div class="column">
-        <p class="bd-notification is-warning">Auto</p>
+    <p class="bd-notification is-warning">Auto</p>
-      </div>
+  </div>
-    </div>
+</div>
 
-    <div class="columns">
+<div class="columns">
-      <div class="column is-three-fifths">
+  <div class="column is-one-third">
-        <p class="bd-notification is-info">
+    <p class="bd-notification is-info">
-          <code class="html">is-three-fifths</code>
+      <code class="html">is-one-third</code>
-        </p>
+    </p>
-      </div>
+  </div>
-      <div class="column">
+  <div class="column">
-        <p class="bd-notification is-success">Auto</p>
+    <p class="bd-notification is-success">Auto</p>
-      </div>
+  </div>
-      <div class="column">
+  <div class="column">
-        <p class="bd-notification is-warning">Auto</p>
+    <p class="bd-notification is-warning">Auto</p>
-      </div>
+  </div>
-    </div>
+</div>
 
-    <div class="columns">
+<div class="columns">
-      <div class="column is-half">
+  <div class="column is-one-quarter">
-        <p class="bd-notification is-info">
+    <p class="bd-notification is-info">
-          <code class="html">is-half</code>
+      <code class="html">is-one-quarter</code>
-        </p>
+    </p>
-      </div>
+  </div>
-      <div class="column">
+  <div class="column">
-        <p class="bd-notification is-success">Auto</p>
+    <p class="bd-notification is-success">Auto</p>
-      </div>
+  </div>
-      <div class="column">
+  <div class="column">
-        <p class="bd-notification is-warning">Auto</p>
+    <p class="bd-notification is-warning">Auto</p>
-      </div>
+  </div>
-    </div>
+</div>
 
-    <div class="columns">
+<div class="columns">
-      <div class="column is-two-fifths">
+  <div class="column is-one-fifth">
-        <p class="bd-notification is-info">
+    <p class="bd-notification is-info">
-          <code class="html">is-two-fifths</code>
+      <code class="html">is-one-fifth</code>
-        </p>
+    </p>
-      </div>
+  </div>
-      <div class="column">
+  <div class="column">
-        <p class="bd-notification is-success">Auto</p>
+    <p class="bd-notification is-success">Auto</p>
-      </div>
+  </div>
-      <div class="column">
+  <div class="column">
-        <p class="bd-notification is-warning">Auto</p>
+    <p class="bd-notification is-warning">Auto</p>
-      </div>
+  </div>
-    </div>
+</div>
 
-    <div class="columns">
+<div class="highlight-full">
-      <div class="column is-one-third">
+  {% highlight html %}{{ columns_sizes }}{% endhighlight %}
-        <p class="bd-notification is-info">
+</div>
-          <code class="html">is-one-third</code>
-        </p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-success">Auto</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-warning">Auto</p>
-      </div>
-    </div>
 
-    <div class="columns">
+{% include anchor.html name="12 columns system" %}
-      <div class="column is-one-quarter">
-        <p class="bd-notification is-info">
-          <code class="html">is-one-quarter</code>
-        </p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-success">Auto</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-warning">Auto</p>
-      </div>
-    </div>
 
-    <div class="columns">
+<div class="content">
-      <div class="column is-one-fifth">
+  <p>As the grid can be divided into <strong>12</strong> columns, there are size classes for each division:</p>
-        <p class="bd-notification is-info">
+  <ul>
-          <code class="html">is-one-fifth</code>
+    <li><code>is-2</code></li>
-        </p>
+    <li><code>is-3</code></li>
-      </div>
+    <li><code>is-4</code></li>
-      <div class="column">
+    <li><code>is-5</code></li>
-        <p class="bd-notification is-success">Auto</p>
+    <li><code>is-6</code></li>
-      </div>
+    <li><code>is-7</code></li>
-      <div class="column">
+    <li><code>is-8</code></li>
-        <p class="bd-notification is-warning">Auto</p>
+    <li><code>is-9</code></li>
-      </div>
+    <li><code>is-10</code></li>
-    </div>
+    <li><code>is-11</code></li>
+  </ul>
+</div>
 
-    <div class="highlight-full">
+<div class="message is-info">
-      {% highlight html %}{{ columns_sizes }}{% endhighlight %}
+  <p class="message-header">Naming convention</p>
-    </div>
+  <p class="message-body">Each modifier class is named after <strong>how many columns you want out of 12</strong>. So if you want 7 columns out of 12, use <code>is-7</code>.</p>
+</div>
 
-    {% include anchor.html name="12 columns system" %}
+<div class="columns">
+  <div class="column is-2">
+    <p class="bd-notification is-info"><code>is-2</code></p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-success has-text-centered">1</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-warning has-text-centered">1</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-success has-text-centered">1</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-warning has-text-centered">1</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-success has-text-centered">1</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-warning has-text-centered">1</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-success has-text-centered">1</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-warning has-text-centered">1</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-success has-text-centered">1</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-warning has-text-centered">1</p>
+  </div>
+</div>
+<div class="columns">
+  <div class="column is-3">
+    <p class="bd-notification is-info"><code>is-3</code></p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-success has-text-centered">1</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-warning has-text-centered">1</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-success has-text-centered">1</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-warning has-text-centered">1</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-success has-text-centered">1</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-warning has-text-centered">1</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-success has-text-centered">1</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-warning has-text-centered">1</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-success has-text-centered">1</p>
+  </div>
+</div>
+<div class="columns">
+  <div class="column is-4">
+    <p class="bd-notification is-info"><code>is-4</code></p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-success has-text-centered">1</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-warning has-text-centered">1</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-success has-text-centered">1</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-warning has-text-centered">1</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-success has-text-centered">1</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-warning has-text-centered">1</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-success has-text-centered">1</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-warning has-text-centered">1</p>
+  </div>
+</div>
+<div class="columns">
+  <div class="column is-5">
+    <p class="bd-notification is-info"><code>is-5</code></p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-success has-text-centered">1</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-warning has-text-centered">1</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-success has-text-centered">1</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-warning has-text-centered">1</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-success has-text-centered">1</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-warning has-text-centered">1</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-success has-text-centered">1</p>
+  </div>
+</div>
+<div class="columns">
+  <div class="column is-6">
+    <p class="bd-notification is-info"><code>is-6</code></p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-success has-text-centered">1</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-warning has-text-centered">1</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-success has-text-centered">1</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-warning has-text-centered">1</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-success has-text-centered">1</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-warning has-text-centered">1</p>
+  </div>
+</div>
+<div class="columns">
+  <div class="column is-7">
+    <p class="bd-notification is-info"><code>is-7</code></p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-success has-text-centered">1</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-warning has-text-centered">1</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-success has-text-centered">1</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-warning has-text-centered">1</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-success has-text-centered">1</p>
+  </div>
+</div>
+<div class="columns">
+  <div class="column is-8">
+    <p class="bd-notification is-info"><code>is-8</code></p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-success has-text-centered">1</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-warning has-text-centered">1</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-success has-text-centered">1</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-warning has-text-centered">1</p>
+  </div>
+</div>
+<div class="columns">
+  <div class="column is-9">
+    <p class="bd-notification is-info"><code>is-9</code></p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-success has-text-centered">1</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-warning has-text-centered">1</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-success has-text-centered">1</p>
+  </div>
+</div>
+<div class="columns">
+  <div class="column is-10">
+    <p class="bd-notification is-info"><code>is-10</code></p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-success has-text-centered">1</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-warning has-text-centered">1</p>
+  </div>
+</div>
+<div class="columns">
+  <div class="column is-11">
+    <p class="bd-notification is-info"><code>is-11</code></p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-success has-text-centered">1</p>
+  </div>
+</div>
 
-    <div class="content">
+{% include anchor.html name="Offset" %}
-      <p>As the grid can be divided into <strong>12</strong> columns, there are size classes for each division:</p>
-      <ul>
-        <li><code>is-2</code></li>
-        <li><code>is-3</code></li>
-        <li><code>is-4</code></li>
-        <li><code>is-5</code></li>
-        <li><code>is-6</code></li>
-        <li><code>is-7</code></li>
-        <li><code>is-8</code></li>
-        <li><code>is-9</code></li>
-        <li><code>is-10</code></li>
-        <li><code>is-11</code></li>
-      </ul>
-    </div>
 
-    <div class="message is-info">
+<div class="content">
-      <p class="message-header">Naming convention</p>
+  <p>
-      <p class="message-body">Each modifier class is named after <strong>how many columns you want out of 12</strong>. So if you want 7 columns out of 12, use <code>is-7</code>.</p>
+    While you can use <em>empty columns</em> (like <code>&lt;div class="column"&gt;&lt;/div&gt;</code>) to create horizontal space around <code>.column</code> elements, you can also use <strong>offset</strong> modifiers like <code>.is-offset-x</code>:
-    </div>
+  </p>
+</div>
 
-    <div class="columns">
+<div class="columns is-mobile">
-      <div class="column is-2">
+  <div class="column is-half is-offset-one-quarter">
-        <p class="bd-notification is-info"><code>is-2</code></p>
+    <p class="bd-notification is-info">
-      </div>
+      <code class="html">is-half</code><br>
-      <div class="column">
+      <code class="html">is-offset-one-quarter</code>
-        <p class="bd-notification is-success has-text-centered">1</p>
+    </p>
-      </div>
+  </div>
-      <div class="column">
+</div>
-        <p class="bd-notification is-warning has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-success has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-warning has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-success has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-warning has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-success has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-warning has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-success has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-warning has-text-centered">1</p>
-      </div>
-    </div>
-    <div class="columns">
-      <div class="column is-3">
-        <p class="bd-notification is-info"><code>is-3</code></p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-success has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-warning has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-success has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-warning has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-success has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-warning has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-success has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-warning has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-success has-text-centered">1</p>
-      </div>
-    </div>
-    <div class="columns">
-      <div class="column is-4">
-        <p class="bd-notification is-info"><code>is-4</code></p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-success has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-warning has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-success has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-warning has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-success has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-warning has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-success has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-warning has-text-centered">1</p>
-      </div>
-    </div>
-    <div class="columns">
-      <div class="column is-5">
-        <p class="bd-notification is-info"><code>is-5</code></p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-success has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-warning has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-success has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-warning has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-success has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-warning has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-success has-text-centered">1</p>
-      </div>
-    </div>
-    <div class="columns">
-      <div class="column is-6">
-        <p class="bd-notification is-info"><code>is-6</code></p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-success has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-warning has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-success has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-warning has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-success has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-warning has-text-centered">1</p>
-      </div>
-    </div>
-    <div class="columns">
-      <div class="column is-7">
-        <p class="bd-notification is-info"><code>is-7</code></p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-success has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-warning has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-success has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-warning has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-success has-text-centered">1</p>
-      </div>
-    </div>
-    <div class="columns">
-      <div class="column is-8">
-        <p class="bd-notification is-info"><code>is-8</code></p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-success has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-warning has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-success has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-warning has-text-centered">1</p>
-      </div>
-    </div>
-    <div class="columns">
-      <div class="column is-9">
-        <p class="bd-notification is-info"><code>is-9</code></p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-success has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-warning has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-success has-text-centered">1</p>
-      </div>
-    </div>
-    <div class="columns">
-      <div class="column is-10">
-        <p class="bd-notification is-info"><code>is-10</code></p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-success has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-warning has-text-centered">1</p>
-      </div>
-    </div>
-    <div class="columns">
-      <div class="column is-11">
-        <p class="bd-notification is-info"><code>is-11</code></p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-success has-text-centered">1</p>
-      </div>
-    </div>
 
-    {% include anchor.html name="Offset" %}
+<div class="columns is-mobile">
+  <div class="column is-three-fifths is-offset-one-fifth">
+    <p class="bd-notification is-info">
+      <code class="html">is-three-fifths</code><br>
+      <code class="html">is-offset-one-fifth</code>
+    </p>
+  </div>
+</div>
 
-    <div class="content">
+<div class="columns is-mobile">
-      <p>
+  <div class="column is-4 is-offset-8">
-        While you can use <em>empty columns</em> (like <code>&lt;div class="column"&gt;&lt;/div&gt;</code>) to create horizontal space around <code>.column</code> elements, you can also use <strong>offset</strong> modifiers like <code>.is-offset-x</code>:
+    <p class="bd-notification is-info">
-      </p>
+      <code class="html">is-4</code><br>
-    </div>
+      <code class="html">is-offset-8</code>
+    </p>
+  </div>
+</div>
 
-    <div class="columns is-mobile">
+<div class="columns is-mobile">
-      <div class="column is-half is-offset-one-quarter">
+  <div class="column is-11 is-offset-1">
-        <p class="bd-notification is-info">
+    <p class="bd-notification is-info">
-          <code class="html">is-half</code><br>
+      <code class="html">is-11</code><br>
-          <code class="html">is-offset-one-quarter</code>
+      <code class="html">is-offset-1</code>
-        </p>
+    </p>
-      </div>
+  </div>
-    </div>
+</div>
 
-    <div class="columns is-mobile">
+<div class="highlight-full">
-      <div class="column is-three-fifths is-offset-one-fifth">
+  {% highlight html %}{{ columns_offset }}{% endhighlight %}
-        <p class="bd-notification is-info">
+</div>
-          <code class="html">is-three-fifths</code><br>
-          <code class="html">is-offset-one-fifth</code>
-        </p>
-      </div>
-    </div>
 
-    <div class="columns is-mobile">
+{% include anchor.html name="Narrow column" %}
-      <div class="column is-4 is-offset-8">
-        <p class="bd-notification is-info">
-          <code class="html">is-4</code><br>
-          <code class="html">is-offset-8</code>
-        </p>
-      </div>
-    </div>
 
-    <div class="columns is-mobile">
+<div class="content">
-      <div class="column is-11 is-offset-1">
+  <p>If you want a column to only take the <strong>space it needs</strong>, use the <code>is-narrow</code> modifier. The other column(s) will fill up the remaining space.</p>
-        <p class="bd-notification is-info">
+</div>
-          <code class="html">is-11</code><br>
-          <code class="html">is-offset-1</code>
-        </p>
-      </div>
-    </div>
 
-    <div class="highlight-full">
+<div class="columns">
-      {% highlight html %}{{ columns_offset }}{% endhighlight %}
+  <div class="column is-narrow">
-    </div>
+    <div class="box" style="width: 200px;">
-
+      <p class="title is-5">Narrow column</p>
-    {% include anchor.html name="Narrow column" %}
+      <p class="subtitle">This column is only 200px wide.</p>
-
-    <div class="content">
-      <p>If you want a column to only take the <strong>space it needs</strong>, use the <code>is-narrow</code> modifier. The other column(s) will fill up the remaining space.</p>
-    </div>
-
-    <div class="columns">
-      <div class="column is-narrow">
-        <div class="box" style="width: 200px;">
-          <p class="title is-5">Narrow column</p>
-          <p class="subtitle">This column is only 200px wide.</p>
-        </div>
-      </div>
-      <div class="column">
-        <div class="box">
-          <p class="title is-5">Flexible column</p>
-          <p class="subtitle">This column will take up the remaining space available.</p>
-        </div>
-      </div>
-    </div>
-
-    <div class="highlight-full">
-      {% highlight html %}{{ columns_narrow }}{% endhighlight %}
-    </div>
-
-    <div class="content">
-      <p>As for the size modifiers, you can have narrow columns for different <strong>breakpoints</strong>:</p>
-      <ul>
-        <li>
-          <code>is-narrow-mobile</code>
-        </li>
-        <li>
-          <code>is-narrow-tablet</code>
-        </li>
-        <li>
-          <code>is-narrow-desktop</code>
-        </li>
-      </ul>
     </div>
   </div>
-</section>
+  <div class="column">
+    <div class="box">
+      <p class="title is-5">Flexible column</p>
+      <p class="subtitle">This column will take up the remaining space available.</p>
+    </div>
+  </div>
+</div>
+
+<div class="highlight-full">
+  {% highlight html %}{{ columns_narrow }}{% endhighlight %}
+</div>
+
+<div class="content">
+  <p>As for the size modifiers, you can have narrow columns for different <strong>breakpoints</strong>:</p>
+  <ul>
+    <li>
+      <code>is-narrow-mobile</code>
+    </li>
+    <li>
+      <code>is-narrow-tablet</code>
+    </li>
+    <li>
+      <code>is-narrow-desktop</code>
+    </li>
+  </ul>
+</div>

docs/documentation/elements/button.html

@@ -4,6 +4,11 @@ subtitle: "The classic <strong>button</strong>, in different colors, sizes, and
 layout: documentation
 doc-tab: elements
 doc-subtab: button
+breadcrumb:
+- home
+- documentation
+- elements
+- button
 meta:
 - colors: true
 - sizes: true

sass/base/generic.sass

@@ -11,8 +11,8 @@ $code-padding: 0.25em 0.5em 0.25em !default
 $code-weight: normal !default
 $code-size: 0.875em !default
 
-$hr-background-color: $border !default
+$hr-background-color: $background !default
-$hr-height: 1px !default
+$hr-height: 2px !default
 $hr-margin: 1.5rem 0 !default
 
 $strong-color: $text-strong !default

sass/components/breadcrumb.sass

@@ -5,16 +5,12 @@ $breadcrumb-item-active-color: $text-strong !default
 $breadcrumb-item-padding-vertical: 0 !default
 $breadcrumb-item-padding-horizontal: 0.75em !default
 
-$breadcrumb-item-separator-color: $text !default
+$breadcrumb-item-separator-color: $grey-light !default
 
 .breadcrumb
   +block
   +unselectable
-  align-items: stretch
-  display: flex
   font-size: $size-normal
-  overflow: hidden
-  overflow-x: auto
   white-space: nowrap
   a
     align-items: center
@@ -37,11 +33,11 @@ $breadcrumb-item-separator-color: $text !default
     & + li::before
       color: $breadcrumb-item-separator-color
       content: "\0002f"
-  ul, ol
+  ul,
-    align-items: center
+  ol
+    align-items: flex-start
     display: flex
-    flex-grow: 1
+    flex-wrap: wrap
-    flex-shrink: 0
     justify-content: flex-start
   .icon
     &:first-child
@@ -50,10 +46,12 @@ $breadcrumb-item-separator-color: $text !default
       margin-left: 0.5em
   // Alignment
   &.is-centered
-    ol, ul
+    ol,
+      ul
       justify-content: center
   &.is-right
-    ol, ul
+    ol,
+      ul
       justify-content: flex-end
   // Sizes
   &.is-small

sass/elements/title.sass

@@ -1,6 +1,7 @@
 $title-color: $grey-darker !default
 $title-size: $size-3 !default
 $title-weight: $weight-semibold !default
+$title-line-height: 1.125 !default
 $title-strong-color: inherit !default
 $title-strong-weight: inherit !default
 $title-sub-size: 0.75em !default
@@ -9,8 +10,10 @@ $title-sup-size: 0.75em !default
 $subtitle-color: $grey-dark !default
 $subtitle-size: $size-5 !default
 $subtitle-weight: $weight-normal !default
+$subtitle-line-height: 1.25 !default
 $subtitle-strong-color: $grey-darker !default
 $subtitle-strong-weight: $weight-semibold !default
+$subtitle-negative-margin: -1.25rem !default
 
 .title,
 .subtitle
@@ -30,14 +33,14 @@ $subtitle-strong-weight: $weight-semibold !default
   color: $title-color
   font-size: $title-size
   font-weight: $title-weight
-  line-height: 1.125
+  line-height: $title-line-height
   strong
     color: $title-strong-color
     font-weight: $title-strong-weight
   & + .highlight
     margin-top: -0.75rem
   &:not(.is-spaced) + .subtitle
-    margin-top: -1.5rem
+    margin-top: $subtitle-negative-margin
   // Sizes
   @each $size in $sizes
     $i: index($sizes, $size)
@@ -48,12 +51,12 @@ $subtitle-strong-weight: $weight-semibold !default
   color: $subtitle-color
   font-size: $subtitle-size
   font-weight: $subtitle-weight
-  line-height: 1.25
+  line-height: $subtitle-line-height
   strong
     color: $subtitle-strong-color
     font-weight: $subtitle-strong-weight
   &:not(.is-spaced) + .title
-    margin-top: -1.5rem
+    margin-top: $subtitle-negative-margin
   // Sizes
   @each $size in $sizes
     $i: index($sizes, $size)