mirror of
https://github.com/jgthms/bulma
synced 2026-03-15 02:04:29 -07:00
Highlight rows and columns
This commit is contained in:
Jeremy Thomas
56
docs/documentation/helpers/other-helpers.html
Normal file
56
docs/documentation/helpers/other-helpers.html
Normal file
@@ -0,0 +1,56 @@
|
||||
---
|
||||
title: Other helpers
|
||||
layout: documentation
|
||||
doc-tab: helpers
|
||||
doc-subtab: helpers-other
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- helpers
|
||||
- helpers-other
|
||||
---
|
||||
|
||||
<p class="block">
|
||||
Here are some other helpers shipped with Bulma:
|
||||
</p>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>is-clearfix</code></td>
|
||||
<td>Fixes an element's floating children</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-pulled-left</code></td>
|
||||
<td>Moves an element to the <strong>left</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-pulled-right</code></td>
|
||||
<td>Moves an element to the <strong>right</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-overlay</code></td>
|
||||
<td>Completely <strong>covers</strong> the first positioned parent</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-clipped</code></td>
|
||||
<td>Adds overflow <strong>hidden</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-radiusless</code></td>
|
||||
<td>Removes any <strong>radius</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-shadowless</code></td>
|
||||
<td>Removes any <strong>shadow</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-unselectable</code></td>
|
||||
<td>Prevents the text from being <strong>selectable</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-relative</code></td>
|
||||
<td>Applies <code>position: relative</code> to the element.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -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>
|
||||
|
||||
@@ -37,20 +37,20 @@ breadcrumb:
|
||||
{% endcapture %}
|
||||
|
||||
{% capture size1 %}
|
||||
<td class="is-narrow">
|
||||
<p class="notification is-primary"><code>{{ initial_vars['$size-1'].value }}</code></p>
|
||||
<td class="is-narrow has-background-danger-light">
|
||||
<code class="has-background-danger-light">{{ initial_vars['$size-1'].value }}</code>
|
||||
</td>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture unchanged %}
|
||||
<td class="is-narrow">
|
||||
<p class="notification">unchanged</p>
|
||||
<td class="is-narrow has-text-grey-light">
|
||||
unchanged
|
||||
</td>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture left %}
|
||||
<td class="is-narrow">
|
||||
<p class="notification is-primary">left-aligned</p>
|
||||
<td class="is-narrow has-background-primary-light has-text-primary">
|
||||
left-aligned
|
||||
</td>
|
||||
{% endcapture %}
|
||||
|
||||
@@ -77,7 +77,6 @@ breadcrumb:
|
||||
{% for size in sizes %}
|
||||
<tr>
|
||||
{% assign key = '$size-' | append: forloop.index %}
|
||||
|
||||
<td><code>is-size-{{ forloop.index }}</code></td>
|
||||
<td><code>{{ initial_vars[key].value }}</code></td>
|
||||
</tr>
|
||||
@@ -96,63 +95,61 @@ breadcrumb:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="table-container">
|
||||
<table class="table is-bordered">
|
||||
{{ thead }}
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>is-size-1-mobile</code></td>
|
||||
{{ size1 }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-size-1-tablet</code></td>
|
||||
{{ unchanged }}
|
||||
{{ size1 }}
|
||||
{{ size1 }}
|
||||
{{ size1 }}
|
||||
{{ size1 }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-size-1-touch</code></td>
|
||||
{{ size1 }}
|
||||
{{ size1 }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-size-1-desktop</code></td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ size1 }}
|
||||
{{ size1 }}
|
||||
{{ size1 }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-size-1-widescreen</code></td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ size1 }}
|
||||
{{ size1 }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-size-1-fullhd</code></td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ size1 }}
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<table class="table is-bordered">
|
||||
{{ thead }}
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="is-narrow"><code>is-size-1-mobile</code></td>
|
||||
{{ size1 }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow"><code>is-size-1-touch</code></td>
|
||||
{{ size1 }}
|
||||
{{ size1 }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow"><code>is-size-1-tablet</code></td>
|
||||
{{ unchanged }}
|
||||
{{ size1 }}
|
||||
{{ size1 }}
|
||||
{{ size1 }}
|
||||
{{ size1 }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow"><code>is-size-1-desktop</code></td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ size1 }}
|
||||
{{ size1 }}
|
||||
{{ size1 }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow"><code>is-size-1-widescreen</code></td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ size1 }}
|
||||
{{ size1 }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow"><code>is-size-1-fullhd</code></td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ size1 }}
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
@@ -203,7 +200,7 @@ breadcrumb:
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can now <strong>align text</strong> for <em>each</em> viewport width. You simply need to append the <strong>viewport width</strong> to the alignment modifier.
|
||||
You can <strong>align text</strong> differently for each <strong>viewport width</strong>. Simply append the <strong>viewport width</strong> to the alignment modifier.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
@@ -211,87 +208,91 @@ breadcrumb:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<table class="table is-bordered">
|
||||
{{ thead }}
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="is-narrow"><code>has-text-left-mobile</code></td>
|
||||
{{ left }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow"><code>has-text-left-touch</code></td>
|
||||
{{ left }}
|
||||
{{ left }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow"><code>has-text-left-tablet-only</code></td>
|
||||
{{ unchanged }}
|
||||
{{ left }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow"><code>has-text-left-tablet</code></td>
|
||||
{{ unchanged }}
|
||||
{{ left }}
|
||||
{{ left }}
|
||||
{{ left }}
|
||||
{{ left }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow"><code>has-text-left-desktop-only</code></td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ left }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow"><code>has-text-left-desktop</code></td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ left }}
|
||||
{{ left }}
|
||||
{{ left }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow"><code>has-text-left-widescreen-only</code></td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ left }}
|
||||
{{ unchanged }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow"><code>has-text-left-widescreen</code></td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ left }}
|
||||
{{ left }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow"><code>has-text-left-fullhd</code></td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ left }}
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<table class="table is-bordered">
|
||||
{{ thead }}
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>has-text-left-mobile</code></td>
|
||||
{{ left }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-left-tablet</code></td>
|
||||
{{ unchanged }}
|
||||
{{ left }}
|
||||
{{ left }}
|
||||
{{ left }}
|
||||
{{ left }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-left-tablet-only</code></td>
|
||||
{{ unchanged }}
|
||||
{{ left }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-left-touch</code></td>
|
||||
{{ left }}
|
||||
{{ left }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-left-desktop</code></td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ left }}
|
||||
{{ left }}
|
||||
{{ left }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-left-desktop-only</code></td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ left }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-left-widescreen</code></td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ left }}
|
||||
{{ left }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-left-widescreen-only</code></td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ left }}
|
||||
{{ unchanged }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-left-fullhd</code></td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ left }}
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can use the same logic for each of the <strong>4 alignments</strong>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Text transformation" %}
|
||||
|
||||
|
||||
@@ -34,26 +34,26 @@ breadcrumb:
|
||||
{% endcapture %}
|
||||
|
||||
{% capture flex %}
|
||||
<td class="is-narrow has-background-primary-light">
|
||||
<p><strong class="has-text-primary">Flex</strong></p>
|
||||
<td class="is-narrow has-text-primary has-background-primary-light">
|
||||
Flex
|
||||
</td>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture visible %}
|
||||
<td class="is-narrow has-background-primary-light">
|
||||
<p><strong class="has-text-primary">Visible</strong></p>
|
||||
<td class="is-narrow has-text-success has-background-success-light">
|
||||
Visible
|
||||
</td>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture hidden %}
|
||||
<td class="is-narrow">
|
||||
<p class="has-text-grey-light">Hidden</p>
|
||||
<td class="is-narrow has-text-danger has-background-danger-light">
|
||||
Hidden
|
||||
</td>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture unchanged %}
|
||||
<td class="is-narrow">
|
||||
<p class="has-text-grey-light">Unchanged</p>
|
||||
<td class="is-narrow has-text-grey-light">
|
||||
Unchanged
|
||||
</td>
|
||||
{% endcapture %}
|
||||
|
||||
@@ -286,3 +286,22 @@ breadcrumb:
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Other visibility helpers" %}
|
||||
|
||||
<table class="table is-bordered">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>is-invisible</code></td>
|
||||
<td>Adds visibility <strong>hidden</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-hidden</code></td>
|
||||
<td>Hides element</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-sr-only</code></td>
|
||||
<td>Hide elements <strong>visually</strong> but keep the element available to be announced by a <strong>screen reader</strong></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
Reference in New Issue
Block a user