Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-20 12:24:28 -07:00
Code Issues Packages Projects Releases Wiki Activity

Highlight rows and columns

Browse Source
This commit is contained in:
Jeremy Thomas
2020-05-11 00:25:29 +01:00
parent 7224fc260c
commit f79d8c09e2
13 changed files with 677 additions and 1088 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,6 +8,134 @@ breadcrumb:
- documentation
- helpers
- helpers-spacing
shortcuts:
margin: m
padding: p
directions:
top: t
right: r
bottom: b
left: l
horizontal: x
vertical: y
values:
0: 0
1: 0.25rem
2: 0.5rem
3: 0.75rem
4: 1rem
5: 1.5rem
6: 3rem
---
{% include elements/anchor.html name="Text spacing" %}
{% include elements/new-tag.html version="0.9.0" %}
<div class="content">
<p>Bulma provides you <strong>margin</strong> <code>m*</code> and <strong>padding</strong> <code>p*</code> helpers in all <strong>directions</strong>:</p>
<ul>
<li>
<code>*t</code> for <strong>top</strong>
</li>
<li>
<code>*r</code> for <strong>right</strong>
</li>
<li>
<code>*b</code> for <strong>bottom</strong>
</li>
<li>
<code>*l</code> for <strong>left</strong>
</li>
<li>
<code>*x</code> horizontally for both <strong>left</strong> and <strong>right</strong>
</li>
<li>
<code>*y</code> vertically for both <strong>top</strong> and <strong>bottom</strong>
</li>
</ul>
<p>
You can <strong>combine</strong> a margin/padding prefix with a direciton suffix. For example:
</p>
<ul>
<li>for a <code>margin-top</code>, use <code>mt-*</code></li>
<li>for a <code>padding-bottom</code>, use <code>pb-*</code></li>
<li>for both <code>margin-left</code> and <code>margin-right</code>, use <code>mx-*</code></li>
</ul>
<p>
Each of these <code>property-direction</code> <strong>combinations</strong> needs to be appended with one of <strong>6 value suffixes</strong>:
</p>
</div>
<table class="table is-bordered">
<thead>
<th>Suffix</th>
<th>Value</th>
</thead>
<tbody>
<tr><td><code>*-0</code></td><td><code>0</code></td></tr>
<tr><td><code>*-1</code></td><td><code>0.25rem</code></td></tr>
<tr><td><code>*-2</code></td><td><code>0.5rem</code></td></tr>
<tr><td><code>*-3</code></td><td><code>0.75rem</code></td></tr>
<tr><td><code>*-4</code></td><td><code>1rem</code></td></tr>
<tr><td><code>*-5</code></td><td><code>1.5rem</code></td></tr>
<tr><td><code>*-6</code></td><td><code>3rem</code></td></tr>
</tbody>
</table>
{% 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>