Merge pull request #2984 from jgthms/new-helpers

New helpers

.gitignore

@@ -3,6 +3,8 @@
 .DS_Store
 .ruby-version
 npm-debug.log
+test.css
+test.css.map
 test.html
 test.sass
 test.css

CHANGELOG.md

@@ -2,6 +2,52 @@
 
 ## 0.9.0
 
+### New features
+
+Bulma now has **spacing helpers**: https://bulma.io/documentation/helpers/spacing-helpers/
+
+<p>Bulma provides <strong>margin</strong> <code>m*</code> and <strong>padding</strong> <code>p*</code> helpers in all <strong>directions</strong>:</p>
+
+<ul>
+  <li>
+    <code>*t</code> for <strong>top</strong>
+  </li>
+  <li>
+    <code>*r</code> for <strong>right</strong>
+  </li>
+  <li>
+    <code>*b</code> for <strong>bottom</strong>
+  </li>
+  <li>
+    <code>*l</code> for <strong>left</strong>
+  </li>
+  <li>
+    <code>*x</code> horizontally for both <strong>left</strong> and <strong>right</strong>
+  </li>
+  <li>
+    <code>*y</code> vertically for both <strong>top</strong> and <strong>bottom</strong>
+  </li>
+</ul>
+
+<p>
+  You need to <strong>combine</strong> a margin/padding prefix with a direciton suffix. For example:
+</p>
+
+<ul>
+  <li>for a <code>margin-top</code>, use <code>mt-*</code></li>
+  <li>for a <code>padding-bottom</code>, use <code>pb-*</code></li>
+  <li>for both <code>margin-left</code> and <code>margin-right</code>, use <code>mx-*</code></li>
+</ul>
+
+<p>
+  Each of these <code>property-direction</code> <strong>combinations</strong> needs to be appended with one of <strong>6 value suffixes</strong>
+</p>
+
+This release also includes the following helpers:
+
+* light and dark color helpers
+* light and dark background color helpers
+
 ### Improvements
 
 * #2925 Center table cell content vertically with `is-vcentered`

bulma.sass

@@ -6,4 +6,5 @@
 @import "sass/form/_all"
 @import "sass/components/_all"
 @import "sass/grid/_all"
+@import "sass/helpers/_all"
 @import "sass/layout/_all"

docs/_data/links.json

@@ -167,6 +167,48 @@
       "icon": "font",
       "path": "/documentation/modifiers/typography-helpers"
     },
+    "helpers": {
+      "name": "Helpers",
+      "subtitle": "Apply <strong>helper classes</strong> to almost any element, in order to alter their style",
+      "color": "danger",
+      "icon": "medkit",
+      "path": "/documentation/helpers"
+    },
+    "helpers-color": {
+      "name": "Color",
+      "subtitle": "Change the <strong>color</strong> of the text and/or background",
+      "color": "info",
+      "icon": "tint",
+      "path": "/documentation/helpers/color-helpers"
+    },
+    "helpers-typography": {
+      "name": "Typography",
+      "subtitle": "Change the <strong>size</strong>, weight, and other font properties of the text",
+      "color": "grey-dark",
+      "icon": "font",
+      "path": "/documentation/helpers/typography-helpers"
+    },
+    "helpers-spacing": {
+      "name": "Spacing",
+      "subtitle": "Change the <strong>size</strong> and <strong>color</strong> of the text for one or multiple viewport width",
+      "color": "grey-dark",
+      "icon": "arrows-alt-h",
+      "path": "/documentation/helpers/spacing-helpers"
+    },
+    "helpers-visibility": {
+      "name": "Visibility",
+      "subtitle": "<strong>Show/hide content</strong> depending on the width of the viewport",
+      "color": "primary",
+      "icon": "eye",
+      "path": "/documentation/helpers/visibility-helpers"
+    },
+    "helpers-other": {
+      "name": "Other",
+      "subtitle": "Other useful Bulma helpers",
+      "color": "primary",
+      "icon": "medkit",
+      "path": "/documentation/helpers/other-helpers"
+    },
     "columns": {
       "name": "Columns",
       "subtitle": "The power of <strong>Flexbox</strong> in a simple interface",
@@ -581,6 +623,7 @@
     "overview": ["overview-start", "overview-classes", "overview-modular", "overview-responsiveness", "overview-colors", "overview-functions", "overview-mixins"],
     "customize": ["customize-concepts", "customize-variables", "customize-node-sass", "customize-sass-cli", "customize-webpack"],
     "modifiers": ["modifiers-syntax", "modifiers-helpers", "modifiers-responsive-helpers", "modifiers-color-helpers", "modifiers-typography-helpers"],
+    "helpers": ["helpers-color", "helpers-spacing", "helpers-typography", "helpers-visibility", "helpers-other"],
     "columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"],
     "layout": ["layout-container", "layout-level", "layout-media", "layout-hero", "layout-section", "layout-footer", "layout-tiles"],
     "form": ["form-general", "form-input", "form-textarea", "form-select", "form-checkbox", "form-radio", "form-file"],

docs/_includes/color/blue-dark.html

@@ -0,0 +1,2 @@
+<span class="bd-color" style="background: hsl(217, 71%, 45%);"></span>
+<code>hsl(217, 71%, 45%)</code>

docs/_includes/color/blue-light.html

@@ -0,0 +1,2 @@
+<span class="bd-color" style="background: hsl(219, 70%, 96%);"></span>
+<code>hsl(219, 70%, 96%)</code>

docs/_includes/color/cyan-dark.html

@@ -0,0 +1,2 @@
+<span class="bd-color" style="background: hsl(204, 71%, 39%);"></span>
+<code>hsl(204, 71%, 39%)</code>

docs/_includes/color/cyan-light.html

@@ -0,0 +1,2 @@
+<span class="bd-color" style="background: hsl(206, 70%, 96%);"></span>
+<code>hsl(206, 70%, 96%)</code>

docs/_includes/color/green-dark.html

@@ -0,0 +1,2 @@
+<span class="bd-color" style="background: hsl(141, 53%, 31%);"></span>
+<code>hsl(141, 53%, 31%)</code>

docs/_includes/color/green-light.html

@@ -0,0 +1,2 @@
+<span class="bd-color" style="background: hsl(142, 52%, 96%);"></span>
+<code>hsl(142, 52%, 96%)</code>

docs/_includes/color/red-dark.html

@@ -0,0 +1,2 @@
+<span class="bd-color" style="background: hsl(348, 86%, 43%);"></span>
+<code>hsl(348, 86%, 43%)</code>

docs/_includes/color/red-light.html

@@ -0,0 +1,2 @@
+<span class="bd-color" style="background: hsl(347, 90%, 96%);"></span>
+<code>hsl(347, 90%, 96%)</code>

docs/_includes/color/turquoise-dark.html

@@ -0,0 +1,2 @@
+<span class="bd-color" style="background: hsl(171, 100%, 29%);"></span>
+<code>hsl(171, 100%, 29%)</code>

docs/_includes/color/turquoise-light.html

@@ -0,0 +1,2 @@
+<span class="bd-color" style="background: hsl(171, 100%, 96%);"></span>
+<code>hsl(171, 100%, 96%)</code>

docs/_includes/color/yellow-dark.html

@@ -0,0 +1,2 @@
+<span class="bd-color" style="background: hsl(48, 100%, 29%);"></span>
+<code>hsl(48, 100%, 29%)</code>

docs/_includes/color/yellow-light.html

@@ -0,0 +1,2 @@
+<span class="bd-color" style="background: hsl(48, 100%, 96%);"></span>
+<code>hsl(48, 100%, 96%)</code>

docs/_includes/components/categories.html

@@ -13,8 +13,8 @@
         </a>
         <a class="bd-category-name {% if category_id == current_link_id %}is-active{% endif %}" href="{{ site.url }}{{ category_link.path }}">
           <strong>{{ category_link.name }}</strong>
-          {% if category_link.name == 'Customize' %}
+          {% if category_link.name == 'Helpers' %}
-            <span class="tag bd-mini-tag is-success">
+            <span class="tag bd-mini-tag is-primary">
               New!
             </span>
           {% endif %}

docs/_includes/components/spacing-table.html

@@ -0,0 +1,54 @@
+<table class="bd-spacing-table table is-bordered">
+  <thead>
+    <tr>
+      <th>Property</th>
+      <th>Shortcut</th>
+      <th colspan="7">Classes ↓</th>
+    </tr>
+  </thead>
+  <tfoot>
+    <tr>
+      <th colspan="2">Values →</th>
+      {% for value in include.values %}
+        <th><code>{{ value[1] }}</code></th>
+      {% endfor %}
+    </tr>
+  </tfoot>
+  <tbody>
+    {% for shortcut in include.shortcuts %}
+      {% for direction in include.directions %}
+        <tr>
+          <td><code>{{ shortcut[0] }}-{{ direction[0] }}</code></td>
+          <td><code>{{ shortcut[1] }}{{ direction[1] }}</code></td>
+          {% for value in include.values %}
+            <td><code>{{ shortcut[1] }}{{ direction[1] }}-{{ value[0] }}</code></td>
+          {% endfor %}
+        </tr>
+      {% endfor %}
+
+      <tr>
+        <td>
+          <code>{{ shortcut[0] }}-left</code> <small>and</small> <br>
+          <code>{{ shortcut[0] }}-right</code>
+        </td>
+        <td><code>{{ shortcut[1] }}{{ include.horizontal }}</code></td>
+        {% for value in include.values %}
+          <td><code>{{ shortcut[1] }}{{ include.horizontal }}-{{ value[0] }}</code></td>
+        {% endfor %}
+      </tr>
+
+      {% if include.vertical %}
+        <tr>
+          <td>
+            <code>{{ shortcut[0] }}-top</code> <small>and</small> <br>
+            <code>{{ shortcut[0] }}-bottom</code>
+          </td>
+          <td><code>{{ shortcut[1] }}{{ include.vertical }}</code></td>
+          {% for value in include.values %}
+            <td><code>{{ shortcut[1] }}{{ include.vertical }}-{{ value[0] }}</code></td>
+          {% endfor %}
+        </tr>
+      {% endif %}
+    {% endfor %}
+  </tbody>
+</table>

docs/_includes/index/customize.html

@@ -98,7 +98,6 @@
     </div>
 
     {% include components/hero-buttons.html href=customize_link.path
-    content="<span>Learn how to <strong>customize</strong></span
+    content="<span>Learn how to <strong>customize</strong></span>" %}
-    >" %}
   </div>
 </section>

docs/_javascript/main.js

@@ -260,8 +260,8 @@ document.addEventListener('DOMContentLoaded', () => {
 
   // Functions
 
-  function getAll(selector) {
+  function getAll(selector, parent = document) {
-    return Array.prototype.slice.call(document.querySelectorAll(selector), 0);
+    return Array.prototype.slice.call(parent.querySelectorAll(selector), 0);
   }
 
   // Scrolling
@@ -345,6 +345,54 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   }
 
+  // Spacing table
+
+  const spacingTables = getAll('.bd-spacing-table');
+
+  spacingTables.forEach(spacingEl => {
+    const spacingRows = getAll('tbody tr', spacingEl);
+    const spacingCells = getAll('tbody td', spacingEl);
+    const spacingValues = getAll('tfoot th', spacingEl);
+
+    spacingEl.addEventListener('mouseleave', () => {
+      resetTable(spacingCells, spacingValues);
+    });
+
+    spacingCells.forEach(el => {
+      el.addEventListener('mouseenter', () => {
+        resetTable(spacingCells, spacingValues);
+        const row = Array.prototype.indexOf.call(el.parentNode.parentNode.children, el.parentNode);
+        const column = Array.prototype.indexOf.call(el.parentNode.children, el);
+        highlightRowAndColumn(row, column, spacingRows, spacingValues);
+      });
+    });
+  });
+
+  function resetTable(cells, values) {
+    cells.forEach(el => el.classList.remove('bd-current-row', 'bd-current-column'));
+    values.forEach(el => el.classList.remove('bd-current-value'));
+  }
+
+  function highlightRowAndColumn(rowIndex, columnIndex, rows, values) {
+    const row = rows[rowIndex];
+    let i = columnIndex;
+
+    while (i > -1) {
+      row.children[i].classList.add('bd-current-row');
+      i--;
+    }
+
+    const nextRows = rows.slice(rowIndex);
+    nextRows.forEach(r => {
+      r.children[columnIndex].classList.add('bd-current-column');
+    });
+
+    if (columnIndex < 2) {
+      return;
+    }
+    values[columnIndex - 1].classList.add('bd-current-value');
+  }
+
   // Scroll
 
   function upOrDown(lastY, currentY) {

docs/_sass/specific.sass

@@ -1,3 +1,31 @@
+.bd-spacing-table
+  &:hover
+    color: $border
+    code
+      background: none
+      color: $border
+  .bd-current-row
+    background-color: $background
+    &:first-child
+      background-color: $danger-light
+      color: $text-strong
+      code
+        background-color: $danger
+        color: $danger-invert
+    &.bd-current-column
+      background-color: $primary-light
+      color: $text-strong
+      code
+        background-color: $primary
+        color: $primary-invert
+  .bd-current-column
+    background-color: $background
+  .bd-current-value
+    background-color: $danger-light
+    code
+      background-color: $danger
+      color: $danger-invert
+
 +selection
   background-color: $primary
   color: $primary-invert

docs/documentation/components/list.html

@@ -1,61 +0,0 @@
----
-title: List
-layout: documentation
-doc-tab: components
-doc-subtab: list
-breadcrumb:
-- home
-- documentation
-- components
-- components-list
-meta:
-  colors: false
-  sizes: false
-  variables: true
----
-
-{% capture list_example %}
-<div class="list is-hoverable">
-  <a class="list-item">
-    Featured
-  </a>
-  <a class="list-item">
-    All Posts
-  </a>
-  <a class="list-item is-active">
-    Announcements
-  </a>
-  <a class="list-item">
-    Business
-  </a>
-  <a class="list-item">
-    Community
-  </a>
-  <a class="list-item">
-    Data
-  </a>
-  <a class="list-item">
-    Editor Tools
-  </a>
-  <a class="list-item">
-    Education
-  </a>
-  <a class="list-item">
-    Engineering
-  </a>
-  <a class="list-item">
-    Events
-  </a>
-  <a class="list-item">
-    Policy
-  </a>
-</div>
-{% endcapture %}
-
-<div class="content">
-  <p>
-    The list component consists of several elements:
-  </p>
-</div>
-
-{% include elements/snippet.html content=list_example more=true %}

docs/documentation/helpers.html

@@ -0,0 +1,12 @@
+---
+title: Helpers
+layout: documentation
+doc-tab: helpers
+hide_tabs: true
+breadcrumb:
+- home
+- documentation
+- helpers
+---
+
+{% include components/links.html category_id='helpers' %}

docs/documentation/helpers/color-helpers.html

@@ -0,0 +1,203 @@
+---
+title: Color helpers
+layout: documentation
+doc-tab: helpers
+doc-subtab: helpers-color
+breadcrumb:
+- home
+- documentation
+- helpers
+- helpers-color
+---
+
+{% include elements/anchor.html name="Text color" %}
+
+<div class="content">
+  <p>
+    You can set any element to one of the <strong>10 colors</strong> or <strong>9 shades of grey</strong>:
+  </p>
+</div>
+
+<table class="table is-bordered">
+  <thead>
+    <tr>
+      <th>
+        Class
+      </th>
+      <th>
+        Color
+      </th>
+      <th>
+        Example
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr><td><code>has-text-white</code></td><td>{% include color/white.html %}</td><td class="has-text-white has-background-black">Hello Bulma</td></tr>
+    <tr><td><code>has-text-black</code></td><td>{% include color/black.html %}</td><td class="has-text-black">Hello Bulma</td></tr>
+    <tr><td><code>has-text-light</code></td><td>{% include color/white-ter.html %}</td><td class="has-text-light has-background-grey">Hello Bulma</td></tr>
+    <tr><td><code>has-text-dark</code></td><td>{% include color/grey-darker.html %}</td><td class="has-text-dark">Hello Bulma</td></tr>
+    <tr><td><code>has-text-primary</code></td><td>{% include color/turquoise.html %}</td><td class="has-text-primary">Hello Bulma</td></tr>
+    <tr><td><code>has-text-link</code></td><td>{% include color/blue.html %}</td><td class="has-text-link">Hello Bulma</td></tr>
+    <tr><td><code>has-text-info</code></td><td>{% include color/cyan.html %}</td><td class="has-text-info">Hello Bulma</td></tr>
+    <tr><td><code>has-text-success</code></td><td>{% include color/green.html %}</td><td class="has-text-success">Hello Bulma</td></tr>
+    <tr><td><code>has-text-warning</code></td><td>{% include color/yellow.html %}</td><td class="has-text-warning">Hello Bulma</td></tr>
+    <tr><td><code>has-text-danger</code></td><td>{% include color/red.html %}</td><td class="has-text-danger">Hello Bulma</td></tr>
+  </tbody>
+</table>
+
+<table class="table is-bordered">
+  <thead>
+    <tr>
+      <th>
+        Class
+      </th>
+      <th>
+        Shade
+      </th>
+      <th>
+        Example
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr><td><code>has-text-black-bis</code></td><td>{% include color/black-bis.html %}</td><td class="has-text-black-bis">Hello Bulma</td></tr>
+    <tr><td><code>has-text-black-ter</code></td><td>{% include color/black-ter.html %}</td><td class="has-text-black-ter">Hello Bulma</td></tr>
+    <tr><td><code>has-text-grey-darker</code></td><td>{% include color/grey-darker.html %}</td><td class="has-text-grey-darker">Hello Bulma</td></tr>
+    <tr><td><code>has-text-grey-dark</code></td><td>{% include color/grey-dark.html %}</td><td class="has-text-grey-dark">Hello Bulma</td></tr>
+    <tr><td><code>has-text-grey</code></td><td>{% include color/grey.html %}</td><td class="has-text-grey">Hello Bulma</td></tr>
+    <tr><td><code>has-text-grey-light</code></td><td>{% include color/grey-light.html %}</td><td class="has-text-grey-light">Hello Bulma</td></tr>
+    <tr><td><code>has-text-grey-lighter</code></td><td>{% include color/grey-lighter.html %}</td><td class="has-text-grey-lighter">Hello Bulma</td></tr>
+    <tr><td><code>has-text-white-ter</code></td><td>{% include color/white-ter.html %}</td><td class="has-background-black-ter has-text-white-ter">Hello Bulma</td></tr>
+    <tr><td><code>has-text-white-bis</code></td><td>{% include color/white-bis.html %}</td><td class="has-background-black-bis has-text-white-bis">Hello Bulma</td></tr>
+  </tbody>
+</table>
+
+{% include elements/new-tag.html version="0.9.0" %}
+
+<p class="block">You can use each color in their <strong>light</strong> and <strong>dark versions</strong>. Simply append <code>*-light</code> or <code>*-dark</code>.</p>
+
+<table class="table is-bordered">
+  <thead>
+    <tr>
+      <th>
+        Class
+      </th>
+      <th>
+        Light/Dark color
+      </th>
+      <th>
+        Example
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr><td><code>has-text-primary-light</code></td><td>{% include color/turquoise-light.html %}</td><td class="has-background-dark has-text-primary-light">Hello Bulma</td></tr>
+    <tr><td><code>has-text-link-light</code></td><td>{% include color/blue-light.html %}</td><td class="has-background-dark has-text-link-light">Hello Bulma</td></tr>
+    <tr><td><code>has-text-info-light</code></td><td>{% include color/cyan-light.html %}</td><td class="has-background-dark has-text-info-light">Hello Bulma</td></tr>
+    <tr><td><code>has-text-success-light</code></td><td>{% include color/green-light.html %}</td><td class="has-background-dark has-text-success-light">Hello Bulma</td></tr>
+    <tr><td><code>has-text-warning-light</code></td><td>{% include color/yellow-light.html %}</td><td class="has-background-dark has-text-warning-light">Hello Bulma</td></tr>
+    <tr><td><code>has-text-danger-light</code></td><td>{% include color/red-light.html %}</td><td class="has-background-dark has-text-danger-light">Hello Bulma</td></tr>
+    <tr><td><code>has-text-primary-dark</code></td><td>{% include color/turquoise-dark.html %}</td><td class="has-text-primary-dark">Hello Bulma</td></tr>
+    <tr><td><code>has-text-link-dark</code></td><td>{% include color/blue-dark.html %}</td><td class="has-text-link-dark">Hello Bulma</td></tr>
+    <tr><td><code>has-text-info-dark</code></td><td>{% include color/cyan-dark.html %}</td><td class="has-text-info-dark">Hello Bulma</td></tr>
+    <tr><td><code>has-text-success-dark</code></td><td>{% include color/green-dark.html %}</td><td class="has-text-success-dark">Hello Bulma</td></tr>
+    <tr><td><code>has-text-warning-dark</code></td><td>{% include color/yellow-dark.html %}</td><td class="has-text-warning-dark">Hello Bulma</td></tr>
+    <tr><td><code>has-text-danger-dark</code></td><td>{% include color/red-dark.html %}</td><td class="has-text-danger-dark">Hello Bulma</td></tr>
+  </tbody>
+</table>
+
+{% assign vernum = site.data.meta.version | downcase | remove: "." | plus: 0 %}
+
+{% include elements/anchor.html name="Background color" %}
+
+{% include elements/new-tag.html version="0.7.0" %}
+
+<div class="content">
+  <p>
+    You can set any element to one of the <strong>10 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-link</code></td><td>{% include color/blue.html %}</td></tr>
+    <tr><td><code>has-background-info</code></td><td>{% include color/cyan.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>
+  </tbody>
+</table>
+
+<table class="table is-bordered">
+  <thead>
+    <tr>
+      <th>
+        Class
+      </th>
+      <th>
+        Background shade
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    <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>
+
+{% include elements/new-tag.html version="0.9.0" %}
+
+<p class="block">You can use each color in their <strong>light</strong> and <strong>dark versions</strong>. Simply append <code>*-light</code> or <code>*-dark</code>.</p>
+
+<table class="table is-bordered">
+  <thead>
+    <tr>
+      <th>
+        Class
+      </th>
+      <th>
+        Light/Dark background
+      </th>
+      <th>
+        Example
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr><td><code>has-background-primary-light</code></td><td>{% include color/turquoise-light.html %}</td><td class="has-text-primary has-background-primary-light">Hello Bulma</td></tr>
+    <tr><td><code>has-background-link-light</code></td><td>{% include color/blue-light.html %}</td><td class="has-text-link has-background-link-light">Hello Bulma</td></tr>
+    <tr><td><code>has-background-info-light</code></td><td>{% include color/cyan-light.html %}</td><td class="has-text-info has-background-info-light">Hello Bulma</td></tr>
+    <tr><td><code>has-background-success-light</code></td><td>{% include color/green-light.html %}</td><td class="has-text-success has-background-success-light">Hello Bulma</td></tr>
+    <tr><td><code>has-background-warning-light</code></td><td>{% include color/yellow-light.html %}</td><td class="has-text-warning has-background-warning-light">Hello Bulma</td></tr>
+    <tr><td><code>has-background-danger-light</code></td><td>{% include color/red-light.html %}</td><td class="has-text-danger has-background-danger-light">Hello Bulma</td></tr>
+    <tr><td><code>has-background-primary-dark</code></td><td>{% include color/turquoise-dark.html %}</td><td class="has-text-white has-background-primary-dark">Hello Bulma</td></tr>
+    <tr><td><code>has-background-link-dark</code></td><td>{% include color/blue-dark.html %}</td><td class="has-text-white has-background-link-dark">Hello Bulma</td></tr>
+    <tr><td><code>has-background-info-dark</code></td><td>{% include color/cyan-dark.html %}</td><td class="has-text-white has-background-info-dark">Hello Bulma</td></tr>
+    <tr><td><code>has-background-success-dark</code></td><td>{% include color/green-dark.html %}</td><td class="has-text-white has-background-success-dark">Hello Bulma</td></tr>
+    <tr><td><code>has-background-warning-dark</code></td><td>{% include color/yellow-dark.html %}</td><td class="has-text-white has-background-warning-dark">Hello Bulma</td></tr>
+    <tr><td><code>has-background-danger-dark</code></td><td>{% include color/red-dark.html %}</td><td class="has-text-white has-background-danger-dark">Hello Bulma</td></tr>
+  </tbody>
+</table>

docs/documentation/helpers/other-helpers.html

@@ -0,0 +1,56 @@
+---
+title: Other helpers
+layout: documentation
+doc-tab: helpers
+doc-subtab: helpers-other
+breadcrumb:
+- home
+- documentation
+- helpers
+- helpers-other
+---
+
+<p class="block">
+  Here are some other helpers shipped with Bulma:
+</p>
+
+<table class="table is-bordered">
+  <tbody>
+    <tr>
+      <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 <strong>left</strong></td>
+    </tr>
+    <tr>
+      <td><code>is-pulled-right</code></td>
+      <td>Moves an element to the <strong>right</strong></td>
+    </tr>
+    <tr>
+      <td><code>is-overlay</code></td>
+      <td>Completely <strong>covers</strong> the first positioned parent</td>
+    </tr>
+    <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-relative</code></td>
+      <td>Applies <code>position: relative</code> to the element.</td>
+    </tr>
+  </tbody>
+</table>

docs/documentation/helpers/spacing-helpers.html

@@ -0,0 +1,183 @@
+---
+title: Spacing helpers
+layout: documentation
+doc-tab: helpers
+doc-subtab: helpers-spacing
+breadcrumb:
+- home
+- documentation
+- helpers
+- helpers-spacing
+shortcuts:
+  margin: m
+  padding: p
+directions:
+  top: t
+  right: r
+  bottom: b
+  left: l
+horizontal: x
+vertical: y
+values:
+  0: 0
+  1: 0.25rem
+  2: 0.5rem
+  3: 0.75rem
+  4: 1rem
+  5: 1.5rem
+  6: 3rem
+customShortcuts:
+  margin: mg
+customHorizontal: h
+customValues:
+  small: 10px
+  medium: 30px
+  large: 60px
+---
+
+{% include elements/new-tag.html version="0.9.0" %}
+
+<div class="content">
+  <p>Bulma provides <strong>margin</strong> <code>m*</code> and <strong>padding</strong> <code>p*</code> helpers in all <strong>directions</strong>:</p>
+
+  <ul>
+    <li>
+      <code>*t</code> for <strong>top</strong>
+    </li>
+    <li>
+      <code>*r</code> for <strong>right</strong>
+    </li>
+    <li>
+      <code>*b</code> for <strong>bottom</strong>
+    </li>
+    <li>
+      <code>*l</code> for <strong>left</strong>
+    </li>
+    <li>
+      <code>*x</code> horizontally for both <strong>left</strong> and <strong>right</strong>
+    </li>
+    <li>
+      <code>*y</code> vertically for both <strong>top</strong> and <strong>bottom</strong>
+    </li>
+  </ul>
+
+  <p>
+    You need to <strong>combine</strong> a margin/padding prefix with a direction suffix. For example:
+  </p>
+
+  <ul>
+    <li>for a <code>margin-top</code>, use <code>mt-*</code></li>
+    <li>for a <code>padding-bottom</code>, use <code>pb-*</code></li>
+    <li>for both <code>margin-left</code> and <code>margin-right</code>, use <code>mx-*</code></li>
+  </ul>
+
+  <p>
+    Each of these <code>property-direction</code> <strong>combinations</strong> needs to be appended with one of <strong>6 value suffixes</strong>:
+  </p>
+</div>
+
+<table class="table is-bordered">
+  <thead>
+    <th>Suffix</th>
+    <th>Value</th>
+  </thead>
+  <tbody>
+    <tr><td><code>*-0</code></td><td><code>0</code></td></tr>
+    <tr><td><code>*-1</code></td><td><code>0.25rem</code></td></tr>
+    <tr><td><code>*-2</code></td><td><code>0.5rem</code></td></tr>
+    <tr><td><code>*-3</code></td><td><code>0.75rem</code></td></tr>
+    <tr><td><code>*-4</code></td><td><code>1rem</code></td></tr>
+    <tr><td><code>*-5</code></td><td><code>1.5rem</code></td></tr>
+    <tr><td><code>*-6</code></td><td><code>3rem</code></td></tr>
+  </tbody>
+</table>
+
+{% include elements/anchor.html name="List of all spacing helpers" %}
+
+<p class="block">
+  There are <strong>84 spacing helpers</strong> to choose from:
+</p>
+
+{% include
+  components/spacing-table.html
+  values=page.values
+  shortcuts=page.shortcuts
+  directions=page.directions
+  horizontal=page.horizontal
+  vertical=page.vertical
+%}
+
+<div class="content">
+  <p>
+    To use these classes, simply append them to any HTML element:
+  </p>
+</div>
+
+{% highlight html %}
+<!-- Adds 1rem of margin at the bottom -->
+<p class="mb-4">
+  Margin bottom
+</p>
+
+<!-- Adds 0.25rem of padding on the left and the right -->
+<p class="px-1">
+  Horizontal padding
+</p>
+
+<!-- Removes the margin on the right and adds 0.75rem padding at the top -->
+<p class="mr-0 pt-3">
+  Both
+</p>
+{% endhighlight %}
+
+{% include elements/anchor.html name="Configuration" %}
+
+{% capture custom %}
+$spacing-shortcuts: ("margin": "mg");
+$spacing-horizontal: "h";
+$spacing-vertical: null;
+$spacing-values: ("small": 10px, "medium": 30px, "large": 60px);
+{% endcapture %}
+
+<div class="content">
+  <p>
+    Because every developer has their own preferences, and to satisfy Bulma's customization features, it's possible to specify your own <strong>class name shortcuts</strong> as well as the <strong>spacing values</strong>.
+  </p>
+  <p>
+    For example, if you wanted:
+  </p>
+  <ul>
+    <li>
+      <strong>margin</strong> to be abbreviated to <code>mg</code>
+    </li>
+    <li>
+      <strong>padding</strong> to be totally <strong class="has-text-danger">excluded</strong>
+    </li>
+    <li>
+      <strong>horizontal</strong> to be abbreviated to <code>h</code>
+    </li>
+    <li>
+      <strong>vertical</strong> to be excluded as well
+    </li>
+    <li>
+      and to only have 3 values: <strong>"small"</strong> at <code>10px</code>, <strong>"medium"</strong> at <code>30px</code>, and <strong>"large"</strong> at <code>60px</code>
+    </li>
+  </ul>
+  <p>
+    You can simplify the CSS output by customizing these <strong>SCSS variables</strong>:
+  </p>
+</div>
+
+{% highlight scss %}{{ custom }}{% endhighlight %}
+
+{% include
+  components/spacing-table.html
+  values=page.customValues
+  shortcuts=page.customShortcuts
+  directions=page.directions
+  horizontal=page.customHorizontal
+%}
+
+<p>
+  By customizing the output, you've narrowed down the list of spacing helpers from 84 to only <strong>15</strong>.
+</p>

docs/documentation/helpers/typography-helpers.html

@@ -0,0 +1,410 @@
+---
+title: Typography helpers
+layout: documentation
+doc-tab: helpers
+doc-subtab: helpers-typography
+breadcrumb:
+- home
+- documentation
+- helpers
+- helpers-typography
+---
+
+{% assign initial_vars = site.data.variables.utilities.initial-variables.by_name %}
+{% assign sizes        = site.data.variables.utilities.derived-variables.by_name['$sizes'].value | split: ' ' %}
+
+{% capture thead %}
+<thead>
+  <tr>
+    <th>
+      Class
+    </th>
+    {% for breakpoint_hash in site.data.breakpoints %}
+      {% assign breakpoint = breakpoint_hash[1] %}
+      <th>
+        {{ 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>
+{% endcapture %}
+
+{% capture size1 %}
+<td class="is-narrow has-background-danger-light">
+  <code class="has-background-danger-light">{{ initial_vars['$size-1'].value }}</code>
+</td>
+{% endcapture %}
+
+{% capture unchanged %}
+<td class="is-narrow has-text-grey-light">
+  unchanged
+</td>
+{% endcapture %}
+
+{% capture left %}
+<td class="is-narrow has-background-primary-light has-text-primary">
+  left-aligned
+</td>
+{% endcapture %}
+
+{% include elements/anchor.html name="Size" %}
+
+<div class="content">
+  <p>
+    There are <strong>{{ sizes | size }} sizes</strong> to choose from:
+  </p>
+</div>
+
+<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>
+
+{% include elements/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 need 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>
+
+<div class="table-container">
+  <table class="table is-bordered">
+    {{ thead }}
+    <tbody>
+      <tr>
+        <td class="is-narrow"><code>is-size-1-mobile</code></td>
+        {{ size1 }}
+        {{ unchanged }}
+        {{ unchanged }}
+        {{ unchanged }}
+        {{ unchanged }}
+      </tr>
+      <tr>
+        <td class="is-narrow"><code>is-size-1-touch</code></td>
+        {{ size1 }}
+        {{ size1 }}
+        {{ unchanged }}
+        {{ unchanged }}
+        {{ unchanged }}
+      </tr>
+      <tr>
+        <td class="is-narrow"><code>is-size-1-tablet</code></td>
+        {{ unchanged }}
+        {{ size1 }}
+        {{ size1 }}
+        {{ size1 }}
+        {{ size1 }}
+      </tr>
+      <tr>
+        <td class="is-narrow"><code>is-size-1-desktop</code></td>
+        {{ unchanged }}
+        {{ unchanged }}
+        {{ size1 }}
+        {{ size1 }}
+        {{ size1 }}
+      </tr>
+      <tr>
+        <td class="is-narrow"><code>is-size-1-widescreen</code></td>
+        {{ unchanged }}
+        {{ unchanged }}
+        {{ unchanged }}
+        {{ size1 }}
+        {{ size1 }}
+      </tr>
+      <tr>
+        <td class="is-narrow"><code>is-size-1-fullhd</code></td>
+        {{ unchanged }}
+        {{ unchanged }}
+        {{ unchanged }}
+        {{ unchanged }}
+        {{ size1 }}
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<div class="content">
+  <p>
+    You can use the same logic for each of the <strong>7 sizes</strong>.
+  </p>
+</div>
+
+{% include elements/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>
+
+<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 elements/anchor.html name="Responsive Alignment" %}
+
+<div class="content">
+  <p>
+    You can <strong>align text</strong> differently for each <strong>viewport width</strong>. Simply 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>
+
+<div class="table-container">
+  <table class="table is-bordered">
+    {{ thead }}
+    <tbody>
+      <tr>
+        <td class="is-narrow"><code>has-text-left-mobile</code></td>
+        {{ left }}
+        {{ unchanged }}
+        {{ unchanged }}
+        {{ unchanged }}
+        {{ unchanged }}
+      </tr>
+      <tr>
+        <td class="is-narrow"><code>has-text-left-touch</code></td>
+        {{ left }}
+        {{ left }}
+        {{ unchanged }}
+        {{ unchanged }}
+        {{ unchanged }}
+      </tr>
+      <tr>
+        <td class="is-narrow"><code>has-text-left-tablet-only</code></td>
+        {{ unchanged }}
+        {{ left }}
+        {{ unchanged }}
+        {{ unchanged }}
+        {{ unchanged }}
+      </tr>
+      <tr>
+        <td class="is-narrow"><code>has-text-left-tablet</code></td>
+        {{ unchanged }}
+        {{ left }}
+        {{ left }}
+        {{ left }}
+        {{ left }}
+      </tr>
+      <tr>
+        <td class="is-narrow"><code>has-text-left-desktop-only</code></td>
+        {{ unchanged }}
+        {{ unchanged }}
+        {{ left }}
+        {{ unchanged }}
+        {{ unchanged }}
+      </tr>
+      <tr>
+        <td class="is-narrow"><code>has-text-left-desktop</code></td>
+        {{ unchanged }}
+        {{ unchanged }}
+        {{ left }}
+        {{ left }}
+        {{ left }}
+      </tr>
+      <tr>
+        <td class="is-narrow"><code>has-text-left-widescreen-only</code></td>
+        {{ unchanged }}
+        {{ unchanged }}
+        {{ unchanged }}
+        {{ left }}
+        {{ unchanged }}
+      </tr>
+      <tr>
+        <td class="is-narrow"><code>has-text-left-widescreen</code></td>
+        {{ unchanged }}
+        {{ unchanged }}
+        {{ unchanged }}
+        {{ left }}
+        {{ left }}
+      </tr>
+      <tr>
+        <td class="is-narrow"><code>has-text-left-fullhd</code></td>
+        {{ unchanged }}
+        {{ unchanged }}
+        {{ unchanged }}
+        {{ unchanged }}
+        {{ left }}
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<div class="content">
+  <p>
+    You can use the same logic for each of the <strong>4 alignments</strong>.
+  </p>
+</div>
+
+{% include elements/anchor.html name="Text transformation" %}
+
+<div class="content">
+  <p>
+    You can transform the text with the use of one of <strong>4 text transformation helpers</strong>:
+  </p>
+</div>
+
+<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>
+
+{% include elements/anchor.html name="Text weight" %}
+
+<div class="content">
+  <p>
+    You can transform the text weight with the use of one of <strong>5 text weight helpers</strong>:
+  </p>
+</div>
+
+<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-medium</code></td>
+    <td>Transforms text weight to <strong>medium</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>
+
+{% include elements/anchor.html name="Font family" %}
+
+{% include elements/new-tag.html version="0.7.4" %}
+
+<div class="content">
+  <p>
+    You can change the font family with the use of one of <strong>5 font family helpers</strong>:
+  </p>
+</div>
+
+{% assign font_families = "sans-serif,monospace,primary,secondary,code" | split: ',' %}
+
+<table class="table is-bordered">
+  <thead>
+    <tr>
+      <th>
+        Class
+      </th>
+      <th>
+        Family
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    {% for family in font_families %}
+      <tr>
+        <td><code>is-family-{{ family }}</code></td>
+        <td>Sets font family to <code>$family-{{ family }}</code></td>
+      </tr>
+    {% endfor %}
+  </tbody>
+</table>

docs/documentation/helpers/visibility-helpers.html

@@ -0,0 +1,307 @@
+---
+title: Responsive helpers
+layout: documentation
+doc-tab: helpers
+doc-subtab: helpers-visibility
+breadcrumb:
+- home
+- documentation
+- helpers
+- helpers-visibility
+---
+
+{% capture thead %}
+<thead>
+  <tr>
+    <th>
+      Class
+    </th>
+    {% for breakpoint_hash in site.data.breakpoints %}
+      {% assign breakpoint = breakpoint_hash[1] %}
+      <th>
+        {{ 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>
+{% endcapture %}
+
+{% capture flex %}
+<td class="is-narrow has-text-primary has-background-primary-light">
+  Flex
+</td>
+{% endcapture %}
+
+{% capture visible %}
+<td class="is-narrow has-text-success has-background-success-light">
+  Visible
+</td>
+{% endcapture %}
+
+{% capture hidden %}
+<td class="is-narrow has-text-danger has-background-danger-light">
+  Hidden
+</td>
+{% endcapture %}
+
+{% capture unchanged %}
+<td class="is-narrow has-text-grey-light">
+  Unchanged
+</td>
+{% endcapture %}
+
+{% include elements/anchor.html name="Show" %}
+
+<div class="content">
+  <p>
+    You can use one of the following <code>display</code> classes:
+  </p>
+  <ul>
+    <li><code>is-block</code></li>
+    <li><code>is-flex</code></li>
+    <li><code>is-inline</code></li>
+    <li><code>is-inline-block</code></li>
+    <li><code>is-inline-flex</code></li>
+  </ul>
+  <p>For example, here's how the <code>is-flex</code> helper works:</p>
+</div>
+
+<div class="table-container">
+  <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>
+
+<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 elements/anchor.html name="Hide" %}
+
+<div class="table-container">
+  <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>
+
+{% include elements/anchor.html name="Other visibility helpers" %}
+
+<table class="table is-bordered">
+  <tbody>
+    <tr>
+      <td><code>is-invisible</code></td>
+      <td>Adds visibility <strong>hidden</strong></td>
+    </tr>
+    <tr>
+      <td><code>is-hidden</code></td>
+      <td>Hides element</td>
+    </tr>
+    <tr>
+      <td><code>is-sr-only</code></td>
+      <td>Hide elements <strong>visually</strong> but keep the element available to be announced by a <strong>screen reader</strong></td>
+    </tr>
+  </tbody>
+</table>

docs/documentation/modifiers/color-helpers.html

@@ -9,95 +9,3 @@ breadcrumb:
 - modifiers
 - modifiers-color-helpers
 ---
-
-{% include elements/anchor.html name="Text 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>
-
-<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>
-
-{% assign vernum = site.data.meta.version | downcase | remove: "." | plus: 0 %}
-
-{% if vernum >= 70 %}
-
-{% include elements/anchor.html name="Background color" %}
-
-{% include elements/new-tag.html version="0.7.0" %}
-
-<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>
-
-{% endif %}

docs/documentation/modifiers/helpers.html

@@ -10,66 +10,4 @@ breadcrumb:
 - modifiers-helpers
 ---
 
-<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="9">Other</th>
-      <td><code>is-overlay</code></td>
-      <td>Completely covers the first positioned parent</td>
-    </tr>
-    <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>
-    <tr>
-      <td><code>is-hidden</code></td>
-      <td>Hides element</td>
-    </tr>
-    <tr>
-      <td><code>is-sr-only</code></td>
-      <td>Hide elements <strong>visually</strong> but keep the element available to be announced by a <strong>screen reader</strong></td>
-    </tr>
-    <tr>
-      <td><code>is-relative</code></td>
-      <td>Applies <code>position: relative</code> to the element.</td>
-    </tr>
-  </tbody>
-</table>

docs/documentation/modifiers/responsive-helpers.html

@@ -10,292 +10,3 @@ breadcrumb:
 - modifiers
 - modifiers-responsive-helpers
 ---
-
-{% capture thead %}
-<thead>
-  <tr>
-    <th>
-      Class
-    </th>
-    {% for breakpoint_hash in site.data.breakpoints %}
-      {% assign breakpoint = breakpoint_hash[1] %}
-      <th>
-        {{ 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>
-{% endcapture %}
-
-{% capture flex %}
-<td class="is-narrow">
-  <p class="notification is-primary">flex</p>
-</td>
-{% endcapture %}
-
-{% capture visible %}
-<td class="is-narrow">
-  <p class="notification is-primary">visible</p>
-</td>
-{% endcapture %}
-
-{% capture hidden %}
-<td class="is-narrow">
-  <p class="notification">hidden</p>
-</td>
-{% endcapture %}
-
-{% capture unchanged %}
-<td class="is-narrow">
-  <p class="notification">unchanged</p>
-</td>
-{% endcapture %}
-
-{% include elements/anchor.html name="Show" %}
-
-<div class="content">
-  <p>
-    You can use one of the following <code>display</code> classes:
-  </p>
-  <ul>
-    <li><code>is-block</code></li>
-    <li><code>is-flex</code></li>
-    <li><code>is-inline</code></li>
-    <li><code>is-inline-block</code></li>
-    <li><code>is-inline-flex</code></li>
-  </ul>
-  <p>For example, here's how the <code>is-flex</code> helper works:</p>
-</div>
-
-{% include layout/main-close.html show_categories=true %}
-
-<div class="container">
-  <div class="table-container">
-    <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>
-</div>
-
-{% include layout/main-open.html %}
-
-<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 elements/anchor.html name="Hide" %}
-
-{% include layout/main-close.html %}
-
-<div class="container">
-  <div class="table-container">
-    <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>
-</div>
-
-{% include layout/main-open.html %}

docs/documentation/modifiers/typography-helpers.html

@@ -10,443 +10,3 @@ breadcrumb:
 - modifiers-typography-helpers
 ---
 
-{% assign initial_vars = site.data.variables.utilities.initial-variables.by_name %}
-{% assign sizes        = site.data.variables.utilities.derived-variables.by_name['$sizes'].value | split: ' ' %}
-
-{% capture thead %}
-<thead>
-  <tr>
-    <th>
-      Class
-    </th>
-    {% for breakpoint_hash in site.data.breakpoints %}
-      {% assign breakpoint = breakpoint_hash[1] %}
-      <th>
-        {{ 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>
-{% endcapture %}
-
-{% capture size1 %}
-<td class="is-narrow">
-  <p class="notification is-primary"><code>{{ initial_vars['$size-1'].value }}</code></p>
-</td>
-{% endcapture %}
-
-{% capture unchanged %}
-<td class="is-narrow">
-  <p class="notification">unchanged</p>
-</td>
-{% endcapture %}
-
-{% capture left %}
-<td class="is-narrow">
-  <p class="notification is-primary">left-aligned</p>
-</td>
-{% endcapture %}
-
-{% include elements/anchor.html name="Size" %}
-
-<div class="content">
-  <p>
-    There are <strong>{{ sizes | size }} sizes</strong> to choose from:
-  </p>
-</div>
-
-<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>
-
-{% include elements/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 need 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>
-
-
-  <div class="table-container">
-    <table class="table is-bordered">
-      {{ thead }}
-      <tbody>
-        <tr>
-          <td><code>is-size-1-mobile</code></td>
-          {{ size1 }}
-          {{ unchanged }}
-          {{ unchanged }}
-          {{ unchanged }}
-          {{ unchanged }}
-        </tr>
-        <tr>
-          <td><code>is-size-1-tablet</code></td>
-          {{ unchanged }}
-          {{ size1 }}
-          {{ size1 }}
-          {{ size1 }}
-          {{ size1 }}
-        </tr>
-        <tr>
-          <td><code>is-size-1-touch</code></td>
-          {{ size1 }}
-          {{ size1 }}
-          {{ unchanged }}
-          {{ unchanged }}
-          {{ unchanged }}
-        </tr>
-        <tr>
-          <td><code>is-size-1-desktop</code></td>
-          {{ unchanged }}
-          {{ unchanged }}
-          {{ size1 }}
-          {{ size1 }}
-          {{ size1 }}
-        </tr>
-        <tr>
-          <td><code>is-size-1-widescreen</code></td>
-          {{ unchanged }}
-          {{ unchanged }}
-          {{ unchanged }}
-          {{ size1 }}
-          {{ size1 }}
-        </tr>
-        <tr>
-          <td><code>is-size-1-fullhd</code></td>
-          {{ unchanged }}
-          {{ unchanged }}
-          {{ unchanged }}
-          {{ unchanged }}
-          {{ size1 }}
-        </tr>
-      </tbody>
-    </table>
-  </div>
-
-
-<div class="content">
-  <p>
-    You can use the same logic for each of the <strong>7 sizes</strong>.
-  </p>
-</div>
-
-{% include elements/anchor.html name="Colors" %}
-
-<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 elements/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>
-
-<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 elements/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>
-
-  <p>
-    For example, here are the modifiers for <code>has-text-left</code>:
-  </p>
-</div>
-
-
-  <div class="table-container">
-    <table class="table is-bordered">
-      {{ thead }}
-      <tbody>
-        <tr>
-          <td><code>has-text-left-mobile</code></td>
-          {{ left }}
-          {{ unchanged }}
-          {{ unchanged }}
-          {{ unchanged }}
-          {{ unchanged }}
-        </tr>
-        <tr>
-          <td><code>has-text-left-tablet</code></td>
-          {{ unchanged }}
-          {{ left }}
-          {{ left }}
-          {{ left }}
-          {{ left }}
-        </tr>
-        <tr>
-          <td><code>has-text-left-tablet-only</code></td>
-          {{ unchanged }}
-          {{ left }}
-          {{ unchanged }}
-          {{ unchanged }}
-          {{ unchanged }}
-        </tr>
-        <tr>
-          <td><code>has-text-left-touch</code></td>
-          {{ left }}
-          {{ left }}
-          {{ unchanged }}
-          {{ unchanged }}
-          {{ unchanged }}
-        </tr>
-        <tr>
-          <td><code>has-text-left-desktop</code></td>
-          {{ unchanged }}
-          {{ unchanged }}
-          {{ left }}
-          {{ left }}
-          {{ left }}
-        </tr>
-        <tr>
-          <td><code>has-text-left-desktop-only</code></td>
-          {{ unchanged }}
-          {{ unchanged }}
-          {{ left }}
-          {{ unchanged }}
-          {{ unchanged }}
-        </tr>
-        <tr>
-          <td><code>has-text-left-widescreen</code></td>
-          {{ unchanged }}
-          {{ unchanged }}
-          {{ unchanged }}
-          {{ left }}
-          {{ left }}
-        </tr>
-        <tr>
-          <td><code>has-text-left-widescreen-only</code></td>
-          {{ unchanged }}
-          {{ unchanged }}
-          {{ unchanged }}
-          {{ left }}
-          {{ unchanged }}
-        </tr>
-        <tr>
-          <td><code>has-text-left-fullhd</code></td>
-          {{ unchanged }}
-          {{ unchanged }}
-          {{ unchanged }}
-          {{ unchanged }}
-          {{ left }}
-        </tr>
-      </tbody>
-    </table>
-  </div>
-
-
-{% include elements/anchor.html name="Text transformation" %}
-
-<div class="content">
-  <p>
-    You can transform the text with the use of one of <strong>4 text transformation helpers</strong>:
-  </p>
-</div>
-
-<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>
-
-{% include elements/anchor.html name="Text weight" %}
-
-<div class="content">
-  <p>
-    You can transform the text weight with the use of one of <strong>5 text weight helpers</strong>:
-  </p>
-</div>
-
-<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-medium</code></td>
-    <td>Transforms text weight to <strong>medium</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>
-
-{% include elements/anchor.html name="Font family" %}
-
-{% include elements/new-tag.html version="0.7.4" %}
-
-<div class="content">
-  <p>
-    You can change the font family with the use of one of <strong>5 font family helpers</strong>:
-  </p>
-</div>
-
-{% assign font_families = "sans-serif,monospace,primary,secondary,code" | split: ',' %}
-
-<table class="table is-bordered">
-  <thead>
-    <tr>
-      <th>
-        Class
-      </th>
-      <th>
-        Family
-      </th>
-    </tr>
-  </thead>
-  <tbody>
-    {% for family in font_families %}
-      <tr>
-        <td><code>is-family-{{ family }}</code></td>
-        <td>Sets font family to <code>$family-{{ family }}</code></td>
-      </tr>
-    {% endfor %}
-  </tbody>
-</table>
-

docs/lib/main.js

@@ -263,7 +263,9 @@ document.addEventListener('DOMContentLoaded', function () {
   // Functions
 
   function getAll(selector) {
-    return Array.prototype.slice.call(document.querySelectorAll(selector), 0);
+    var parent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document;
+
+    return Array.prototype.slice.call(parent.querySelectorAll(selector), 0);
   }
 
   // Scrolling
@@ -347,6 +349,58 @@ document.addEventListener('DOMContentLoaded', function () {
     }
   }
 
+  // Spacing table
+
+  var spacingTables = getAll('.bd-spacing-table');
+
+  spacingTables.forEach(function (spacingEl) {
+    var spacingRows = getAll('tbody tr', spacingEl);
+    var spacingCells = getAll('tbody td', spacingEl);
+    var spacingValues = getAll('tfoot th', spacingEl);
+
+    spacingEl.addEventListener('mouseleave', function () {
+      resetTable(spacingCells, spacingValues);
+    });
+
+    spacingCells.forEach(function (el) {
+      el.addEventListener('mouseenter', function () {
+        resetTable(spacingCells, spacingValues);
+        var row = Array.prototype.indexOf.call(el.parentNode.parentNode.children, el.parentNode);
+        var column = Array.prototype.indexOf.call(el.parentNode.children, el);
+        highlightRowAndColumn(row, column, spacingRows, spacingValues);
+      });
+    });
+  });
+
+  function resetTable(cells, values) {
+    cells.forEach(function (el) {
+      return el.classList.remove('bd-current-row', 'bd-current-column');
+    });
+    values.forEach(function (el) {
+      return el.classList.remove('bd-current-value');
+    });
+  }
+
+  function highlightRowAndColumn(rowIndex, columnIndex, rows, values) {
+    var row = rows[rowIndex];
+    var i = columnIndex;
+
+    while (i > -1) {
+      row.children[i].classList.add('bd-current-row');
+      i--;
+    }
+
+    var nextRows = rows.slice(rowIndex);
+    nextRows.forEach(function (r) {
+      r.children[columnIndex].classList.add('bd-current-column');
+    });
+
+    if (columnIndex < 2) {
+      return;
+    }
+    values[columnIndex - 1].classList.add('bd-current-value');
+  }
+
   // Scroll
 
   function upOrDown(lastY, currentY) {

sass/base/_all.sass

@@ -2,4 +2,3 @@
 
 @import "minireset.sass"
 @import "generic.sass"
-@import "helpers.sass"

sass/base/helpers.sass

@@ -1,281 +1 @@
-// Float
+@warn "The helpers.sass file is DEPRECATED. It has moved into its own /helpers folder. Please import sass/helpers/_all instead."
-
-.is-clearfix
-  +clearfix
-
-.is-pulled-left
-  float: left !important
-
-.is-pulled-right
-  float: right !important
-
-// Overflow
-
-.is-clipped
-  overflow: hidden !important
-
-// Overlay
-
-.is-overlay
-  @extend %overlay
-
-// Typography
-
-=typography-size($target:'')
-  @each $size in $sizes
-    $i: index($sizes, $size)
-    .is-size-#{$i}#{if($target == '', '', '-' + $target)}
-      font-size: $size !important
-
-+typography-size()
-
-+mobile
-  +typography-size('mobile')
-
-+tablet
-  +typography-size('tablet')
-
-+touch
-  +typography-size('touch')
-
-+desktop
-  +typography-size('desktop')
-
-+widescreen
-  +typography-size('widescreen')
-
-+fullhd
-  +typography-size('fullhd')
-
-$alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'right': 'right')
-
-@each $alignment, $text-align in $alignments
-  .has-text-#{$alignment}
-    text-align: #{$text-align} !important
-
-@each $alignment, $text-align in $alignments
-  +mobile
-    .has-text-#{$alignment}-mobile
-      text-align: #{$text-align} !important
-  +tablet
-    .has-text-#{$alignment}-tablet
-      text-align: #{$text-align} !important
-  +tablet-only
-    .has-text-#{$alignment}-tablet-only
-      text-align: #{$text-align} !important
-  +touch
-    .has-text-#{$alignment}-touch
-      text-align: #{$text-align} !important
-  +desktop
-    .has-text-#{$alignment}-desktop
-      text-align: #{$text-align} !important
-  +desktop-only
-    .has-text-#{$alignment}-desktop-only
-      text-align: #{$text-align} !important
-  +widescreen
-    .has-text-#{$alignment}-widescreen
-      text-align: #{$text-align} !important
-  +widescreen-only
-    .has-text-#{$alignment}-widescreen-only
-      text-align: #{$text-align} !important
-  +fullhd
-    .has-text-#{$alignment}-fullhd
-      text-align: #{$text-align} !important
-
-.is-capitalized
-  text-transform: capitalize !important
-
-.is-lowercase
-  text-transform: lowercase !important
-
-.is-uppercase
-  text-transform: uppercase !important
-
-.is-italic
-  font-style: italic !important
-
-@each $name, $pair in $colors
-  $color: nth($pair, 1)
-  .has-text-#{$name}
-    color: $color !important
-  a.has-text-#{$name}
-    &:hover,
-    &:focus
-      color: bulmaDarken($color, 10%) !important
-  .has-background-#{$name}
-    background-color: $color !important
-
-@each $name, $shade in $shades
-  .has-text-#{$name}
-    color: $shade !important
-  .has-background-#{$name}
-    background-color: $shade !important
-
-.has-text-weight-light
-  font-weight: $weight-light !important
-.has-text-weight-normal
-  font-weight: $weight-normal !important
-.has-text-weight-medium
-  font-weight: $weight-medium !important
-.has-text-weight-semibold
-  font-weight: $weight-semibold !important
-.has-text-weight-bold
-  font-weight: $weight-bold !important
-
-.is-family-primary
-  font-family: $family-primary !important
-
-.is-family-secondary
-  font-family: $family-secondary !important
-
-.is-family-sans-serif
-  font-family: $family-sans-serif !important
-
-.is-family-monospace
-  font-family: $family-monospace !important
-
-.is-family-code
-  font-family: $family-code !important
-
-// Visibility
-
-$displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
-
-@each $display in $displays
-  .is-#{$display}
-    display: #{$display} !important
-  +mobile
-    .is-#{$display}-mobile
-      display: #{$display} !important
-  +tablet
-    .is-#{$display}-tablet
-      display: #{$display} !important
-  +tablet-only
-    .is-#{$display}-tablet-only
-      display: #{$display} !important
-  +touch
-    .is-#{$display}-touch
-      display: #{$display} !important
-  +desktop
-    .is-#{$display}-desktop
-      display: #{$display} !important
-  +desktop-only
-    .is-#{$display}-desktop-only
-      display: #{$display} !important
-  +widescreen
-    .is-#{$display}-widescreen
-      display: #{$display} !important
-  +widescreen-only
-    .is-#{$display}-widescreen-only
-      display: #{$display} !important
-  +fullhd
-    .is-#{$display}-fullhd
-      display: #{$display} !important
-
-.is-hidden
-  display: none !important
-
-.is-sr-only
-  border: none !important
-  clip: rect(0, 0, 0, 0) !important
-  height: 0.01em !important
-  overflow: hidden !important
-  padding: 0 !important
-  position: absolute !important
-  white-space: nowrap !important
-  width: 0.01em !important
-
-+mobile
-  .is-hidden-mobile
-    display: none !important
-
-+tablet
-  .is-hidden-tablet
-    display: none !important
-
-+tablet-only
-  .is-hidden-tablet-only
-    display: none !important
-
-+touch
-  .is-hidden-touch
-    display: none !important
-
-+desktop
-  .is-hidden-desktop
-    display: none !important
-
-+desktop-only
-  .is-hidden-desktop-only
-    display: none !important
-
-+widescreen
-  .is-hidden-widescreen
-    display: none !important
-
-+widescreen-only
-  .is-hidden-widescreen-only
-    display: none !important
-
-+fullhd
-  .is-hidden-fullhd
-    display: none !important
-
-.is-invisible
-  visibility: hidden !important
-
-+mobile
-  .is-invisible-mobile
-    visibility: hidden !important
-
-+tablet
-  .is-invisible-tablet
-    visibility: hidden !important
-
-+tablet-only
-  .is-invisible-tablet-only
-    visibility: hidden !important
-
-+touch
-  .is-invisible-touch
-    visibility: hidden !important
-
-+desktop
-  .is-invisible-desktop
-    visibility: hidden !important
-
-+desktop-only
-  .is-invisible-desktop-only
-    visibility: hidden !important
-
-+widescreen
-  .is-invisible-widescreen
-    visibility: hidden !important
-
-+widescreen-only
-  .is-invisible-widescreen-only
-    visibility: hidden !important
-
-+fullhd
-  .is-invisible-fullhd
-    visibility: hidden !important
-
-// Other
-
-.is-marginless
-  margin: 0 !important
-
-.is-paddingless
-  padding: 0 !important
-
-.is-radiusless
-  border-radius: 0 !important
-
-.is-shadowless
-  box-shadow: none !important
-
-.is-unselectable
-  @extend %unselectable
-
-.is-relative
-  position: relative !important

sass/components/_all.sass

@@ -4,7 +4,6 @@
 @import "card.sass"
 @import "dropdown.sass"
 @import "level.sass"
-@import "list.sass"
 @import "media.sass"
 @import "menu.sass"
 @import "message.sass"

sass/components/list.sass

@@ -1,39 +0,0 @@
-$list-background-color: $scheme-main !default
-$list-shadow: 0 2px 3px rgba($scheme-invert, 0.1), 0 0 0 1px rgba($scheme-invert, 0.1) !default
-$list-radius: $radius !default
-
-$list-item-border: 1px solid $border !default
-$list-item-color: $text !default
-$list-item-active-background-color: $link !default
-$list-item-active-color: $link-invert !default
-$list-item-hover-background-color: $background !default
-
-.list
-  @extend %block
-  background-color: $list-background-color
-  border-radius: $list-radius
-  box-shadow: $list-shadow
-  // &.is-hoverable > .list-item:hover:not(.is-active)
-  //   background-color: $list-item-hover-background-color
-  //   cursor: pointer
-
-.list-item
-  display: block
-  padding: 0.5em 1em
-  &:not(a)
-    color: $list-item-color
-  &:first-child
-    border-top-left-radius: $list-radius
-    border-top-right-radius: $list-radius
-  &:last-child
-    border-bottom-left-radius: $list-radius
-    border-bottom-right-radius: $list-radius
-  &:not(:last-child)
-    border-bottom: $list-item-border
-  &.is-active
-    background-color: $list-item-active-background-color
-    color: $list-item-active-color
-
-a.list-item
-  background-color: $list-item-hover-background-color
-  cursor: pointer

sass/helpers/_all.sass

@@ -0,0 +1,10 @@
+@charset "utf-8"
+
+@import "color.sass"
+@import "float.sass"
+@import "other.sass"
+@import "overflow.sass"
+@import "position.sass"
+@import "spacing.sass"
+@import "typography.sass"
+@import "visibility.sass"

sass/helpers/color.sass

@@ -0,0 +1,37 @@
+@each $name, $pair in $colors
+  $color: nth($pair, 1)
+  .has-text-#{$name}
+    color: $color !important
+  a.has-text-#{$name}
+    &:hover,
+    &:focus
+      color: bulmaDarken($color, 10%) !important
+  .has-background-#{$name}
+    background-color: $color !important
+  @if length($pair) >= 4
+    $color-light: nth($pair, 3)
+    $color-dark: nth($pair, 4)
+    // Light
+    .has-text-#{$name}-light
+      color: $color-light !important
+    a.has-text-#{$name}-light
+      &:hover,
+      &:focus
+        color: bulmaDarken($color-light, 10%) !important
+    .has-background-#{$name}-light
+      background-color: $color-light !important
+    // Dark
+    .has-text-#{$name}-dark
+      color: $color-dark !important
+    a.has-text-#{$name}-dark
+      &:hover,
+      &:focus
+        color: bulmaLighten($color-dark, 10%) !important
+    .has-background-#{$name}-dark
+      background-color: $color-dark !important
+
+@each $name, $shade in $shades
+  .has-text-#{$name}
+    color: $shade !important
+  .has-background-#{$name}
+    background-color: $shade !important

sass/helpers/float.sass

@@ -0,0 +1,8 @@
+.is-clearfix
+  +clearfix
+
+.is-pulled-left
+  float: left !important
+
+.is-pulled-right
+  float: right !important

sass/helpers/other.sass

@@ -0,0 +1,8 @@
+.is-radiusless
+  border-radius: 0 !important
+
+.is-shadowless
+  box-shadow: none !important
+
+.is-unselectable
+  @extend %unselectable

sass/helpers/overflow.sass

@@ -0,0 +1,2 @@
+.is-clipped
+  overflow: hidden !important

sass/helpers/position.sass

@@ -0,0 +1,5 @@
+.is-overlay
+  @extend %overlay
+
+.is-relative
+  position: relative !important

sass/helpers/spacing.sass

@@ -0,0 +1,28 @@
+.is-marginless
+  margin: 0 !important
+
+.is-paddingless
+  padding: 0 !important
+
+$spacing-shortcuts: ("margin": "m", "padding": "p") !default
+$spacing-directions: ("top": "t", "right": "r", "bottom": "b", "left": "l") !default
+$spacing-horizontal: "x" !default
+$spacing-vertical: "y" !default
+$spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem) !default
+
+@each $property, $shortcut in $spacing-shortcuts
+  @each $name, $value in $spacing-values
+    // Cardinal directions
+    @each $direction, $suffix in $spacing-directions
+      .#{$shortcut}#{$suffix}-#{$name}
+        #{$property}-#{$direction}: $value !important
+    // Horizontal axis
+    @if $spacing-horizontal != null
+      .#{$shortcut}#{$spacing-horizontal}-#{$name}
+        #{$property}-left: $value !important
+        #{$property}-right: $value !important
+    // Vertical axis
+    @if $spacing-vertical != null
+      .#{$shortcut}#{$spacing-vertical}-#{$name}
+        #{$property}-top: $value !important
+        #{$property}-bottom: $value !important

sass/helpers/typography.sass

@@ -0,0 +1,98 @@
+=typography-size($target:'')
+  @each $size in $sizes
+    $i: index($sizes, $size)
+    .is-size-#{$i}#{if($target == '', '', '-' + $target)}
+      font-size: $size !important
+
++typography-size()
+
++mobile
+  +typography-size('mobile')
+
++tablet
+  +typography-size('tablet')
+
++touch
+  +typography-size('touch')
+
++desktop
+  +typography-size('desktop')
+
++widescreen
+  +typography-size('widescreen')
+
++fullhd
+  +typography-size('fullhd')
+
+$alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'right': 'right')
+
+@each $alignment, $text-align in $alignments
+  .has-text-#{$alignment}
+    text-align: #{$text-align} !important
+
+@each $alignment, $text-align in $alignments
+  +mobile
+    .has-text-#{$alignment}-mobile
+      text-align: #{$text-align} !important
+  +tablet
+    .has-text-#{$alignment}-tablet
+      text-align: #{$text-align} !important
+  +tablet-only
+    .has-text-#{$alignment}-tablet-only
+      text-align: #{$text-align} !important
+  +touch
+    .has-text-#{$alignment}-touch
+      text-align: #{$text-align} !important
+  +desktop
+    .has-text-#{$alignment}-desktop
+      text-align: #{$text-align} !important
+  +desktop-only
+    .has-text-#{$alignment}-desktop-only
+      text-align: #{$text-align} !important
+  +widescreen
+    .has-text-#{$alignment}-widescreen
+      text-align: #{$text-align} !important
+  +widescreen-only
+    .has-text-#{$alignment}-widescreen-only
+      text-align: #{$text-align} !important
+  +fullhd
+    .has-text-#{$alignment}-fullhd
+      text-align: #{$text-align} !important
+
+.is-capitalized
+  text-transform: capitalize !important
+
+.is-lowercase
+  text-transform: lowercase !important
+
+.is-uppercase
+  text-transform: uppercase !important
+
+.is-italic
+  font-style: italic !important
+
+.has-text-weight-light
+  font-weight: $weight-light !important
+.has-text-weight-normal
+  font-weight: $weight-normal !important
+.has-text-weight-medium
+  font-weight: $weight-medium !important
+.has-text-weight-semibold
+  font-weight: $weight-semibold !important
+.has-text-weight-bold
+  font-weight: $weight-bold !important
+
+.is-family-primary
+  font-family: $family-primary !important
+
+.is-family-secondary
+  font-family: $family-secondary !important
+
+.is-family-sans-serif
+  font-family: $family-sans-serif !important
+
+.is-family-monospace
+  font-family: $family-monospace !important
+
+.is-family-code
+  font-family: $family-code !important

sass/helpers/visibility.sass

@@ -0,0 +1,122 @@
+
+
+$displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
+
+@each $display in $displays
+  .is-#{$display}
+    display: #{$display} !important
+  +mobile
+    .is-#{$display}-mobile
+      display: #{$display} !important
+  +tablet
+    .is-#{$display}-tablet
+      display: #{$display} !important
+  +tablet-only
+    .is-#{$display}-tablet-only
+      display: #{$display} !important
+  +touch
+    .is-#{$display}-touch
+      display: #{$display} !important
+  +desktop
+    .is-#{$display}-desktop
+      display: #{$display} !important
+  +desktop-only
+    .is-#{$display}-desktop-only
+      display: #{$display} !important
+  +widescreen
+    .is-#{$display}-widescreen
+      display: #{$display} !important
+  +widescreen-only
+    .is-#{$display}-widescreen-only
+      display: #{$display} !important
+  +fullhd
+    .is-#{$display}-fullhd
+      display: #{$display} !important
+
+.is-hidden
+  display: none !important
+
+.is-sr-only
+  border: none !important
+  clip: rect(0, 0, 0, 0) !important
+  height: 0.01em !important
+  overflow: hidden !important
+  padding: 0 !important
+  position: absolute !important
+  white-space: nowrap !important
+  width: 0.01em !important
+
++mobile
+  .is-hidden-mobile
+    display: none !important
+
++tablet
+  .is-hidden-tablet
+    display: none !important
+
++tablet-only
+  .is-hidden-tablet-only
+    display: none !important
+
++touch
+  .is-hidden-touch
+    display: none !important
+
++desktop
+  .is-hidden-desktop
+    display: none !important
+
++desktop-only
+  .is-hidden-desktop-only
+    display: none !important
+
++widescreen
+  .is-hidden-widescreen
+    display: none !important
+
++widescreen-only
+  .is-hidden-widescreen-only
+    display: none !important
+
++fullhd
+  .is-hidden-fullhd
+    display: none !important
+
+.is-invisible
+  visibility: hidden !important
+
++mobile
+  .is-invisible-mobile
+    visibility: hidden !important
+
++tablet
+  .is-invisible-tablet
+    visibility: hidden !important
+
++tablet-only
+  .is-invisible-tablet-only
+    visibility: hidden !important
+
++touch
+  .is-invisible-touch
+    visibility: hidden !important
+
++desktop
+  .is-invisible-desktop
+    visibility: hidden !important
+
++desktop-only
+  .is-invisible-desktop-only
+    visibility: hidden !important
+
++widescreen
+  .is-invisible-widescreen
+    visibility: hidden !important
+
++widescreen-only
+  .is-invisible-widescreen-only
+    visibility: hidden !important
+
++fullhd
+  .is-invisible-fullhd
+    visibility: hidden !important

sass/utilities/_all.sass

@@ -2,7 +2,7 @@
 
 @import "initial-variables.sass"
 @import "functions.sass"
-@import "derived-variables.sass"
+@import "derived-variables.scss"
 @import "animations.sass"
 @import "mixins.sass"
 @import "controls.sass"

sass/utilities/derived-variables.sass

@@ -1,106 +0,0 @@
-$primary: $turquoise !default
-
-$info: $cyan !default
-$success: $green !default
-$warning: $yellow !default
-$danger: $red !default
-
-$light: $white-ter !default
-$dark: $grey-darker !default
-
-// Invert colors
-
-$orange-invert: findColorInvert($orange) !default
-$yellow-invert: findColorInvert($yellow) !default
-$green-invert: findColorInvert($green) !default
-$turquoise-invert: findColorInvert($turquoise) !default
-$cyan-invert: findColorInvert($cyan) !default
-$blue-invert: findColorInvert($blue) !default
-$purple-invert: findColorInvert($purple) !default
-$red-invert: findColorInvert($red) !default
-
-$primary-invert: findColorInvert($primary) !default
-$primary-light: findLightColor($primary) !default
-$primary-dark: findDarkColor($primary) !default
-$info-invert: findColorInvert($info) !default
-$info-light: findLightColor($info) !default
-$info-dark: findDarkColor($info) !default
-$success-invert: findColorInvert($success) !default
-$success-light: findLightColor($success) !default
-$success-dark: findDarkColor($success) !default
-$warning-invert: findColorInvert($warning) !default
-$warning-light: findLightColor($warning) !default
-$warning-dark: findDarkColor($warning) !default
-$danger-invert: findColorInvert($danger) !default
-$danger-light: findLightColor($danger) !default
-$danger-dark: findDarkColor($danger) !default
-$light-invert: findColorInvert($light) !default
-$dark-invert: findColorInvert($dark) !default
-
-// General colors
-
-$scheme-main: $white !default
-$scheme-main-bis: $white-bis !default
-$scheme-main-ter: $white-ter !default
-$scheme-invert: $black !default
-$scheme-invert-bis: $black-bis !default
-$scheme-invert-ter: $black-ter !default
-
-$background: $white-ter !default
-
-$border: $grey-lighter !default
-$border-hover: $grey-light !default
-$border-light: $grey-lightest !default
-$border-light-hover: $grey-light !default
-
-// Text colors
-
-$text: $grey-dark !default
-$text-invert: findColorInvert($text) !default
-$text-light: $grey !default
-$text-strong: $grey-darker !default
-
-// Code colors
-
-$code: $red !default
-$code-background: $background !default
-
-$pre: $text !default
-$pre-background: $background !default
-
-// Link colors
-
-$link: $blue !default
-$link-invert: findColorInvert($link) !default
-$link-light: findLightColor($link) !default
-$link-dark: findDarkColor($link) !default
-$link-visited: $purple !default
-
-$link-hover: $grey-darker !default
-$link-hover-border: $grey-light !default
-
-$link-focus: $grey-darker !default
-$link-focus-border: $blue !default
-
-$link-active: $grey-darker !default
-$link-active-border: $grey-dark !default
-
-// Typography
-
-$family-primary: $family-sans-serif !default
-$family-secondary: $family-sans-serif !default
-$family-code: $family-monospace !default
-
-$size-small: $size-7 !default
-$size-normal: $size-6 !default
-$size-medium: $size-5 !default
-$size-large: $size-4 !default
-
-// Lists and maps
-$custom-colors: null !default
-$custom-shades: null !default
-
-$colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors) !default
-$shades: mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades) !default
-
-$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default

sass/utilities/derived-variables.scss

@@ -0,0 +1,132 @@
+$primary: $turquoise !default;
+
+$info   : $cyan !default;
+$success: $green !default;
+$warning: $yellow !default;
+$danger : $red !default;
+
+$light  : $white-ter !default;
+$dark   : $grey-darker !default;
+
+// Invert colors
+
+$orange-invert   : findColorInvert($orange) !default;
+$yellow-invert   : findColorInvert($yellow) !default;
+$green-invert    : findColorInvert($green) !default;
+$turquoise-invert: findColorInvert($turquoise) !default;
+$cyan-invert     : findColorInvert($cyan) !default;
+$blue-invert     : findColorInvert($blue) !default;
+$purple-invert   : findColorInvert($purple) !default;
+$red-invert      : findColorInvert($red) !default;
+
+$primary-invert  : findColorInvert($primary) !default;
+$primary-light   : findLightColor($primary) !default;
+$primary-dark    : findDarkColor($primary) !default;
+$info-invert     : findColorInvert($info) !default;
+$info-light      : findLightColor($info) !default;
+$info-dark       : findDarkColor($info) !default;
+$success-invert  : findColorInvert($success) !default;
+$success-light   : findLightColor($success) !default;
+$success-dark    : findDarkColor($success) !default;
+$warning-invert  : findColorInvert($warning) !default;
+$warning-light   : findLightColor($warning) !default;
+$warning-dark    : findDarkColor($warning) !default;
+$danger-invert   : findColorInvert($danger) !default;
+$danger-light    : findLightColor($danger) !default;
+$danger-dark     : findDarkColor($danger) !default;
+$light-invert    : findColorInvert($light) !default;
+$dark-invert     : findColorInvert($dark) !default;
+
+// General colors
+
+$scheme-main       : $white !default;
+$scheme-main-bis   : $white-bis !default;
+$scheme-main-ter   : $white-ter !default;
+$scheme-invert     : $black !default;
+$scheme-invert-bis : $black-bis !default;
+$scheme-invert-ter : $black-ter !default;
+
+$background        : $white-ter !default;
+
+$border            : $grey-lighter !default;
+$border-hover      : $grey-light !default;
+$border-light      : $grey-lightest !default;
+$border-light-hover: $grey-light !default;
+
+// Text colors
+
+$text       : $grey-dark !default;
+$text-invert: findColorInvert($text) !default;
+$text-light : $grey !default;
+$text-strong: $grey-darker !default;
+
+// Code colors
+
+$code           : $red !default;
+$code-background: $background !default;
+
+$pre            : $text !default;
+$pre-background : $background !default;
+
+// Link colors
+
+$link              : $blue !default;
+$link-invert       : findColorInvert($link) !default;
+$link-light        : findLightColor($link) !default;
+$link-dark         : findDarkColor($link) !default;
+$link-visited      : $purple !default;
+
+$link-hover        : $grey-darker !default;
+$link-hover-border : $grey-light !default;
+
+$link-focus        : $grey-darker !default;
+$link-focus-border : $blue !default;
+
+$link-active       : $grey-darker !default;
+$link-active-border: $grey-dark !default;
+
+// Typography
+
+$family-primary  : $family-sans-serif !default;
+$family-secondary: $family-sans-serif !default;
+$family-code     : $family-monospace !default;
+
+$size-small : $size-7 !default;
+$size-normal: $size-6 !default;
+$size-medium: $size-5 !default;
+$size-large : $size-4 !default;
+
+// Lists and maps
+$custom-colors: null !default;
+$custom-shades: null !default;
+
+$colors: mergeColorMaps(
+(
+  "white"  : ($white, $black),
+  "black"  : ($black, $white),
+  "light"  : ($light, $light-invert),
+  "dark"   : ($dark, $dark-invert),
+  "primary": ($primary, $primary-invert, $primary-light, $primary-dark),
+  "link"   : ($link, $link-invert, $link-light, $link-dark),
+  "info"   : ($info, $info-invert, $info-light, $info-dark),
+  "success": ($success, $success-invert, $success-light, $success-dark),
+  "warning": ($warning, $warning-invert, $warning-light, $warning-dark),
+  "danger" : ($danger, $danger-invert, $danger-light, $danger-dark)),
+  $custom-colors
+) !default;
+
+$shades: mergeColorMaps(
+(
+  "black-bis"   : $black-bis,
+  "black-ter"   : $black-ter,
+  "grey-darker" : $grey-darker,
+  "grey-dark"   : $grey-dark,
+  "grey"        : $grey,
+  "grey-light"  : $grey-light,
+  "grey-lighter": $grey-lighter,
+  "white-ter"   : $white-ter,
+  "white-bis"   : $white-bis),
+  $custom-shades
+) !default;
+
+$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default;

sass/utilities/functions.sass

@@ -108,3 +108,8 @@
   @if type-of($color) != 'color'
     @return $color
   @return darken($color, $amount)
+
+@function bulmaLighten($color, $amount)
+  @if type-of($color) != 'color'
+    @return $color
+  @return lighten($color, $amount)