mirror of
https://github.com/jgthms/bulma
synced 2026-03-15 02:04:29 -07:00
Add modifiers links
This commit is contained in:
Jeremy Thomas
@@ -1,104 +1,98 @@
|
||||
---
|
||||
title: Color helpers
|
||||
subtitle: "Change the <strong>color</strong> of the text and/or background"
|
||||
layout: documentation
|
||||
doc-tab: modifiers
|
||||
doc-subtab: color-helpers
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- modifiers
|
||||
- modifiers-color-helpers
|
||||
---
|
||||
|
||||
{% include subnav/subnav-modifiers.html %}
|
||||
{% include anchor.html name="Text color" %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Color helpers</h1>
|
||||
<h2 class="subtitle">
|
||||
Change the <strong>color</strong> of the text and/or background
|
||||
</h2>
|
||||
<div class="content">
|
||||
<p>
|
||||
You can set any element to one of the <strong>9 colors</strong> or <strong>9 shades of grey</strong>:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Text color" %}
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Class
|
||||
</th>
|
||||
<th>
|
||||
Color
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><code>has-text-white</code></td><td>{% include color/white.html %}</td></tr>
|
||||
<tr><td><code>has-text-black</code></td><td>{% include color/black.html %}</td></tr>
|
||||
<tr><td><code>has-text-light</code></td><td>{% include color/white-ter.html %}</td></tr>
|
||||
<tr><td><code>has-text-dark</code></td><td>{% include color/grey-darker.html %}</td></tr>
|
||||
<tr><td><code>has-text-primary</code></td><td>{% include color/turquoise.html %}</td></tr>
|
||||
<tr><td><code>has-text-info</code></td><td>{% include color/cyan.html %}</td></tr>
|
||||
<tr><td><code>has-text-link</code></td><td>{% include color/blue.html %}</td></tr>
|
||||
<tr><td><code>has-text-success</code></td><td>{% include color/green.html %}</td></tr>
|
||||
<tr><td><code>has-text-warning</code></td><td>{% include color/yellow.html %}</td></tr>
|
||||
<tr><td><code>has-text-danger</code></td><td>{% include color/red.html %}</td></tr>
|
||||
<tr><td><code>has-text-black-bis</code></td><td>{% include color/black-bis.html %}</td></tr>
|
||||
<tr><td><code>has-text-black-ter</code></td><td>{% include color/black-ter.html %}</td></tr>
|
||||
<tr><td><code>has-text-grey-darker</code></td><td>{% include color/grey-darker.html %}</td></tr>
|
||||
<tr><td><code>has-text-grey-dark</code></td><td>{% include color/grey-dark.html %}</td></tr>
|
||||
<tr><td><code>has-text-grey</code></td><td>{% include color/grey.html %}</td></tr>
|
||||
<tr><td><code>has-text-grey-light</code></td><td>{% include color/grey-light.html %}</td></tr>
|
||||
<tr><td><code>has-text-grey-lighter</code></td><td>{% include color/grey-lighter.html %}</td></tr>
|
||||
<tr><td><code>has-text-white-ter</code></td><td>{% include color/white-ter.html %}</td></tr>
|
||||
<tr><td><code>has-text-white-bis</code></td><td>{% include color/white-bis.html %}</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can set any element to one of the <strong>9 colors</strong> or <strong>9 shades of grey</strong>:
|
||||
</p>
|
||||
</div>
|
||||
{% include anchor.html name="Background color" %}
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Class
|
||||
</th>
|
||||
<th>
|
||||
Color
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><code>has-text-white</code></td><td>{% include color/white.html %}</td></tr>
|
||||
<tr><td><code>has-text-black</code></td><td>{% include color/black.html %}</td></tr>
|
||||
<tr><td><code>has-text-light</code></td><td>{% include color/white-ter.html %}</td></tr>
|
||||
<tr><td><code>has-text-dark</code></td><td>{% include color/grey-darker.html %}</td></tr>
|
||||
<tr><td><code>has-text-primary</code></td><td>{% include color/turquoise.html %}</td></tr>
|
||||
<tr><td><code>has-text-info</code></td><td>{% include color/cyan.html %}</td></tr>
|
||||
<tr><td><code>has-text-link</code></td><td>{% include color/blue.html %}</td></tr>
|
||||
<tr><td><code>has-text-success</code></td><td>{% include color/green.html %}</td></tr>
|
||||
<tr><td><code>has-text-warning</code></td><td>{% include color/yellow.html %}</td></tr>
|
||||
<tr><td><code>has-text-danger</code></td><td>{% include color/red.html %}</td></tr>
|
||||
<tr><td><code>has-text-black-bis</code></td><td>{% include color/black-bis.html %}</td></tr>
|
||||
<tr><td><code>has-text-black-ter</code></td><td>{% include color/black-ter.html %}</td></tr>
|
||||
<tr><td><code>has-text-grey-darker</code></td><td>{% include color/grey-darker.html %}</td></tr>
|
||||
<tr><td><code>has-text-grey-dark</code></td><td>{% include color/grey-dark.html %}</td></tr>
|
||||
<tr><td><code>has-text-grey</code></td><td>{% include color/grey.html %}</td></tr>
|
||||
<tr><td><code>has-text-grey-light</code></td><td>{% include color/grey-light.html %}</td></tr>
|
||||
<tr><td><code>has-text-grey-lighter</code></td><td>{% include color/grey-lighter.html %}</td></tr>
|
||||
<tr><td><code>has-text-white-ter</code></td><td>{% include color/white-ter.html %}</td></tr>
|
||||
<tr><td><code>has-text-white-bis</code></td><td>{% include color/white-bis.html %}</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
{% include elements/new-tag.html version="0.6.3" %}
|
||||
|
||||
{% include anchor.html name="Background color" %}
|
||||
<div class="content">
|
||||
<p>
|
||||
You can set any element to one of the <strong>9 colors</strong> or <strong>9 shades of grey</strong>:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/new-tag.html version="0.6.3" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can set any element to one of the <strong>9 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>
|
||||
</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-info</code></td><td>{% include color/cyan.html %}</td></tr>
|
||||
<tr><td><code>has-background-link</code></td><td>{% include color/blue.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-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>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<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-info</code></td><td>{% include color/cyan.html %}</td></tr>
|
||||
<tr><td><code>has-background-link</code></td><td>{% include color/blue.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-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>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@@ -1,66 +1,63 @@
|
||||
---
|
||||
title: Helpers
|
||||
subtitle: "You can apply <strong>helper classes</strong> to almost any element, in order to alter its style."
|
||||
layout: documentation
|
||||
doc-tab: modifiers
|
||||
doc-subtab: helpers
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- modifiers
|
||||
- modifiers-helpers
|
||||
---
|
||||
|
||||
{% include subnav/subnav-modifiers.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Helpers</h1>
|
||||
<h2 class="subtitle">You can apply <strong>helper classes</strong> to almost any element, in order to alter its style.</h2>
|
||||
<hr>
|
||||
<table class="table is-bordered">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th rowspan="3">Float</th>
|
||||
<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 left</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-pulled-right</code></td>
|
||||
<td>Moves an element to the right</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th rowspan="2">Spacing</th>
|
||||
<td><code>is-marginless</code></td>
|
||||
<td>Removes any <strong>margin</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-paddingless</code></td>
|
||||
<td>Removes any <strong>padding</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th rowspan="6">Other</th>
|
||||
<td><code>is-overlay</code></td>
|
||||
<td>Completely covers the first positioned parent</td>
|
||||
</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-invisible</code></td>
|
||||
<td>Adds visibility <strong>hidden</strong></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
<table class="table is-bordered">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th rowspan="3">Float</th>
|
||||
<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 left</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-pulled-right</code></td>
|
||||
<td>Moves an element to the right</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th rowspan="2">Spacing</th>
|
||||
<td><code>is-marginless</code></td>
|
||||
<td>Removes any <strong>margin</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-paddingless</code></td>
|
||||
<td>Removes any <strong>padding</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th rowspan="6">Other</th>
|
||||
<td><code>is-overlay</code></td>
|
||||
<td>Completely covers the first positioned parent</td>
|
||||
</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-invisible</code></td>
|
||||
<td>Adds visibility <strong>hidden</strong></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@@ -1,8 +1,14 @@
|
||||
---
|
||||
title: Responsive helpers
|
||||
subtitle: "<strong>Show/hide content</strong> depending on the width of the viewport"
|
||||
layout: documentation
|
||||
doc-tab: modifiers
|
||||
doc-subtab: responsive-helpers
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- modifiers
|
||||
- modifiers-responsive-helpers
|
||||
---
|
||||
|
||||
{% capture thead %}
|
||||
@@ -52,237 +58,228 @@ doc-subtab: responsive-helpers
|
||||
</td>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav/subnav-modifiers.html %}
|
||||
{% include anchor.html name="Show" %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Responsive helpers</h1>
|
||||
<h2 class="subtitle"><strong>Show/hide content</strong> depending on the width of the viewport</h2>
|
||||
<div class="content">
|
||||
<p>
|
||||
You can use one of the following <code>display</code> classes:
|
||||
</p>
|
||||
<ul>
|
||||
<li><code>block</code></li>
|
||||
<li><code>flex</code></li>
|
||||
<li><code>inline</code></li>
|
||||
<li><code>inline-block</code></li>
|
||||
<li><code>inline-flex</code></li>
|
||||
</ul>
|
||||
<p>For example, here's how the <code>is-flex</code> helper works:</p>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Show" %}
|
||||
<table class="table is-bordered">
|
||||
{{ thead }}
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-flex-mobile</code>
|
||||
</td>
|
||||
{{ flex }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-flex-tablet-only</code>
|
||||
</td>
|
||||
{{ unchanged }}
|
||||
{{ flex }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-flex-desktop-only</code>
|
||||
</td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ flex }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-flex-widescreen-only</code>
|
||||
</td>
|
||||
{{ 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>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-flex-touch</code>
|
||||
</td>
|
||||
{{ flex }}
|
||||
{{ flex }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-flex-tablet</code>
|
||||
</td>
|
||||
{{ unchanged }}
|
||||
{{ flex }}
|
||||
{{ flex }}
|
||||
{{ flex }}
|
||||
{{ flex }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-flex-desktop</code>
|
||||
</td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ flex }}
|
||||
{{ flex }}
|
||||
{{ flex }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-flex-widescreen</code>
|
||||
</td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ flex }}
|
||||
{{ flex }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-flex-fullhd</code>
|
||||
</td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ flex }}
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can use one of the following <code>display</code> classes:
|
||||
</p>
|
||||
<ul>
|
||||
<li><code>block</code></li>
|
||||
<li><code>flex</code></li>
|
||||
<li><code>inline</code></li>
|
||||
<li><code>inline-block</code></li>
|
||||
<li><code>inline-flex</code></li>
|
||||
</ul>
|
||||
<p>For example, here's how the <code>is-flex</code> helper works:</p>
|
||||
</div>
|
||||
<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>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
{{ thead }}
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-flex-mobile</code>
|
||||
</td>
|
||||
{{ flex }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-flex-tablet-only</code>
|
||||
</td>
|
||||
{{ unchanged }}
|
||||
{{ flex }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-flex-desktop-only</code>
|
||||
</td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ flex }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-flex-widescreen-only</code>
|
||||
</td>
|
||||
{{ 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>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-flex-touch</code>
|
||||
</td>
|
||||
{{ flex }}
|
||||
{{ flex }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-flex-tablet</code>
|
||||
</td>
|
||||
{{ unchanged }}
|
||||
{{ flex }}
|
||||
{{ flex }}
|
||||
{{ flex }}
|
||||
{{ flex }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-flex-desktop</code>
|
||||
</td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ flex }}
|
||||
{{ flex }}
|
||||
{{ flex }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-flex-widescreen</code>
|
||||
</td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ flex }}
|
||||
{{ flex }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-flex-fullhd</code>
|
||||
</td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ flex }}
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
{% include anchor.html name="Hide" %}
|
||||
|
||||
<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>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Hide" %}
|
||||
|
||||
<table class="table is-bordered">
|
||||
{{ thead }}
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-hidden-mobile</code>
|
||||
</td>
|
||||
{{ hidden }}
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-hidden-tablet-only</code>
|
||||
</td>
|
||||
{{ visible }}
|
||||
{{ hidden }}
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-hidden-desktop-only</code>
|
||||
</td>
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ hidden }}
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-hidden-widescreen-only</code>
|
||||
</td>
|
||||
{{ 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>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-hidden-touch</code>
|
||||
</td>
|
||||
{{ hidden }}
|
||||
{{ hidden }}
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-hidden-tablet</code>
|
||||
</td>
|
||||
{{ visible }}
|
||||
{{ hidden }}
|
||||
{{ hidden }}
|
||||
{{ hidden }}
|
||||
{{ hidden }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-hidden-desktop</code>
|
||||
</td>
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ hidden }}
|
||||
{{ hidden }}
|
||||
{{ hidden }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-hidden-widescreen</code>
|
||||
</td>
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ hidden }}
|
||||
{{ hidden }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-hidden-fullhd</code>
|
||||
</td>
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ hidden }}
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
<table class="table is-bordered">
|
||||
{{ thead }}
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-hidden-mobile</code>
|
||||
</td>
|
||||
{{ hidden }}
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-hidden-tablet-only</code>
|
||||
</td>
|
||||
{{ visible }}
|
||||
{{ hidden }}
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-hidden-desktop-only</code>
|
||||
</td>
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ hidden }}
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-hidden-widescreen-only</code>
|
||||
</td>
|
||||
{{ 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>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-hidden-touch</code>
|
||||
</td>
|
||||
{{ hidden }}
|
||||
{{ hidden }}
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-hidden-tablet</code>
|
||||
</td>
|
||||
{{ visible }}
|
||||
{{ hidden }}
|
||||
{{ hidden }}
|
||||
{{ hidden }}
|
||||
{{ hidden }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-hidden-desktop</code>
|
||||
</td>
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ hidden }}
|
||||
{{ hidden }}
|
||||
{{ hidden }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-hidden-widescreen</code>
|
||||
</td>
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ hidden }}
|
||||
{{ hidden }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-hidden-fullhd</code>
|
||||
</td>
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ hidden }}
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@@ -1,12 +1,16 @@
|
||||
---
|
||||
title: Modifiers syntax
|
||||
subtitle: "Most Bulma elements have <strong>alternative</strong> styles. To apply them, you only need to append one of the <strong>modifier classes</strong>.<br>They all start with <code>is-</code> or <code>has-</code>.</h2>"
|
||||
layout: documentation
|
||||
doc-tab: modifiers
|
||||
doc-subtab: syntax
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- modifiers
|
||||
- modifiers-syntax
|
||||
---
|
||||
|
||||
{% include subnav/subnav-modifiers.html %}
|
||||
|
||||
{% capture button_example %}
|
||||
<a class="button">
|
||||
Button
|
||||
@@ -19,75 +23,68 @@ doc-subtab: syntax
|
||||
</a>
|
||||
{% endcapture %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Modifiers syntax</h1>
|
||||
<h2 class="subtitle">Most Bulma elements have <strong>alternative</strong> styles. To apply them, you only need to append one of the <strong>modifier classes</strong>.
|
||||
<br>
|
||||
They all start with <code>is-</code> or <code>has-</code>.</h2>
|
||||
<hr>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<p>Let's start with a simple <strong>button</strong> that uses the <code>"button"</code> CSS class:</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p>
|
||||
{{button_example}}
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{button_example}}{% endhighlight %}
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<p>Let's start with a simple <strong>button</strong> that uses the <code>"button"</code> CSS class:</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p>
|
||||
{{button_example}}
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{button_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<p>By <strong>adding</strong> the <code>"is-primary"</code> CSS class, you can modify the <strong>color</strong>:</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p>
|
||||
{{button_primary_example}}
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{button_primary_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>You can use one of the <strong>6 main colors</strong>:</p>
|
||||
<ul>
|
||||
<li><code>is-primary</code></li>
|
||||
<li><code>is-link</code></li>
|
||||
<li><code>is-info</code></li>
|
||||
<li><code>is-success</code></li>
|
||||
<li><code>is-warning</code></li>
|
||||
<li><code>is-danger</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<p>By <strong>adding</strong> the <code>"is-primary"</code> CSS class, you can modify the <strong>color</strong>:</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p>
|
||||
{{button_primary_example}}
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{button_primary_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>You can use one of the <strong>6 main colors</strong>:</p>
|
||||
<ul>
|
||||
<li><code>is-primary</code></li>
|
||||
<li><code>is-link</code></li>
|
||||
<li><code>is-info</code></li>
|
||||
<li><code>is-success</code></li>
|
||||
<li><code>is-warning</code></li>
|
||||
<li><code>is-danger</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="field">
|
||||
<a class="button is-primary">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-link">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-info">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-success">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-warning">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-danger">Button</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
<div class="highlight-full">
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="field">
|
||||
<a class="button is-primary">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-link">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-info">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-success">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-warning">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-danger">Button</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
<div class="highlight-full">
|
||||
{% highlight html %}
|
||||
<a class="button is-primary">
|
||||
Button
|
||||
@@ -108,35 +105,36 @@ doc-subtab: syntax
|
||||
Button
|
||||
</a>
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>You can also alter the <strong>size</strong>:</p>
|
||||
<ul>
|
||||
<li><code>is-small</code></li>
|
||||
<li><code>is-medium</code></li>
|
||||
<li><code>is-large</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="field">
|
||||
<a class="button is-small">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-medium">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-large">Button</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>You can also alter the <strong>size</strong>:</p>
|
||||
<ul>
|
||||
<li><code>is-small</code></li>
|
||||
<li><code>is-medium</code></li>
|
||||
<li><code>is-large</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="field">
|
||||
<a class="button is-small">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-medium">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-large">Button</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}
|
||||
<a class="button is-small">
|
||||
Button
|
||||
@@ -152,30 +150,31 @@ doc-subtab: syntax
|
||||
</a>
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>Or the <strong>style</strong> or <strong>state</strong>:</p>
|
||||
<ul>
|
||||
<li><code>is-outlined</code></li>
|
||||
<li><code>is-loading</code></li>
|
||||
<li><code>[disabled]</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>Or the <strong>style</strong> or <strong>state</strong>:</p>
|
||||
<ul>
|
||||
<li><code>is-outlined</code></li>
|
||||
<li><code>is-loading</code></li>
|
||||
<li><code>[disabled]</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="field">
|
||||
<a class="button is-primary is-outlined">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-primary is-loading">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-primary" disabled>Button</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="field">
|
||||
<a class="button is-primary is-outlined">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-primary is-loading">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-primary" disabled>Button</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}
|
||||
<a class="button is-primary is-outlined">
|
||||
Button
|
||||
@@ -188,6 +187,4 @@ doc-subtab: syntax
|
||||
</a>
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,14 @@
|
||||
---
|
||||
title: Typography helpers
|
||||
subtitle: "Change the <strong>size</strong> and <strong>color</strong> of the text for one or multiple viewport width"
|
||||
layout: documentation
|
||||
doc-tab: modifiers
|
||||
doc-subtab: typography-helpers
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- modifiers
|
||||
- modifiers-typography-helpers
|
||||
---
|
||||
|
||||
{% assign initial_vars = site.data.variables.utilities.initial-variables.vars %}
|
||||
@@ -49,56 +55,51 @@ doc-subtab: typography-helpers
|
||||
</td>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav/subnav-modifiers.html %}
|
||||
{% include anchor.html name="Size" %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Typography helpers</h1>
|
||||
<h2 class="subtitle">
|
||||
Change the <strong>size</strong> and <strong>color</strong> of the text for one or multiple viewport width
|
||||
</h2>
|
||||
<div class="content">
|
||||
<p>
|
||||
There are <strong>{{ sizes | size }} sizes</strong> to choose from:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Size" %}
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Class
|
||||
</th>
|
||||
<th>
|
||||
Font-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>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
There are <strong>{{ sizes | size }} sizes</strong> to choose from:
|
||||
</p>
|
||||
</div>
|
||||
{% include anchor.html name="Responsive size" %}
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Class
|
||||
</th>
|
||||
<th>
|
||||
Font-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>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="content">
|
||||
<p>
|
||||
You can choose a <strong>specific</strong> size for <em>each</em> viewport width. You simply needed 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>
|
||||
|
||||
{% include 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 needed 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>
|
||||
{% include layout/main-close.html %}
|
||||
|
||||
<div class="container">
|
||||
<div class="table-container">
|
||||
<table class="table is-bordered">
|
||||
{{ thead }}
|
||||
<tbody>
|
||||
@@ -152,106 +153,114 @@ doc-subtab: typography-helpers
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can use the same logic for each of the <strong>7 sizes</strong>.
|
||||
</p>
|
||||
</div>
|
||||
{% include layout/main-open.html %}
|
||||
|
||||
{% include anchor.html name="Colors" %}
|
||||
<div class="content">
|
||||
<p>
|
||||
You can use the same logic for each of the <strong>7 sizes</strong>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can set any element to one of the <strong>9 colors</strong> or <strong>9 shades of grey</strong>:
|
||||
</p>
|
||||
</div>
|
||||
{% include anchor.html name="Colors" %}
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Class
|
||||
</th>
|
||||
<th>
|
||||
Color
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><code>has-text-white</code></td><td>{% include color/white.html %}</td></tr>
|
||||
<tr><td><code>has-text-black</code></td><td>{% include color/black.html %}</td></tr>
|
||||
<tr><td><code>has-text-light</code></td><td>{% include color/white-ter.html %}</td></tr>
|
||||
<tr><td><code>has-text-dark</code></td><td>{% include color/grey-darker.html %}</td></tr>
|
||||
<tr><td><code>has-text-primary</code></td><td>{% include color/turquoise.html %}</td></tr>
|
||||
<tr><td><code>has-text-info</code></td><td>{% include color/cyan.html %}</td></tr>
|
||||
<tr><td><code>has-text-link</code></td><td>{% include color/blue.html %}</td></tr>
|
||||
<tr><td><code>has-text-success</code></td><td>{% include color/green.html %}</td></tr>
|
||||
<tr><td><code>has-text-warning</code></td><td>{% include color/yellow.html %}</td></tr>
|
||||
<tr><td><code>has-text-danger</code></td><td>{% include color/red.html %}</td></tr>
|
||||
<tr><td><code>has-text-black-bis</code></td><td>{% include color/black-bis.html %}</td></tr>
|
||||
<tr><td><code>has-text-black-ter</code></td><td>{% include color/black-ter.html %}</td></tr>
|
||||
<tr><td><code>has-text-grey-darker</code></td><td>{% include color/grey-darker.html %}</td></tr>
|
||||
<tr><td><code>has-text-grey-dark</code></td><td>{% include color/grey-dark.html %}</td></tr>
|
||||
<tr><td><code>has-text-grey</code></td><td>{% include color/grey.html %}</td></tr>
|
||||
<tr><td><code>has-text-grey-light</code></td><td>{% include color/grey-light.html %}</td></tr>
|
||||
<tr><td><code>has-text-grey-lighter</code></td><td>{% include color/grey-lighter.html %}</td></tr>
|
||||
<tr><td><code>has-text-white-ter</code></td><td>{% include color/white-ter.html %}</td></tr>
|
||||
<tr><td><code>has-text-white-bis</code></td><td>{% include color/white-bis.html %}</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="content">
|
||||
<p>
|
||||
You can set any element to one of the <strong>9 colors</strong> or <strong>9 shades of grey</strong>:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Alignment" %}
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Class
|
||||
</th>
|
||||
<th>
|
||||
Color
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><code>has-text-white</code></td><td>{% include color/white.html %}</td></tr>
|
||||
<tr><td><code>has-text-black</code></td><td>{% include color/black.html %}</td></tr>
|
||||
<tr><td><code>has-text-light</code></td><td>{% include color/white-ter.html %}</td></tr>
|
||||
<tr><td><code>has-text-dark</code></td><td>{% include color/grey-darker.html %}</td></tr>
|
||||
<tr><td><code>has-text-primary</code></td><td>{% include color/turquoise.html %}</td></tr>
|
||||
<tr><td><code>has-text-info</code></td><td>{% include color/cyan.html %}</td></tr>
|
||||
<tr><td><code>has-text-link</code></td><td>{% include color/blue.html %}</td></tr>
|
||||
<tr><td><code>has-text-success</code></td><td>{% include color/green.html %}</td></tr>
|
||||
<tr><td><code>has-text-warning</code></td><td>{% include color/yellow.html %}</td></tr>
|
||||
<tr><td><code>has-text-danger</code></td><td>{% include color/red.html %}</td></tr>
|
||||
<tr><td><code>has-text-black-bis</code></td><td>{% include color/black-bis.html %}</td></tr>
|
||||
<tr><td><code>has-text-black-ter</code></td><td>{% include color/black-ter.html %}</td></tr>
|
||||
<tr><td><code>has-text-grey-darker</code></td><td>{% include color/grey-darker.html %}</td></tr>
|
||||
<tr><td><code>has-text-grey-dark</code></td><td>{% include color/grey-dark.html %}</td></tr>
|
||||
<tr><td><code>has-text-grey</code></td><td>{% include color/grey.html %}</td></tr>
|
||||
<tr><td><code>has-text-grey-light</code></td><td>{% include color/grey-light.html %}</td></tr>
|
||||
<tr><td><code>has-text-grey-lighter</code></td><td>{% include color/grey-lighter.html %}</td></tr>
|
||||
<tr><td><code>has-text-white-ter</code></td><td>{% include color/white-ter.html %}</td></tr>
|
||||
<tr><td><code>has-text-white-bis</code></td><td>{% include color/white-bis.html %}</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can align the text with the use of one of <strong>4 alignment helpers</strong>:
|
||||
</p>
|
||||
</div>
|
||||
{% include anchor.html name="Alignment" %}
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<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>
|
||||
</tr>
|
||||
<tr>
|
||||
<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>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-right</code></td>
|
||||
<td>Makes the text aligned to the <strong>right</strong></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="content">
|
||||
<p>
|
||||
You can align the text with the use of one of <strong>4 alignment helpers</strong>:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Responsive Alignment" %}
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<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>
|
||||
</tr>
|
||||
<tr>
|
||||
<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>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-right</code></td>
|
||||
<td>Makes the text aligned to the <strong>right</strong></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<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.
|
||||
</p>
|
||||
{% include anchor.html name="Responsive Alignment" %}
|
||||
|
||||
<p>
|
||||
For example, here are the modifiers for <code>has-text-left</code>:
|
||||
</p>
|
||||
</div>
|
||||
<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.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
For example, here are the modifiers for <code>has-text-left</code>:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include layout/main-close.html %}
|
||||
|
||||
<div class="container">
|
||||
<div class="table-container">
|
||||
<table class="table is-bordered">
|
||||
{{ thead }}
|
||||
<tbody>
|
||||
@@ -329,84 +338,85 @@ doc-subtab: typography-helpers
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% include 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>:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<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>italic</strong></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% include anchor.html name="Text weight" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can transform the text weight with the use of one of <strong>4 text weight helpers</strong>:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Class
|
||||
</th>
|
||||
<th>
|
||||
Weight
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>has-text-weight-light</code></td>
|
||||
<td>Transforms text weight to <strong>light</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-weight-normal</code></td>
|
||||
<td>Transforms text weight to <strong>normal</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-weight-semibold</code></td>
|
||||
<td>Transforms text weight to <strong>semi-bold</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-weight-bold</code></td>
|
||||
<td>Transforms text weight to <strong>bold</strong></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{% include layout/main-open.html %}
|
||||
|
||||
{% include 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>:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<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>italic</strong></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% include anchor.html name="Text weight" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can transform the text weight with the use of one of <strong>4 text weight helpers</strong>:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Class
|
||||
</th>
|
||||
<th>
|
||||
Weight
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>has-text-weight-light</code></td>
|
||||
<td>Transforms text weight to <strong>light</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-weight-normal</code></td>
|
||||
<td>Transforms text weight to <strong>normal</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-weight-semibold</code></td>
|
||||
<td>Transforms text weight to <strong>semi-bold</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-weight-bold</code></td>
|
||||
<td>Transforms text weight to <strong>bold</strong></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
Reference in New Issue
Block a user