From ea1a8f57c56a6dc4bcb21935224437df0b882537 Mon Sep 17 00:00:00 2001
From: Jeremy Thomas <bbxdesign@gmail.com>
Date: Mon, 11 May 2020 00:25:29 +0100
Subject: [PATCH] Highlight rows and columns

---
 docs/_data/links.json                         |   9 +-
 docs/_includes/components/categories.html     |   2 +-
 docs/_javascript/main.js                      |  44 +-
 docs/_sass/specific.sass                      |  23 +
 docs/css/bulma-docs.css                       | 746 +++++-------------
 docs/documentation/helpers/other-helpers.html |  56 ++
 .../helpers/spacing-helpers.html              | 130 ++-
 .../helpers/typography-helpers.html           | 291 +++----
 .../helpers/visibility-helpers.html           |  35 +-
 docs/documentation/modifiers/helpers.html     |  64 +-
 .../modifiers/responsive-helpers.html         | 289 -------
 docs/lib/main.js                              |  50 +-
 sass/helpers/spacing.sass                     |  26 +-
 13 files changed, 677 insertions(+), 1088 deletions(-)
 create mode 100644 docs/documentation/helpers/other-helpers.html

diff --git a/docs/_data/links.json b/docs/_data/links.json
index f105818d..99c143a7 100644
--- a/docs/_data/links.json
+++ b/docs/_data/links.json
@@ -202,6 +202,13 @@
       "icon": "arrows-alt-h",
       "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",
@@ -616,7 +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-typography", "helpers-visibility", "helpers-spacing"],
+    "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"],
diff --git a/docs/_includes/components/categories.html b/docs/_includes/components/categories.html
index e3d4f1b8..491489bc 100644
--- a/docs/_includes/components/categories.html
+++ b/docs/_includes/components/categories.html
@@ -14,7 +14,7 @@
         <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 == 'Helpers' %}
-            <span class="tag bd-mini-tag is-danger">
+            <span class="tag bd-mini-tag is-primary">
               New!
             </span>
           {% endif %}
diff --git a/docs/_javascript/main.js b/docs/_javascript/main.js
index 613aa54b..6299a8e7 100644
--- a/docs/_javascript/main.js
+++ b/docs/_javascript/main.js
@@ -260,8 +260,8 @@ document.addEventListener('DOMContentLoaded', () => {
 
   // Functions
 
-  function getAll(selector) {
-    return Array.prototype.slice.call(document.querySelectorAll(selector), 0);
+  function getAll(selector, parent = document) {
+    return Array.prototype.slice.call(parent.querySelectorAll(selector), 0);
   }
 
   // Scrolling
@@ -345,6 +345,46 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   }
 
+  // Spacing table
+
+  const spacingEl = document.getElementById('spacingTable');
+  const spacingRows = getAll('tbody tr', spacingEl);
+  const spacingCells = getAll('tbody td', spacingEl);
+  const spacingValues = getAll('tfoot th', spacingEl);
+
+  spacingEl.addEventListener('mouseleave', () => {
+    resetTable();
+  });
+
+  spacingCells.forEach(el => {
+    el.addEventListener('mouseenter', () => {
+      resetTable();
+      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);
+    });
+  });
+
+  function resetTable() {
+    spacingRows.forEach(el => el.classList.remove('bd-current-row'));
+    spacingCells.forEach(el => el.classList.remove('bd-current-column'));
+    spacingValues.forEach(el => el.classList.remove('bd-current-value'));
+  }
+
+  function highlightRowAndColumn(rowIndex, columnIndex) {
+    const row = spacingRows[rowIndex];
+    row.classList.add('bd-current-row');
+
+    spacingRows.forEach(r => {
+      r.children[columnIndex].classList.add('bd-current-column');
+    });
+
+    if (columnIndex < 2) {
+      return;
+    }
+    spacingValues[columnIndex - 1].classList.add('bd-current-value');
+  }
+
   // Scroll
 
   function upOrDown(lastY, currentY) {
diff --git a/docs/_sass/specific.sass b/docs/_sass/specific.sass
index 62d705df..82ca37a9 100644
--- a/docs/_sass/specific.sass
+++ b/docs/_sass/specific.sass
@@ -1,3 +1,26 @@
+#spacingTable
+  &:hover
+    color: $border
+    code
+      background: none
+      color: $border
+  .bd-current-row
+    background-color: $background
+    td:first-child,
+    .bd-current-column:not(:first-child)
+      background-color: $danger-light
+      color: $text-strong
+      code
+        background-color: $danger
+        color: $danger-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
diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index eb2a970a..e5206d06 100644
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -9188,296 +9188,14 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   margin-top: 0 !important;
 }
 
-.mx-0 {
-  margin-left: 0 !important;
-  margin-right: 0 !important;
-}
-
-.my-0 {
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
-}
-
-.mt-1 {
-  margin-top: 0.25rem !important;
-}
-
-.mx-1 {
-  margin-left: 0.25rem !important;
-  margin-right: 0.25rem !important;
-}
-
-.my-1 {
-  margin-top: 0.25rem !important;
-  margin-bottom: 0.25rem !important;
-}
-
-.mt-2 {
-  margin-top: 0.5rem !important;
-}
-
-.mx-2 {
-  margin-left: 0.5rem !important;
-  margin-right: 0.5rem !important;
-}
-
-.my-2 {
-  margin-top: 0.5rem !important;
-  margin-bottom: 0.5rem !important;
-}
-
-.mt-3 {
-  margin-top: 0.75rem !important;
-}
-
-.mx-3 {
-  margin-left: 0.75rem !important;
-  margin-right: 0.75rem !important;
-}
-
-.my-3 {
-  margin-top: 0.75rem !important;
-  margin-bottom: 0.75rem !important;
-}
-
-.mt-4 {
-  margin-top: 1rem !important;
-}
-
-.mx-4 {
-  margin-left: 1rem !important;
-  margin-right: 1rem !important;
-}
-
-.my-4 {
-  margin-top: 1rem !important;
-  margin-bottom: 1rem !important;
-}
-
-.mt-5 {
-  margin-top: 1.5rem !important;
-}
-
-.mx-5 {
-  margin-left: 1.5rem !important;
-  margin-right: 1.5rem !important;
-}
-
-.my-5 {
-  margin-top: 1.5rem !important;
-  margin-bottom: 1.5rem !important;
-}
-
-.mt-6 {
-  margin-top: 3rem !important;
-}
-
-.mx-6 {
-  margin-left: 3rem !important;
-  margin-right: 3rem !important;
-}
-
-.my-6 {
-  margin-top: 3rem !important;
-  margin-bottom: 3rem !important;
-}
-
 .mr-0 {
   margin-right: 0 !important;
 }
 
-.mx-0 {
-  margin-left: 0 !important;
-  margin-right: 0 !important;
-}
-
-.my-0 {
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
-}
-
-.mr-1 {
-  margin-right: 0.25rem !important;
-}
-
-.mx-1 {
-  margin-left: 0.25rem !important;
-  margin-right: 0.25rem !important;
-}
-
-.my-1 {
-  margin-top: 0.25rem !important;
-  margin-bottom: 0.25rem !important;
-}
-
-.mr-2 {
-  margin-right: 0.5rem !important;
-}
-
-.mx-2 {
-  margin-left: 0.5rem !important;
-  margin-right: 0.5rem !important;
-}
-
-.my-2 {
-  margin-top: 0.5rem !important;
-  margin-bottom: 0.5rem !important;
-}
-
-.mr-3 {
-  margin-right: 0.75rem !important;
-}
-
-.mx-3 {
-  margin-left: 0.75rem !important;
-  margin-right: 0.75rem !important;
-}
-
-.my-3 {
-  margin-top: 0.75rem !important;
-  margin-bottom: 0.75rem !important;
-}
-
-.mr-4 {
-  margin-right: 1rem !important;
-}
-
-.mx-4 {
-  margin-left: 1rem !important;
-  margin-right: 1rem !important;
-}
-
-.my-4 {
-  margin-top: 1rem !important;
-  margin-bottom: 1rem !important;
-}
-
-.mr-5 {
-  margin-right: 1.5rem !important;
-}
-
-.mx-5 {
-  margin-left: 1.5rem !important;
-  margin-right: 1.5rem !important;
-}
-
-.my-5 {
-  margin-top: 1.5rem !important;
-  margin-bottom: 1.5rem !important;
-}
-
-.mr-6 {
-  margin-right: 3rem !important;
-}
-
-.mx-6 {
-  margin-left: 3rem !important;
-  margin-right: 3rem !important;
-}
-
-.my-6 {
-  margin-top: 3rem !important;
-  margin-bottom: 3rem !important;
-}
-
 .mb-0 {
   margin-bottom: 0 !important;
 }
 
-.mx-0 {
-  margin-left: 0 !important;
-  margin-right: 0 !important;
-}
-
-.my-0 {
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
-}
-
-.mb-1 {
-  margin-bottom: 0.25rem !important;
-}
-
-.mx-1 {
-  margin-left: 0.25rem !important;
-  margin-right: 0.25rem !important;
-}
-
-.my-1 {
-  margin-top: 0.25rem !important;
-  margin-bottom: 0.25rem !important;
-}
-
-.mb-2 {
-  margin-bottom: 0.5rem !important;
-}
-
-.mx-2 {
-  margin-left: 0.5rem !important;
-  margin-right: 0.5rem !important;
-}
-
-.my-2 {
-  margin-top: 0.5rem !important;
-  margin-bottom: 0.5rem !important;
-}
-
-.mb-3 {
-  margin-bottom: 0.75rem !important;
-}
-
-.mx-3 {
-  margin-left: 0.75rem !important;
-  margin-right: 0.75rem !important;
-}
-
-.my-3 {
-  margin-top: 0.75rem !important;
-  margin-bottom: 0.75rem !important;
-}
-
-.mb-4 {
-  margin-bottom: 1rem !important;
-}
-
-.mx-4 {
-  margin-left: 1rem !important;
-  margin-right: 1rem !important;
-}
-
-.my-4 {
-  margin-top: 1rem !important;
-  margin-bottom: 1rem !important;
-}
-
-.mb-5 {
-  margin-bottom: 1.5rem !important;
-}
-
-.mx-5 {
-  margin-left: 1.5rem !important;
-  margin-right: 1.5rem !important;
-}
-
-.my-5 {
-  margin-top: 1.5rem !important;
-  margin-bottom: 1.5rem !important;
-}
-
-.mb-6 {
-  margin-bottom: 3rem !important;
-}
-
-.mx-6 {
-  margin-left: 3rem !important;
-  margin-right: 3rem !important;
-}
-
-.my-6 {
-  margin-top: 3rem !important;
-  margin-bottom: 3rem !important;
-}
-
 .ml-0 {
   margin-left: 0 !important;
 }
@@ -9492,6 +9210,18 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   margin-bottom: 0 !important;
 }
 
+.mt-1 {
+  margin-top: 0.25rem !important;
+}
+
+.mr-1 {
+  margin-right: 0.25rem !important;
+}
+
+.mb-1 {
+  margin-bottom: 0.25rem !important;
+}
+
 .ml-1 {
   margin-left: 0.25rem !important;
 }
@@ -9506,6 +9236,18 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   margin-bottom: 0.25rem !important;
 }
 
+.mt-2 {
+  margin-top: 0.5rem !important;
+}
+
+.mr-2 {
+  margin-right: 0.5rem !important;
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem !important;
+}
+
 .ml-2 {
   margin-left: 0.5rem !important;
 }
@@ -9520,6 +9262,18 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   margin-bottom: 0.5rem !important;
 }
 
+.mt-3 {
+  margin-top: 0.75rem !important;
+}
+
+.mr-3 {
+  margin-right: 0.75rem !important;
+}
+
+.mb-3 {
+  margin-bottom: 0.75rem !important;
+}
+
 .ml-3 {
   margin-left: 0.75rem !important;
 }
@@ -9534,6 +9288,18 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   margin-bottom: 0.75rem !important;
 }
 
+.mt-4 {
+  margin-top: 1rem !important;
+}
+
+.mr-4 {
+  margin-right: 1rem !important;
+}
+
+.mb-4 {
+  margin-bottom: 1rem !important;
+}
+
 .ml-4 {
   margin-left: 1rem !important;
 }
@@ -9548,6 +9314,18 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   margin-bottom: 1rem !important;
 }
 
+.mt-5 {
+  margin-top: 1.5rem !important;
+}
+
+.mr-5 {
+  margin-right: 1.5rem !important;
+}
+
+.mb-5 {
+  margin-bottom: 1.5rem !important;
+}
+
 .ml-5 {
   margin-left: 1.5rem !important;
 }
@@ -9562,6 +9340,18 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   margin-bottom: 1.5rem !important;
 }
 
+.mt-6 {
+  margin-top: 3rem !important;
+}
+
+.mr-6 {
+  margin-right: 3rem !important;
+}
+
+.mb-6 {
+  margin-bottom: 3rem !important;
+}
+
 .ml-6 {
   margin-left: 3rem !important;
 }
@@ -9580,296 +9370,14 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   padding-top: 0 !important;
 }
 
-.px-0 {
-  padding-left: 0 !important;
-  padding-right: 0 !important;
-}
-
-.py-0 {
-  padding-top: 0 !important;
-  padding-bottom: 0 !important;
-}
-
-.pt-1 {
-  padding-top: 0.25rem !important;
-}
-
-.px-1 {
-  padding-left: 0.25rem !important;
-  padding-right: 0.25rem !important;
-}
-
-.py-1 {
-  padding-top: 0.25rem !important;
-  padding-bottom: 0.25rem !important;
-}
-
-.pt-2 {
-  padding-top: 0.5rem !important;
-}
-
-.px-2 {
-  padding-left: 0.5rem !important;
-  padding-right: 0.5rem !important;
-}
-
-.py-2 {
-  padding-top: 0.5rem !important;
-  padding-bottom: 0.5rem !important;
-}
-
-.pt-3 {
-  padding-top: 0.75rem !important;
-}
-
-.px-3 {
-  padding-left: 0.75rem !important;
-  padding-right: 0.75rem !important;
-}
-
-.py-3 {
-  padding-top: 0.75rem !important;
-  padding-bottom: 0.75rem !important;
-}
-
-.pt-4 {
-  padding-top: 1rem !important;
-}
-
-.px-4 {
-  padding-left: 1rem !important;
-  padding-right: 1rem !important;
-}
-
-.py-4 {
-  padding-top: 1rem !important;
-  padding-bottom: 1rem !important;
-}
-
-.pt-5 {
-  padding-top: 1.5rem !important;
-}
-
-.px-5 {
-  padding-left: 1.5rem !important;
-  padding-right: 1.5rem !important;
-}
-
-.py-5 {
-  padding-top: 1.5rem !important;
-  padding-bottom: 1.5rem !important;
-}
-
-.pt-6 {
-  padding-top: 3rem !important;
-}
-
-.px-6 {
-  padding-left: 3rem !important;
-  padding-right: 3rem !important;
-}
-
-.py-6 {
-  padding-top: 3rem !important;
-  padding-bottom: 3rem !important;
-}
-
 .pr-0 {
   padding-right: 0 !important;
 }
 
-.px-0 {
-  padding-left: 0 !important;
-  padding-right: 0 !important;
-}
-
-.py-0 {
-  padding-top: 0 !important;
-  padding-bottom: 0 !important;
-}
-
-.pr-1 {
-  padding-right: 0.25rem !important;
-}
-
-.px-1 {
-  padding-left: 0.25rem !important;
-  padding-right: 0.25rem !important;
-}
-
-.py-1 {
-  padding-top: 0.25rem !important;
-  padding-bottom: 0.25rem !important;
-}
-
-.pr-2 {
-  padding-right: 0.5rem !important;
-}
-
-.px-2 {
-  padding-left: 0.5rem !important;
-  padding-right: 0.5rem !important;
-}
-
-.py-2 {
-  padding-top: 0.5rem !important;
-  padding-bottom: 0.5rem !important;
-}
-
-.pr-3 {
-  padding-right: 0.75rem !important;
-}
-
-.px-3 {
-  padding-left: 0.75rem !important;
-  padding-right: 0.75rem !important;
-}
-
-.py-3 {
-  padding-top: 0.75rem !important;
-  padding-bottom: 0.75rem !important;
-}
-
-.pr-4 {
-  padding-right: 1rem !important;
-}
-
-.px-4 {
-  padding-left: 1rem !important;
-  padding-right: 1rem !important;
-}
-
-.py-4 {
-  padding-top: 1rem !important;
-  padding-bottom: 1rem !important;
-}
-
-.pr-5 {
-  padding-right: 1.5rem !important;
-}
-
-.px-5 {
-  padding-left: 1.5rem !important;
-  padding-right: 1.5rem !important;
-}
-
-.py-5 {
-  padding-top: 1.5rem !important;
-  padding-bottom: 1.5rem !important;
-}
-
-.pr-6 {
-  padding-right: 3rem !important;
-}
-
-.px-6 {
-  padding-left: 3rem !important;
-  padding-right: 3rem !important;
-}
-
-.py-6 {
-  padding-top: 3rem !important;
-  padding-bottom: 3rem !important;
-}
-
 .pb-0 {
   padding-bottom: 0 !important;
 }
 
-.px-0 {
-  padding-left: 0 !important;
-  padding-right: 0 !important;
-}
-
-.py-0 {
-  padding-top: 0 !important;
-  padding-bottom: 0 !important;
-}
-
-.pb-1 {
-  padding-bottom: 0.25rem !important;
-}
-
-.px-1 {
-  padding-left: 0.25rem !important;
-  padding-right: 0.25rem !important;
-}
-
-.py-1 {
-  padding-top: 0.25rem !important;
-  padding-bottom: 0.25rem !important;
-}
-
-.pb-2 {
-  padding-bottom: 0.5rem !important;
-}
-
-.px-2 {
-  padding-left: 0.5rem !important;
-  padding-right: 0.5rem !important;
-}
-
-.py-2 {
-  padding-top: 0.5rem !important;
-  padding-bottom: 0.5rem !important;
-}
-
-.pb-3 {
-  padding-bottom: 0.75rem !important;
-}
-
-.px-3 {
-  padding-left: 0.75rem !important;
-  padding-right: 0.75rem !important;
-}
-
-.py-3 {
-  padding-top: 0.75rem !important;
-  padding-bottom: 0.75rem !important;
-}
-
-.pb-4 {
-  padding-bottom: 1rem !important;
-}
-
-.px-4 {
-  padding-left: 1rem !important;
-  padding-right: 1rem !important;
-}
-
-.py-4 {
-  padding-top: 1rem !important;
-  padding-bottom: 1rem !important;
-}
-
-.pb-5 {
-  padding-bottom: 1.5rem !important;
-}
-
-.px-5 {
-  padding-left: 1.5rem !important;
-  padding-right: 1.5rem !important;
-}
-
-.py-5 {
-  padding-top: 1.5rem !important;
-  padding-bottom: 1.5rem !important;
-}
-
-.pb-6 {
-  padding-bottom: 3rem !important;
-}
-
-.px-6 {
-  padding-left: 3rem !important;
-  padding-right: 3rem !important;
-}
-
-.py-6 {
-  padding-top: 3rem !important;
-  padding-bottom: 3rem !important;
-}
-
 .pl-0 {
   padding-left: 0 !important;
 }
@@ -9884,6 +9392,18 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   padding-bottom: 0 !important;
 }
 
+.pt-1 {
+  padding-top: 0.25rem !important;
+}
+
+.pr-1 {
+  padding-right: 0.25rem !important;
+}
+
+.pb-1 {
+  padding-bottom: 0.25rem !important;
+}
+
 .pl-1 {
   padding-left: 0.25rem !important;
 }
@@ -9898,6 +9418,18 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   padding-bottom: 0.25rem !important;
 }
 
+.pt-2 {
+  padding-top: 0.5rem !important;
+}
+
+.pr-2 {
+  padding-right: 0.5rem !important;
+}
+
+.pb-2 {
+  padding-bottom: 0.5rem !important;
+}
+
 .pl-2 {
   padding-left: 0.5rem !important;
 }
@@ -9912,6 +9444,18 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   padding-bottom: 0.5rem !important;
 }
 
+.pt-3 {
+  padding-top: 0.75rem !important;
+}
+
+.pr-3 {
+  padding-right: 0.75rem !important;
+}
+
+.pb-3 {
+  padding-bottom: 0.75rem !important;
+}
+
 .pl-3 {
   padding-left: 0.75rem !important;
 }
@@ -9926,6 +9470,18 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   padding-bottom: 0.75rem !important;
 }
 
+.pt-4 {
+  padding-top: 1rem !important;
+}
+
+.pr-4 {
+  padding-right: 1rem !important;
+}
+
+.pb-4 {
+  padding-bottom: 1rem !important;
+}
+
 .pl-4 {
   padding-left: 1rem !important;
 }
@@ -9940,6 +9496,18 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   padding-bottom: 1rem !important;
 }
 
+.pt-5 {
+  padding-top: 1.5rem !important;
+}
+
+.pr-5 {
+  padding-right: 1.5rem !important;
+}
+
+.pb-5 {
+  padding-bottom: 1.5rem !important;
+}
+
 .pl-5 {
   padding-left: 1.5rem !important;
 }
@@ -9954,6 +9522,18 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   padding-bottom: 1.5rem !important;
 }
 
+.pt-6 {
+  padding-top: 3rem !important;
+}
+
+.pr-6 {
+  padding-right: 3rem !important;
+}
+
+.pb-6 {
+  padding-bottom: 3rem !important;
+}
+
 .pl-6 {
   padding-left: 3rem !important;
 }
@@ -13644,6 +13224,44 @@ svg {
   width: 1em;
 }
 
+#spacingTable:hover {
+  color: #dbdbdb;
+}
+
+#spacingTable:hover code {
+  background: none;
+  color: #dbdbdb;
+}
+
+#spacingTable .bd-current-row {
+  background-color: whitesmoke;
+}
+
+#spacingTable .bd-current-row td:first-child,
+#spacingTable .bd-current-row .bd-current-column:not(:first-child) {
+  background-color: #feecf0;
+  color: #363636;
+}
+
+#spacingTable .bd-current-row td:first-child code,
+#spacingTable .bd-current-row .bd-current-column:not(:first-child) code {
+  background-color: #f14668;
+  color: #fff;
+}
+
+#spacingTable .bd-current-column {
+  background-color: whitesmoke;
+}
+
+#spacingTable .bd-current-value {
+  background-color: #feecf0;
+}
+
+#spacingTable .bd-current-value code {
+  background-color: #f14668;
+  color: #fff;
+}
+
 ::-moz-selection {
   background-color: #00d1b2;
   color: #fff;
diff --git a/docs/documentation/helpers/other-helpers.html b/docs/documentation/helpers/other-helpers.html
new file mode 100644
index 00000000..4c00545a
--- /dev/null
+++ b/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>
diff --git a/docs/documentation/helpers/spacing-helpers.html b/docs/documentation/helpers/spacing-helpers.html
index e4a557f7..cd7078cf 100644
--- a/docs/documentation/helpers/spacing-helpers.html
+++ b/docs/documentation/helpers/spacing-helpers.html
@@ -8,6 +8,134 @@ breadcrumb:
 - 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
 ---
 
-{% include elements/anchor.html name="Text spacing" %}
+{% include elements/new-tag.html version="0.9.0" %}
+
+<div class="content">
+  <p>Bulma provides you <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 can <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>
+</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" %}
+
+<table id="spacingTable" class="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 page.values %}
+        <th><code>{{ value[1] }}</code></th>
+      {% endfor %}
+    </tr>
+  </tfoot>
+  <tbody>
+    {% for shortcut in page.shortcuts %}
+      {% for direction in page.directions %}
+        <tr>
+          <td><code>{{ shortcut[0] }}-{{ direction[0] }}</code></td>
+          <td><code>{{ shortcut[1] }}{{ direction[1] }}</code></td>
+          {% for value in page.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] }}{{ page.horizontal }}</code></td>
+        {% for value in page.values %}
+          <td><code>{{ shortcut[1] }}{{ page.horizontal }}-{{ value[0] }}</code></td>
+        {% endfor %}
+      </tr>
+
+      <tr>
+        <td>
+          <code>{{ shortcut[0] }}-top</code> <small>and</small> <br>
+          <code>{{ shortcut[0] }}-bottom</code>
+        </td>
+        <td><code>{{ shortcut[1] }}{{ page.vertical }}</code></td>
+        {% for value in page.values %}
+          <td><code>{{ shortcut[1] }}{{ page.vertical }}-{{ value[0] }}</code></td>
+        {% endfor %}
+      </tr>
+    {% endfor %}
+  </tbody>
+</table>
diff --git a/docs/documentation/helpers/typography-helpers.html b/docs/documentation/helpers/typography-helpers.html
index 951cc81e..8453ce67 100644
--- a/docs/documentation/helpers/typography-helpers.html
+++ b/docs/documentation/helpers/typography-helpers.html
@@ -37,20 +37,20 @@ breadcrumb:
 {% endcapture %}
 
 {% capture size1 %}
-<td class="is-narrow">
-  <p class="notification is-primary"><code>{{ initial_vars['$size-1'].value }}</code></p>
+<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">
-  <p class="notification">unchanged</p>
+<td class="is-narrow has-text-grey-light">
+  unchanged
 </td>
 {% endcapture %}
 
 {% capture left %}
-<td class="is-narrow">
-  <p class="notification is-primary">left-aligned</p>
+<td class="is-narrow has-background-primary-light has-text-primary">
+  left-aligned
 </td>
 {% endcapture %}
 
@@ -77,7 +77,6 @@ breadcrumb:
     {% 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>
@@ -96,63 +95,61 @@ breadcrumb:
   </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="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>
@@ -203,7 +200,7 @@ breadcrumb:
 
 <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.
+    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>
@@ -211,87 +208,91 @@ breadcrumb:
   </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="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>
-
+<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" %}
 
diff --git a/docs/documentation/helpers/visibility-helpers.html b/docs/documentation/helpers/visibility-helpers.html
index ef9b3f8b..1d363981 100644
--- a/docs/documentation/helpers/visibility-helpers.html
+++ b/docs/documentation/helpers/visibility-helpers.html
@@ -34,26 +34,26 @@ breadcrumb:
 {% endcapture %}
 
 {% capture flex %}
-<td class="is-narrow has-background-primary-light">
-  <p><strong class="has-text-primary">Flex</strong></p>
+<td class="is-narrow has-text-primary has-background-primary-light">
+  Flex
 </td>
 {% endcapture %}
 
 {% capture visible %}
-<td class="is-narrow has-background-primary-light">
-  <p><strong class="has-text-primary">Visible</strong></p>
+<td class="is-narrow has-text-success has-background-success-light">
+  Visible
 </td>
 {% endcapture %}
 
 {% capture hidden %}
-<td class="is-narrow">
-  <p class="has-text-grey-light">Hidden</p>
+<td class="is-narrow has-text-danger has-background-danger-light">
+  Hidden
 </td>
 {% endcapture %}
 
 {% capture unchanged %}
-<td class="is-narrow">
-  <p class="has-text-grey-light">Unchanged</p>
+<td class="is-narrow has-text-grey-light">
+  Unchanged
 </td>
 {% endcapture %}
 
@@ -286,3 +286,22 @@ breadcrumb:
     </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>
diff --git a/docs/documentation/modifiers/helpers.html b/docs/documentation/modifiers/helpers.html
index 7495dd07..00213056 100644
--- a/docs/documentation/modifiers/helpers.html
+++ b/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>
+
diff --git a/docs/documentation/modifiers/responsive-helpers.html b/docs/documentation/modifiers/responsive-helpers.html
index ee20ae2b..39639101 100644
--- a/docs/documentation/modifiers/responsive-helpers.html
+++ b/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 %}
diff --git a/docs/lib/main.js b/docs/lib/main.js
index 8349ba68..001741b3 100644
--- a/docs/lib/main.js
+++ b/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,52 @@ document.addEventListener('DOMContentLoaded', function () {
     }
   }
 
+  // Spacing table
+
+  var spacingEl = document.getElementById('spacingTable');
+  var spacingRows = getAll('tbody tr', spacingEl);
+  var spacingCells = getAll('tbody td', spacingEl);
+  var spacingValues = getAll('tfoot th', spacingEl);
+
+  spacingEl.addEventListener('mouseleave', function () {
+    resetTable();
+  });
+
+  spacingCells.forEach(function (el) {
+    el.addEventListener('mouseenter', function () {
+      resetTable();
+      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);
+    });
+  });
+
+  function resetTable() {
+    spacingRows.forEach(function (el) {
+      return el.classList.remove('bd-current-row');
+    });
+    spacingCells.forEach(function (el) {
+      return el.classList.remove('bd-current-column');
+    });
+    spacingValues.forEach(function (el) {
+      return el.classList.remove('bd-current-value');
+    });
+  }
+
+  function highlightRowAndColumn(rowIndex, columnIndex) {
+    var row = spacingRows[rowIndex];
+    row.classList.add('bd-current-row');
+
+    spacingRows.forEach(function (r) {
+      r.children[columnIndex].classList.add('bd-current-column');
+    });
+
+    if (columnIndex < 2) {
+      return;
+    }
+    spacingValues[columnIndex - 1].classList.add('bd-current-value');
+  }
+
   // Scroll
 
   function upOrDown(lastY, currentY) {
diff --git a/sass/helpers/spacing.sass b/sass/helpers/spacing.sass
index 03b474c4..b7e571e8 100644
--- a/sass/helpers/spacing.sass
+++ b/sass/helpers/spacing.sass
@@ -11,18 +11,18 @@ $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 $direction, $suffix in $spacing-directions
-    @each $name, $value in $spacing-values
-      // Cardinal directions
+  @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
+    // 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