library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-12-12 13:28:30 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Customizing spacing helpers output

Browse Source
This commit is contained in:
Jeremy Thomas 2020-05-11 01:03:16 +01:00
parent ce2c9a2412
commit 1d70a304cf
7 changed files with 181 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
docs/_includes/components/spacing-table.html Normal file
View File

@ -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>

3
docs/_includes/index/customize.html
View File

@ -98,7 +98,6 @@
</div> </div>
{% include components/hero-buttons.html href=customize_link.path {% 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> </div>
</section> </section>

26
docs/_javascript/main.js
View File

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

2
docs/_sass/specific.sass
View File

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

20
docs/css/bulma-docs.css
View File

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

119
docs/documentation/helpers/spacing-helpers.html
View File

@ -26,6 +26,13 @@ values:
4: 1rem 4: 1rem
5: 1.5rem 5: 1.5rem
6: 3rem 6: 3rem
customShortcuts:
margin: mg
customHorizontal: h
customValues:
small: 10px
medium: 30px
large: 60px
--- ---
{% include elements/new-tag.html version="0.9.0" %} {% include elements/new-tag.html version="0.9.0" %}
@ -87,55 +94,67 @@ values:
{% include elements/anchor.html name="List of all spacing helpers" %} {% 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>

26
docs/lib/main.js
View File

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