Update overview

docs/_data/links.json

@@ -8,6 +8,42 @@
       "name": "Documentation",
       "path": "/documentation"
     },
+    "overview": {
+      "name": "Overview",
+      "path": "/documentation/overview"
+    },
+    "overview-start": {
+      "name": "Start",
+      "path": "/documentation/overview/start"
+    },
+    "overview-classes": {
+      "name": "Classes",
+      "path": "/documentation/overview/classes"
+    },
+    "overview-modular": {
+      "name": "Modular",
+      "path": "/documentation/overview/modular"
+    },
+    "overview-responsiveness": {
+      "name": "Responsiveness",
+      "path": "/documentation/overview/responsiveness"
+    },
+    "overview-variables": {
+      "name": "Variables",
+      "path": "/documentation/overview/variables"
+    },
+    "overview-colors": {
+      "name": "Colors",
+      "path": "/documentation/overview/colors"
+    },
+    "overview-functions": {
+      "name": "Functions",
+      "path": "/documentation/overview/functions"
+    },
+    "overview-mixins": {
+      "name": "Mixins",
+      "path": "/documentation/overview/mixins"
+    },
     "modifiers": {
       "name": "Modifiers",
       "path": "/documentation/modifiers"
@@ -214,6 +250,7 @@
     }
   },
   "order": {
+    "overview": ["overview-start", "overview-classes", "overview-modular", "overview-responsiveness", "overview-variables", "overview-colors", "overview-functions", "overview-mixins"],
     "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"],

docs/_sass/main.sass

@@ -77,6 +77,8 @@ $main-spacing: 2.5rem
   .bd-side-background
     display: none
 
+$sidebar-width: 16rem
+
 +tablet
   .bd-duo
     display: flex
@@ -88,7 +90,7 @@ $main-spacing: 2.5rem
   .bd-prev-next
     display: flex
   .bd-side
-    flex: 0 0 calc(#{$carbon-width} + 1.5rem)
+    flex: 0 0 calc(#{$sidebar-width} + 1.5rem)
 
 +desktop
   .bd-main
@@ -97,14 +99,16 @@ $main-spacing: 2.5rem
     margin-left: -3rem
     padding: 3rem
   .bd-header
+    align-items: center
     display: flex
+    min-height: 130px
   .bd-header-titles
     flex-grow: 1
     flex-shrink: 1
   .bd-header-carbon
     flex-grow: 0
     flex-shrink: 0
-    margin-left: 1.5rem
+    margin: -15px 0 -15px 1.5rem
     width: $carbon-width
   .bd-side
     padding: 3rem 0 3rem 1.5rem

docs/css/bulma-docs.css

@@ -9600,7 +9600,7 @@ label.panel-block:hover {
     display: flex;
   }
   .bd-side {
-    flex: 0 0 calc(300px + 1.5rem);
+    flex: 0 0 calc(16rem + 1.5rem);
   }
 }
 
@@ -9613,7 +9613,9 @@ label.panel-block:hover {
     padding: 3rem;
   }
   .bd-header {
+    align-items: center;
     display: flex;
+    min-height: 130px;
   }
   .bd-header-titles {
     flex-grow: 1;
@@ -9622,7 +9624,7 @@ label.panel-block:hover {
   .bd-header-carbon {
     flex-grow: 0;
     flex-shrink: 0;
-    margin-left: 1.5rem;
+    margin: -15px 0 -15px 1.5rem;
     width: 300px;
   }
   .bd-side {

docs/documentation/overview/classes.html

@@ -1,38 +1,33 @@
 ---
 title: CSS classes
+subtitle: "Bulma is simply a <strong>collection</strong> of CSS classes. Write the HTML code you want."
 layout: documentation
 doc-tab: overview
 doc-subtab: classes
+breadcrumb:
+- home
+- documentation
+- overview
+- overview-classes
 ---
 
-{% include subnav/subnav-overview.html %}
-
-<section class="section">
-  <div class="container">
-    <h1 class="title">Classes</h1>
-    <h2 class="subtitle">Bulma is simply a <strong>collection</strong> of CSS classes. Write the HTML code you want.</h2>
-
-    <hr>
-
-    <div class="content">
-      <p>
-        Bulma is a <strong>CSS</strong> framework, meaning that the end result is simply a <strong>single</strong> <code>.css</code> file:
-        <br>
-        <a href="https://github.com/jgthms/bulma/blob/master/css/bulma.css">https://github.com/jgthms<wbr>/bulma<wbr>/blob<wbr>/master<wbr>/css<wbr>/bulma.css</a></p>
-      <p>
-        Because Bulma solely comprises CSS classes, the HTML code you write has <strong>no impact</strong> on the styling of your page. That's why <code>.input</code> exists as a class, so you can choose <em>which</em> <code>&lt;input type="text"&gt;</code> elements you want to style.
-      </p>
-      <p>
-        Bulma only styles <strong>generic</strong> tags directly <strong>twice</strong>:
-      </p>
-      <ul>
-        <li>
-          <a href="https://github.com/jgthms/bulma/blob/master/sass/base/generic.sass"><code>generic.sass</code></a> to define a basic style for your page
-        </li>
-        <li>
-          the <a href="{{ site.url }}/documentation/elements/content/"><code>.content</code> class </a> to use for <em>any</em> textual content, like WYSIWYG
-        </li>
-      </ul>
-    </div>
-  </div>
-</section>
+<div class="content">
+  <p>
+    Bulma is a <strong>CSS</strong> framework, meaning that the end result is simply a <strong>single</strong> <code>.css</code> file:
+    <br>
+    <a href="https://github.com/jgthms/bulma/blob/master/css/bulma.css">https://github.com/jgthms<wbr>/bulma<wbr>/blob<wbr>/master<wbr>/css<wbr>/bulma.css</a></p>
+  <p>
+    Because Bulma solely comprises CSS classes, the HTML code you write has <strong>no impact</strong> on the styling of your page. That's why <code>.input</code> exists as a class, so you can choose <em>which</em> <code>&lt;input type="text"&gt;</code> elements you want to style.
+  </p>
+  <p>
+    Bulma only styles <strong>generic</strong> tags directly <strong>twice</strong>:
+  </p>
+  <ul>
+    <li>
+      <a href="https://github.com/jgthms/bulma/blob/master/sass/base/generic.sass"><code>generic.sass</code></a> to define a basic style for your page
+    </li>
+    <li>
+      the <a href="{{ site.url }}/documentation/elements/content/"><code>.content</code> class </a> to use for <em>any</em> textual content, like WYSIWYG
+    </li>
+  </ul>
+</div>

docs/documentation/overview/colors.html

@@ -1,8 +1,14 @@
 ---
 title: Colors
+subtitle: "The <strong>colors</strong> that <strong>style</strong> most Bulma elements and components"
 layout: documentation
 doc-tab: overview
 doc-subtab: colors
+breadcrumb:
+- home
+- documentation
+- overview
+- overview-colors
 colors:
 - white
 - black
@@ -25,103 +31,92 @@ shades:
 - white-bis
 ---
 
-{% include subnav/subnav-overview.html %}
+<div class="content">
+  <p>
+    Most elements and components have color variations thanks to <strong>modifiers</strong> with syntax <code>.is-$color</code>, like <code>is-primary</code> or <code>is-dark</code>.
+  </p>
+  <p>
+    This is thanks to the <code>$colors</code> <strong>Sass map</strong>, through which Bulma cycles to grab all the colors and their inverts.
+  </p>
+</div>
 
-<section class="section">
-  <div class="container">
-    <h1 class="title">Colors</h1>
-    <h2 class="subtitle">The <strong>colors</strong> that <strong>style</strong> most Bulma elements and components</h2>
+<table class="table">
+  <thead>
+    <tr>
+      <th>Color</th>
+      <th>Variable</th>
+      <th>Value</th>
+      <th>Computed value</th>
+      <th>Invert value</th>
+      <th>Computed invert value</th>
+    </tr>
+  </thead>
+  <tbody>
+    {% for color in page.colors %}
+      {% assign derivedColor = site.data.colors.derived | where: "id", color | first %}
+      {% assign initialColor = site.data.colors.initial | where: "id", derivedColor.valueId | first %}
+      <tr>
+        <td>
+          <strong>{{ derivedColor.id | capitalize }}</strong>
+        </td>
+        <td>
+          <code>${{ derivedColor.id }}</code>
+        </td>
+        <td>
+          <code>${{ initialColor.id }}</code>
+        </td>
+        <td>
+          {% include elements/color-square.html value=initialColor.value %}
+        </td>
+        {% if derivedColor.invertValue %}
+          <td>
+            <code>{{ derivedColor.invertValue }}</code>
+          </td>
+          <td>
+            {% include elements/color-square.html value=derivedColor.invertValue %}
+          </td>
+        {% elsif derivedColor.invertId %}
+          {% assign invertColor = site.data.colors.initial | where: "id", derivedColor.invertId | first %}
+          <td>
+            <code>${{ derivedColor.invertId }}</code>
+          </td>
+          <td>
+            {% include elements/color-square.html value=invertColor.value %}
+          </td>
+        {% endif %}
+      </tr>
+    {% endfor %}
+  </tbody>
+</table>
 
-    <hr>
+<div class="content">
+  <p>
+    Bulma also provides a <code>$shades</code> <strong>Sass map</strong>, that only contains shades of grey between black and white.
+  </p>
+</div>
 
-    <div class="content">
-      <p>
-        Most elements and components have color variations thanks to <strong>modifiers</strong> with syntax <code>.is-$color</code>, like <code>is-primary</code> or <code>is-dark</code>.
-      </p>
-      <p>
-        This is thanks to the <code>$colors</code> <strong>Sass map</strong>, through which Bulma cycles to grab all the colors and their inverts.
-      </p>
-    </div>
-
-    <table class="table">
-      <thead>
-        <tr>
-          <th>Color</th>
-          <th>Variable</th>
-          <th>Value</th>
-          <th>Computed value</th>
-          <th>Invert value</th>
-          <th>Computed invert value</th>
-        </tr>
-      </thead>
-      <tbody>
-        {% for color in page.colors %}
-          {% assign derivedColor = site.data.colors.derived | where: "id", color | first %}
-          {% assign initialColor = site.data.colors.initial | where: "id", derivedColor.valueId | first %}
-          <tr>
-            <td>
-              <strong>{{ derivedColor.id | capitalize }}</strong>
-            </td>
-            <td>
-              <code>${{ derivedColor.id }}</code>
-            </td>
-            <td>
-              <code>${{ initialColor.id }}</code>
-            </td>
-            <td>
-              {% include elements/color-square.html value=initialColor.value %}
-            </td>
-            {% if derivedColor.invertValue %}
-              <td>
-                <code>{{ derivedColor.invertValue }}</code>
-              </td>
-              <td>
-                {% include elements/color-square.html value=derivedColor.invertValue %}
-              </td>
-            {% elsif derivedColor.invertId %}
-              {% assign invertColor = site.data.colors.initial | where: "id", derivedColor.invertId | first %}
-              <td>
-                <code>${{ derivedColor.invertId }}</code>
-              </td>
-              <td>
-                {% include elements/color-square.html value=invertColor.value %}
-              </td>
-            {% endif %}
-          </tr>
-        {% endfor %}
-      </tbody>
-    </table>
-
-    <div class="content">
-      <p>
-        Bulma also provides a <code>$shades</code> <strong>Sass map</strong>, that only contains shades of grey between black and white.
-      </p>
-    </div>
-
-    <table class="table">
-      <thead>
-        <tr>
-          <th>Color</th>
-          <th>Variable</th>
-          <th>Value</th>
-        </tr>
-      </thead>
-      <tbody>
-        {% for shade in page.shades %}
-          {% assign initial_shade = site.data.colors.initial | where: "id", shade | first %}
-          <tr>
-            <td>
-              <strong>{{ initial_shade.name | capitalize }}</strong>
-            </td>
-            <td>
-              <code>${{ initial_shade.id }}</code>
-            </td>
-            <td>
-              {% include elements/color-square.html value=initial_shade.value %}
-            </td>
-          </tr>
-        {% endfor %}
-      </tbody>
-    </table>
-  </div>
-</section>
+<table class="table">
+  <thead>
+    <tr>
+      <th>Color</th>
+      <th>Variable</th>
+      <th>Value</th>
+    </tr>
+  </thead>
+  <tbody>
+    {% for shade in page.shades %}
+      {% assign initial_shade = site.data.colors.initial | where: "id", shade | first %}
+      <tr>
+        <td>
+          <strong>{{ initial_shade.name | capitalize }}</strong>
+        </td>
+        <td>
+          <code>${{ initial_shade.id }}</code>
+        </td>
+        <td>
+          {% include elements/color-square.html value=initial_shade.value %}
+        </td>
+      </tr>
+    {% endfor %}
+  </tbody>
+</table>

docs/documentation/overview/customize.html

@@ -1,8 +1,14 @@
 ---
-title: Customize Bulma
+title: Customize Bulma with Sass
+subtitle: "Create your <strong>own theme</strong> with a simple set of <strong>variables</strong>"
 layout: documentation
 doc-tab: overview
 doc-subtab: customize
+breadcrumb:
+- home
+- documentation
+- overview
+- overview-customize
 ---
 
 {% capture scss_code %}
@@ -49,65 +55,54 @@ $colors: map-merge($colors, $addColors);
 @import "../bulma";
 {% endcapture %}
 
-{% include subnav/subnav-overview.html %}
+<div class="content">
+  <p>If you're familiar with <a href="http://sass-lang.com/">Sass</a> and want to <strong>customize</strong> Bulma with your own colors and variables, just install Bulma via <strong>npm</strong>:</p>
+</div>
 
-<section class="section">
-  <div class="container">
-    <h1 class="title">Customizing with Sass</h1>
-    <h2 class="subtitle">Create your <strong>own theme</strong> with a simple set of <strong>variables</strong></h2>
-
-    <hr>
+<article class="media is-large">
+  <div class="media-left">
+    <p class="title is-5">1</p>
+  </div>
+  <div class="media-content">
+    <p class="title is-5">
+      <strong>Download</strong> the source files:
+    </p>
+    {% highlight bash %}npm install bulma{% endhighlight %}
+    <div class="content">or clone the repository: <a href="https://github.com/jgthms/bulma">https://github.com/jgthms/bulma</a></div>
+  </div>
+</article>
 
-    <div class="content">
-      <p>If you're familiar with <a href="http://sass-lang.com/">Sass</a> and want to <strong>customize</strong> Bulma with your own colors and variables, just install Bulma via <strong>npm</strong>:</p>
+<article class="media is-large">
+  <div class="media-left">
+    <p class="title is-5">2</p>
+  </div>
+  <div class="media-content">
+    <p class="title is-5">
+      <strong>Set</strong> your variables
+    </p>
+    <p class="subtitle is-6">
+      Create a file called <code>mystyles.scss</code> and add your own colors, set new fonts, override Bulma's default styles...
+    </p>
+    <div class="highlight-full">
+      {% highlight sass %}{{ scss_code }}{% endhighlight %}
     </div>
+  </div>
+</article>
 
-    <article class="media is-large">
-      <div class="media-left">
-        <p class="title is-5">1</p>
-      </div>
-      <div class="media-content">
-        <p class="title is-5">
-          <strong>Download</strong> the source files:
-        </p>
-        {% highlight bash %}npm install bulma{% endhighlight %}
-        <div class="content">or clone the repository: <a href="https://github.com/jgthms/bulma">https://github.com/jgthms/bulma</a></div>
-      </div>
-    </article>
-
-    <article class="media is-large">
-      <div class="media-left">
-        <p class="title is-5">2</p>
-      </div>
-      <div class="media-content">
-        <p class="title is-5">
-          <strong>Set</strong> your variables
-        </p>
-        <p class="subtitle is-6">
-          Create a file called <code>mystyles.scss</code> and add your own colors, set new fonts, override Bulma's default styles...
-        </p>
-        <div class="highlight-full">
-          {% highlight sass %}{{ scss_code }}{% endhighlight %}
-        </div>
-      </div>
-    </article>
-
-    <article class="media is-large">
-      <div class="media-left">
-        <p class="title is-5">3</p>
-      </div>
-      <div class="media-content">
-        <p class="title is-5">
-          See the <strong>result</strong>: before and after
-        </p>
-        <p class="subtitle is-6">
-          As <code>$blue</code> has been updated, and since <code>$blue-invert</code> is automatically calculated with the <strong>function</strong> <code>$blue-invert: findColorInvert($blue)</code>, the <code>$blue-invert</code> is now black instead of white</p>
-        </p>
-        <figure>
-          <img width="640" height="640" src="{{site.url}}/images/customize-before.png" alt="Customizing Bulma with Sass">
-          <img width="640" height="640" src="{{site.url}}/images/customize-after.png" alt="Customizing Bulma with Sass">
-        </figure>
-      </div>
-    </article>
+<article class="media is-large">
+  <div class="media-left">
+    <p class="title is-5">3</p>
+  </div>
+  <div class="media-content">
+    <p class="title is-5">
+      See the <strong>result</strong>: before and after
+    </p>
+    <p class="subtitle is-6">
+      As <code>$blue</code> has been updated, and since <code>$blue-invert</code> is automatically calculated with the <strong>function</strong> <code>$blue-invert: findColorInvert($blue)</code>, the <code>$blue-invert</code> is now black instead of white</p>
+    </p>
+    <figure>
+      <img width="640" height="640" src="{{site.url}}/images/customize-before.png" alt="Customizing Bulma with Sass">
+      <img width="640" height="640" src="{{site.url}}/images/customize-after.png" alt="Customizing Bulma with Sass">
+    </figure>
   </div>
-</section>
+</article>

docs/documentation/overview/functions.html

@@ -1,236 +1,231 @@
 ---
 title: Functions
+subtitle: "Utility functions to calculate colors and other values"
 layout: documentation
 doc-tab: overview
 doc-subtab: functions
+breadcrumb:
+- home
+- documentation
+- overview
+- overview-functions
 ---
 
-{% include subnav/subnav-overview.html %}
+<div class="content">
+  <p>Bulma uses 3 custom functions to help define the values and colors dynamically:</p>
+  <ul>
+    <li><code>powerNumber($number, $exp)</code>: calculates the value of a number exposed to another one. Returns a number.</li>
+    <li><code>colorLuminance($color)</code>: defines if a color is dark or light. Return a decimal number between 0 and 1 where <= 0.5 is dark and > 0.5 is light.</li>
+    <li><code>findColorInvert($color)</code>: returns either 70% transparent black or 100% opaque white depending on the luminance of the color.</li>
+  </ul>
+</div>
 
-<section class="section">
-  <div class="container">
-    <h1 class="title">Functions</h1>
-    <h2 class="subtitle">Utility functions to calculate colors and other values</h2>
+{% include anchor.html name="The <code>findColorInvert()</code> function" %}
 
-    <hr>
-
-    <div class="content">
-      <p>Bulma uses 3 custom functions to help define the values and colors dynamically:</p>
-      <ul>
-        <li><code>powerNumber($number, $exp)</code>: calculates the value of a number exposed to another one. Returns a number.</li>
-        <li><code>colorLuminance($color)</code>: defines if a color is dark or light. Return a decimal number between 0 and 1 where <= 0.5 is dark and > 0.5 is light.</li>
-        <li><code>findColorInvert($color)</code>: returns either 70% transparent black or 100% opaque white depending on the luminance of the color.</li>
-      </ul>
-    </div>
-
-    {% include anchor.html name="The <code>findColorInvert()</code> function" %}
-
-    <div class="content">
-      <p>The <code>findColorInvert($color)</code> function takes a <strong>color</strong> as an input, and outputs either transparent <strong>black</strong> <code>rgba(#000, 0.7)</code> or <strong>white</strong> <code>#fff</code>:</p>
-      <ul>
-        <li>if <code>colorLuminance($color) > 0.55</code>, it outputs <code>rgba(#000, 0.7)</code></li>
-        <li>otherwise, it outputs <code>#fff</code></li>
-      </ul>
-      <p>Its purpose is to guarantee a <strong>readable</strong> shade for the <em>text</em> when the input color is used as the <em>background</em>.</p>
-      <table class="table is-bordered">
-        <thead>
-          <tr>
-            <th>color</th>
-            <th>color luminance</th>
-            <th>findColorInvert()</th>
-            <th>result</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>
-              <span class="bd-color" style="background: #00d1b2;"></span>
-              <code>#00d1b2</code>
-            </td>
-            <td>
-              <code>0.52831</code>
-            </td>
-            <td>
-              <span class="bd-color" style="background: #fff;"></span>
-              <code>#fff</code>
-            </td>
-            <td>
-              <a class="button" style="background: #00d1b2; border-color: #00d1b2; color: #fff;">
-                Button
-              </a>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <span class="bd-color" style="background: #3273dc;"></span>
-              <code>#3273dc</code>
-            </td>
-            <td>
-              <code>0.23119</code>
-            </td>
-            <td>
-              <span class="bd-color" style="background: #fff;"></span>
-              <code>#fff</code>
-            </td>
-            <td>
-              <a class="button" style="background: #3273dc; border-color: #3273dc; color: #fff;">
-                Button
-              </a>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <span class="bd-color" style="background: #23d160;"></span>
-              <code>#23d160</code>
-            </td>
-            <td>
-              <code>0.51067</code>
-            </td>
-            <td>
-              <span class="bd-color" style="background: #fff;"></span>
-              <code>#fff</code>
-            </td>
-            <td>
-              <a class="button" style="background: #23d160; border-color: #23d160; color: #fff;">
-                Button
-              </a>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <span class="bd-color" style="background: #ffdd57;"></span>
-              <code>#ffdd57</code>
-            </td>
-            <td>
-              <code>0.76863</code>
-            </td>
-            <td>
-              <span class="bd-color" style="background: rgba(0, 0, 0, 0.7);"></span>
-              <code>rgba(0, 0, 0, 0.7)</code>
-            </td>
-            <td>
-              <a class="button" style="background: #ffdd57; border-color: #ffdd57; color: rgba(0, 0, 0, 0.7);">
-                Button
-              </a>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <span class="bd-color" style="background: #ff3860;"></span>
-              <code>#ff3860</code>
-            </td>
-            <td>
-              <code>0.27313</code>
-            </td>
-            <td>
-              <span class="bd-color" style="background: #fff;"></span>
-              <code>#fff</code>
-            </td>
-            <td>
-              <a class="button" style="background: #ff3860; border-color: #ff3860; color: #fff;">
-                Button
-              </a>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <span class="bd-color" style="background: #ffb3b3;"></span>
-              <code>#ffb3b3</code>
-            </td>
-            <td>
-              <code>0.61796</code>
-            </td>
-            <td>
-              <span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
-              <code>rgba(0,0,0,0.7)</code>
-            </td>
-            <td>
-              <a class="button" style="background: #ffb3b3; border-color: #ffb3b3; color: rgba(0,0,0,0.7);">
-                Button
-              </a>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <span class="bd-color" style="background: #ffbc6b;"></span>
-              <code>#ffbc6b</code>
-            </td>
-            <td>
-              <code>0.63053</code>
-            </td>
-            <td>
-              <span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
-              <code>rgba(0,0,0,0.7)</code>
-            </td>
-            <td>
-              <a class="button" style="background: #ffbc6b; border-color: #ffbc6b; color: rgba(0,0,0,0.7);">
-                Button
-              </a>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <span class="bd-color" style="background: hsl(294, 71%, 79%);"></span>
-              <code>hsl(294, 71%, 79%)</code>
-            </td>
-            <td>
-              <code>0.5529</code>
-            </td>
-            <td>
-              <span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
-              <code>rgba(0,0,0,0.7)</code>
-            </td>
-            <td>
-              <a class="button" style="background: hsl(294, 71%, 79%); border-color: hsl(294, 71%, 79%); color: rgba(0,0,0,0.7);">
-                Button
-              </a>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-      <p>
-        For colors that have a luminance close to the <code>0.55</code> threshold, it can be useful to <strong>override</strong> the <code>findColorInvert()</code> function, and rather set the invert color <strong>manually.</strong>
-        <br>
-        For example, this shade of <span class="bd-color" style="background: hsl(294, 71%, 79%); float: none; height: 16px; width: 16px; margin-right: 0; vertical-align: middle;"></span> purple has a color luminance of <code>0.5529</code>. It can be preferable to set a color invert of white instead of transparent black:
-      </p>
-      <table class="table is-bordered">
-        <tbody>
-          <tr>
-            <th>
-              with <code>findColorInvert()</code>
-            </th>
-            <td>
-              <code>$purple-invert: findColorInvert($purple)</code>
-            </td>
-            <td>
-              <span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
-              <code>rgba(0,0,0,0.7)</code>
-            </td>
-            <td>
-              <a class="button" style="background: hsl(294, 71%, 79%); border-color: hsl(294, 71%, 79%); color: rgba(0,0,0,0.7);">
-                Button
-              </a>
-            </td>
-          </tr>
-          <tr>
-            <th>
-              with manual setting
-            </th>
-            <td>
-              <code>$purple-invert: #fff</code>
-            </td>
-            <td>
-              <span class="bd-color" style="background: #fff;"></span>
-              <code>#fff</code>
-            </td>
-            <td>
-              <a class="button" style="background: hsl(294, 71%, 79%); border-color: hsl(294, 71%, 79%); color: #fff;">
-                Button
-              </a>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
-</section>
+<div class="content">
+  <p>The <code>findColorInvert($color)</code> function takes a <strong>color</strong> as an input, and outputs either transparent <strong>black</strong> <code>rgba(#000, 0.7)</code> or <strong>white</strong> <code>#fff</code>:</p>
+  <ul>
+    <li>if <code>colorLuminance($color) > 0.55</code>, it outputs <code>rgba(#000, 0.7)</code></li>
+    <li>otherwise, it outputs <code>#fff</code></li>
+  </ul>
+  <p>Its purpose is to guarantee a <strong>readable</strong> shade for the <em>text</em> when the input color is used as the <em>background</em>.</p>
+  <table class="table is-bordered">
+    <thead>
+      <tr>
+        <th>color</th>
+        <th>color luminance</th>
+        <th>findColorInvert()</th>
+        <th>result</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          <span class="bd-color" style="background: #00d1b2;"></span>
+          <code>#00d1b2</code>
+        </td>
+        <td>
+          <code>0.52831</code>
+        </td>
+        <td>
+          <span class="bd-color" style="background: #fff;"></span>
+          <code>#fff</code>
+        </td>
+        <td>
+          <a class="button" style="background: #00d1b2; border-color: #00d1b2; color: #fff;">
+            Button
+          </a>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <span class="bd-color" style="background: #3273dc;"></span>
+          <code>#3273dc</code>
+        </td>
+        <td>
+          <code>0.23119</code>
+        </td>
+        <td>
+          <span class="bd-color" style="background: #fff;"></span>
+          <code>#fff</code>
+        </td>
+        <td>
+          <a class="button" style="background: #3273dc; border-color: #3273dc; color: #fff;">
+            Button
+          </a>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <span class="bd-color" style="background: #23d160;"></span>
+          <code>#23d160</code>
+        </td>
+        <td>
+          <code>0.51067</code>
+        </td>
+        <td>
+          <span class="bd-color" style="background: #fff;"></span>
+          <code>#fff</code>
+        </td>
+        <td>
+          <a class="button" style="background: #23d160; border-color: #23d160; color: #fff;">
+            Button
+          </a>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <span class="bd-color" style="background: #ffdd57;"></span>
+          <code>#ffdd57</code>
+        </td>
+        <td>
+          <code>0.76863</code>
+        </td>
+        <td>
+          <span class="bd-color" style="background: rgba(0, 0, 0, 0.7);"></span>
+          <code>rgba(0, 0, 0, 0.7)</code>
+        </td>
+        <td>
+          <a class="button" style="background: #ffdd57; border-color: #ffdd57; color: rgba(0, 0, 0, 0.7);">
+            Button
+          </a>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <span class="bd-color" style="background: #ff3860;"></span>
+          <code>#ff3860</code>
+        </td>
+        <td>
+          <code>0.27313</code>
+        </td>
+        <td>
+          <span class="bd-color" style="background: #fff;"></span>
+          <code>#fff</code>
+        </td>
+        <td>
+          <a class="button" style="background: #ff3860; border-color: #ff3860; color: #fff;">
+            Button
+          </a>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <span class="bd-color" style="background: #ffb3b3;"></span>
+          <code>#ffb3b3</code>
+        </td>
+        <td>
+          <code>0.61796</code>
+        </td>
+        <td>
+          <span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
+          <code>rgba(0,0,0,0.7)</code>
+        </td>
+        <td>
+          <a class="button" style="background: #ffb3b3; border-color: #ffb3b3; color: rgba(0,0,0,0.7);">
+            Button
+          </a>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <span class="bd-color" style="background: #ffbc6b;"></span>
+          <code>#ffbc6b</code>
+        </td>
+        <td>
+          <code>0.63053</code>
+        </td>
+        <td>
+          <span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
+          <code>rgba(0,0,0,0.7)</code>
+        </td>
+        <td>
+          <a class="button" style="background: #ffbc6b; border-color: #ffbc6b; color: rgba(0,0,0,0.7);">
+            Button
+          </a>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <span class="bd-color" style="background: hsl(294, 71%, 79%);"></span>
+          <code>hsl(294, 71%, 79%)</code>
+        </td>
+        <td>
+          <code>0.5529</code>
+        </td>
+        <td>
+          <span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
+          <code>rgba(0,0,0,0.7)</code>
+        </td>
+        <td>
+          <a class="button" style="background: hsl(294, 71%, 79%); border-color: hsl(294, 71%, 79%); color: rgba(0,0,0,0.7);">
+            Button
+          </a>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+  <p>
+    For colors that have a luminance close to the <code>0.55</code> threshold, it can be useful to <strong>override</strong> the <code>findColorInvert()</code> function, and rather set the invert color <strong>manually.</strong>
+    <br>
+    For example, this shade of <span class="bd-color" style="background: hsl(294, 71%, 79%); float: none; height: 16px; width: 16px; margin-right: 0; vertical-align: middle;"></span> purple has a color luminance of <code>0.5529</code>. It can be preferable to set a color invert of white instead of transparent black:
+  </p>
+  <table class="table is-bordered">
+    <tbody>
+      <tr>
+        <th>
+          with <code>findColorInvert()</code>
+        </th>
+        <td>
+          <code>$purple-invert: findColorInvert($purple)</code>
+        </td>
+        <td>
+          <span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
+          <code>rgba(0,0,0,0.7)</code>
+        </td>
+        <td>
+          <a class="button" style="background: hsl(294, 71%, 79%); border-color: hsl(294, 71%, 79%); color: rgba(0,0,0,0.7);">
+            Button
+          </a>
+        </td>
+      </tr>
+      <tr>
+        <th>
+          with manual setting
+        </th>
+        <td>
+          <code>$purple-invert: #fff</code>
+        </td>
+        <td>
+          <span class="bd-color" style="background: #fff;"></span>
+          <code>#fff</code>
+        </td>
+        <td>
+          <a class="button" style="background: hsl(294, 71%, 79%); border-color: hsl(294, 71%, 79%); color: #fff;">
+            Button
+          </a>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>

docs/documentation/overview/mixins.html

@@ -1,72 +1,67 @@
 ---
 title: Mixins
+subtitle: "Utility mixins for custom elements and responsive helpers"
 layout: documentation
 doc-tab: overview
 doc-subtab: mixins
+breadcrumb:
+- home
+- documentation
+- overview
+- overview-mixins
 ---
 
-{% include subnav/subnav-overview.html %}
-
-<section class="section">
-  <div class="container">
-    <h1 class="title">Mixins</h1>
-    <h2 class="subtitle">Utility mixins for custom elements and responsive helpers</h2>
-
-    <hr>
-
 <table class="table is-bordered">
-<tr>
-  <td><code>=arrow($color)</code></td>
-  <td>Creates a CSS-only down arrow. Used for the dropdown select.</td>
-</tr>
-<tr>
-  <td><code>=block</code></td>
-  <td>Defines a margin-bottom of 1.5rem, except when the element is the last child. Used for almost all block elements.</td>
-</tr>
-<tr>
-  <td><code>=clearfix</code></td>
-  <td>Adds a clearfix at the end of the element. Used for the "is-clearfix" helper.</td>
-</tr>
-<tr>
-  <td><code>=center($size)</code></td>
-  <td>Positions an element in the exact center of its parent. Used for the spinner in a loading button.</td>
-</tr>
-<tr>
-  <td><code>=delete</code></td>
-  <td>Creates a CSS-only cross. Used for the delete element in modals, messages, tags...</td>
-</tr>
-<tr>
-  <td><code>=fa($size, $dimensions)</code></td>
-  <td>Sets the style of a Font Awesome icon container.</td>
-</tr>
-<tr>
-  <td><code>=hamburger($dimensions)</code></td>
-  <td>Creates a CSS-only hamburger menu with 3 bars. Used for the "nav-toggle".</td>
-</tr>
-<tr>
-  <td><code>=loader</code></td>
-  <td>Creates a CSS-only loading spinner. Used for the ".loader" element, and for input and button spinners.</td>
-</tr>
-<tr>
-  <td><code>=overflow-touch</code></td>
-  <td>Sets the style of a container so that it keeps momentum when scrolling on iOS devices.</td>
-</tr>
-<tr>
-  <td><code>=overlay($offset: 0)</code></td>
-  <td>Makes the element overlay its parent container, like the transparent modal background.</td>
-</tr>
-<tr>
-  <td><code>=placeholder</code></td>
-  <td>Sets the styles of an input placeholder.</td>
-</tr>
-<tr>
-  <td><code>=unselectable</code></td>
-  <td>Turns the element unselectable. Used for buttons to prevent selection when clicking.</td>
-</tr>
+  <tr>
+    <td><code>=arrow($color)</code></td>
+    <td>Creates a CSS-only down arrow. Used for the dropdown select.</td>
+  </tr>
+  <tr>
+    <td><code>=block</code></td>
+    <td>Defines a margin-bottom of 1.5rem, except when the element is the last child. Used for almost all block elements.</td>
+  </tr>
+  <tr>
+    <td><code>=clearfix</code></td>
+    <td>Adds a clearfix at the end of the element. Used for the "is-clearfix" helper.</td>
+  </tr>
+  <tr>
+    <td><code>=center($size)</code></td>
+    <td>Positions an element in the exact center of its parent. Used for the spinner in a loading button.</td>
+  </tr>
+  <tr>
+    <td><code>=delete</code></td>
+    <td>Creates a CSS-only cross. Used for the delete element in modals, messages, tags...</td>
+  </tr>
+  <tr>
+    <td><code>=fa($size, $dimensions)</code></td>
+    <td>Sets the style of a Font Awesome icon container.</td>
+  </tr>
+  <tr>
+    <td><code>=hamburger($dimensions)</code></td>
+    <td>Creates a CSS-only hamburger menu with 3 bars. Used for the "nav-toggle".</td>
+  </tr>
+  <tr>
+    <td><code>=loader</code></td>
+    <td>Creates a CSS-only loading spinner. Used for the ".loader" element, and for input and button spinners.</td>
+  </tr>
+  <tr>
+    <td><code>=overflow-touch</code></td>
+    <td>Sets the style of a container so that it keeps momentum when scrolling on iOS devices.</td>
+  </tr>
+  <tr>
+    <td><code>=overlay($offset: 0)</code></td>
+    <td>Makes the element overlay its parent container, like the transparent modal background.</td>
+  </tr>
+  <tr>
+    <td><code>=placeholder</code></td>
+    <td>Sets the styles of an input placeholder.</td>
+  </tr>
+  <tr>
+    <td><code>=unselectable</code></td>
+    <td>Turns the element unselectable. Used for buttons to prevent selection when clicking.</td>
+  </tr>
 </table>
 
-    <div class="content">
-      <p>These mixins are already used throughout Bulma, but you can use them as well to extend your own styles.</p>
-    </div>
-  </div>
-</section>
+<div class="content">
+  <p>These mixins are already used throughout Bulma, but you can use them as well to extend your own styles.</p>
+</div>

docs/documentation/overview/modular.html

@@ -1,38 +1,22 @@
 ---
 title: Modularity
+subtitle: "Just import what you <strong>need</strong>"
 layout: documentation
 doc-tab: overview
 doc-subtab: modular
+breadcrumb:
+- home
+- documentation
+- overview
+- overview-modular
 ---
 
-{% include subnav/subnav-overview.html %}
-
-<section class="section">
-  <div class="container">
-    <h1 class="title">Modular</h1>
-    <h2 class="subtitle">Just import what you <strong>need</strong></h2>
-
-    <hr>
-
-    <div class="content">
-      <p>
-        Bulma consists of <strong>39</strong> <code>.sass</code> files that you can import <strong>individually.</strong>
-      </p>
-      <p>
-        For example, let's say you only want the Bulma <strong>columns.</strong>
-        <br>
-        The file is located in the <code>bulma/sass/grid</code> folder.
-        <br>
-        Simply <strong>import</strong> the utilities dependencies, and then the files you need directly:
-      </p>
-{% highlight sass %}
+{% capture import %}
 @import "bulma/sass/utilities/_all"
 @import "bulma/sass/grid/columns"
-{% endhighlight %}
-      <p>
-        Now you can use the classes <code>.columns</code> (for the container) and <code>.column</code> directly:
-      </p>
-{% highlight html %}
+{% endcapture %}
+
+{% capture columns %}
 <div class="columns">
   <div class="column">1</div>
   <div class="column">2</div>
@@ -40,45 +24,14 @@ doc-subtab: modular
   <div class="column">4</div>
   <div class="column">5</div>
 </div>
-{% endhighlight %}
-
-      <hr>
+{% endcapture %}
 
-      <p>
-        What if you only want the <strong>button</strong> styles instead?
-      </p>
-{% highlight sass %}
+{% capture only_button %}
 @import "bulma/sass/utilities/_all"
 @import "bulma/sass/elements/button.sass"
-{% endhighlight %}
-      <p>
-        You can now use the <code>.button</code> class, and all its modifiers:
-      </p>
-      <ul>
-        <li>
-          <code>.is-active</code>
-        </li>
-        <li>
-          <code>.is-primary</code>,
-          <code>.is-info</code>,
-          <code>.is-success</code>...
-        </li>
-        <li>
-          <code>.is-small</code>,
-          <code>.is-medium</code>,
-          <code>.is-large</code>
-        </li>
-        <li>
-          <code>.is-outlined</code>,
-          <code>.is-inverted</code>,
-          <code>.is-link</code>
-        </li>
-        <li>
-          <code>.is-loading</code>,
-          <code>[disabled]</code>
-        </li>
-      </ul>
-{% highlight html %}
+{% endcapture %}
+
+{% capture buttons %}
 <a class="button">
   Button
 </a>
@@ -94,7 +47,57 @@ doc-subtab: modular
 <a class="button is-loading">
   Loading button
 </a>
-{% endhighlight %}
-    </div>
-  </div>
-</section>
+{% endcapture %}
+
+<div class="content">
+  <p>
+    Bulma consists of <strong>39</strong> <code>.sass</code> files that you can import <strong>individually.</strong>
+  </p>
+  <p>
+    For example, let's say you only want the Bulma <strong>columns.</strong>
+    <br>
+    The file is located in the <code>bulma/sass/grid</code> folder.
+    <br>
+    Simply <strong>import</strong> the utilities dependencies, and then the files you need directly:
+  </p>
+  {% highlight sass %}{{ import }}{% endhighlight %}
+  <p>
+    Now you can use the classes <code>.columns</code> (for the container) and <code>.column</code> directly:
+  </p>
+  {% highlight html %}{{ columns }}{% endhighlight %}
+
+  <hr>
+
+  <p>
+    What if you only want the <strong>button</strong> styles instead?
+  </p>
+  {% highlight sass %}{{ only_button }}{% endhighlight %}
+  <p>
+    You can now use the <code>.button</code> class, and all its modifiers:
+  </p>
+  <ul>
+    <li>
+      <code>.is-active</code>
+    </li>
+    <li>
+      <code>.is-primary</code>,
+      <code>.is-info</code>,
+      <code>.is-success</code>...
+    </li>
+    <li>
+      <code>.is-small</code>,
+      <code>.is-medium</code>,
+      <code>.is-large</code>
+    </li>
+    <li>
+      <code>.is-outlined</code>,
+      <code>.is-inverted</code>,
+      <code>.is-link</code>
+    </li>
+    <li>
+      <code>.is-loading</code>,
+      <code>[disabled]</code>
+    </li>
+  </ul>
+  {% highlight html %}{{ buttons }}{% endhighlight %}
+</div>

docs/documentation/overview/responsiveness.html

@@ -1,8 +1,14 @@
 ---
 title: Responsiveness
+subtitle: "Bulma is a <strong>mobile-first</strong> framework"
 layout: documentation
 doc-tab: overview
 doc-subtab: responsiveness
+breadcrumb:
+- home
+- documentation
+- overview
+- overview-responsiveness
 variables_keys:
 - gap
 - tablet
@@ -19,244 +25,234 @@ $widescreen-enabled: false
 $fullhd-enabled: false
 {% endcapture %}
 
-{% include subnav/subnav-overview.html %}
+{% include anchor.html name="Vertical by default" %}
 
-<section class="section">
-  <div class="container">
-    <h1 class="title">Responsiveness</h1>
-    <h2 class="subtitle">Bulma is a <strong>mobile-first</strong> framework</h2>
+<div class="content">
+  <p>
+    Every element in Bulma is <strong>mobile-first</strong> and optimizes for <strong>vertical reading</strong>, so by default on mobile:
+  </p>
+  <ul>
+    <li><code>columns</code> are stacked vertically</li>
+    <li>the <code>level</code> component will show its children stacked vertically</li>
+    <li>the <code>nav</code> menu will be hidden</li>
+  </ul>
+  <p>For example, you can enforce the <strong>horizontal</strong> layout for both <code>columns</code> or <code>nav</code> by appending the <code>is-mobile</code> modifier.</p>
+</div>
 
-    {% include anchor.html name="Vertical by default" %}
+{% include anchor.html name="Breakpoints" %}
 
-    <div class="content">
-      <p>
-        Every element in Bulma is <strong>mobile-first</strong> and optimizes for <strong>vertical reading</strong>, so by default on mobile:
-      </p>
-      <ul>
-        <li><code>columns</code> are stacked vertically</li>
-        <li>the <code>level</code> component will show its children stacked vertically</li>
-        <li>the <code>nav</code> menu will be hidden</li>
-      </ul>
-      <p>For example, you can enforce the <strong>horizontal</strong> layout for both <code>columns</code> or <code>nav</code> by appending the <code>is-mobile</code> modifier.</p>
-    </div>
+{% assign variables_file_url = "/blob/master/sass/utilities/initial-variables.sass#L46,L57" | prepend: site.data.meta.github %}
+{% assign mixins_file_url = "/blob/master/sass/utilities/mixins.sass#L182,L226" | prepend: site.data.meta.github %}
 
-    {% include anchor.html name="Breakpoints" %}
+<div class="content">
+  <p>Bulma has <a href="{{ variables_file_url }}" target="_blank">5 breakpoints</a>:</p>
+  <ul>
+    {% for breakpoint_hash in site.data.breakpoints %}
+      {% assign breakpoint = breakpoint_hash[1] %}
+      <li><code>{{ breakpoint.id }}</code>: {% if breakpoint.id == 'mobile' %}up to <code>{{ breakpoint.to }}px</code>{% else %}from <code>{{ breakpoint.from }}px</code>{% endif %}</li>
+    {% endfor %}
+  </ul>
 
-    {% assign variables_file_url = "/blob/master/sass/utilities/initial-variables.sass#L46,L57" | prepend: site.data.meta.github %}
-    {% assign mixins_file_url = "/blob/master/sass/utilities/mixins.sass#L182,L226" | prepend: site.data.meta.github %}
+  <p>Bulma uses <a href="{{ mixins_file_url }}" target="_blank">9 responsive mixins</a>:</p>
+  <ul>
+    {% for breakpoint_hash in site.data.breakpoints %}
+      {% assign breakpoint = breakpoint_hash[1] %}
+      {% case breakpoint.id %}
+        {% when 'mobile' %}
+          <li>
+            <code>={{ breakpoint.id }}</code><br>
+            until <code>{{ breakpoint.to }}px</code>
+          </li>
+        {% when 'fullhd' %}
+          <li>
+            <code>={{ breakpoint.id }}</code><br>
+            from <code>{{ breakpoint.from }}px</code>
+          </li>
+        {% else %}
+          <li>
+            <code>={{ breakpoint.id }}</code><br>
+            from <code>{{ breakpoint.from }}px</code>
+          </li>
+          <li>
+            <code>={{ breakpoint.id }}-only</code><br>
+            from <code>{{ breakpoint.from }}px</code> and until <code>{{ breakpoint.to }}px</code>
+          </li>
+          {% if breakpoint.id == 'tablet' %}
+            <li>
+              <code>=touch</code><br>
+              until <code>{{ breakpoint.to }}px</code>
+            </li>
+          {% endif %}
+      {% endcase %}
+    {% endfor %}
+  </ul>
+</div>
 
-    <div class="content">
-      <p>Bulma has <a href="{{ variables_file_url }}" target="_blank">5 breakpoints</a>:</p>
-      <ul>
-        {% for breakpoint_hash in site.data.breakpoints %}
-          {% assign breakpoint = breakpoint_hash[1] %}
-          <li><code>{{ breakpoint.id }}</code>: {% if breakpoint.id == 'mobile' %}up to <code>{{ breakpoint.to }}px</code>{% else %}from <code>{{ breakpoint.from }}px</code>{% endif %}</li>
-        {% endfor %}
-      </ul>
+<table class="table is-bordered">
+  <thead>
+    <tr>
+      {% for breakpoint_hash in site.data.breakpoints %}
+        {% assign breakpoint = breakpoint_hash[1] %}
+        <th style="width: 20%;">
+          {{ breakpoint.name }}<br>
+          {% if breakpoint.id == 'mobile' %}
+            Up to <code>{{ breakpoint.to }}px</code>
+          {% elsif breakpoint.id == 'fullhd' %}
+            <code>{{ breakpoint.from }}px</code> and above
+          {% else %}
+            Between <code>{{ breakpoint.from }}px</code> and <code>{{ breakpoint.to }}px</code>
+          {% endif %}
+        </th>
+      {% endfor %}
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <p class="notification is-success">mobile</p>
+      </td>
+      <td colspan="4">
+        <p class="notification">-</p>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <p class="notification">-</p>
+      </td>
+      <td colspan="4">
+        <p class="notification is-success">tablet</p>
+      </td>
+    </tr>
+    <tr>
+      <td colspan="2">
+        <p class="notification">-</p>
+      </td>
+      <td colspan="3">
+        <p class="notification is-success">desktop</p>
+      </td>
+    </tr>
+    <tr>
+      <td colspan="3">
+        <p class="notification">-</p>
+      </td>
+      <td colspan="2">
+        <p class="notification is-success">widescreen</p>
+      </td>
+    </tr>
+    <tr>
+      <td colspan="4">
+        <p class="notification">-</p>
+      </td>
+      <td>
+        <p class="notification is-success">fullhd</p>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <p class="notification">-</p>
+      </td>
+      <td>
+        <p class="notification is-success">tablet-only</p>
+      </td>
+      <td colspan="3">
+        <p class="notification">-</p>
+      </td>
+    </tr>
+    <tr>
+      <td colspan="2">
+        <p class="notification">-</p>
+      </td>
+      <td>
+        <p class="notification is-success">desktop-only</p>
+      </td>
+      <td colspan="2">
+        <p class="notification">-</p>
+      </td>
+    </tr>
+    <tr>
+      <td colspan="3">
+        <p class="notification">-</p>
+      </td>
+      <td>
+        <p class="notification is-success">widescreen-only</p>
+      </td>
+      <td>
+        <p class="notification">-</p>
+      </td>
+    </tr>
+    <tr>
+      <td colspan="2">
+        <p class="notification is-success">touch</p>
+      </td>
+      <td colspan="3">
+        <p class="notification">-</p>
+      </td>
+    </tr>
+    <tr>
+      <td colspan="3">
+        <p class="notification is-success">until-widescreen</p>
+      </td>
+      <td colspan="2">
+        <p class="notification">-</p>
+      </td>
+    </tr>
+    <tr>
+      <td colspan="4">
+        <p class="notification is-success">until-fullhd</p>
+      </td>
+      <td colspan="1">
+        <p class="notification">-</p>
+      </td>
+    </tr>
+  </tbody>
+</table>
 
-      <p>Bulma uses <a href="{{ mixins_file_url }}" target="_blank">9 responsive mixins</a>:</p>
-      <ul>
-        {% for breakpoint_hash in site.data.breakpoints %}
-          {% assign breakpoint = breakpoint_hash[1] %}
-          {% case breakpoint.id %}
-            {% when 'mobile' %}
-              <li>
-                <code>={{ breakpoint.id }}</code><br>
-                until <code>{{ breakpoint.to }}px</code>
-              </li>
-            {% when 'fullhd' %}
-              <li>
-                <code>={{ breakpoint.id }}</code><br>
-                from <code>{{ breakpoint.from }}px</code>
-              </li>
-            {% else %}
-              <li>
-                <code>={{ breakpoint.id }}</code><br>
-                from <code>{{ breakpoint.from }}px</code>
-              </li>
-              <li>
-                <code>={{ breakpoint.id }}-only</code><br>
-                from <code>{{ breakpoint.from }}px</code> and until <code>{{ breakpoint.to }}px</code>
-              </li>
-              {% if breakpoint.id == 'tablet' %}
-                <li>
-                  <code>=touch</code><br>
-                  until <code>{{ breakpoint.to }}px</code>
-                </li>
-              {% endif %}
-          {% endcase %}
-        {% endfor %}
-      </ul>
-    </div>
+{% include anchor.html name="Disabling breakpoints" %}
 
-    <table class="table is-bordered">
-      <thead>
-        <tr>
-          {% for breakpoint_hash in site.data.breakpoints %}
-            {% assign breakpoint = breakpoint_hash[1] %}
-            <th style="width: 20%;">
-              {{ breakpoint.name }}<br>
-              {% if breakpoint.id == 'mobile' %}
-                Up to <code>{{ breakpoint.to }}px</code>
-              {% elsif breakpoint.id == 'fullhd' %}
-                <code>{{ breakpoint.from }}px</code> and above
-              {% else %}
-                Between <code>{{ breakpoint.from }}px</code> and <code>{{ breakpoint.to }}px</code>
-              {% endif %}
-            </th>
-          {% endfor %}
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>
-            <p class="notification is-success">mobile</p>
-          </td>
-          <td colspan="4">
-            <p class="notification">-</p>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <p class="notification">-</p>
-          </td>
-          <td colspan="4">
-            <p class="notification is-success">tablet</p>
-          </td>
-        </tr>
-        <tr>
-          <td colspan="2">
-            <p class="notification">-</p>
-          </td>
-          <td colspan="3">
-            <p class="notification is-success">desktop</p>
-          </td>
-        </tr>
-        <tr>
-          <td colspan="3">
-            <p class="notification">-</p>
-          </td>
-          <td colspan="2">
-            <p class="notification is-success">widescreen</p>
-          </td>
-        </tr>
-        <tr>
-          <td colspan="4">
-            <p class="notification">-</p>
-          </td>
-          <td>
-            <p class="notification is-success">fullhd</p>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <p class="notification">-</p>
-          </td>
-          <td>
-            <p class="notification is-success">tablet-only</p>
-          </td>
-          <td colspan="3">
-            <p class="notification">-</p>
-          </td>
-        </tr>
-        <tr>
-          <td colspan="2">
-            <p class="notification">-</p>
-          </td>
-          <td>
-            <p class="notification is-success">desktop-only</p>
-          </td>
-          <td colspan="2">
-            <p class="notification">-</p>
-          </td>
-        </tr>
-        <tr>
-          <td colspan="3">
-            <p class="notification">-</p>
-          </td>
-          <td>
-            <p class="notification is-success">widescreen-only</p>
-          </td>
-          <td>
-            <p class="notification">-</p>
-          </td>
-        </tr>
-        <tr>
-          <td colspan="2">
-            <p class="notification is-success">touch</p>
-          </td>
-          <td colspan="3">
-            <p class="notification">-</p>
-          </td>
-        </tr>
-        <tr>
-          <td colspan="3">
-            <p class="notification is-success">until-widescreen</p>
-          </td>
-          <td colspan="2">
-            <p class="notification">-</p>
-          </td>
-        </tr>
-        <tr>
-          <td colspan="4">
-            <p class="notification is-success">until-fullhd</p>
-          </td>
-          <td colspan="1">
-            <p class="notification">-</p>
-          </td>
-        </tr>
-      </tbody>
-    </table>
+{% include elements/new-tag.html version="0.6.3" %}
 
-    {% include anchor.html name="Disabling breakpoints" %}
+<div class="content">
+  <p>
+    By default, the <code>$widecreen</code> and <code>$fullhd</code> breakpoints are <strong>enabled</strong>. You can disable them by setting the corresponding Sass boolean to <code>false</code>:
+  </p>
+</div>
 
-    {% include elements/new-tag.html version="0.6.3" %}
+<div class="highlight-full">
+  {% highlight sass %}{{ scss_code }}{% endhighlight %}
+</div>
 
-    <div class="content">
-      <p>
-        By default, the <code>$widecreen</code> and <code>$fullhd</code> breakpoints are <strong>enabled</strong>. You can disable them by setting the corresponding Sass boolean to <code>false</code>:
-      </p>
-    </div>
+{% include anchor.html name="Variables" %}
 
-    <div class="highlight-full">
-      {% highlight sass %}{{ scss_code }}{% endhighlight %}
-    </div>
+<div class="content">
+  <p>
+    You can use <a href="{{ variables_file_url }}" target="_blank">these variables</a> to <strong>customize</strong> the responsive breakpoints. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
+  </p>
+</div>
 
-    {% include anchor.html name="Variables" %}
-
-    <div class="content">
-      <p>
-        You can use <a href="{{ variables_file_url }}" target="_blank">these variables</a> to <strong>customize</strong> the responsive breakpoints. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
-      </p>
-    </div>
-
-    <table class="table is-bordered">
-      <thead>
-        <tr>
-          <th>Name</th>
-          <th>Default value</th>
-        </tr>
-      </thead>
-      <tfoot>
-        <tr>
-          <th>Name</th>
-          <th>Default value</th>
-        </tr>
-      </tfoot>
-      <tbody>
-        {% for key in page.variables_keys %}
-          {% assign variable = site.data.variables.utilities.initial-variables.vars[key] %}
-          <tr>
-            <td>
-              <code>{{ variable.name }}</code>
-            </td>
-            <td>
-              <code>{{ variable.value }}</code>
-            </td>
-          </tr>
-        {% endfor %}
-      </tbody>
-    </table>
-
-  </div>
-</section>
+<table class="table is-bordered">
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Default value</th>
+    </tr>
+  </thead>
+  <tfoot>
+    <tr>
+      <th>Name</th>
+      <th>Default value</th>
+    </tr>
+  </tfoot>
+  <tbody>
+    {% for key in page.variables_keys %}
+      {% assign variable = site.data.variables.utilities.initial-variables.vars[key] %}
+      <tr>
+        <td>
+          <code>{{ variable.name }}</code>
+        </td>
+        <td>
+          <code>{{ variable.value }}</code>
+        </td>
+      </tr>
+    {% endfor %}
+  </tbody>
+</table>

docs/documentation/overview/start.html

@@ -1,140 +1,134 @@
 ---
-title: Get started with Bulma
+title: Getting started with Bulma
+subtitle: "You only need <strong>1 CSS file</strong> to use Bulma"
 layout: documentation
 doc-tab: overview
 doc-subtab: start
+breadcrumb:
+- home
+- documentation
+- overview
+- overview-start
 ---
 
-{% include subnav/subnav-overview.html %}
-
-<section class="section">
-  <div class="container">
-    <h1 class="title">Getting started</h1>
-    <h2 class="subtitle">You only need <strong>1 CSS file</strong> to use Bulma</h2>
-
-    <hr>
-
-    <div class="content">
-      <p>
-        There are several ways to <strong>get started</strong> with Bulma. You can either:
-      </p>
-      <ol>
-        <li>
-          use <strong>npm</strong> to install the Bulma package
-        </li>
-        <li>
-          use the cdnjs <strong>CDN</strong> to link to the Bulma stylesheet
-        </li>
-        <li>
-          use the <strong>GitHub repository</strong> to get the latest development version
-        </li>
-      </ol>
-    </div>
-
-    <article class="media is-large">
-      <div class="media-left">
-        <p class="title is-5">1</p>
-      </div>
-      <div class="media-content">
-        <p class="title is-5">
-          Use <strong>NPM</strong> <em>(recommended)</em>:
-        </p>
-        {% highlight bash %}npm install bulma{% endhighlight %}
-      </div>
-    </article>
-
-    <article class="media is-large">
-      <div class="media-left">
-        <p class="title is-5">2</p>
-      </div>
-      <div class="media-content">
-        <p class="title is-5">
-          Use the <a href="https://cdnjs.com/" target="_blank">cdnjs</a> <strong>CDN</strong>
-          <br>
-          <a href="https://cdnjs.com/libraries/bulma">https://cdnjs.com/libraries/bulma</a>
-        </p>
-      </div>
-    </article>
-
-    <article class="media is-large">
-      <div class="media-left">
-        <p class="title is-5">3</p>
-      </div>
-      <div class="media-content">
-        <p class="title is-5">
-          Download from the <strong>repository</strong>
-          <br>
-          <a href="https://github.com/jgthms/bulma/tree/master/css">https://github.com/jgthms/bulma/tree/master/css</a>
-        </p>
-      </div>
-    </article>
-
-    <hr>
-
-    <div class="message is-info">
-      <div class="message-header">
-        Font Awesome icons
-      </div>
-      <div class="message-body">
-        <p>If you want to use icons with Bulma, don't forget to include <a href="https://fontawesome.com">Font Awesome 5</a>:</p>
-        {% highlight html %}<script defer src="{{ site.data.icons.fontawesome5 }}"></script>{% endhighlight %}
-      </div>
-    </div>
-
-    {% include anchor.html name="Code requirements" %}
-
-    <div class="content">
-      <p>
-        For Bulma to work correctly, you need to make your webpage <strong>responsive</strong>.
-      </p>
-    </div>
+<div class="content">
+  <p>
+    There are several ways to <strong>get started</strong> with Bulma. You can either:
+  </p>
+  <ol>
+    <li>
+      use <strong>npm</strong> to install the Bulma package
+    </li>
+    <li>
+      use the cdnjs <strong>CDN</strong> to link to the Bulma stylesheet
+    </li>
+    <li>
+      use the <strong>GitHub repository</strong> to get the latest development version
+    </li>
+  </ol>
+</div>
+
+<article class="media is-large">
+  <div class="media-left">
+    <p class="title is-5">1</p>
+  </div>
+  <div class="media-content">
+    <p class="title is-5">
+      Use <strong>NPM</strong> <em>(recommended)</em>:
+    </p>
+    {% highlight bash %}npm install bulma{% endhighlight %}
+  </div>
+</article>
 
-    <article class="media is-large">
-      <div class="media-left">
-        <p class="title is-5">1</p>
-      </div>
-      <div class="media-content">
-        <p class="title is-5">
-          Use the <strong>HTML5 doctype</strong>
-        </p>
-        {% highlight html %}<!DOCTYPE html>{% endhighlight %}
-      </div>
-    </article>
+<article class="media is-large">
+  <div class="media-left">
+    <p class="title is-5">2</p>
+  </div>
+  <div class="media-content">
+    <p class="title is-5">
+      Use the <a href="https://cdnjs.com/" target="_blank">cdnjs</a> <strong>CDN</strong>
+      <br>
+      <a href="https://cdnjs.com/libraries/bulma">https://cdnjs.com/libraries/bulma</a>
+    </p>
+  </div>
+</article>
 
-    <article class="media is-large">
-      <div class="media-left">
-        <p class="title is-5">2</p>
-      </div>
-      <div class="media-content">
-        <p class="title is-5">
-          Add the responsive <strong>viewport</strong> meta tag
-        </p>
-        {% highlight html %}<meta name="viewport" content="width=device-width, initial-scale=1">{% endhighlight %}
-      </div>
-    </article>
+<article class="media is-large">
+  <div class="media-left">
+    <p class="title is-5">3</p>
+  </div>
+  <div class="media-content">
+    <p class="title is-5">
+      Download from the <strong>repository</strong>
+      <br>
+      <a href="https://github.com/jgthms/bulma/tree/master/css">https://github.com/jgthms/bulma/tree/master/css</a>
+    </p>
+  </div>
+</article>
 
-    {% include anchor.html name="Starter template" %}
+<hr>
 
-    <div class="content">
-      <p>
-        If you want to get started <strong>right away</strong>, you can use this <strong>HTML starter template</strong>. Just copy/paste this code in a file and save it on your computer.
-      </p>
-    </div>
+<div class="message is-info">
+  <div class="message-header">
+    Font Awesome icons
+  </div>
+  <div class="message-body">
+    <p>If you want to use icons with Bulma, don't forget to include <a href="https://fontawesome.com">Font Awesome 5</a>:</p>
+    {% highlight html %}<script defer src="{{ site.data.icons.fontawesome5 }}"></script>{% endhighlight %}
+  </div>
+</div>
 
-    <div class="bd-example highlight-full">
-      {% highlight html %}{% include getting-started.html %}{% endhighlight %}
-    </div>
+{% include anchor.html name="Code requirements" %}
 
-    {% include anchor.html name="bulma-start" %}
+<div class="content">
+  <p>
+    For Bulma to work correctly, you need to make your webpage <strong>responsive</strong>.
+  </p>
+</div>
 
-    <div class="content">
-      <p>
-        <code><a href="/bulma-start/">bulma-start</a></code> is a tiny npm package that includes the <code>npm</code> dependencies you need to build your own website with Bulma.
-      </p>
-      <p>
-        <a class="button is-link" href="/bulma-start/">Check it out</a>
-      </p>
-    </div>
+<article class="media is-large">
+  <div class="media-left">
+    <p class="title is-5">1</p>
+  </div>
+  <div class="media-content">
+    <p class="title is-5">
+      Use the <strong>HTML5 doctype</strong>
+    </p>
+    {% highlight html %}<!DOCTYPE html>{% endhighlight %}
+  </div>
+</article>
 
+<article class="media is-large">
+  <div class="media-left">
+    <p class="title is-5">2</p>
+  </div>
+  <div class="media-content">
+    <p class="title is-5">
+      Add the responsive <strong>viewport</strong> meta tag
+    </p>
+    {% highlight html %}<meta name="viewport" content="width=device-width, initial-scale=1">{% endhighlight %}
   </div>
-</section>
+</article>
+
+{% include anchor.html name="Starter template" %}
+
+<div class="content">
+  <p>
+    If you want to get started <strong>right away</strong>, you can use this <strong>HTML starter template</strong>. Just copy/paste this code in a file and save it on your computer.
+  </p>
+</div>
+
+<div class="bd-example highlight-full">
+  {% highlight html %}{% include getting-started.html %}{% endhighlight %}
+</div>
+
+{% include anchor.html name="bulma-start" %}
+
+<div class="content">
+  <p>
+    <code><a href="/bulma-start/">bulma-start</a></code> is a tiny npm package that includes the <code>npm</code> dependencies you need to build your own website with Bulma.
+  </p>
+  <p>
+    <a class="button is-link" href="/bulma-start/">Check it out</a>
+  </p>
+</div>

docs/documentation/overview/variables.html

@@ -1,121 +1,115 @@
 ---
 title: Variables
+subtitle: "Easily <strong>customize</strong> Bulma to match your design"
 layout: documentation
 doc-tab: overview
 doc-subtab: variables
+breadcrumb:
+- home
+- documentation
+- overview
+- overview-variables
 ---
 
-{% include subnav/subnav-overview.html %}
+{% assign initial_variables = site.data.variables.utilities.initial-variables %}
+{% assign initial_vars      = initial_variables.vars %}
+{% assign derived_variables = site.data.variables.utilities.derived-variables %}
+{% assign derived_vars      = derived_variables.vars %}
 
-<section class="section">
-  <div class="container">
-    <h1 class="title">Variables</h1>
-    <h2 class="subtitle">Easily <strong>customize</strong> Bulma to match your design</h2>
-
-    <hr>
-
-    {% assign initial_variables = site.data.variables.utilities.initial-variables %}
-    {% assign initial_vars      = initial_variables.vars %}
-    {% assign derived_variables = site.data.variables.utilities.derived-variables %}
-    {% assign derived_vars      = derived_variables.vars %}
-
-    <div class="content">
-      <p>Bulma has <strong>two</strong> variable files divided into <strong>4</strong> sections:</p>
-      <ol>
+<div class="content">
+  <p>Bulma has <strong>two</strong> variable files divided into <strong>4</strong> sections:</p>
+  <ol>
+    <li>
+      <strong>Initial variables</strong>: where you define variables by <strong>literal value</strong>, like:
+      <ul>
+        <li><strong>colors</strong>: <code>{{ initial_vars.blue.name }}: {{ initial_vars.blue.value }}</code></li>
+        <li><strong>font sizes</strong>: <code>{{ initial_vars.size-1.name }}: {{ initial_vars.size-1.value }}</code></li>
+        <li><strong>dimensions</strong>: <code>{{ initial_vars.gap.name }}: {{ initial_vars.gap.value }}</code></li>
+        <li><strong>other values</strong>: <code>{{ initial_vars.easing.name }}: {{ initial_vars.easing.value }}</code> or <code>{{ initial_vars.radius-large.name }}: {{ initial_vars.radius-large.value }}</code></li>
+      </ul>
+    </li>
+    <li>
+      <strong>Derived variables</strong> where variables are <strong>calculated</strong> from the values set in the previous file. For example, you can have:
+      <ul>
         <li>
-          <strong>Initial variables</strong>: where you define variables by <strong>literal value</strong>, like:
+          <strong>Primary colors</strong> derived from the initial variables:
           <ul>
-            <li><strong>colors</strong>: <code>{{ initial_vars.blue.name }}: {{ initial_vars.blue.value }}</code></li>
-            <li><strong>font sizes</strong>: <code>{{ initial_vars.size-1.name }}: {{ initial_vars.size-1.value }}</code></li>
-            <li><strong>dimensions</strong>: <code>{{ initial_vars.gap.name }}: {{ initial_vars.gap.value }}</code></li>
-            <li><strong>other values</strong>: <code>{{ initial_vars.easing.name }}: {{ initial_vars.easing.value }}</code> or <code>{{ initial_vars.radius-large.name }}: {{ initial_vars.radius-large.value }}</code></li>
+            <li><code>{{ derived_vars.primary.name }}: {{ derived_vars.primary.value }}</code></li>
+            <li><code>{{ derived_vars.link.name }}: {{ derived_vars.link.value }}</code></li>
+            <li><code>{{ derived_vars.info.name }}: {{ derived_vars.info.value }}</code></li>
+            <li><code>{{ derived_vars.success.name }}: {{ derived_vars.success.value }}</code></li>
+            <li><code>{{ derived_vars.warning.name }}: {{ derived_vars.warning.value }}</code></li>
+            <li><code>{{ derived_vars.danger.name }}: {{ derived_vars.danger.value }}</code></li>
+            <li><code>{{ derived_vars.dark.name }}: {{ derived_vars.dark.value }}</code></li>
+            <li><code>{{ derived_vars.text.name }}: {{ derived_vars.text.value }}</code></li>
           </ul>
         </li>
+        <li><code>{{ derived_vars.background.name }}: {{ derived_vars.background.value }}</code>: a general background color</li>
+        <li><code>{{ derived_vars.link.name }}: {{ derived_vars.link.value }}</code>: the links use the primary color</li>
+        <li><code>{{ derived_vars.family-primary.name }}: {{ derived_vars.family-primary.value }}</code>: the primary font family is the sans-serif one</li>
         <li>
-          <strong>Derived variables</strong> where variables are <strong>calculated</strong> from the values set in the previous file. For example, you can have:
+          <strong>Lists and maps</strong> which are collections of already defined variables:
           <ul>
-            <li>
-              <strong>Primary colors</strong> derived from the initial variables:
-              <ul>
-                <li><code>{{ derived_vars.primary.name }}: {{ derived_vars.primary.value }}</code></li>
-                <li><code>{{ derived_vars.link.name }}: {{ derived_vars.link.value }}</code></li>
-                <li><code>{{ derived_vars.info.name }}: {{ derived_vars.info.value }}</code></li>
-                <li><code>{{ derived_vars.success.name }}: {{ derived_vars.success.value }}</code></li>
-                <li><code>{{ derived_vars.warning.name }}: {{ derived_vars.warning.value }}</code></li>
-                <li><code>{{ derived_vars.danger.name }}: {{ derived_vars.danger.value }}</code></li>
-                <li><code>{{ derived_vars.dark.name }}: {{ derived_vars.dark.value }}</code></li>
-                <li><code>{{ derived_vars.text.name }}: {{ derived_vars.text.value }}</code></li>
-              </ul>
-            </li>
-            <li><code>{{ derived_vars.background.name }}: {{ derived_vars.background.value }}</code>: a general background color</li>
-            <li><code>{{ derived_vars.link.name }}: {{ derived_vars.link.value }}</code>: the links use the primary color</li>
-            <li><code>{{ derived_vars.family-primary.name }}: {{ derived_vars.family-primary.value }}</code>: the primary font family is the sans-serif one</li>
-            <li>
-              <strong>Lists and maps</strong> which are collections of already defined variables:
-              <ul>
-                <li><code>{{ derived_vars.colors.name }}: {{ derived_vars.colors.value }}</code></li>
-                <li><code>{{ derived_vars.shades.name }}: {{ derived_vars.shades.value }}</code></li>
-                <li><code>{{ derived_vars.sizes.name }}: {{ derived_vars.sizes.value }}</code></li>
-              </ul>
-            </li>
+            <li><code>{{ derived_vars.colors.name }}: {{ derived_vars.colors.value }}</code></li>
+            <li><code>{{ derived_vars.shades.name }}: {{ derived_vars.shades.value }}</code></li>
+            <li><code>{{ derived_vars.sizes.name }}: {{ derived_vars.sizes.value }}</code></li>
           </ul>
         </li>
-      </ol>
-      <p>
-        To <strong>override</strong> any of these variables, just set them <em>before</em> importing Bulma.
-      </p>
-    </div>
-
-    {% include anchor.html name="Initial variables" %}
+      </ul>
+    </li>
+  </ol>
+  <p>
+    To <strong>override</strong> any of these variables, just set them <em>before</em> importing Bulma.
+  </p>
+</div>
 
-    <div class="content">
-      <p>
-        These are <a href="{{ initial_variables.file_url }}" target="_blank">variables</a> with a <strong>literal</strong> value.
-      </p>
-    </div>
+{% include anchor.html name="Initial variables" %}
 
-    <table class="table is-bordered is-striped">
-      <tbody>
-      {% for variable_hash in initial_vars %}
-        {% assign variable    = variable_hash[1] %}
-        {% assign starts_with = variable.value | slice: 0, 3 %}
-        <tr>
-          <td>
-            <code style="white-space: nowrap;">{{ variable.name }}</code>
-          </td>
-          <td>
-            {% if starts_with == 'hsl' %}
-              <span class="bd-color" style="background: {{ variable.value }};"></span>
-            {% endif %}
-            <code>{{ variable.value }}</code>
-          </td>
-        </tr>
-      {% endfor %}
-      <tbody>
-    </table>
+<div class="content">
+  <p>
+    These are <a href="{{ initial_variables.file_url }}" target="_blank">variables</a> with a <strong>literal</strong> value.
+  </p>
+</div>
 
-    {% capture custom_message %}
-      These are <a href="{{ derived_variables.file_url }}" target="_blank">variables</a> with a value that <strong>references</strong> another variable.
-    {% endcapture %}
-    {%
-      include variables.html
-        anchor_name    = 'Derived variables'
-        data           = derived_variables
-        custom_message = custom_message
-        table_class    = 'is-bordered is-striped'
-    %}
+<table class="table is-bordered is-striped">
+  <tbody>
+  {% for variable_hash in initial_vars %}
+    {% assign variable    = variable_hash[1] %}
+    {% assign starts_with = variable.value | slice: 0, 3 %}
+    <tr>
+      <td>
+        <code style="white-space: nowrap;">{{ variable.name }}</code>
+      </td>
+      <td>
+        {% if starts_with == 'hsl' %}
+          <span class="bd-color" style="background: {{ variable.value }};"></span>
+        {% endif %}
+        <code>{{ variable.value }}</code>
+      </td>
+    </tr>
+  {% endfor %}
+  <tbody>
+</table>
 
-    {% capture custom_message %}
-      You can use the following <a href="{{ site.data.variables.base.generic.file_url }}" target="_blank">generic variables</a> for general <strong>customization</strong>. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
-    {% endcapture %}
-    {%
-      include variables.html
-        anchor_name    = 'Generic variables'
-        tab            = 'base'
-        subtab         = 'generic'
-        custom_message = custom_message
-        table_class    = 'is-bordered is-striped'
-    %}
+{% capture custom_message %}
+  These are <a href="{{ derived_variables.file_url }}" target="_blank">variables</a> with a value that <strong>references</strong> another variable.
+{% endcapture %}
+{%
+  include variables.html
+    anchor_name    = 'Derived variables'
+    data           = derived_variables
+    custom_message = custom_message
+    table_class    = 'is-bordered is-striped'
+%}
 
-  </div>
-</section>
+{% capture custom_message %}
+  You can use the following <a href="{{ site.data.variables.base.generic.file_url }}" target="_blank">generic variables</a> for general <strong>customization</strong>. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
+{% endcapture %}
+{%
+  include variables.html
+    anchor_name    = 'Generic variables'
+    tab            = 'base'
+    subtab         = 'generic'
+    custom_message = custom_message
+    table_class    = 'is-bordered is-striped'
+%}