From 1ccf1c974145160150a7d1e15b5756b2ab22e345 Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Mon, 11 May 2020 01:03:16 +0100 Subject: [PATCH] Customizing spacing helpers output --- docs/_includes/components/spacing-table.html | 54 ++++++++ docs/_includes/index/customize.html | 3 +- docs/_javascript/main.js | 44 +++---- docs/_sass/specific.sass | 2 +- docs/css/bulma-docs.css | 20 +-- .../helpers/spacing-helpers.html | 119 ++++++++++-------- docs/lib/main.js | 44 +++---- 7 files changed, 181 insertions(+), 105 deletions(-) create mode 100644 docs/_includes/components/spacing-table.html diff --git a/docs/_includes/components/spacing-table.html b/docs/_includes/components/spacing-table.html new file mode 100644 index 00000000..dcc5b937 --- /dev/null +++ b/docs/_includes/components/spacing-table.html @@ -0,0 +1,54 @@ + + + + + + + + + + + + {% for value in include.values %} + + {% endfor %} + + + + {% for shortcut in include.shortcuts %} + {% for direction in include.directions %} + + + + {% for value in include.values %} + + {% endfor %} + + {% endfor %} + + + + + {% for value in include.values %} + + {% endfor %} + + + {% if include.vertical %} + + + + {% for value in include.values %} + + {% endfor %} + + {% endif %} + {% endfor %} + +
PropertyShortcutClasses ↓
Values →{{ value[1] }}
{{ shortcut[0] }}-{{ direction[0] }}{{ shortcut[1] }}{{ direction[1] }}{{ shortcut[1] }}{{ direction[1] }}-{{ value[0] }}
+ {{ shortcut[0] }}-left and
+ {{ shortcut[0] }}-right + 		{{ shortcut[1] }}{{ include.horizontal }}{{ shortcut[1] }}{{ include.horizontal }}-{{ value[0] }}
+ {{ shortcut[0] }}-top and
+ {{ shortcut[0] }}-bottom + 		{{ shortcut[1] }}{{ include.vertical }}{{ shortcut[1] }}{{ include.vertical }}-{{ value[0] }}
diff --git a/docs/_includes/index/customize.html b/docs/_includes/index/customize.html index 29160118..208e285b 100644 --- a/docs/_includes/index/customize.html +++ b/docs/_includes/index/customize.html @@ -98,7 +98,6 @@ {% include components/hero-buttons.html href=customize_link.path - content="Learn how to customize" %} + content="Learn how to customize" %} diff --git a/docs/_javascript/main.js b/docs/_javascript/main.js index fa31bec9..a001e224 100644 --- 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); - 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); + 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() { - // 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 322ff184..1f55467b 100644 --- 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 8a8d4951..bc5bdfda 100644 --- 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 cd7078cf..9d09573b 100644 --- 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" %} - - - - - - - - - - - - {% for value in page.values %} - - {% endfor %} - - - - {% for shortcut in page.shortcuts %} - {% for direction in page.directions %} - - - - {% for value in page.values %} - - {% endfor %} - - {% endfor %} +

+ There are 84 spacing helpers to choose from: +

- - - - {% for value in page.values %} - - {% endfor %} - +{% include + components/spacing-table.html + values=page.values + shortcuts=page.shortcuts + directions=page.directions + horizontal=page.horizontal + vertical=page.vertical +%} - - - - {% for value in page.values %} - - {% endfor %} - - {% endfor %} - -
PropertyShortcutClasses ↓
Values →{{ value[1] }}
{{ shortcut[0] }}-{{ direction[0] }}{{ shortcut[1] }}{{ direction[1] }}{{ shortcut[1] }}{{ direction[1] }}-{{ value[0] }}
- {{ shortcut[0] }}-left and
- {{ shortcut[0] }}-right - 		{{ shortcut[1] }}{{ page.horizontal }}{{ shortcut[1] }}{{ page.horizontal }}-{{ value[0] }}
- {{ shortcut[0] }}-top and
- {{ shortcut[0] }}-bottom - 		{{ shortcut[1] }}{{ page.vertical }}{{ shortcut[1] }}{{ page.vertical }}-{{ value[0] }}
+{% 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 %} + +
+

+ Because every developer has their own preferences, and to satisfy Bulma's customization features, it's possible to specify your own class name shortcuts as well as the spacing values. +

+

+ For example, if you wanted: +

+ +

+ You can simplify the CSS output by customizing these SCSS variables: +

+
+ +{% highlight scss %}{{ custom }}{% endhighlight %} + +{% include + components/spacing-table.html + values=page.customValues + shortcuts=page.customShortcuts + directions=page.directions + horizontal=page.customHorizontal +%} + +

+ By customizing the output, you've narrowed down the list of spacing helpers from 84 to only 15. +

diff --git a/docs/lib/main.js b/docs/lib/main.js index 5b47259a..bb41995c 100644 --- 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); + }); + + 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() { - // spacingRows.forEach(el => el.classList.remove('bd-current-row')); - spacingCells.forEach(function (el) { + 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