Customizing spacing helpers output

diff --git a/docs/_includes/components/spacing-table.html b/docs/_includes/components/spacing-table.html
new file mode 100644 (file)
index 0000000..dcc5b93
--- /dev/null
+++ b/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>

diff --git a/docs/_includes/index/customize.html b/docs/_includes/index/customize.html
index 29160118234d5a466e62788a57be6c6209a01123..208e285b306e5a7d0f95a097956c0f7ace743573 100644 (file)
--- a/docs/_includes/index/customize.html
+++ b/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>

diff --git a/docs/_javascript/main.js b/docs/_javascript/main.js
index fa31bec9c027ca950c2040a3f141f6e65cc7dd7d..a001e2240120daa03da59a4b17987b3db331f724 100644 (file)
--- a/docs/_javascript/main.js
+++ b/docs/_javascript/main.js
@@ -347,32 +347,34 @@ 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);
+  const spacingTables = getAll('.bd-spacing-table');
 
-  spacingEl.addEventListener('mouseleave', () => {
-    resetTable();
-  });
+  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();
-      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);
+    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() {
-    // spacingRows.forEach(el => el.classList.remove('bd-current-row'));
-    spacingCells.forEach(el => el.classList.remove('bd-current-row', 'bd-current-column'));
-    spacingValues.forEach(el => el.classList.remove('bd-current-value'));
+  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) {
-    const row = spacingRows[rowIndex];
+  function highlightRowAndColumn(rowIndex, columnIndex, rows, values) {
+    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

diff --git a/docs/_sass/specific.sass b/docs/_sass/specific.sass
index 322ff1844c228796a80e0d0bac9d789b57bada14..1f55467b5548e64e99997bbe00fc96ebfe1203f7 100644 (file)
--- a/docs/_sass/specific.sass
+++ b/docs/_sass/specific.sass
@@ -1,4 +1,4 @@
-#spacingTable
+.bd-spacing-table
   &:hover
     color: $border
     code

diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 8a8d4951149237d519e84dfd8d8add05bdca6226..bc5bdfdaec379793043ac16d9166d3e1df742210 100644 (file)
--- a/docs/css/bulma-docs.css
+++ b/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;
 }

diff --git a/docs/documentation/helpers/spacing-helpers.html b/docs/documentation/helpers/spacing-helpers.html
index cd7078cf4017b95cb1ab81798fec51b044538572..9d09573b66f367092c13926cf0655195bdff1703 100644 (file)
--- a/docs/documentation/helpers/spacing-helpers.html
+++ b/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">
-  <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>
+<p>
+  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
+%}
+
+{% 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> 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>

diff --git a/docs/lib/main.js b/docs/lib/main.js
index 5b47259ae96adf1accc141812d1e8e030319d847..bb41995cb4ba95422510aa575a4ae8bfec5e37e6 100644 (file)
--- a/docs/lib/main.js
+++ b/docs/lib/main.js
@@ -351,36 +351,38 @@ 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);
+  var spacingTables = getAll('.bd-spacing-table');
 
-  spacingEl.addEventListener('mouseleave', function () {
-    resetTable();
-  });
+  spacingTables.forEach(function (spacingEl) {
+    var spacingRows = getAll('tbody tr', spacingEl);
+    var spacingCells = getAll('tbody td', spacingEl);
+    var spacingValues = getAll('tfoot th', spacingEl);
 
-  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);
+    spacingEl.addEventListener('mouseleave', function () {
+      resetTable(spacingCells, spacingValues);
     });
-  });
 
-  function resetTable() {
-    // spacingRows.forEach(el => el.classList.remove('bd-current-row'));
     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');
     });
-    spacingValues.forEach(function (el) {
+    values.forEach(function (el) {
       return el.classList.remove('bd-current-value');
     });
   }
 
-  function highlightRowAndColumn(rowIndex, columnIndex) {
-    var row = spacingRows[rowIndex];
+  function highlightRowAndColumn(rowIndex, columnIndex, rows, values) {
+    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