mirror of
https://github.com/jgthms/bulma
synced 2026-03-15 02:04:29 -07:00
Init v1
This commit is contained in:
Jeremy Thomas
@@ -1,201 +1,404 @@
|
||||
---
|
||||
title: Color helpers
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: helpers
|
||||
doc-tab: helpers
|
||||
doc-subtab: helpers-color
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- helpers
|
||||
- helpers-color
|
||||
- home
|
||||
- documentation
|
||||
- helpers
|
||||
- helpers-color
|
||||
---
|
||||
|
||||
{% include elements/anchor.html name="Text color" %}
|
||||
{% include docs/elements/anchor.html name="Text color" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can set any element to one of the <strong>10 colors</strong> or <strong>9 shades of grey</strong>:
|
||||
You can set any element to one of the <strong>10 colors</strong> or
|
||||
<strong>9 shades of grey</strong>:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Class
|
||||
</th>
|
||||
<th>
|
||||
Color
|
||||
</th>
|
||||
<th>
|
||||
Example
|
||||
</th>
|
||||
<th>Class</th>
|
||||
<th>Color</th>
|
||||
<th>Example</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><code>has-text-white</code></td><td>{% include color/white.html %}</td><td class="has-text-white has-background-black">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-black</code></td><td>{% include color/black.html %}</td><td class="has-text-black">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-light</code></td><td>{% include color/white-ter.html %}</td><td class="has-text-light has-background-grey">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-dark</code></td><td>{% include color/grey-darker.html %}</td><td class="has-text-dark">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-primary</code></td><td>{% include color/turquoise.html %}</td><td class="has-text-primary">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-link</code></td><td>{% include color/blue.html %}</td><td class="has-text-link">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-info</code></td><td>{% include color/cyan.html %}</td><td class="has-text-info">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-success</code></td><td>{% include color/green.html %}</td><td class="has-text-success">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-warning</code></td><td>{% include color/yellow.html %}</td><td class="has-text-warning">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-danger</code></td><td>{% include color/red.html %}</td><td class="has-text-danger">Hello Bulma</td></tr>
|
||||
<tr>
|
||||
<td><code>has-text-white</code></td>
|
||||
<td>{% include docs/color/white.html %}</td>
|
||||
<td class="has-text-white has-background-black">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-black</code></td>
|
||||
<td>{% include docs/color/black.html %}</td>
|
||||
<td class="has-text-black">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-light</code></td>
|
||||
<td>{% include docs/color/white-ter.html %}</td>
|
||||
<td class="has-text-light has-background-grey">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-dark</code></td>
|
||||
<td>{% include docs/color/grey-darker.html %}</td>
|
||||
<td class="has-text-dark">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-primary</code></td>
|
||||
<td>{% include docs/color/turquoise.html %}</td>
|
||||
<td class="has-text-primary">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-link</code></td>
|
||||
<td>{% include docs/color/blue.html %}</td>
|
||||
<td class="has-text-link">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-info</code></td>
|
||||
<td>{% include docs/color/cyan.html %}</td>
|
||||
<td class="has-text-info">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-success</code></td>
|
||||
<td>{% include docs/color/green.html %}</td>
|
||||
<td class="has-text-success">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-warning</code></td>
|
||||
<td>{% include docs/color/yellow.html %}</td>
|
||||
<td class="has-text-warning">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-danger</code></td>
|
||||
<td>{% include docs/color/red.html %}</td>
|
||||
<td class="has-text-danger">Hello Bulma</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Class
|
||||
</th>
|
||||
<th>
|
||||
Shade
|
||||
</th>
|
||||
<th>
|
||||
Example
|
||||
</th>
|
||||
<th>Class</th>
|
||||
<th>Shade</th>
|
||||
<th>Example</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><code>has-text-black-bis</code></td><td>{% include color/black-bis.html %}</td><td class="has-text-black-bis">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-black-ter</code></td><td>{% include color/black-ter.html %}</td><td class="has-text-black-ter">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-grey-darker</code></td><td>{% include color/grey-darker.html %}</td><td class="has-text-grey-darker">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-grey-dark</code></td><td>{% include color/grey-dark.html %}</td><td class="has-text-grey-dark">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-grey</code></td><td>{% include color/grey.html %}</td><td class="has-text-grey">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-grey-light</code></td><td>{% include color/grey-light.html %}</td><td class="has-text-grey-light">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-grey-lighter</code></td><td>{% include color/grey-lighter.html %}</td><td class="has-text-grey-lighter">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-white-ter</code></td><td>{% include color/white-ter.html %}</td><td class="has-background-black-ter has-text-white-ter">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-white-bis</code></td><td>{% include color/white-bis.html %}</td><td class="has-background-black-bis has-text-white-bis">Hello Bulma</td></tr>
|
||||
<tr>
|
||||
<td><code>has-text-black-bis</code></td>
|
||||
<td>{% include docs/color/black-bis.html %}</td>
|
||||
<td class="has-text-black-bis">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-black-ter</code></td>
|
||||
<td>{% include docs/color/black-ter.html %}</td>
|
||||
<td class="has-text-black-ter">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-grey-darker</code></td>
|
||||
<td>{% include docs/color/grey-darker.html %}</td>
|
||||
<td class="has-text-grey-darker">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-grey-dark</code></td>
|
||||
<td>{% include docs/color/grey-dark.html %}</td>
|
||||
<td class="has-text-grey-dark">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-grey</code></td>
|
||||
<td>{% include docs/color/grey.html %}</td>
|
||||
<td class="has-text-grey">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-grey-light</code></td>
|
||||
<td>{% include docs/color/grey-light.html %}</td>
|
||||
<td class="has-text-grey-light">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-grey-lighter</code></td>
|
||||
<td>{% include docs/color/grey-lighter.html %}</td>
|
||||
<td class="has-text-grey-lighter">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-white-ter</code></td>
|
||||
<td>{% include docs/color/white-ter.html %}</td>
|
||||
<td class="has-background-black-ter has-text-white-ter">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-white-bis</code></td>
|
||||
<td>{% include docs/color/white-bis.html %}</td>
|
||||
<td class="has-background-black-bis has-text-white-bis">Hello Bulma</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% include elements/new-tag.html version="0.9.0" %}
|
||||
|
||||
<p class="block">You can use each color in their <strong>light</strong> and <strong>dark versions</strong>. Simply append <code>*-light</code> or <code>*-dark</code>.</p>
|
||||
<p class="block">
|
||||
You can use each color in their <strong>light</strong> and
|
||||
<strong>dark versions</strong>. Simply append <code>*-light</code> or
|
||||
<code>*-dark</code>.
|
||||
</p>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Class
|
||||
</th>
|
||||
<th>
|
||||
Light/Dark color
|
||||
</th>
|
||||
<th>
|
||||
Example
|
||||
</th>
|
||||
<th>Class</th>
|
||||
<th>Light/Dark color</th>
|
||||
<th>Example</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><code>has-text-primary-light</code></td><td>{% include color/turquoise-light.html %}</td><td class="has-background-dark has-text-primary-light">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-link-light</code></td><td>{% include color/blue-light.html %}</td><td class="has-background-dark has-text-link-light">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-info-light</code></td><td>{% include color/cyan-light.html %}</td><td class="has-background-dark has-text-info-light">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-success-light</code></td><td>{% include color/green-light.html %}</td><td class="has-background-dark has-text-success-light">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-warning-light</code></td><td>{% include color/yellow-light.html %}</td><td class="has-background-dark has-text-warning-light">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-danger-light</code></td><td>{% include color/red-light.html %}</td><td class="has-background-dark has-text-danger-light">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-primary-dark</code></td><td>{% include color/turquoise-dark.html %}</td><td class="has-text-primary-dark">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-link-dark</code></td><td>{% include color/blue-dark.html %}</td><td class="has-text-link-dark">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-info-dark</code></td><td>{% include color/cyan-dark.html %}</td><td class="has-text-info-dark">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-success-dark</code></td><td>{% include color/green-dark.html %}</td><td class="has-text-success-dark">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-warning-dark</code></td><td>{% include color/yellow-dark.html %}</td><td class="has-text-warning-dark">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-danger-dark</code></td><td>{% include color/red-dark.html %}</td><td class="has-text-danger-dark">Hello Bulma</td></tr>
|
||||
<tr>
|
||||
<td><code>has-text-primary-light</code></td>
|
||||
<td>{% include docs/color/turquoise-light.html %}</td>
|
||||
<td class="has-background-dark has-text-primary-light">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-link-light</code></td>
|
||||
<td>{% include docs/color/blue-light.html %}</td>
|
||||
<td class="has-background-dark has-text-link-light">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-info-light</code></td>
|
||||
<td>{% include docs/color/cyan-light.html %}</td>
|
||||
<td class="has-background-dark has-text-info-light">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-success-light</code></td>
|
||||
<td>{% include docs/color/green-light.html %}</td>
|
||||
<td class="has-background-dark has-text-success-light">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-warning-light</code></td>
|
||||
<td>{% include docs/color/yellow-light.html %}</td>
|
||||
<td class="has-background-dark has-text-warning-light">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-danger-light</code></td>
|
||||
<td>{% include docs/color/red-light.html %}</td>
|
||||
<td class="has-background-dark has-text-danger-light">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-primary-dark</code></td>
|
||||
<td>{% include docs/color/turquoise-dark.html %}</td>
|
||||
<td class="has-text-primary-dark">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-link-dark</code></td>
|
||||
<td>{% include docs/color/blue-dark.html %}</td>
|
||||
<td class="has-text-link-dark">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-info-dark</code></td>
|
||||
<td>{% include docs/color/cyan-dark.html %}</td>
|
||||
<td class="has-text-info-dark">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-success-dark</code></td>
|
||||
<td>{% include docs/color/green-dark.html %}</td>
|
||||
<td class="has-text-success-dark">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-warning-dark</code></td>
|
||||
<td>{% include docs/color/yellow-dark.html %}</td>
|
||||
<td class="has-text-warning-dark">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-danger-dark</code></td>
|
||||
<td>{% include docs/color/red-dark.html %}</td>
|
||||
<td class="has-text-danger-dark">Hello Bulma</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% assign vernum = site.data.meta.version | downcase | remove: "." | plus: 0 %}
|
||||
|
||||
{% include elements/anchor.html name="Background color" %}
|
||||
{% assign vernum = site.data.meta.version | downcase | remove: '.' | plus: 0 %}
|
||||
{% include docs/elements/anchor.html name="Background color" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can set any element to one of the <strong>10 colors</strong> or <strong>9 shades of grey</strong>:
|
||||
You can set any element to one of the <strong>10 colors</strong> or
|
||||
<strong>9 shades of grey</strong>:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Class
|
||||
</th>
|
||||
<th>
|
||||
Background color
|
||||
</th>
|
||||
<th>Class</th>
|
||||
<th>Background color</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><code>has-background-white</code></td><td>{% include color/white.html %}</td></tr>
|
||||
<tr><td><code>has-background-black</code></td><td>{% include color/black.html %}</td></tr>
|
||||
<tr><td><code>has-background-light</code></td><td>{% include color/white-ter.html %}</td></tr>
|
||||
<tr><td><code>has-background-dark</code></td><td>{% include color/grey-darker.html %}</td></tr>
|
||||
<tr><td><code>has-background-primary</code></td><td>{% include color/turquoise.html %}</td></tr>
|
||||
<tr><td><code>has-background-link</code></td><td>{% include color/blue.html %}</td></tr>
|
||||
<tr><td><code>has-background-info</code></td><td>{% include color/cyan.html %}</td></tr>
|
||||
<tr><td><code>has-background-success</code></td><td>{% include color/green.html %}</td></tr>
|
||||
<tr><td><code>has-background-warning</code></td><td>{% include color/yellow.html %}</td></tr>
|
||||
<tr><td><code>has-background-danger</code></td><td>{% include color/red.html %}</td></tr>
|
||||
<tr>
|
||||
<td><code>has-background-white</code></td>
|
||||
<td>{% include docs/color/white.html %}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-black</code></td>
|
||||
<td>{% include docs/color/black.html %}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-light</code></td>
|
||||
<td>{% include docs/color/white-ter.html %}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-dark</code></td>
|
||||
<td>{% include docs/color/grey-darker.html %}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-primary</code></td>
|
||||
<td>{% include docs/color/turquoise.html %}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-link</code></td>
|
||||
<td>{% include docs/color/blue.html %}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-info</code></td>
|
||||
<td>{% include docs/color/cyan.html %}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-success</code></td>
|
||||
<td>{% include docs/color/green.html %}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-warning</code></td>
|
||||
<td>{% include docs/color/yellow.html %}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-danger</code></td>
|
||||
<td>{% include docs/color/red.html %}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Class
|
||||
</th>
|
||||
<th>
|
||||
Background shade
|
||||
</th>
|
||||
<th>Class</th>
|
||||
<th>Background shade</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><code>has-background-black-bis</code></td><td>{% include color/black-bis.html %}</td></tr>
|
||||
<tr><td><code>has-background-black-ter</code></td><td>{% include color/black-ter.html %}</td></tr>
|
||||
<tr><td><code>has-background-grey-darker</code></td><td>{% include color/grey-darker.html %}</td></tr>
|
||||
<tr><td><code>has-background-grey-dark</code></td><td>{% include color/grey-dark.html %}</td></tr>
|
||||
<tr><td><code>has-background-grey</code></td><td>{% include color/grey.html %}</td></tr>
|
||||
<tr><td><code>has-background-grey-light</code></td><td>{% include color/grey-light.html %}</td></tr>
|
||||
<tr><td><code>has-background-grey-lighter</code></td><td>{% include color/grey-lighter.html %}</td></tr>
|
||||
<tr><td><code>has-background-white-ter</code></td><td>{% include color/white-ter.html %}</td></tr>
|
||||
<tr><td><code>has-background-white-bis</code></td><td>{% include color/white-bis.html %}</td></tr>
|
||||
<tr>
|
||||
<td><code>has-background-black-bis</code></td>
|
||||
<td>{% include docs/color/black-bis.html %}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-black-ter</code></td>
|
||||
<td>{% include docs/color/black-ter.html %}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-grey-darker</code></td>
|
||||
<td>{% include docs/color/grey-darker.html %}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-grey-dark</code></td>
|
||||
<td>{% include docs/color/grey-dark.html %}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-grey</code></td>
|
||||
<td>{% include docs/color/grey.html %}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-grey-light</code></td>
|
||||
<td>{% include docs/color/grey-light.html %}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-grey-lighter</code></td>
|
||||
<td>{% include docs/color/grey-lighter.html %}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-white-ter</code></td>
|
||||
<td>{% include docs/color/white-ter.html %}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-white-bis</code></td>
|
||||
<td>{% include docs/color/white-bis.html %}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% include elements/new-tag.html version="0.9.0" %}
|
||||
|
||||
<p class="block">You can use each color in their <strong>light</strong> and <strong>dark versions</strong>. Simply append <code>*-light</code> or <code>*-dark</code>.</p>
|
||||
<p class="block">
|
||||
You can use each color in their <strong>light</strong> and
|
||||
<strong>dark versions</strong>. Simply append <code>*-light</code> or
|
||||
<code>*-dark</code>.
|
||||
</p>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Class
|
||||
</th>
|
||||
<th>
|
||||
Light/Dark background
|
||||
</th>
|
||||
<th>
|
||||
Example
|
||||
</th>
|
||||
<th>Class</th>
|
||||
<th>Light/Dark background</th>
|
||||
<th>Example</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><code>has-background-primary-light</code></td><td>{% include color/turquoise-light.html %}</td><td class="has-text-primary has-background-primary-light">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-background-link-light</code></td><td>{% include color/blue-light.html %}</td><td class="has-text-link has-background-link-light">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-background-info-light</code></td><td>{% include color/cyan-light.html %}</td><td class="has-text-info has-background-info-light">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-background-success-light</code></td><td>{% include color/green-light.html %}</td><td class="has-text-success has-background-success-light">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-background-warning-light</code></td><td>{% include color/yellow-light.html %}</td><td class="has-text-warning has-background-warning-light">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-background-danger-light</code></td><td>{% include color/red-light.html %}</td><td class="has-text-danger has-background-danger-light">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-background-primary-dark</code></td><td>{% include color/turquoise-dark.html %}</td><td class="has-text-white has-background-primary-dark">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-background-link-dark</code></td><td>{% include color/blue-dark.html %}</td><td class="has-text-white has-background-link-dark">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-background-info-dark</code></td><td>{% include color/cyan-dark.html %}</td><td class="has-text-white has-background-info-dark">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-background-success-dark</code></td><td>{% include color/green-dark.html %}</td><td class="has-text-white has-background-success-dark">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-background-warning-dark</code></td><td>{% include color/yellow-dark.html %}</td><td class="has-text-white has-background-warning-dark">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-background-danger-dark</code></td><td>{% include color/red-dark.html %}</td><td class="has-text-white has-background-danger-dark">Hello Bulma</td></tr>
|
||||
<tr>
|
||||
<td><code>has-background-primary-light</code></td>
|
||||
<td>{% include docs/color/turquoise-light.html %}</td>
|
||||
<td class="has-text-primary has-background-primary-light">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-link-light</code></td>
|
||||
<td>{% include docs/color/blue-light.html %}</td>
|
||||
<td class="has-text-link has-background-link-light">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-info-light</code></td>
|
||||
<td>{% include docs/color/cyan-light.html %}</td>
|
||||
<td class="has-text-info has-background-info-light">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-success-light</code></td>
|
||||
<td>{% include docs/color/green-light.html %}</td>
|
||||
<td class="has-text-success has-background-success-light">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-warning-light</code></td>
|
||||
<td>{% include docs/color/yellow-light.html %}</td>
|
||||
<td class="has-text-warning has-background-warning-light">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-danger-light</code></td>
|
||||
<td>{% include docs/color/red-light.html %}</td>
|
||||
<td class="has-text-danger has-background-danger-light">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-primary-dark</code></td>
|
||||
<td>{% include docs/color/turquoise-dark.html %}</td>
|
||||
<td class="has-text-white has-background-primary-dark">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-link-dark</code></td>
|
||||
<td>{% include docs/color/blue-dark.html %}</td>
|
||||
<td class="has-text-white has-background-link-dark">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-info-dark</code></td>
|
||||
<td>{% include docs/color/cyan-dark.html %}</td>
|
||||
<td class="has-text-white has-background-info-dark">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-success-dark</code></td>
|
||||
<td>{% include docs/color/green-dark.html %}</td>
|
||||
<td class="has-text-white has-background-success-dark">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-warning-dark</code></td>
|
||||
<td>{% include docs/color/yellow-dark.html %}</td>
|
||||
<td class="has-text-white has-background-warning-dark">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-danger-dark</code></td>
|
||||
<td>{% include docs/color/red-dark.html %}</td>
|
||||
<td class="has-text-white has-background-danger-dark">Hello Bulma</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@@ -1,68 +1,68 @@
|
||||
---
|
||||
title: Flexbox helpers
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: helpers
|
||||
doc-tab: helpers
|
||||
doc-subtab: helpers-flexbox
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- helpers
|
||||
- helpers-flexbox
|
||||
- home
|
||||
- documentation
|
||||
- helpers
|
||||
- helpers-flexbox
|
||||
flex-direction-values:
|
||||
- row
|
||||
- row-reverse
|
||||
- column
|
||||
- column-reverse
|
||||
- row
|
||||
- row-reverse
|
||||
- column
|
||||
- column-reverse
|
||||
flex-wrap-values:
|
||||
- nowrap
|
||||
- wrap
|
||||
- wrap-reverse
|
||||
- nowrap
|
||||
- wrap
|
||||
- wrap-reverse
|
||||
justify-content-values:
|
||||
- flex-start
|
||||
- flex-end
|
||||
- center
|
||||
- space-between
|
||||
- space-around
|
||||
- space-evenly
|
||||
- start
|
||||
- end
|
||||
- left
|
||||
- right
|
||||
- flex-start
|
||||
- flex-end
|
||||
- center
|
||||
- space-between
|
||||
- space-around
|
||||
- space-evenly
|
||||
- start
|
||||
- end
|
||||
- left
|
||||
- right
|
||||
align-content-values:
|
||||
- flex-start
|
||||
- flex-end
|
||||
- center
|
||||
- space-between
|
||||
- space-around
|
||||
- space-evenly
|
||||
- stretch
|
||||
- start
|
||||
- end
|
||||
- baseline
|
||||
- flex-start
|
||||
- flex-end
|
||||
- center
|
||||
- space-between
|
||||
- space-around
|
||||
- space-evenly
|
||||
- stretch
|
||||
- start
|
||||
- end
|
||||
- baseline
|
||||
align-items-values:
|
||||
- stretch
|
||||
- flex-start
|
||||
- flex-end
|
||||
- center
|
||||
- baseline
|
||||
- start
|
||||
- end
|
||||
- self-start
|
||||
- self-end
|
||||
- stretch
|
||||
- flex-start
|
||||
- flex-end
|
||||
- center
|
||||
- baseline
|
||||
- start
|
||||
- end
|
||||
- self-start
|
||||
- self-end
|
||||
align-self-values:
|
||||
- auto
|
||||
- flex-start
|
||||
- flex-end
|
||||
- center
|
||||
- baseline
|
||||
- stretch
|
||||
- auto
|
||||
- flex-start
|
||||
- flex-end
|
||||
- center
|
||||
- baseline
|
||||
- stretch
|
||||
---
|
||||
|
||||
{% include elements/new-tag.html version="0.9.1" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Combined with <code>is-flex</code>, all of the <strong>Flexbox CSS properties</strong> are available as Bulma helpers:
|
||||
Combined with <code>is-flex</code>, all of the
|
||||
<strong>Flexbox CSS properties</strong> are available as Bulma helpers:
|
||||
</p>
|
||||
<ul>
|
||||
<li><code>flex-direction</code></li>
|
||||
@@ -76,31 +76,22 @@ align-self-values:
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Flex direction" %}
|
||||
|
||||
{% include elements/flexbox-helper-table.html property="flex-direction" values=page.flex-direction-values %}
|
||||
|
||||
{% include elements/anchor.html name="Flex wrap" %}
|
||||
|
||||
{% include elements/flexbox-helper-table.html property="flex-wrap" values=page.flex-wrap-values %}
|
||||
|
||||
{% include elements/anchor.html name="Justify content" %}
|
||||
|
||||
{% include elements/flexbox-helper-table.html property="justify-content" values=page.justify-content-values %}
|
||||
|
||||
{% include elements/anchor.html name="Align content" %}
|
||||
|
||||
{% include elements/flexbox-helper-table.html property="align-content" values=page.align-content-values %}
|
||||
|
||||
{% include elements/anchor.html name="Align items" %}
|
||||
|
||||
{% include elements/flexbox-helper-table.html property="align-items" values=page.align-items-values %}
|
||||
|
||||
{% include elements/anchor.html name="Align self" %}
|
||||
|
||||
{% include elements/flexbox-helper-table.html property="align-self" values=page.align-self-values %}
|
||||
|
||||
{% include elements/anchor.html name="Flex grow and flex shrink" %}
|
||||
{% include docs/elements/anchor.html name="Flex direction" %} {% include
|
||||
docs/elements/flexbox-helper-table.html property="flex-direction"
|
||||
values=page.flex-direction-values %} {% include docs/elements/anchor.html
|
||||
name="Flex wrap" %} {% include docs/elements/flexbox-helper-table.html
|
||||
property="flex-wrap" values=page.flex-wrap-values %} {% include
|
||||
docs/elements/anchor.html name="Justify content" %} {% include
|
||||
docs/elements/flexbox-helper-table.html property="justify-content"
|
||||
values=page.justify-content-values %} {% include docs/elements/anchor.html
|
||||
name="Align content" %} {% include docs/elements/flexbox-helper-table.html
|
||||
property="align-content" values=page.align-content-values %} {% include
|
||||
docs/elements/anchor.html name="Align items" %} {% include
|
||||
docs/elements/flexbox-helper-table.html property="align-items"
|
||||
values=page.align-items-values %} {% include docs/elements/anchor.html
|
||||
name="Align self" %} {% include docs/elements/flexbox-helper-table.html
|
||||
property="align-self" values=page.align-self-values %} {% include
|
||||
docs/elements/anchor.html name="Flex grow and flex shrink" %}
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
@@ -114,20 +105,27 @@ align-self-values:
|
||||
<th colspan="2">Grow</th>
|
||||
</tr>
|
||||
{% for i in (0..5) %}
|
||||
<tr>
|
||||
<td><code>is-flex-grow-{{ i }}</code></td>
|
||||
<td><code>flex-grow: {{ i }}</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>is-flex-grow-{{ i }}</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>flex-grow: {{ i }}</code>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
<tr>
|
||||
<th colspan="2">Shrink</th>
|
||||
</tr>
|
||||
{% for i in (0..5) %}
|
||||
<tr>
|
||||
<td><code>is-flex-shrink-{{ i }}</code></td>
|
||||
<td><code>flex-shrink: {{ i }}</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>is-flex-shrink-{{ i }}</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>flex-shrink: {{ i }}</code>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
@@ -1,18 +1,17 @@
|
||||
---
|
||||
title: Other helpers
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: helpers
|
||||
doc-tab: helpers
|
||||
doc-subtab: helpers-other
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- helpers
|
||||
- helpers-other
|
||||
- home
|
||||
- documentation
|
||||
- helpers
|
||||
- helpers-other
|
||||
---
|
||||
|
||||
<p class="block">
|
||||
Here are some other helpers shipped with Bulma:
|
||||
</p>
|
||||
<p class="block">Here are some other helpers shipped with Bulma:</p>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<tbody>
|
||||
|
||||
89
docs/documentation/helpers/palette-helpers.html
Normal file
89
docs/documentation/helpers/palette-helpers.html
Normal file
@@ -0,0 +1,89 @@
|
||||
---
|
||||
title: Color Palette helpers
|
||||
layout: docs
|
||||
theme: helpers
|
||||
doc-tab: helpers
|
||||
doc-subtab: helpers-palette
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- helpers
|
||||
- helpers-palette
|
||||
---
|
||||
|
||||
<p class="block">Bulma comes with 7 primary colors:</p>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<tr><td><code>text</code></td><td><span class="bd-color-swatch" style="--background: var(--bulma-text);"></span></td></tr>
|
||||
<tr><td><code>link</code></td><td><span class="bd-color-swatch" style="--background: var(--bulma-link);"></span></td></tr>
|
||||
<tr><td><code>primary</code></td><td><span class="bd-color-swatch" style="--background: var(--bulma-primary);"></span></td></tr>
|
||||
<tr><td><code>info</code></td><td><span class="bd-color-swatch" style="--background: var(--bulma-info);"></span></td></tr>
|
||||
<tr><td><code>success</code></td><td><span class="bd-color-swatch" style="--background: var(--bulma-success);"></span></td></tr>
|
||||
<tr><td><code>warning</code></td><td><span class="bd-color-swatch" style="--background: var(--bulma-warning);"></span></td></tr>
|
||||
<tr><td><code>danger</code></td><td><span class="bd-color-swatch" style="--background: var(--bulma-danger);"></span></td></tr>
|
||||
</table>
|
||||
|
||||
<p class="block">Bulma will automatically <strong>generate a collection of shades</strong> for each of those colors. These act as a <strong>color palette</strong> you can use to play with different variants of a same color.</p>
|
||||
|
||||
{% include docs/elements/anchor.html name="Text color" %}
|
||||
|
||||
<div class="content">
|
||||
Bulma comes with CSS classes for <strong>27 shades</strong> of each color. Each shade also comes with an <strong>invert</strong> equivalent, that is useful to combine in a foreground/background combination.
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Class</th>
|
||||
<th>Code</th>
|
||||
<th>Example</th>
|
||||
<th>Swatch</th>
|
||||
<th>Invert</th>
|
||||
<th>Swatch</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for shade in site.data.palette %}
|
||||
{% assign background = "var(--bulma-primary" | append: shade | append: ")" %}
|
||||
{% assign invert = "var(--bulma-primary" | append: shade | append: "-invert)" %}
|
||||
<tr>
|
||||
<td style="vertical-align: middle;"><code>has-text-primary{{ shade }}</code></td>
|
||||
<td class="p-0" style="--hl-radius: 0;">{% highlight html %}<p class="has-text-primary{{ shade }}">Hello Bulma</p>{% endhighlight %}</td>
|
||||
<td style="vertical-align: middle;"><span class="has-text-primary{{ shade }}">Hello Bulma</span></td>
|
||||
<td class="has-text-centered" style="vertical-align: middle;">{% include docs/elements/color-swatch.html background=background %}</td>
|
||||
<td style="vertical-align: middle;"><span class="has-text-primary{{ shade }}-invert">Hello Bulma</span></td>
|
||||
<td class="has-text-centered" style="vertical-align: middle;">{% include docs/elements/color-swatch.html background=invert %}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% include docs/elements/anchor.html name="Background color" %}
|
||||
|
||||
<div class="content">
|
||||
All 27 shades are also available as <strong>background helpers</strong>. Combined with the invert color as foreground, it's easy to make readable elements with just 2 classes.
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Class</th>
|
||||
<th>Code</th>
|
||||
<th>Example</th>
|
||||
<th>Swatch</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for shade in site.data.palette %}
|
||||
{% assign background = "var(--bulma-primary" | append: shade | append: ")" %}
|
||||
<tr>
|
||||
<td style="vertical-align: middle;"><code>has-background-primary{{ shade }}</code></td>
|
||||
<td class="p-0" style="--hl-radius: 0;"><div style="max-width: 40rem; overflow: hidden;">{% highlight html %}<p class="has-background-primary{{ shade }} has-text-primary{{ shade }}-invert">
|
||||
Hello Bulma
|
||||
</p>{% endhighlight %}</div></td>
|
||||
<td style="vertical-align: middle;" class="has-background-primary{{ shade }} has-text-primary{{ shade }}-invert">Hello Bulma</td>
|
||||
<td class="has-text-centered" style="vertical-align: middle;">{% include docs/elements/color-swatch.html background=background %}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -1,13 +1,14 @@
|
||||
---
|
||||
title: Spacing helpers
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: helpers
|
||||
doc-tab: helpers
|
||||
doc-subtab: helpers-spacing
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- helpers
|
||||
- helpers-spacing
|
||||
- home
|
||||
- documentation
|
||||
- helpers
|
||||
- helpers-spacing
|
||||
shortcuts:
|
||||
margin: m
|
||||
padding: p
|
||||
@@ -37,44 +38,46 @@ customValues:
|
||||
large: 60px
|
||||
---
|
||||
|
||||
{% include elements/new-tag.html version="0.9.0" %}
|
||||
|
||||
<div class="content">
|
||||
<p>Bulma provides <strong>margin</strong> <code>m*</code> and <strong>padding</strong> <code>p*</code> helpers in all <strong>directions</strong>:</p>
|
||||
<p>
|
||||
Bulma provides <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>*t</code> for <strong>top</strong>
|
||||
<code>*x</code> horizontally for both <strong>left</strong> and
|
||||
<strong>right</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>
|
||||
<code>*y</code> vertically for both <strong>top</strong> and
|
||||
<strong>bottom</strong>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
You need to <strong>combine</strong> a margin/padding prefix with a direction suffix. For example:
|
||||
You need to <strong>combine</strong> a margin/padding prefix with a
|
||||
direction 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>
|
||||
<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>:
|
||||
Each of these <code>property-direction</code>
|
||||
<strong>combinations</strong> needs to be appended with one of
|
||||
<strong>6 value suffixes</strong>:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -84,102 +87,99 @@ customValues:
|
||||
<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>
|
||||
<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" %}
|
||||
{% include docs/elements/anchor.html name="List of all spacing helpers" %}
|
||||
|
||||
<p class="block">
|
||||
There are <strong>112 spacing helpers</strong> to choose from:
|
||||
</p>
|
||||
|
||||
{% include
|
||||
components/spacing-table.html
|
||||
values=page.values
|
||||
shortcuts=page.shortcuts
|
||||
directions=page.directions
|
||||
horizontal=page.horizontal
|
||||
vertical=page.vertical
|
||||
%}
|
||||
{% include docs/components/spacing-table.html values=page.values
|
||||
shortcuts=page.shortcuts directions=page.directions horizontal=page.horizontal
|
||||
vertical=page.vertical %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
To use these classes, simply append them to any HTML element:
|
||||
</p>
|
||||
<p>To use these classes, simply append them to any HTML element:</p>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<!-- Adds 1rem of margin at the bottom -->
|
||||
<p class="mb-4">
|
||||
Margin bottom
|
||||
</p>
|
||||
<p class="mb-4">Margin bottom</p>
|
||||
|
||||
<!-- Adds 0.25rem of padding on the left and the right -->
|
||||
<p class="px-1">
|
||||
Horizontal padding
|
||||
</p>
|
||||
<p class="px-1">Horizontal padding</p>
|
||||
|
||||
<!-- Removes the margin on the right and adds 0.75rem padding at the top -->
|
||||
<p class="mr-0 pt-3">
|
||||
Both
|
||||
</p>
|
||||
{% endhighlight %}
|
||||
|
||||
{% 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 %}
|
||||
<p class="mr-0 pt-3">Both</p>
|
||||
{% endhighlight %} {% include docs/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:
|
||||
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>margin</strong> to be abbreviated to <code>mg</code>
|
||||
<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></li>
|
||||
<li><strong>vertical</strong> to be excluded as well</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>
|
||||
</li>
|
||||
<li>
|
||||
<strong>vertical</strong> to be excluded as well
|
||||
</li>
|
||||
<li>
|
||||
and 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>
|
||||
and 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>:
|
||||
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
|
||||
%}
|
||||
{% highlight scss -%} {{- custom -}} {%- endhighlight %} {% include
|
||||
docs/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 112 to only <strong>18</strong>.
|
||||
By customizing the output, you've narrowed down the list of spacing helpers
|
||||
from 112 to only <strong>18</strong>.
|
||||
</p>
|
||||
|
||||
@@ -1,102 +1,89 @@
|
||||
---
|
||||
title: Typography helpers
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: helpers
|
||||
doc-tab: helpers
|
||||
doc-subtab: helpers-typography
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- helpers
|
||||
- helpers-typography
|
||||
- home
|
||||
- documentation
|
||||
- helpers
|
||||
- helpers-typography
|
||||
---
|
||||
|
||||
{% assign initial_vars = site.data.variables.utilities.initial-variables.by_name %}
|
||||
{% assign sizes = site.data.variables.utilities.derived-variables.by_name['$sizes'].value | split: ' ' %}
|
||||
|
||||
{% capture thead %}
|
||||
{% assign initial_vars =
|
||||
site.data.variables.utilities['initial-variables'].by_name %} {% assign sizes =
|
||||
site.data.variables.utilities['derived-variables'].by_name['$sizes'].value |
|
||||
split: ' ' %} {% capture thead %}
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Class</th>
|
||||
{% for breakpoint_hash in site.data.breakpoints %} {% assign breakpoint =
|
||||
breakpoint_hash[1] %}
|
||||
<th>
|
||||
Class
|
||||
{{ breakpoint.name }}<br />
|
||||
{% if breakpoint.id == 'mobile' %} Up to
|
||||
<code>{{ breakpoint.to }}px</code>
|
||||
{% elsif breakpoint.id == 'fullhd' %}
|
||||
<code>{{ breakpoint.from }}px</code> and above {% else %} Between
|
||||
<code>{{ breakpoint.from }}px</code> and
|
||||
<code>{{ breakpoint.to }}px</code>
|
||||
{% endif %}
|
||||
</th>
|
||||
{% for breakpoint_hash in site.data.breakpoints %}
|
||||
{% assign breakpoint = breakpoint_hash[1] %}
|
||||
<th>
|
||||
{{ breakpoint.name }}<br>
|
||||
{% if breakpoint.id == 'mobile' %}
|
||||
Up to <code>{{ breakpoint.to }}px</code>
|
||||
{% elsif breakpoint.id == 'fullhd' %}
|
||||
<code>{{ breakpoint.from }}px</code> and above
|
||||
{% else %}
|
||||
Between <code>{{ breakpoint.from }}px</code> and <code>{{ breakpoint.to }}px</code>
|
||||
{% endif %}
|
||||
</th>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture size1 %}
|
||||
{% endcapture %} {% capture size1 %}
|
||||
<td class="is-narrow has-background-danger-light">
|
||||
<code class="has-background-danger-light">{{ initial_vars['$size-1'].value }}</code>
|
||||
<code class="has-background-danger-light"
|
||||
>{{ initial_vars['$size-1'].value }}</code
|
||||
>
|
||||
</td>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture unchanged %}
|
||||
<td class="is-narrow has-text-grey-light">
|
||||
unchanged
|
||||
</td>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture left %}
|
||||
{% endcapture %} {% capture unchanged %}
|
||||
<td class="is-narrow has-text-grey-light">unchanged</td>
|
||||
{% endcapture %} {% capture left %}
|
||||
<td class="is-narrow has-background-primary-light has-text-primary">
|
||||
left-aligned
|
||||
</td>
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/anchor.html name="Size" %}
|
||||
{% endcapture %} {% include docs/elements/anchor.html name="Size" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
There are <strong>{{ sizes | size }} sizes</strong> to choose from:
|
||||
</p>
|
||||
<p>There are <strong>{{ sizes | size }} sizes</strong> to choose from:</p>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Class
|
||||
</th>
|
||||
<th>
|
||||
Font-size
|
||||
</th>
|
||||
<th>
|
||||
Size
|
||||
</th>
|
||||
<th>Class</th>
|
||||
<th>Font-size</th>
|
||||
<th>Size</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% 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>
|
||||
<td><span class="is-size-{{ forloop.index }}">Example</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
{% assign key = '$size-' | append: forloop.index %}
|
||||
<td>
|
||||
<code>is-size-{{ forloop.index }}</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>{{ initial_vars[key].value }}</code>
|
||||
</td>
|
||||
<td><span class="is-size-{{ forloop.index }}">Example</span></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% include elements/anchor.html name="Responsive size" %}
|
||||
{% include docs/elements/anchor.html name="Responsive size" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can choose a <strong>specific</strong> size for <em>each</em> viewport width. You simply need to append the <strong>viewport width</strong> to the size modifier.
|
||||
</p>
|
||||
<p>
|
||||
For example, here are the modifiers for <code>$size-1</code>:
|
||||
You can choose a <strong>specific</strong> size for <em>each</em> viewport
|
||||
width. You simply need to append the <strong>viewport width</strong> to the
|
||||
size modifier.
|
||||
</p>
|
||||
<p>For example, here are the modifiers for <code>$size-1</code>:</p>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
@@ -105,111 +92,84 @@ breadcrumb:
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="is-narrow"><code>is-size-1-mobile</code></td>
|
||||
{{ size1 }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ size1 }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ unchanged
|
||||
}}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow"><code>is-size-1-touch</code></td>
|
||||
{{ size1 }}
|
||||
{{ size1 }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ size1 }} {{ size1 }} {{ unchanged }} {{ unchanged }} {{ unchanged }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow"><code>is-size-1-tablet</code></td>
|
||||
{{ unchanged }}
|
||||
{{ size1 }}
|
||||
{{ size1 }}
|
||||
{{ size1 }}
|
||||
{{ size1 }}
|
||||
{{ unchanged }} {{ size1 }} {{ size1 }} {{ size1 }} {{ size1 }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow"><code>is-size-1-desktop</code></td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ size1 }}
|
||||
{{ size1 }}
|
||||
{{ size1 }}
|
||||
{{ unchanged }} {{ unchanged }} {{ size1 }} {{ size1 }} {{ size1 }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow"><code>is-size-1-widescreen</code></td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ size1 }}
|
||||
{{ size1 }}
|
||||
{{ unchanged }} {{ unchanged }} {{ unchanged }} {{ size1 }} {{ size1 }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow"><code>is-size-1-fullhd</code></td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ size1 }}
|
||||
{{ unchanged }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ size1
|
||||
}}
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can use the same logic for each of the <strong>7 sizes</strong>.
|
||||
</p>
|
||||
<p>You can use the same logic for each of the <strong>7 sizes</strong>.</p>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Alignment" %}
|
||||
{% include docs/elements/anchor.html name="Alignment" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can align the text with the use of one of <strong>4 alignment helpers</strong>:
|
||||
You can align the text with the use of one of
|
||||
<strong>4 alignment helpers</strong>:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Class
|
||||
</th>
|
||||
<th>
|
||||
Alignment
|
||||
</th>
|
||||
<th>Class</th>
|
||||
<th>Alignment</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>has-text-centered</code></td>
|
||||
<td>Makes the text <strong>centered</strong></td>
|
||||
<td><code>has-text-centered</code></td>
|
||||
<td>Makes the text <strong>centered</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-justified</code></td>
|
||||
<td>Makes the text <strong>justified</strong></td>
|
||||
<td><code>has-text-justified</code></td>
|
||||
<td>Makes the text <strong>justified</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-left</code></td>
|
||||
<td>Makes the text aligned to the <strong>left</strong></td>
|
||||
<td><code>has-text-left</code></td>
|
||||
<td>Makes the text aligned to the <strong>left</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-right</code></td>
|
||||
<td>Makes the text aligned to the <strong>right</strong></td>
|
||||
<td><code>has-text-right</code></td>
|
||||
<td>Makes the text aligned to the <strong>right</strong></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% include elements/anchor.html name="Responsive Alignment" %}
|
||||
{% include docs/elements/anchor.html name="Responsive Alignment" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can <strong>align text</strong> differently for each <strong>viewport width</strong>. Simply 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>
|
||||
For example, here are the modifiers for <code>has-text-left</code>:
|
||||
</p>
|
||||
<p>For example, here are the modifiers for <code>has-text-left</code>:</p>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
@@ -218,75 +178,44 @@ breadcrumb:
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="is-narrow"><code>has-text-left-mobile</code></td>
|
||||
{{ left }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ left }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ unchanged
|
||||
}}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow"><code>has-text-left-touch</code></td>
|
||||
{{ left }}
|
||||
{{ left }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ left }} {{ left }} {{ unchanged }} {{ unchanged }} {{ unchanged }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow"><code>has-text-left-tablet-only</code></td>
|
||||
{{ unchanged }}
|
||||
{{ left }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }} {{ left }} {{ unchanged }} {{ unchanged }} {{ unchanged
|
||||
}}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow"><code>has-text-left-tablet</code></td>
|
||||
{{ unchanged }}
|
||||
{{ left }}
|
||||
{{ left }}
|
||||
{{ left }}
|
||||
{{ left }}
|
||||
{{ unchanged }} {{ left }} {{ left }} {{ left }} {{ left }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow"><code>has-text-left-desktop-only</code></td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ left }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }} {{ unchanged }} {{ left }} {{ unchanged }} {{ unchanged
|
||||
}}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow"><code>has-text-left-desktop</code></td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ left }}
|
||||
{{ left }}
|
||||
{{ left }}
|
||||
{{ unchanged }} {{ unchanged }} {{ left }} {{ left }} {{ left }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow"><code>has-text-left-widescreen-only</code></td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ left }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }} {{ unchanged }} {{ unchanged }} {{ left }} {{ unchanged
|
||||
}}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow"><code>has-text-left-widescreen</code></td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ left }}
|
||||
{{ left }}
|
||||
{{ unchanged }} {{ unchanged }} {{ unchanged }} {{ left }} {{ left }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow"><code>has-text-left-fullhd</code></td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ left }}
|
||||
{{ unchanged }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ left
|
||||
}}
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -298,119 +227,139 @@ breadcrumb:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Text transformation" %}
|
||||
{% include docs/elements/anchor.html name="Text transformation" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can transform the text with the use of one of <strong>4 text transformation helpers</strong>:
|
||||
You can transform the text with the use of one of
|
||||
<strong>4 text transformation helpers</strong>:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Class
|
||||
</th>
|
||||
<th>
|
||||
Transformation
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Class</th>
|
||||
<th>Transformation</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>is-capitalized</code></td>
|
||||
<td>Transforms <strong>the first character</strong> of each word to <strong>Uppercase</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-lowercase</code></td>
|
||||
<td>Transforms <strong>all characters</strong> to <strong>lowercase</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-uppercase</code></td>
|
||||
<td>Transforms <strong>all characters</strong> to <strong>UPPERCASE</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-italic</code></td>
|
||||
<td>Transforms <strong>all characters</strong> to <strong class="is-italic">italic</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{% include elements/new-tag.html version="0.9.3" %}<code>is-underlined</code></td>
|
||||
<td><strong class="is-underlined">Underlines</strong> the text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-capitalized</code></td>
|
||||
<td>
|
||||
Transforms <strong>the first character</strong> of each word to
|
||||
<strong>Uppercase</strong>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-lowercase</code></td>
|
||||
<td>
|
||||
Transforms <strong>all characters</strong> to <strong>lowercase</strong>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-uppercase</code></td>
|
||||
<td>
|
||||
Transforms <strong>all characters</strong> to <strong>UPPERCASE</strong>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-italic</code></td>
|
||||
<td>
|
||||
Transforms <strong>all characters</strong> to
|
||||
<strong class="is-italic">italic</strong>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>is-underlined</code>
|
||||
</td>
|
||||
<td><strong class="is-underlined">Underlines</strong> the text</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% include elements/anchor.html name="Text weight" %}
|
||||
{% include docs/elements/anchor.html name="Text weight" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can transform the text weight with the use of one of <strong>5 text weight helpers</strong>:
|
||||
You can transform the text weight with the use of one of
|
||||
<strong>5 text weight helpers</strong>:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Class
|
||||
</th>
|
||||
<th>
|
||||
Weight
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Class</th>
|
||||
<th>Weight</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>has-text-weight-light</code></td>
|
||||
<td>Transforms text weight to <span class="has-text-weight-light">light</span></td>
|
||||
<td>
|
||||
Transforms text weight to
|
||||
<span class="has-text-weight-light">light</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-weight-normal</code></td>
|
||||
<td>Transforms text weight to <span class="has-text-weight-normal">normal</span></td>
|
||||
<td>
|
||||
Transforms text weight to
|
||||
<span class="has-text-weight-normal">normal</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-weight-medium</code></td>
|
||||
<td>Transforms text weight to <span class="has-text-weight-medium">medium</span></td>
|
||||
<td>
|
||||
Transforms text weight to
|
||||
<span class="has-text-weight-medium">medium</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-weight-semibold</code></td>
|
||||
<td>Transforms text weight to <span class="has-text-weight-semibold">semi-bold</span></td>
|
||||
<td>
|
||||
Transforms text weight to
|
||||
<span class="has-text-weight-semibold">semi-bold</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-weight-bold</code></td>
|
||||
<td>Transforms text weight to <span class="has-text-weight-bold">bold</span></td>
|
||||
<td>
|
||||
Transforms text weight to <span class="has-text-weight-bold">bold</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% include elements/anchor.html name="Font family" %}
|
||||
{% include docs/elements/anchor.html name="Font family" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can change the font family with the use of one of <strong>5 font family helpers</strong>:
|
||||
You can change the font family with the use of one of
|
||||
<strong>5 font family helpers</strong>:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% assign font_families = "sans-serif,monospace,primary,secondary,code" | split: ',' %}
|
||||
{% assign font_families = 'sans-serif,monospace,primary,secondary,code' | split:
|
||||
',' %}
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Class
|
||||
</th>
|
||||
<th>
|
||||
Family
|
||||
</th>
|
||||
<th>Class</th>
|
||||
<th>Family</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for family in font_families %}
|
||||
<tr>
|
||||
<td><code>is-family-{{ family }}</code></td>
|
||||
<td>Sets font family to <code>$family-{{ family }}</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>is-family-{{ family }}</code>
|
||||
</td>
|
||||
<td>Sets font family to <code>$family-{{ family }}</code></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@@ -1,68 +1,47 @@
|
||||
---
|
||||
title: Responsive helpers
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: helpers
|
||||
doc-tab: helpers
|
||||
doc-subtab: helpers-visibility
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- helpers
|
||||
- helpers-visibility
|
||||
- home
|
||||
- documentation
|
||||
- helpers
|
||||
- helpers-visibility
|
||||
---
|
||||
|
||||
{% capture thead %}
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Class</th>
|
||||
{% for breakpoint_hash in site.data.breakpoints %} {% assign breakpoint =
|
||||
breakpoint_hash[1] %}
|
||||
<th>
|
||||
Class
|
||||
{{ breakpoint.name }}<br />
|
||||
{% if breakpoint.id == 'mobile' %} Up to
|
||||
<code>{{ breakpoint.to }}px</code>
|
||||
{% elsif breakpoint.id == 'fullhd' %}
|
||||
<code>{{ breakpoint.from }}px</code> and above {% else %} Between
|
||||
<code>{{ breakpoint.from }}px</code> and
|
||||
<code>{{ breakpoint.to }}px</code>
|
||||
{% endif %}
|
||||
</th>
|
||||
{% for breakpoint_hash in site.data.breakpoints %}
|
||||
{% assign breakpoint = breakpoint_hash[1] %}
|
||||
<th>
|
||||
{{ breakpoint.name }}<br>
|
||||
{% if breakpoint.id == 'mobile' %}
|
||||
Up to <code>{{ breakpoint.to }}px</code>
|
||||
{% elsif breakpoint.id == 'fullhd' %}
|
||||
<code>{{ breakpoint.from }}px</code> and above
|
||||
{% else %}
|
||||
Between <code>{{ breakpoint.from }}px</code> and <code>{{ breakpoint.to }}px</code>
|
||||
{% endif %}
|
||||
</th>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture flex %}
|
||||
<td class="is-narrow has-text-primary has-background-primary-light">
|
||||
Flex
|
||||
</td>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture visible %}
|
||||
<td class="is-narrow has-text-success has-background-success-light">
|
||||
Visible
|
||||
</td>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture hidden %}
|
||||
<td class="is-narrow has-text-danger has-background-danger-light">
|
||||
Hidden
|
||||
</td>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture unchanged %}
|
||||
<td class="is-narrow has-text-grey-light">
|
||||
Unchanged
|
||||
</td>
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/anchor.html name="Show" %}
|
||||
{% endcapture %} {% capture flex %}
|
||||
<td class="is-narrow has-text-primary has-background-primary-light">Flex</td>
|
||||
{% endcapture %} {% capture visible %}
|
||||
<td class="is-narrow has-text-success has-background-success-light">Visible</td>
|
||||
{% endcapture %} {% capture hidden %}
|
||||
<td class="is-narrow has-text-danger has-background-danger-light">Hidden</td>
|
||||
{% endcapture %} {% capture unchanged %}
|
||||
<td class="is-narrow has-text-grey-light">Unchanged</td>
|
||||
{% endcapture %} {% include docs/elements/anchor.html name="Show" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can use one of the following <code>display</code> classes:
|
||||
</p>
|
||||
<p>You can use one of the following <code>display</code> classes:</p>
|
||||
<ul>
|
||||
<li><code>is-block</code></li>
|
||||
<li><code>is-flex</code></li>
|
||||
@@ -81,96 +60,68 @@ breadcrumb:
|
||||
<td class="is-narrow">
|
||||
<code>is-flex-mobile</code>
|
||||
</td>
|
||||
{{ flex }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ flex }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ unchanged
|
||||
}}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-flex-tablet-only</code>
|
||||
</td>
|
||||
{{ unchanged }}
|
||||
{{ flex }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }} {{ flex }} {{ unchanged }} {{ unchanged }} {{ unchanged
|
||||
}}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-flex-desktop-only</code>
|
||||
</td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ flex }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }} {{ unchanged }} {{ flex }} {{ unchanged }} {{ unchanged
|
||||
}}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-flex-widescreen-only</code>
|
||||
</td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ flex }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }} {{ unchanged }} {{ unchanged }} {{ flex }} {{ unchanged
|
||||
}}
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="5">
|
||||
<p>Classes to display <strong>up to</strong> or <strong>from</strong> a specific breakpoint</p>
|
||||
<p>
|
||||
Classes to display <strong>up to</strong> or <strong>from</strong> a
|
||||
specific breakpoint
|
||||
</p>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-flex-touch</code>
|
||||
</td>
|
||||
{{ flex }}
|
||||
{{ flex }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ flex }} {{ flex }} {{ unchanged }} {{ unchanged }} {{ unchanged }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-flex-tablet</code>
|
||||
</td>
|
||||
{{ unchanged }}
|
||||
{{ flex }}
|
||||
{{ flex }}
|
||||
{{ flex }}
|
||||
{{ flex }}
|
||||
{{ unchanged }} {{ flex }} {{ flex }} {{ flex }} {{ flex }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-flex-desktop</code>
|
||||
</td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ flex }}
|
||||
{{ flex }}
|
||||
{{ flex }}
|
||||
{{ unchanged }} {{ unchanged }} {{ flex }} {{ flex }} {{ flex }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-flex-widescreen</code>
|
||||
</td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ flex }}
|
||||
{{ flex }}
|
||||
{{ unchanged }} {{ unchanged }} {{ unchanged }} {{ flex }} {{ flex }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-flex-fullhd</code>
|
||||
</td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ flex }}
|
||||
{{ unchanged }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ flex
|
||||
}}
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -178,11 +129,13 @@ breadcrumb:
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
For the other display options, just replace <code>is-flex</code> with <code>is-block</code> <code>is-inline</code> <code>is-inline-block</code> or <code>is-inline-flex</code>
|
||||
For the other display options, just replace <code>is-flex</code> with
|
||||
<code>is-block</code> <code>is-inline</code> <code>is-inline-block</code> or
|
||||
<code>is-inline-flex</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Hide" %}
|
||||
{% include docs/elements/anchor.html name="Hide" %}
|
||||
|
||||
<div class="table-container">
|
||||
<table class="table is-bordered">
|
||||
@@ -192,102 +145,69 @@ breadcrumb:
|
||||
<td class="is-narrow">
|
||||
<code>is-hidden-mobile</code>
|
||||
</td>
|
||||
{{ hidden }}
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ hidden }} {{ visible }} {{ visible }} {{ visible }} {{ visible }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-hidden-tablet-only</code>
|
||||
</td>
|
||||
{{ visible }}
|
||||
{{ hidden }}
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ visible }} {{ hidden }} {{ visible }} {{ visible }} {{ visible }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-hidden-desktop-only</code>
|
||||
</td>
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ hidden }}
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ visible }} {{ visible }} {{ hidden }} {{ visible }} {{ visible }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-hidden-widescreen-only</code>
|
||||
</td>
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ hidden }}
|
||||
{{ visible }}
|
||||
{{ visible }} {{ visible }} {{ visible }} {{ hidden }} {{ visible }}
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="5">
|
||||
<p>Classes to hide <strong>up to</strong> or <strong>from</strong> a specific breakpoint</p>
|
||||
<p>
|
||||
Classes to hide <strong>up to</strong> or <strong>from</strong> a
|
||||
specific breakpoint
|
||||
</p>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-hidden-touch</code>
|
||||
</td>
|
||||
{{ hidden }}
|
||||
{{ hidden }}
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ hidden }} {{ hidden }} {{ visible }} {{ visible }} {{ visible }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-hidden-tablet</code>
|
||||
</td>
|
||||
{{ visible }}
|
||||
{{ hidden }}
|
||||
{{ hidden }}
|
||||
{{ hidden }}
|
||||
{{ hidden }}
|
||||
{{ visible }} {{ hidden }} {{ hidden }} {{ hidden }} {{ hidden }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-hidden-desktop</code>
|
||||
</td>
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ hidden }}
|
||||
{{ hidden }}
|
||||
{{ hidden }}
|
||||
{{ visible }} {{ visible }} {{ hidden }} {{ hidden }} {{ hidden }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-hidden-widescreen</code>
|
||||
</td>
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ hidden }}
|
||||
{{ hidden }}
|
||||
{{ visible }} {{ visible }} {{ visible }} {{ hidden }} {{ hidden }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-hidden-fullhd</code>
|
||||
</td>
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ hidden }}
|
||||
{{ visible }} {{ visible }} {{ visible }} {{ visible }} {{ hidden }}
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Other visibility helpers" %}
|
||||
{% include docs/elements/anchor.html name="Other visibility helpers" %}
|
||||
|
||||
<table class="table is-bordered">
|
||||
<tbody>
|
||||
@@ -301,7 +221,11 @@ breadcrumb:
|
||||
</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>
|
||||
<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