Add modifiers links

docs/_data/links.json

@@ -8,6 +8,30 @@
       "name": "Documentation",
       "path": "/documentation"
     },
+    "modifiers": {
+      "name": "Modifiers",
+      "path": "/documentation/modifiers"
+    },
+    "modifiers-syntax": {
+      "name": "Syntax",
+      "path": "/documentation/modifiers/syntax"
+    },
+    "modifiers-helpers": {
+      "name": "Helpers",
+      "path": "/documentation/modifiers/helpers"
+    },
+    "modifiers-responsive-helpers": {
+      "name": "Responsive helpers",
+      "path": "/documentation/modifiers/responsive-helpers"
+    },
+    "modifiers-color-helpers": {
+      "name": "Color helpers",
+      "path": "/documentation/modifiers/color-helpers"
+    },
+    "modifiers-typography-helpers": {
+      "name": "Typography helpers",
+      "path": "/documentation/modifiers/typography-helpers"
+    },
     "columns": {
       "name": "Columns",
       "path": "/documentation/columns"
@@ -191,6 +215,7 @@
   },
   "order": {
     "columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"],
+    "modifiers": ["modifiers-syntax", "modifiers-helpers", "modifiers-responsive-helpers", "modifiers-color-helpers", "modifiers-typography-helpers"],
     "form": ["form-general", "form-input", "form-textarea", "form-select", "form-checkbox", "form-radio", "form-file"],
     "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/_sass/main.sass

@@ -7,7 +7,6 @@ $main-spacing: 2.5rem
 // Lead
 
 .bd-lead
-  // border: 1px solid lightskyblue
   position: relative
 
 .bd-breadcrumb
@@ -39,17 +38,23 @@ $main-spacing: 2.5rem
   padding-bottom: $main-spacing
   .subtitle
     color: $text-light
+    max-width: 21em
     strong
       color: currentColor
   #meta
     margin-top: -0.5rem
 
+.bd-content
+  hr:first-child
+    display: none
+    & + .bd-anchor-title
+      padding-top: 0
+
 // Side
 
 .bd-side,
 .bd-side-background
   background-color: $white-bis
-  // border: 1px solid coral
 
 .bd-side
   position: relative
@@ -65,6 +70,8 @@ $main-spacing: 2.5rem
   .bd-lead,
   .bd-side
     padding: 1.5rem
+  .bd-header-carbon
+    margin-top: 1.5rem
 
 +mobile
   .bd-side-background
@@ -78,16 +85,6 @@ $main-spacing: 2.5rem
     overflow: hidden
     flex-grow: 1
     flex-shrink: 1
-  .bd-header
-    display: flex
-  .bd-header-titles
-    flex-grow: 1
-    flex-shrink: 1
-  .bd-header-carbon
-    flex-grow: 0
-    flex-shrink: 0
-    margin-left: 1.5rem
-    width: $carbon-width
   .bd-prev-next
     display: flex
   .bd-side
@@ -99,5 +96,15 @@ $main-spacing: 2.5rem
   .bd-lead
     margin-left: -3rem
     padding: 3rem
+  .bd-header
+    display: flex
+  .bd-header-titles
+    flex-grow: 1
+    flex-shrink: 1
+  .bd-header-carbon
+    flex-grow: 0
+    flex-shrink: 0
+    margin-left: 1.5rem
+    width: $carbon-width
   .bd-side
     padding: 3rem 0 3rem 1.5rem

docs/css/bulma-docs.css

@@ -9534,6 +9534,7 @@ label.panel-block:hover {
 
 .bd-header .subtitle {
   color: #7a7a7a;
+  max-width: 21em;
 }
 
 .bd-header .subtitle strong {
@@ -9544,6 +9545,14 @@ label.panel-block:hover {
   margin-top: -0.5rem;
 }
 
+.bd-content hr:first-child {
+  display: none;
+}
+
+.bd-content hr:first-child + .bd-anchor-title {
+  padding-top: 0;
+}
+
 .bd-side,
 .bd-side-background {
   background-color: #fafafa;
@@ -9566,6 +9575,9 @@ label.panel-block:hover {
   .bd-side {
     padding: 1.5rem;
   }
+  .bd-header-carbon {
+    margin-top: 1.5rem;
+  }
 }
 
 @media screen and (max-width: 768px) {
@@ -9584,19 +9596,6 @@ label.panel-block:hover {
     flex-grow: 1;
     flex-shrink: 1;
   }
-  .bd-header {
-    display: flex;
-  }
-  .bd-header-titles {
-    flex-grow: 1;
-    flex-shrink: 1;
-  }
-  .bd-header-carbon {
-    flex-grow: 0;
-    flex-shrink: 0;
-    margin-left: 1.5rem;
-    width: 300px;
-  }
   .bd-prev-next {
     display: flex;
   }
@@ -9613,6 +9612,19 @@ label.panel-block:hover {
     margin-left: -3rem;
     padding: 3rem;
   }
+  .bd-header {
+    display: flex;
+  }
+  .bd-header-titles {
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+  .bd-header-carbon {
+    flex-grow: 0;
+    flex-shrink: 0;
+    margin-left: 1.5rem;
+    width: 300px;
+  }
   .bd-side {
     padding: 3rem 0 3rem 1.5rem;
   }

docs/documentation/modifiers/color-helpers.html

@@ -1,104 +1,98 @@
 ---
 title: Color helpers
+subtitle: "Change the <strong>color</strong> of the text and/or background"
 layout: documentation
 doc-tab: modifiers
 doc-subtab: color-helpers
+breadcrumb:
+- home
+- documentation
+- modifiers
+- modifiers-color-helpers
 ---
 
-{% include subnav/subnav-modifiers.html %}
+{% include anchor.html name="Text color" %}
 
-<section class="section">
-  <div class="container">
-    <h1 class="title">Color helpers</h1>
-    <h2 class="subtitle">
-      Change the <strong>color</strong> of the text and/or background
-    </h2>
+<div class="content">
+  <p>
+    You can set any element to one of the <strong>9 colors</strong> or <strong>9 shades of grey</strong>:
+  </p>
+</div>
 
-    {% include anchor.html name="Text color" %}
+<table class="table is-bordered">
+  <thead>
+    <tr>
+      <th>
+        Class
+      </th>
+      <th>
+        Color
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr><td><code>has-text-white</code></td><td>{% include color/white.html %}</td></tr>
+    <tr><td><code>has-text-black</code></td><td>{% include color/black.html %}</td></tr>
+    <tr><td><code>has-text-light</code></td><td>{% include color/white-ter.html %}</td></tr>
+    <tr><td><code>has-text-dark</code></td><td>{% include color/grey-darker.html %}</td></tr>
+    <tr><td><code>has-text-primary</code></td><td>{% include color/turquoise.html %}</td></tr>
+    <tr><td><code>has-text-info</code></td><td>{% include color/cyan.html %}</td></tr>
+    <tr><td><code>has-text-link</code></td><td>{% include color/blue.html %}</td></tr>
+    <tr><td><code>has-text-success</code></td><td>{% include color/green.html %}</td></tr>
+    <tr><td><code>has-text-warning</code></td><td>{% include color/yellow.html %}</td></tr>
+    <tr><td><code>has-text-danger</code></td><td>{% include color/red.html %}</td></tr>
+    <tr><td><code>has-text-black-bis</code></td><td>{% include color/black-bis.html %}</td></tr>
+    <tr><td><code>has-text-black-ter</code></td><td>{% include color/black-ter.html %}</td></tr>
+    <tr><td><code>has-text-grey-darker</code></td><td>{% include color/grey-darker.html %}</td></tr>
+    <tr><td><code>has-text-grey-dark</code></td><td>{% include color/grey-dark.html %}</td></tr>
+    <tr><td><code>has-text-grey</code></td><td>{% include color/grey.html %}</td></tr>
+    <tr><td><code>has-text-grey-light</code></td><td>{% include color/grey-light.html %}</td></tr>
+    <tr><td><code>has-text-grey-lighter</code></td><td>{% include color/grey-lighter.html %}</td></tr>
+    <tr><td><code>has-text-white-ter</code></td><td>{% include color/white-ter.html %}</td></tr>
+    <tr><td><code>has-text-white-bis</code></td><td>{% include color/white-bis.html %}</td></tr>
+  </tbody>
+</table>
 
-    <div class="content">
-      <p>
-        You can set any element to one of the <strong>9 colors</strong> or <strong>9 shades of grey</strong>:
-      </p>
-    </div>
+{% include anchor.html name="Background color" %}
 
-    <table class="table is-bordered">
-      <thead>
-        <tr>
-          <th>
-            Class
-          </th>
-          <th>
-            Color
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr><td><code>has-text-white</code></td><td>{% include color/white.html %}</td></tr>
-        <tr><td><code>has-text-black</code></td><td>{% include color/black.html %}</td></tr>
-        <tr><td><code>has-text-light</code></td><td>{% include color/white-ter.html %}</td></tr>
-        <tr><td><code>has-text-dark</code></td><td>{% include color/grey-darker.html %}</td></tr>
-        <tr><td><code>has-text-primary</code></td><td>{% include color/turquoise.html %}</td></tr>
-        <tr><td><code>has-text-info</code></td><td>{% include color/cyan.html %}</td></tr>
-        <tr><td><code>has-text-link</code></td><td>{% include color/blue.html %}</td></tr>
-        <tr><td><code>has-text-success</code></td><td>{% include color/green.html %}</td></tr>
-        <tr><td><code>has-text-warning</code></td><td>{% include color/yellow.html %}</td></tr>
-        <tr><td><code>has-text-danger</code></td><td>{% include color/red.html %}</td></tr>
-        <tr><td><code>has-text-black-bis</code></td><td>{% include color/black-bis.html %}</td></tr>
-        <tr><td><code>has-text-black-ter</code></td><td>{% include color/black-ter.html %}</td></tr>
-        <tr><td><code>has-text-grey-darker</code></td><td>{% include color/grey-darker.html %}</td></tr>
-        <tr><td><code>has-text-grey-dark</code></td><td>{% include color/grey-dark.html %}</td></tr>
-        <tr><td><code>has-text-grey</code></td><td>{% include color/grey.html %}</td></tr>
-        <tr><td><code>has-text-grey-light</code></td><td>{% include color/grey-light.html %}</td></tr>
-        <tr><td><code>has-text-grey-lighter</code></td><td>{% include color/grey-lighter.html %}</td></tr>
-        <tr><td><code>has-text-white-ter</code></td><td>{% include color/white-ter.html %}</td></tr>
-        <tr><td><code>has-text-white-bis</code></td><td>{% include color/white-bis.html %}</td></tr>
-      </tbody>
-    </table>
+{% include elements/new-tag.html version="0.6.3" %}
 
-    {% include anchor.html name="Background color" %}
+<div class="content">
+  <p>
+    You can set any element to one of the <strong>9 colors</strong> or <strong>9 shades of grey</strong>:
+  </p>
+</div>
 
-    {% include elements/new-tag.html version="0.6.3" %}
-
-    <div class="content">
-      <p>
-        You can set any element to one of the <strong>9 colors</strong> or <strong>9 shades of grey</strong>:
-      </p>
-    </div>
-
-    <table class="table is-bordered">
-      <thead>
-        <tr>
-          <th>
-            Class
-          </th>
-          <th>
-            Background color
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr><td><code>has-background-white</code></td><td>{% include color/white.html %}</td></tr>
-        <tr><td><code>has-background-black</code></td><td>{% include color/black.html %}</td></tr>
-        <tr><td><code>has-background-light</code></td><td>{% include color/white-ter.html %}</td></tr>
-        <tr><td><code>has-background-dark</code></td><td>{% include color/grey-darker.html %}</td></tr>
-        <tr><td><code>has-background-primary</code></td><td>{% include color/turquoise.html %}</td></tr>
-        <tr><td><code>has-background-info</code></td><td>{% include color/cyan.html %}</td></tr>
-        <tr><td><code>has-background-link</code></td><td>{% include color/blue.html %}</td></tr>
-        <tr><td><code>has-background-success</code></td><td>{% include color/green.html %}</td></tr>
-        <tr><td><code>has-background-warning</code></td><td>{% include color/yellow.html %}</td></tr>
-        <tr><td><code>has-background-danger</code></td><td>{% include color/red.html %}</td></tr>
-        <tr><td><code>has-background-black-bis</code></td><td>{% include color/black-bis.html %}</td></tr>
-        <tr><td><code>has-background-black-ter</code></td><td>{% include color/black-ter.html %}</td></tr>
-        <tr><td><code>has-background-grey-darker</code></td><td>{% include color/grey-darker.html %}</td></tr>
-        <tr><td><code>has-background-grey-dark</code></td><td>{% include color/grey-dark.html %}</td></tr>
-        <tr><td><code>has-background-grey</code></td><td>{% include color/grey.html %}</td></tr>
-        <tr><td><code>has-background-grey-light</code></td><td>{% include color/grey-light.html %}</td></tr>
-        <tr><td><code>has-background-grey-lighter</code></td><td>{% include color/grey-lighter.html %}</td></tr>
-        <tr><td><code>has-background-white-ter</code></td><td>{% include color/white-ter.html %}</td></tr>
-        <tr><td><code>has-background-white-bis</code></td><td>{% include color/white-bis.html %}</td></tr>
-      </tbody>
-    </table>
-
-  </div>
-</section>
+<table class="table is-bordered">
+  <thead>
+    <tr>
+      <th>
+        Class
+      </th>
+      <th>
+        Background color
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr><td><code>has-background-white</code></td><td>{% include color/white.html %}</td></tr>
+    <tr><td><code>has-background-black</code></td><td>{% include color/black.html %}</td></tr>
+    <tr><td><code>has-background-light</code></td><td>{% include color/white-ter.html %}</td></tr>
+    <tr><td><code>has-background-dark</code></td><td>{% include color/grey-darker.html %}</td></tr>
+    <tr><td><code>has-background-primary</code></td><td>{% include color/turquoise.html %}</td></tr>
+    <tr><td><code>has-background-info</code></td><td>{% include color/cyan.html %}</td></tr>
+    <tr><td><code>has-background-link</code></td><td>{% include color/blue.html %}</td></tr>
+    <tr><td><code>has-background-success</code></td><td>{% include color/green.html %}</td></tr>
+    <tr><td><code>has-background-warning</code></td><td>{% include color/yellow.html %}</td></tr>
+    <tr><td><code>has-background-danger</code></td><td>{% include color/red.html %}</td></tr>
+    <tr><td><code>has-background-black-bis</code></td><td>{% include color/black-bis.html %}</td></tr>
+    <tr><td><code>has-background-black-ter</code></td><td>{% include color/black-ter.html %}</td></tr>
+    <tr><td><code>has-background-grey-darker</code></td><td>{% include color/grey-darker.html %}</td></tr>
+    <tr><td><code>has-background-grey-dark</code></td><td>{% include color/grey-dark.html %}</td></tr>
+    <tr><td><code>has-background-grey</code></td><td>{% include color/grey.html %}</td></tr>
+    <tr><td><code>has-background-grey-light</code></td><td>{% include color/grey-light.html %}</td></tr>
+    <tr><td><code>has-background-grey-lighter</code></td><td>{% include color/grey-lighter.html %}</td></tr>
+    <tr><td><code>has-background-white-ter</code></td><td>{% include color/white-ter.html %}</td></tr>
+    <tr><td><code>has-background-white-bis</code></td><td>{% include color/white-bis.html %}</td></tr>
+  </tbody>
+</table>

docs/documentation/modifiers/helpers.html

@@ -1,66 +1,63 @@
 ---
 title: Helpers
+subtitle: "You can apply <strong>helper classes</strong> to almost any element, in order to alter its style."
 layout: documentation
 doc-tab: modifiers
 doc-subtab: helpers
+breadcrumb:
+- home
+- documentation
+- modifiers
+- modifiers-helpers
 ---
 
-{% include subnav/subnav-modifiers.html %}
-
-<section class="section">
-  <div class="container">
-    <h1 class="title">Helpers</h1>
-    <h2 class="subtitle">You can apply <strong>helper classes</strong> to almost any element, in order to alter its style.</h2>
-    <hr>
-    <table class="table is-bordered">
-      <tbody>
-        <tr>
-          <th rowspan="3">Float</th>
-          <td><code>is-clearfix</code></td>
-          <td>Fixes an element's floating children</td>
-        </tr>
-        <tr>
-          <td><code>is-pulled-left</code></td>
-          <td>Moves an element to the left</td>
-        </tr>
-        <tr>
-          <td><code>is-pulled-right</code></td>
-          <td>Moves an element to the right</td>
-        </tr>
-        <tr>
-          <th rowspan="2">Spacing</th>
-          <td><code>is-marginless</code></td>
-          <td>Removes any <strong>margin</strong></td>
-        </tr>
-        <tr>
-          <td><code>is-paddingless</code></td>
-          <td>Removes any <strong>padding</strong></td>
-        </tr>
-        <tr>
-          <th rowspan="6">Other</th>
-          <td><code>is-overlay</code></td>
-          <td>Completely covers the first positioned parent</td>
-        </tr>
-          <td><code>is-clipped</code></td>
-          <td>Adds overflow <strong>hidden</strong></td>
-        </tr>
-        <tr>
-          <td><code>is-radiusless</code></td>
-          <td>Removes any <strong>radius</strong></td>
-        </tr>
-        <tr>
-          <td><code>is-shadowless</code></td>
-          <td>Removes any <strong>shadow</strong></td>
-        </tr>
-        <tr>
-          <td><code>is-unselectable</code></td>
-          <td>Prevents the text from being <strong>selectable</strong></td>
-        </tr>
-        <tr>
-          <td><code>is-invisible</code></td>
-          <td>Adds visibility <strong>hidden</strong></td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</section>
+<table class="table is-bordered">
+  <tbody>
+    <tr>
+      <th rowspan="3">Float</th>
+      <td><code>is-clearfix</code></td>
+      <td>Fixes an element's floating children</td>
+    </tr>
+    <tr>
+      <td><code>is-pulled-left</code></td>
+      <td>Moves an element to the left</td>
+    </tr>
+    <tr>
+      <td><code>is-pulled-right</code></td>
+      <td>Moves an element to the right</td>
+    </tr>
+    <tr>
+      <th rowspan="2">Spacing</th>
+      <td><code>is-marginless</code></td>
+      <td>Removes any <strong>margin</strong></td>
+    </tr>
+    <tr>
+      <td><code>is-paddingless</code></td>
+      <td>Removes any <strong>padding</strong></td>
+    </tr>
+    <tr>
+      <th rowspan="6">Other</th>
+      <td><code>is-overlay</code></td>
+      <td>Completely covers the first positioned parent</td>
+    </tr>
+      <td><code>is-clipped</code></td>
+      <td>Adds overflow <strong>hidden</strong></td>
+    </tr>
+    <tr>
+      <td><code>is-radiusless</code></td>
+      <td>Removes any <strong>radius</strong></td>
+    </tr>
+    <tr>
+      <td><code>is-shadowless</code></td>
+      <td>Removes any <strong>shadow</strong></td>
+    </tr>
+    <tr>
+      <td><code>is-unselectable</code></td>
+      <td>Prevents the text from being <strong>selectable</strong></td>
+    </tr>
+    <tr>
+      <td><code>is-invisible</code></td>
+      <td>Adds visibility <strong>hidden</strong></td>
+    </tr>
+  </tbody>
+</table>

docs/documentation/modifiers/responsive-helpers.html

@@ -1,8 +1,14 @@
 ---
 title: Responsive helpers
+subtitle: "<strong>Show/hide content</strong> depending on the width of the viewport"
 layout: documentation
 doc-tab: modifiers
 doc-subtab: responsive-helpers
+breadcrumb:
+- home
+- documentation
+- modifiers
+- modifiers-responsive-helpers
 ---
 
 {% capture thead %}
@@ -52,237 +58,228 @@ doc-subtab: responsive-helpers
 </td>
 {% endcapture %}
 
-{% include subnav/subnav-modifiers.html %}
+{% include anchor.html name="Show" %}
 
-<section class="section">
-  <div class="container">
-    <h1 class="title">Responsive helpers</h1>
-    <h2 class="subtitle"><strong>Show/hide content</strong> depending on the width of the viewport</h2>
+<div class="content">
+  <p>
+    You can use one of the following <code>display</code> classes:
+  </p>
+  <ul>
+    <li><code>block</code></li>
+    <li><code>flex</code></li>
+    <li><code>inline</code></li>
+    <li><code>inline-block</code></li>
+    <li><code>inline-flex</code></li>
+  </ul>
+  <p>For example, here's how the <code>is-flex</code> helper works:</p>
+</div>
 
-    {% include anchor.html name="Show" %}
-
-    <div class="content">
-      <p>
-        You can use one of the following <code>display</code> classes:
-      </p>
-      <ul>
-        <li><code>block</code></li>
-        <li><code>flex</code></li>
-        <li><code>inline</code></li>
-        <li><code>inline-block</code></li>
-        <li><code>inline-flex</code></li>
-      </ul>
-      <p>For example, here's how the <code>is-flex</code> helper works:</p>
-    </div>
-
-    <table class="table is-bordered">
-      {{ thead }}
-      <tbody>
-        <tr>
-          <td class="is-narrow">
-            <code>is-flex-mobile</code>
-          </td>
-          {{ flex }}
-          {{ unchanged }}
-          {{ unchanged }}
-          {{ unchanged }}
-          {{ unchanged }}
-        </tr>
-        <tr>
-          <td class="is-narrow">
-            <code>is-flex-tablet-only</code>
-          </td>
-          {{ unchanged }}
-          {{ flex }}
-          {{ unchanged }}
-          {{ unchanged }}
-          {{ unchanged }}
-        </tr>
-        <tr>
-          <td class="is-narrow">
-            <code>is-flex-desktop-only</code>
-          </td>
-          {{ unchanged }}
-          {{ unchanged }}
-          {{ flex }}
-          {{ unchanged }}
-          {{ unchanged }}
-        </tr>
-        <tr>
-          <td class="is-narrow">
-            <code>is-flex-widescreen-only</code>
-          </td>
-          {{ unchanged }}
-          {{ unchanged }}
-          {{ unchanged }}
-          {{ flex }}
-          {{ unchanged }}
-        </tr>
-        <tr>
-          <th colspan="5">
-            <p>Classes to display <strong>up to</strong> or <strong>from</strong> a specific breakpoint</p>
-          </th>
-        </tr>
-        <tr>
-          <td class="is-narrow">
-            <code>is-flex-touch</code>
-          </td>
-          {{ flex }}
-          {{ flex }}
-          {{ unchanged }}
-          {{ unchanged }}
-          {{ unchanged }}
-        </tr>
-        <tr>
-          <td class="is-narrow">
-            <code>is-flex-tablet</code>
-          </td>
-          {{ unchanged }}
-          {{ flex }}
-          {{ flex }}
-          {{ flex }}
-          {{ flex }}
-        </tr>
-        <tr>
-          <td class="is-narrow">
-            <code>is-flex-desktop</code>
-          </td>
-          {{ unchanged }}
-          {{ unchanged }}
-          {{ flex }}
-          {{ flex }}
-          {{ flex }}
-        </tr>
-        <tr>
-          <td class="is-narrow">
-            <code>is-flex-widescreen</code>
-          </td>
-          {{ unchanged }}
-          {{ unchanged }}
-          {{ unchanged }}
-          {{ flex }}
-          {{ flex }}
-        </tr>
-        <tr>
-          <td class="is-narrow">
-            <code>is-flex-fullhd</code>
-          </td>
-          {{ unchanged }}
-          {{ unchanged }}
-          {{ unchanged }}
-          {{ unchanged }}
-          {{ flex }}
-        </tr>
-      </tbody>
-    </table>
+<table class="table is-bordered">
+  {{ thead }}
+  <tbody>
+    <tr>
+      <td class="is-narrow">
+        <code>is-flex-mobile</code>
+      </td>
+      {{ flex }}
+      {{ unchanged }}
+      {{ unchanged }}
+      {{ unchanged }}
+      {{ unchanged }}
+    </tr>
+    <tr>
+      <td class="is-narrow">
+        <code>is-flex-tablet-only</code>
+      </td>
+      {{ unchanged }}
+      {{ flex }}
+      {{ unchanged }}
+      {{ unchanged }}
+      {{ unchanged }}
+    </tr>
+    <tr>
+      <td class="is-narrow">
+        <code>is-flex-desktop-only</code>
+      </td>
+      {{ unchanged }}
+      {{ unchanged }}
+      {{ flex }}
+      {{ unchanged }}
+      {{ unchanged }}
+    </tr>
+    <tr>
+      <td class="is-narrow">
+        <code>is-flex-widescreen-only</code>
+      </td>
+      {{ unchanged }}
+      {{ unchanged }}
+      {{ unchanged }}
+      {{ flex }}
+      {{ unchanged }}
+    </tr>
+    <tr>
+      <th colspan="5">
+        <p>Classes to display <strong>up to</strong> or <strong>from</strong> a specific breakpoint</p>
+      </th>
+    </tr>
+    <tr>
+      <td class="is-narrow">
+        <code>is-flex-touch</code>
+      </td>
+      {{ flex }}
+      {{ flex }}
+      {{ unchanged }}
+      {{ unchanged }}
+      {{ unchanged }}
+    </tr>
+    <tr>
+      <td class="is-narrow">
+        <code>is-flex-tablet</code>
+      </td>
+      {{ unchanged }}
+      {{ flex }}
+      {{ flex }}
+      {{ flex }}
+      {{ flex }}
+    </tr>
+    <tr>
+      <td class="is-narrow">
+        <code>is-flex-desktop</code>
+      </td>
+      {{ unchanged }}
+      {{ unchanged }}
+      {{ flex }}
+      {{ flex }}
+      {{ flex }}
+    </tr>
+    <tr>
+      <td class="is-narrow">
+        <code>is-flex-widescreen</code>
+      </td>
+      {{ unchanged }}
+      {{ unchanged }}
+      {{ unchanged }}
+      {{ flex }}
+      {{ flex }}
+    </tr>
+    <tr>
+      <td class="is-narrow">
+        <code>is-flex-fullhd</code>
+      </td>
+      {{ unchanged }}
+      {{ unchanged }}
+      {{ unchanged }}
+      {{ unchanged }}
+      {{ flex }}
+    </tr>
+  </tbody>
+</table>
 
-    <div class="content">
-      <p>
-        For the other display options, just replace <code>is-flex</code> with <code>is-block</code> <code>is-inline</code> <code>is-inline-block</code> or <code>is-inline-flex</code>
-      </p>
-    </div>
+<div class="content">
+  <p>
+    For the other display options, just replace <code>is-flex</code> with <code>is-block</code> <code>is-inline</code> <code>is-inline-block</code> or <code>is-inline-flex</code>
+  </p>
+</div>
 
-    {% include anchor.html name="Hide" %}
+{% include anchor.html name="Hide" %}
 
-    <table class="table is-bordered">
-      {{ thead }}
-      <tbody>
-        <tr>
-          <td class="is-narrow">
-            <code>is-hidden-mobile</code>
-          </td>
-          {{ hidden }}
-          {{ visible }}
-          {{ visible }}
-          {{ visible }}
-          {{ visible }}
-        </tr>
-        <tr>
-          <td class="is-narrow">
-            <code>is-hidden-tablet-only</code>
-          </td>
-          {{ visible }}
-          {{ hidden }}
-          {{ visible }}
-          {{ visible }}
-          {{ visible }}
-        </tr>
-        <tr>
-          <td class="is-narrow">
-            <code>is-hidden-desktop-only</code>
-          </td>
-          {{ visible }}
-          {{ visible }}
-          {{ hidden }}
-          {{ visible }}
-          {{ visible }}
-        </tr>
-        <tr>
-          <td class="is-narrow">
-            <code>is-hidden-widescreen-only</code>
-          </td>
-          {{ visible }}
-          {{ visible }}
-          {{ visible }}
-          {{ hidden }}
-          {{ visible }}
-        </tr>
-        <tr>
-          <th colspan="5">
-            <p>Classes to hide <strong>up to</strong> or <strong>from</strong> a specific breakpoint</p>
-          </th>
-        </tr>
-        <tr>
-          <td class="is-narrow">
-            <code>is-hidden-touch</code>
-          </td>
-          {{ hidden }}
-          {{ hidden }}
-          {{ visible }}
-          {{ visible }}
-          {{ visible }}
-        </tr>
-        <tr>
-          <td class="is-narrow">
-            <code>is-hidden-tablet</code>
-          </td>
-          {{ visible }}
-          {{ hidden }}
-          {{ hidden }}
-          {{ hidden }}
-          {{ hidden }}
-        </tr>
-        <tr>
-          <td class="is-narrow">
-            <code>is-hidden-desktop</code>
-          </td>
-          {{ visible }}
-          {{ visible }}
-          {{ hidden }}
-          {{ hidden }}
-          {{ hidden }}
-        </tr>
-        <tr>
-          <td class="is-narrow">
-            <code>is-hidden-widescreen</code>
-          </td>
-          {{ visible }}
-          {{ visible }}
-          {{ visible }}
-          {{ hidden }}
-          {{ hidden }}
-        </tr>
-        <tr>
-          <td class="is-narrow">
-            <code>is-hidden-fullhd</code>
-          </td>
-          {{ visible }}
-          {{ visible }}
-          {{ visible }}
-          {{ visible }}
-          {{ hidden }}
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</section>
+<table class="table is-bordered">
+  {{ thead }}
+  <tbody>
+    <tr>
+      <td class="is-narrow">
+        <code>is-hidden-mobile</code>
+      </td>
+      {{ hidden }}
+      {{ visible }}
+      {{ visible }}
+      {{ visible }}
+      {{ visible }}
+    </tr>
+    <tr>
+      <td class="is-narrow">
+        <code>is-hidden-tablet-only</code>
+      </td>
+      {{ visible }}
+      {{ hidden }}
+      {{ visible }}
+      {{ visible }}
+      {{ visible }}
+    </tr>
+    <tr>
+      <td class="is-narrow">
+        <code>is-hidden-desktop-only</code>
+      </td>
+      {{ visible }}
+      {{ visible }}
+      {{ hidden }}
+      {{ visible }}
+      {{ visible }}
+    </tr>
+    <tr>
+      <td class="is-narrow">
+        <code>is-hidden-widescreen-only</code>
+      </td>
+      {{ visible }}
+      {{ visible }}
+      {{ visible }}
+      {{ hidden }}
+      {{ visible }}
+    </tr>
+    <tr>
+      <th colspan="5">
+        <p>Classes to hide <strong>up to</strong> or <strong>from</strong> a specific breakpoint</p>
+      </th>
+    </tr>
+    <tr>
+      <td class="is-narrow">
+        <code>is-hidden-touch</code>
+      </td>
+      {{ hidden }}
+      {{ hidden }}
+      {{ visible }}
+      {{ visible }}
+      {{ visible }}
+    </tr>
+    <tr>
+      <td class="is-narrow">
+        <code>is-hidden-tablet</code>
+      </td>
+      {{ visible }}
+      {{ hidden }}
+      {{ hidden }}
+      {{ hidden }}
+      {{ hidden }}
+    </tr>
+    <tr>
+      <td class="is-narrow">
+        <code>is-hidden-desktop</code>
+      </td>
+      {{ visible }}
+      {{ visible }}
+      {{ hidden }}
+      {{ hidden }}
+      {{ hidden }}
+    </tr>
+    <tr>
+      <td class="is-narrow">
+        <code>is-hidden-widescreen</code>
+      </td>
+      {{ visible }}
+      {{ visible }}
+      {{ visible }}
+      {{ hidden }}
+      {{ hidden }}
+    </tr>
+    <tr>
+      <td class="is-narrow">
+        <code>is-hidden-fullhd</code>
+      </td>
+      {{ visible }}
+      {{ visible }}
+      {{ visible }}
+      {{ visible }}
+      {{ hidden }}
+    </tr>
+  </tbody>
+</table>

docs/documentation/modifiers/syntax.html

@@ -1,12 +1,16 @@
 ---
 title: Modifiers syntax
+subtitle: "Most Bulma elements have <strong>alternative</strong> styles. To apply them, you only need to append one of the <strong>modifier classes</strong>.<br>They all start with <code>is-</code> or <code>has-</code>.</h2>"
 layout: documentation
 doc-tab: modifiers
 doc-subtab: syntax
+breadcrumb:
+- home
+- documentation
+- modifiers
+- modifiers-syntax
 ---
 
-{% include subnav/subnav-modifiers.html %}
-
 {% capture button_example %}
 <a class="button">
   Button
@@ -19,75 +23,68 @@ doc-subtab: syntax
 </a>
 {% endcapture %}
 
-<section class="section">
-  <div class="container">
-    <h1 class="title">Modifiers syntax</h1>
-    <h2 class="subtitle">Most Bulma elements have <strong>alternative</strong> styles. To apply them, you only need to append one of the <strong>modifier classes</strong>.
-    <br>
-    They all start with <code>is-</code> or <code>has-</code>.</h2>
-    <hr>
-    <div class="columns">
-      <div class="column">
-        <p>Let's start with a simple <strong>button</strong> that uses the <code>"button"</code> CSS class:</p>
-      </div>
-      <div class="column">
-        <p>
-          {{button_example}}
-        </p>
-      </div>
-      <div class="column is-half">
-        {% highlight html %}{{button_example}}{% endhighlight %}
-      </div>
-    </div>
-    <div class="columns">
-      <div class="column">
-        <p>By <strong>adding</strong> the <code>"is-primary"</code> CSS class, you can modify the <strong>color</strong>:</p>
-      </div>
-      <div class="column">
-        <p>
-          {{button_primary_example}}
-        </p>
-      </div>
-      <div class="column is-half">
-        {% highlight html %}{{button_primary_example}}{% endhighlight %}
-      </div>
+<div class="columns">
+  <div class="column">
+    <p>Let's start with a simple <strong>button</strong> that uses the <code>"button"</code> CSS class:</p>
+  </div>
+  <div class="column">
+    <p>
+      {{button_example}}
+    </p>
+  </div>
+  <div class="column is-half">
+    {% highlight html %}{{button_example}}{% endhighlight %}
+  </div>
+</div>
+<div class="columns">
+  <div class="column">
+    <p>By <strong>adding</strong> the <code>"is-primary"</code> CSS class, you can modify the <strong>color</strong>:</p>
+  </div>
+  <div class="column">
+    <p>
+      {{button_primary_example}}
+    </p>
+  </div>
+  <div class="column is-half">
+    {% highlight html %}{{button_primary_example}}{% endhighlight %}
+  </div>
+</div>
+<div class="columns">
+  <div class="column">
+    <div class="content">
+      <p>You can use one of the <strong>6 main colors</strong>:</p>
+      <ul>
+        <li><code>is-primary</code></li>
+        <li><code>is-link</code></li>
+        <li><code>is-info</code></li>
+        <li><code>is-success</code></li>
+        <li><code>is-warning</code></li>
+        <li><code>is-danger</code></li>
+      </ul>
     </div>
-    <div class="columns">
-      <div class="column">
-        <div class="content">
-          <p>You can use one of the <strong>6 main colors</strong>:</p>
-          <ul>
-            <li><code>is-primary</code></li>
-            <li><code>is-link</code></li>
-            <li><code>is-info</code></li>
-            <li><code>is-success</code></li>
-            <li><code>is-warning</code></li>
-            <li><code>is-danger</code></li>
-          </ul>
-        </div>
-      </div>
-      <div class="column">
-        <p class="field">
-          <a class="button is-primary">Button</a>
-        </p>
-        <p class="field">
-          <a class="button is-link">Button</a>
-        </p>
-        <p class="field">
-          <a class="button is-info">Button</a>
-        </p>
-        <p class="field">
-          <a class="button is-success">Button</a>
-        </p>
-        <p class="field">
-          <a class="button is-warning">Button</a>
-        </p>
-        <p class="field">
-          <a class="button is-danger">Button</a>
-        </p>
-      </div>
-      <div class="column is-half">
-        <div class="highlight-full">
+  </div>
+  <div class="column">
+    <p class="field">
+      <a class="button is-primary">Button</a>
+    </p>
+    <p class="field">
+      <a class="button is-link">Button</a>
+    </p>
+    <p class="field">
+      <a class="button is-info">Button</a>
+    </p>
+    <p class="field">
+      <a class="button is-success">Button</a>
+    </p>
+    <p class="field">
+      <a class="button is-warning">Button</a>
+    </p>
+    <p class="field">
+      <a class="button is-danger">Button</a>
+    </p>
+  </div>
+  <div class="column is-half">
+    <div class="highlight-full">
 {% highlight html %}
 <a class="button is-primary">
   Button
@@ -108,35 +105,36 @@ doc-subtab: syntax
   Button
 </a>
 {% endhighlight %}
-        </div>
-      </div>
     </div>
-    <div class="columns">
-      <div class="column">
-        <div class="content">
-          <p>You can also alter the <strong>size</strong>:</p>
-          <ul>
-            <li><code>is-small</code></li>
-            <li><code>is-medium</code></li>
-            <li><code>is-large</code></li>
-          </ul>
-        </div>
-      </div>
-      <div class="column">
-        <p class="field">
-          <a class="button is-small">Button</a>
-        </p>
-        <p class="field">
-          <a class="button">Button</a>
-        </p>
-        <p class="field">
-          <a class="button is-medium">Button</a>
-        </p>
-        <p class="field">
-          <a class="button is-large">Button</a>
-        </p>
-      </div>
-      <div class="column is-half">
+  </div>
+</div>
+
+<div class="columns">
+  <div class="column">
+    <div class="content">
+      <p>You can also alter the <strong>size</strong>:</p>
+      <ul>
+        <li><code>is-small</code></li>
+        <li><code>is-medium</code></li>
+        <li><code>is-large</code></li>
+      </ul>
+    </div>
+  </div>
+  <div class="column">
+    <p class="field">
+      <a class="button is-small">Button</a>
+    </p>
+    <p class="field">
+      <a class="button">Button</a>
+    </p>
+    <p class="field">
+      <a class="button is-medium">Button</a>
+    </p>
+    <p class="field">
+      <a class="button is-large">Button</a>
+    </p>
+  </div>
+  <div class="column is-half">
 {% highlight html %}
 <a class="button is-small">
   Button
@@ -152,30 +150,31 @@ doc-subtab: syntax
 </a>
 {% endhighlight %}
       </div>
+</div>
+
+<div class="columns">
+  <div class="column">
+    <div class="content">
+      <p>Or the <strong>style</strong> or <strong>state</strong>:</p>
+      <ul>
+        <li><code>is-outlined</code></li>
+        <li><code>is-loading</code></li>
+        <li><code>[disabled]</code></li>
+      </ul>
     </div>
-    <div class="columns">
-      <div class="column">
-        <div class="content">
-          <p>Or the <strong>style</strong> or <strong>state</strong>:</p>
-          <ul>
-            <li><code>is-outlined</code></li>
-            <li><code>is-loading</code></li>
-            <li><code>[disabled]</code></li>
-          </ul>
-        </div>
-      </div>
-      <div class="column">
-        <p class="field">
-          <a class="button is-primary is-outlined">Button</a>
-        </p>
-        <p class="field">
-          <a class="button is-primary is-loading">Button</a>
-        </p>
-        <p class="field">
-          <a class="button is-primary" disabled>Button</a>
-        </p>
-      </div>
-      <div class="column is-half">
+  </div>
+  <div class="column">
+    <p class="field">
+      <a class="button is-primary is-outlined">Button</a>
+    </p>
+    <p class="field">
+      <a class="button is-primary is-loading">Button</a>
+    </p>
+    <p class="field">
+      <a class="button is-primary" disabled>Button</a>
+    </p>
+  </div>
+  <div class="column is-half">
 {% highlight html %}
 <a class="button is-primary is-outlined">
   Button
@@ -188,6 +187,4 @@ doc-subtab: syntax
 </a>
 {% endhighlight %}
       </div>
-    </div>
-  </div>
-</section>
+</div>

docs/documentation/modifiers/typography-helpers.html

@@ -1,8 +1,14 @@
 ---
 title: Typography helpers
+subtitle: "Change the <strong>size</strong> and <strong>color</strong> of the text for one or multiple viewport width"
 layout: documentation
 doc-tab: modifiers
 doc-subtab: typography-helpers
+breadcrumb:
+- home
+- documentation
+- modifiers
+- modifiers-typography-helpers
 ---
 
 {% assign initial_vars = site.data.variables.utilities.initial-variables.vars %}
@@ -49,56 +55,51 @@ doc-subtab: typography-helpers
 </td>
 {% endcapture %}
 
-{% include subnav/subnav-modifiers.html %}
+{% include anchor.html name="Size" %}
 
-<section class="section">
-  <div class="container">
-    <h1 class="title">Typography helpers</h1>
-    <h2 class="subtitle">
-      Change the <strong>size</strong> and <strong>color</strong> of the text for one or multiple viewport width
-    </h2>
+<div class="content">
+  <p>
+    There are <strong>{{ sizes | size }} sizes</strong> to choose from:
+  </p>
+</div>
 
-    {% include anchor.html name="Size" %}
+<table class="table is-bordered">
+  <thead>
+    <tr>
+      <th>
+        Class
+      </th>
+      <th>
+        Font-size
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+		{% for size in sizes %}
+			<tr>
+				{% assign key = 'size-' | append: forloop.index %}
+				<td><code>is-size-{{ forloop.index }}</code></td>
+				<td><code>{{ initial_vars[key].value }}</code></td>
+			</tr>
+    {% endfor %}
+  </tbody>
+</table>
 
-    <div class="content">
-      <p>
-        There are <strong>{{ sizes | size }} sizes</strong> to choose from:
-      </p>
-    </div>
+{% include anchor.html name="Responsive size" %}
 
-    <table class="table is-bordered">
-      <thead>
-        <tr>
-          <th>
-            Class
-          </th>
-          <th>
-            Font-size
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-				{% for size in sizes %}
-					<tr>
-						{% assign key = 'size-' | append: forloop.index %}
-						<td><code>is-size-{{ forloop.index }}</code></td>
-						<td><code>{{ initial_vars[key].value }}</code></td>
-					</tr>
-        {% endfor %}
-      </tbody>
-    </table>
+<div class="content">
+  <p>
+    You can choose a <strong>specific</strong> size for <em>each</em> viewport width. You simply needed to append the <strong>viewport width</strong> to the size modifier.
+  </p>
+  <p>
+    For example, here are the modifiers for <code>$size-1</code>:
+  </p>
+</div>
 
-    {% include anchor.html name="Responsive size" %}
-
-    <div class="content">
-      <p>
-        You can choose a <strong>specific</strong> size for <em>each</em> viewport width. You simply needed to append the <strong>viewport width</strong> to the size modifier.
-      </p>
-      <p>
-        For example, here are the modifiers for <code>$size-1</code>:
-      </p>
-    </div>
+{% include layout/main-close.html %}
 
+<div class="container">
+  <div class="table-container">
     <table class="table is-bordered">
       {{ thead }}
       <tbody>
@@ -152,106 +153,114 @@ doc-subtab: typography-helpers
         </tr>
       </tbody>
     </table>
+  </div>
+</div>
 
-    <div class="content">
-      <p>
-        You can use the same logic for each of the <strong>7 sizes</strong>.
-      </p>
-    </div>
+{% include layout/main-open.html %}
 
-    {% include anchor.html name="Colors" %}
+<div class="content">
+  <p>
+    You can use the same logic for each of the <strong>7 sizes</strong>.
+  </p>
+</div>
 
-    <div class="content">
-      <p>
-        You can set any element to one of the <strong>9 colors</strong> or <strong>9 shades of grey</strong>:
-      </p>
-    </div>
+{% include anchor.html name="Colors" %}
 
-    <table class="table is-bordered">
-      <thead>
-        <tr>
-          <th>
-            Class
-          </th>
-          <th>
-            Color
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr><td><code>has-text-white</code></td><td>{% include color/white.html %}</td></tr>
-        <tr><td><code>has-text-black</code></td><td>{% include color/black.html %}</td></tr>
-        <tr><td><code>has-text-light</code></td><td>{% include color/white-ter.html %}</td></tr>
-        <tr><td><code>has-text-dark</code></td><td>{% include color/grey-darker.html %}</td></tr>
-        <tr><td><code>has-text-primary</code></td><td>{% include color/turquoise.html %}</td></tr>
-        <tr><td><code>has-text-info</code></td><td>{% include color/cyan.html %}</td></tr>
-        <tr><td><code>has-text-link</code></td><td>{% include color/blue.html %}</td></tr>
-        <tr><td><code>has-text-success</code></td><td>{% include color/green.html %}</td></tr>
-        <tr><td><code>has-text-warning</code></td><td>{% include color/yellow.html %}</td></tr>
-        <tr><td><code>has-text-danger</code></td><td>{% include color/red.html %}</td></tr>
-        <tr><td><code>has-text-black-bis</code></td><td>{% include color/black-bis.html %}</td></tr>
-        <tr><td><code>has-text-black-ter</code></td><td>{% include color/black-ter.html %}</td></tr>
-        <tr><td><code>has-text-grey-darker</code></td><td>{% include color/grey-darker.html %}</td></tr>
-        <tr><td><code>has-text-grey-dark</code></td><td>{% include color/grey-dark.html %}</td></tr>
-        <tr><td><code>has-text-grey</code></td><td>{% include color/grey.html %}</td></tr>
-        <tr><td><code>has-text-grey-light</code></td><td>{% include color/grey-light.html %}</td></tr>
-        <tr><td><code>has-text-grey-lighter</code></td><td>{% include color/grey-lighter.html %}</td></tr>
-        <tr><td><code>has-text-white-ter</code></td><td>{% include color/white-ter.html %}</td></tr>
-        <tr><td><code>has-text-white-bis</code></td><td>{% include color/white-bis.html %}</td></tr>
-      </tbody>
-    </table>
+<div class="content">
+  <p>
+    You can set any element to one of the <strong>9 colors</strong> or <strong>9 shades of grey</strong>:
+  </p>
+</div>
+
+<table class="table is-bordered">
+  <thead>
+    <tr>
+      <th>
+        Class
+      </th>
+      <th>
+        Color
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr><td><code>has-text-white</code></td><td>{% include color/white.html %}</td></tr>
+    <tr><td><code>has-text-black</code></td><td>{% include color/black.html %}</td></tr>
+    <tr><td><code>has-text-light</code></td><td>{% include color/white-ter.html %}</td></tr>
+    <tr><td><code>has-text-dark</code></td><td>{% include color/grey-darker.html %}</td></tr>
+    <tr><td><code>has-text-primary</code></td><td>{% include color/turquoise.html %}</td></tr>
+    <tr><td><code>has-text-info</code></td><td>{% include color/cyan.html %}</td></tr>
+    <tr><td><code>has-text-link</code></td><td>{% include color/blue.html %}</td></tr>
+    <tr><td><code>has-text-success</code></td><td>{% include color/green.html %}</td></tr>
+    <tr><td><code>has-text-warning</code></td><td>{% include color/yellow.html %}</td></tr>
+    <tr><td><code>has-text-danger</code></td><td>{% include color/red.html %}</td></tr>
+    <tr><td><code>has-text-black-bis</code></td><td>{% include color/black-bis.html %}</td></tr>
+    <tr><td><code>has-text-black-ter</code></td><td>{% include color/black-ter.html %}</td></tr>
+    <tr><td><code>has-text-grey-darker</code></td><td>{% include color/grey-darker.html %}</td></tr>
+    <tr><td><code>has-text-grey-dark</code></td><td>{% include color/grey-dark.html %}</td></tr>
+    <tr><td><code>has-text-grey</code></td><td>{% include color/grey.html %}</td></tr>
+    <tr><td><code>has-text-grey-light</code></td><td>{% include color/grey-light.html %}</td></tr>
+    <tr><td><code>has-text-grey-lighter</code></td><td>{% include color/grey-lighter.html %}</td></tr>
+    <tr><td><code>has-text-white-ter</code></td><td>{% include color/white-ter.html %}</td></tr>
+    <tr><td><code>has-text-white-bis</code></td><td>{% include color/white-bis.html %}</td></tr>
+  </tbody>
+</table>
 
-    {% include anchor.html name="Alignment" %}
+{% include anchor.html name="Alignment" %}
 
-    <div class="content">
-      <p>
-        You can align the text with the use of one of <strong>4 alignment helpers</strong>:
-      </p>
-    </div>
+<div class="content">
+  <p>
+    You can align the text with the use of one of <strong>4 alignment helpers</strong>:
+  </p>
+</div>
 
-    <table class="table is-bordered">
-      <thead>
-        <tr>
-          <th>
-            Class
-          </th>
-          <th>
-            Alignment
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-        <td><code>has-text-centered</code></td>
-        <td>Makes the text <strong>centered</strong></td>
-        </tr>
-        <tr>
-        <td><code>has-text-justified</code></td>
-        <td>Makes the text <strong>justified</strong></td>
-        </tr>
-        <tr>
-        <td><code>has-text-left</code></td>
-        <td>Makes the text aligned to the <strong>left</strong></td>
-        </tr>
-        <tr>
-        <td><code>has-text-right</code></td>
-        <td>Makes the text aligned to the <strong>right</strong></td>
-        </tr>
-      </tbody>
-    </table>
+<table class="table is-bordered">
+  <thead>
+    <tr>
+      <th>
+        Class
+      </th>
+      <th>
+        Alignment
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+    <td><code>has-text-centered</code></td>
+    <td>Makes the text <strong>centered</strong></td>
+    </tr>
+    <tr>
+    <td><code>has-text-justified</code></td>
+    <td>Makes the text <strong>justified</strong></td>
+    </tr>
+    <tr>
+    <td><code>has-text-left</code></td>
+    <td>Makes the text aligned to the <strong>left</strong></td>
+    </tr>
+    <tr>
+    <td><code>has-text-right</code></td>
+    <td>Makes the text aligned to the <strong>right</strong></td>
+    </tr>
+  </tbody>
+</table>
 
-    {% include anchor.html name="Responsive Alignment" %}
+{% include anchor.html name="Responsive Alignment" %}
 
-    <div class="content">
-      <p>
-        You can now <strong>align text</strong> for <em>each</em> viewport width. You simply need to append the <strong>viewport width</strong> to the alignment modifier.
-      </p>
+<div class="content">
+  <p>
+    You can now <strong>align text</strong> for <em>each</em> viewport width. You simply need to append the <strong>viewport width</strong> to the alignment modifier.
+  </p>
 
-      <p>
-        For example, here are the modifiers for <code>has-text-left</code>:
-      </p>
-    </div>
+  <p>
+    For example, here are the modifiers for <code>has-text-left</code>:
+  </p>
+</div>
 
+{% include layout/main-close.html %}
+
+<div class="container">
+  <div class="table-container">
     <table class="table is-bordered">
       {{ thead }}
       <tbody>
@@ -329,84 +338,85 @@ doc-subtab: typography-helpers
         </tr>
       </tbody>
     </table>
+  </div>
+</div>
 
-    {% include anchor.html name="Text transformation" %}
+{% include layout/main-open.html %}
 
-    <div class="content">
-      <p>
-        You can transform the text with the use of one of <strong>4 text transformation helpers</strong>:
-      </p>
-    </div>
+{% include anchor.html name="Text transformation" %}
 
-    <table class="table is-bordered">
-      <thead>
-      <tr>
-        <th>
-          Class
-        </th>
-        <th>
-          Transformation
-        </th>
-      </tr>
-      </thead>
-      <tbody>
-      <tr>
-        <td><code>is-capitalized</code></td>
-        <td>Transforms <strong>the first character</strong> of each word to <strong>uppercase</strong></td>
-      </tr>
-      <tr>
-        <td><code>is-lowercase</code></td>
-        <td>Transforms <strong>all characters</strong> to <strong>lowercase</strong></td>
-      </tr>
-      <tr>
-        <td><code>is-uppercase</code></td>
-        <td>Transforms <strong>all characters</strong> to <strong>uppercase</strong></td>
-      </tr>
-      <tr>
-        <td><code>is-italic</code></td>
-        <td>Transforms <strong>all characters</strong> to <strong>italic</strong></td>
-      </tr>
-      </tbody>
-    </table>
+<div class="content">
+  <p>
+    You can transform the text with the use of one of <strong>4 text transformation helpers</strong>:
+  </p>
+</div>
 
-    {% include anchor.html name="Text weight" %}
+<table class="table is-bordered">
+  <thead>
+  <tr>
+    <th>
+      Class
+    </th>
+    <th>
+      Transformation
+    </th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr>
+    <td><code>is-capitalized</code></td>
+    <td>Transforms <strong>the first character</strong> of each word to <strong>uppercase</strong></td>
+  </tr>
+  <tr>
+    <td><code>is-lowercase</code></td>
+    <td>Transforms <strong>all characters</strong> to <strong>lowercase</strong></td>
+  </tr>
+  <tr>
+    <td><code>is-uppercase</code></td>
+    <td>Transforms <strong>all characters</strong> to <strong>uppercase</strong></td>
+  </tr>
+  <tr>
+    <td><code>is-italic</code></td>
+    <td>Transforms <strong>all characters</strong> to <strong>italic</strong></td>
+  </tr>
+  </tbody>
+</table>
 
-    <div class="content">
-      <p>
-        You can transform the text weight with the use of one of <strong>4 text weight helpers</strong>:
-      </p>
-    </div>
+{% include anchor.html name="Text weight" %}
 
-    <table class="table is-bordered">
-      <thead>
-      <tr>
-        <th>
-          Class
-        </th>
-        <th>
-          Weight
-        </th>
-      </tr>
-      </thead>
-      <tbody>
-      <tr>
-        <td><code>has-text-weight-light</code></td>
-        <td>Transforms  text weight to <strong>light</strong></td>
-      </tr>
-      <tr>
-        <td><code>has-text-weight-normal</code></td>
-        <td>Transforms text weight to <strong>normal</strong></td>
-      </tr>
-      <tr>
-        <td><code>has-text-weight-semibold</code></td>
-        <td>Transforms text weight to <strong>semi-bold</strong></td>
-      </tr>
-      <tr>
-        <td><code>has-text-weight-bold</code></td>
-        <td>Transforms text weight to <strong>bold</strong></td>
-      </tr>
-      </tbody>
-    </table>
+<div class="content">
+  <p>
+    You can transform the text weight with the use of one of <strong>4 text weight helpers</strong>:
+  </p>
+</div>
 
-  </div>
-</section>
+<table class="table is-bordered">
+  <thead>
+  <tr>
+    <th>
+      Class
+    </th>
+    <th>
+      Weight
+    </th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr>
+    <td><code>has-text-weight-light</code></td>
+    <td>Transforms  text weight to <strong>light</strong></td>
+  </tr>
+  <tr>
+    <td><code>has-text-weight-normal</code></td>
+    <td>Transforms text weight to <strong>normal</strong></td>
+  </tr>
+  <tr>
+    <td><code>has-text-weight-semibold</code></td>
+    <td>Transforms text weight to <strong>semi-bold</strong></td>
+  </tr>
+  <tr>
+    <td><code>has-text-weight-bold</code></td>
+    <td>Transforms text weight to <strong>bold</strong></td>
+  </tr>
+  </tbody>
+</table>