Customizing spacing helpers output

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

@@ -347,32 +347,34 @@ document.addEventListener('DOMContentLoaded', () => {
 
   // Spacing table
 
-  const spacingEl = document.getElementById('spacingTable');
+  const spacingTables = getAll('.bd-spacing-table');
-  const spacingRows = getAll('tbody tr', spacingEl);
-  const spacingCells = getAll('tbody td', spacingEl);
-  const spacingValues = getAll('tfoot th', spacingEl);
 
-  spacingEl.addEventListener('mouseleave', () => {
+  spacingTables.forEach(spacingEl => {
-    resetTable();
+    const spacingRows = getAll('tbody tr', spacingEl);
-  });
+    const spacingCells = getAll('tbody td', spacingEl);
+    const spacingValues = getAll('tfoot th', spacingEl);
 
-  spacingCells.forEach(el => {
+    spacingEl.addEventListener('mouseleave', () => {
-    el.addEventListener('mouseenter', () => {
+      resetTable(spacingCells, spacingValues);
-      resetTable();
+    });
-      const row = Array.prototype.indexOf.call(el.parentNode.parentNode.children, el.parentNode);
+
-      const column = Array.prototype.indexOf.call(el.parentNode.children, el);
+    spacingCells.forEach(el => {
-      highlightRowAndColumn(row, column);
+      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() {
+  function resetTable(cells, values) {
-    // spacingRows.forEach(el => el.classList.remove('bd-current-row'));
+    cells.forEach(el => el.classList.remove('bd-current-row', 'bd-current-column'));
-    spacingCells.forEach(el => el.classList.remove('bd-current-row', 'bd-current-column'));
+    values.forEach(el => el.classList.remove('bd-current-value'));
-    spacingValues.forEach(el => el.classList.remove('bd-current-value'));
   }
 
-  function highlightRowAndColumn(rowIndex, columnIndex) {
+  function highlightRowAndColumn(rowIndex, columnIndex, rows, values) {
-    const row = spacingRows[rowIndex];
+    const row = rows[rowIndex];
     let i = columnIndex;
 
     while (i > -1) {
@@ -380,7 +382,7 @@ document.addEventListener('DOMContentLoaded', () => {
       i--;
     }
 
-    const nextRows = spacingRows.slice(rowIndex);
+    const nextRows = rows.slice(rowIndex);
     nextRows.forEach(r => {
       r.children[columnIndex].classList.add('bd-current-column');
     });
@@ -388,7 +390,7 @@ document.addEventListener('DOMContentLoaded', () => {
     if (columnIndex < 2) {
       return;
     }
-    spacingValues[columnIndex - 1].classList.add('bd-current-value');
+    values[columnIndex - 1].classList.add('bd-current-value');
   }
 
   // Scroll

docs/_sass/specific.sass

@@ -1,4 +1,4 @@
-#spacingTable
+.bd-spacing-table
   &:hover
     color: $border
     code

docs/css/bulma-docs.css

@@ -13163,48 +13163,48 @@ svg {
   width: 1em;
 }
 
-#spacingTable:hover {
+.bd-spacing-table:hover {
   color: #dbdbdb;
 }
 
-#spacingTable:hover code {
+.bd-spacing-table:hover code {
   background: none;
   color: #dbdbdb;
 }
 
-#spacingTable .bd-current-row {
+.bd-spacing-table .bd-current-row {
   background-color: whitesmoke;
 }
 
-#spacingTable .bd-current-row:first-child {
+.bd-spacing-table .bd-current-row:first-child {
   background-color: #feecf0;
   color: #363636;
 }
 
-#spacingTable .bd-current-row:first-child code {
+.bd-spacing-table .bd-current-row:first-child code {
   background-color: #f14668;
   color: #fff;
 }
 
-#spacingTable .bd-current-row.bd-current-column {
+.bd-spacing-table .bd-current-row.bd-current-column {
   background-color: #ebfffc;
   color: #363636;
 }
 
-#spacingTable .bd-current-row.bd-current-column code {
+.bd-spacing-table .bd-current-row.bd-current-column code {
   background-color: #00d1b2;
   color: #fff;
 }
 
-#spacingTable .bd-current-column {
+.bd-spacing-table .bd-current-column {
   background-color: whitesmoke;
 }
 
-#spacingTable .bd-current-value {
+.bd-spacing-table .bd-current-value {
   background-color: #feecf0;
 }
 
-#spacingTable .bd-current-value code {
+.bd-spacing-table .bd-current-value code {
   background-color: #f14668;
   color: #fff;
 }

docs/documentation/helpers/spacing-helpers.html

@@ -26,6 +26,13 @@ values:
   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" %}
@@ -87,55 +94,67 @@ values:
 
 {% include elements/anchor.html name="List of all spacing helpers" %}
 
-<table id="spacingTable" class="table is-bordered">
+<p>
-  <thead>
+  There are <strong>84 spacing helpers</strong> to choose from:
-    <tr>
+</p>
-      <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>
+{% include
-        <td>
+  components/spacing-table.html
-          <code>{{ shortcut[0] }}-left</code> <small>and</small> <br>
+  values=page.values
-          <code>{{ shortcut[0] }}-right</code>
+  shortcuts=page.shortcuts
-        </td>
+  directions=page.directions
-        <td><code>{{ shortcut[1] }}{{ page.horizontal }}</code></td>
+  horizontal=page.horizontal
-        {% for value in page.values %}
+  vertical=page.vertical
-          <td><code>{{ shortcut[1] }}{{ page.horizontal }}-{{ value[0] }}</code></td>
+%}
-        {% endfor %}
-      </tr>
 
-      <tr>
+{% include elements/anchor.html name="Configuration" %}
-        <td>
+
-          <code>{{ shortcut[0] }}-top</code> <small>and</small> <br>
+{% capture custom %}
-          <code>{{ shortcut[0] }}-bottom</code>
+$spacing-shortcuts: ("margin": "mg");
-        </td>
+$spacing-horizontal: "h";
-        <td><code>{{ shortcut[1] }}{{ page.vertical }}</code></td>
+$spacing-vertical: null;
-        {% for value in page.values %}
+$spacing-values: ("small": 10px, "medium": 30px, "large": 60px);
-          <td><code>{{ shortcut[1] }}{{ page.vertical }}-{{ value[0] }}</code></td>
+{% endcapture %}
-        {% endfor %}
+
-      </tr>
+<div class="content">
-    {% endfor %}
+  <p>
-  </tbody>
+    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>.
-</table>
+  </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> as shortcut
+    </li>
+    <li>
+      <strong>vertical</strong> to be ommited
+    </li>
+    <li>
+      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/lib/main.js

@@ -351,36 +351,38 @@ document.addEventListener('DOMContentLoaded', function () {
 
   // Spacing table
 
-  var spacingEl = document.getElementById('spacingTable');
+  var spacingTables = getAll('.bd-spacing-table');
-  var spacingRows = getAll('tbody tr', spacingEl);
-  var spacingCells = getAll('tbody td', spacingEl);
-  var spacingValues = getAll('tfoot th', spacingEl);
 
-  spacingEl.addEventListener('mouseleave', function () {
+  spacingTables.forEach(function (spacingEl) {
-    resetTable();
+    var spacingRows = getAll('tbody tr', spacingEl);
-  });
+    var spacingCells = getAll('tbody td', spacingEl);
+    var spacingValues = getAll('tfoot th', spacingEl);
 
-  spacingCells.forEach(function (el) {
+    spacingEl.addEventListener('mouseleave', function () {
-    el.addEventListener('mouseenter', function () {
+      resetTable(spacingCells, spacingValues);
-      resetTable();
+    });
-      var row = Array.prototype.indexOf.call(el.parentNode.parentNode.children, el.parentNode);
+
-      var column = Array.prototype.indexOf.call(el.parentNode.children, el);
+    spacingCells.forEach(function (el) {
-      highlightRowAndColumn(row, column);
+      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() {
+  function resetTable(cells, values) {
-    // spacingRows.forEach(el => el.classList.remove('bd-current-row'));
+    cells.forEach(function (el) {
-    spacingCells.forEach(function (el) {
       return el.classList.remove('bd-current-row', 'bd-current-column');
     });
-    spacingValues.forEach(function (el) {
+    values.forEach(function (el) {
       return el.classList.remove('bd-current-value');
     });
   }
 
-  function highlightRowAndColumn(rowIndex, columnIndex) {
+  function highlightRowAndColumn(rowIndex, columnIndex, rows, values) {
-    var row = spacingRows[rowIndex];
+    var row = rows[rowIndex];
     var i = columnIndex;
 
     while (i > -1) {
@@ -388,7 +390,7 @@ document.addEventListener('DOMContentLoaded', function () {
       i--;
     }
 
-    var nextRows = spacingRows.slice(rowIndex);
+    var nextRows = rows.slice(rowIndex);
     nextRows.forEach(function (r) {
       r.children[columnIndex].classList.add('bd-current-column');
     });
@@ -396,7 +398,7 @@ document.addEventListener('DOMContentLoaded', function () {
     if (columnIndex < 2) {
       return;
     }
-    spacingValues[columnIndex - 1].classList.add('bd-current-value');
+    values[columnIndex - 1].classList.add('bd-current-value');
   }
 
   // Scroll