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>
{% 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>

44
docs/_javascript/main.js
View File

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

2
docs/_sass/specific.sass
View File

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

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

@ -13224,48 +13224,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;
}

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

@ -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 %}
<p>
There are <strong>84 spacing helpers</strong> to choose from:
</p>
<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>
{% include
components/spacing-table.html
values=page.values
shortcuts=page.shortcuts
directions=page.directions
horizontal=page.horizontal
vertical=page.vertical
%}
<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>
{% 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>

44
docs/lib/main.js
View File

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