bulma/docs/documentation/modifiers/typography-helpers.html

412 lines
11 KiB
HTML
Raw Normal View History

2017-07-24 18:22:16 +00:00
---
2017-07-29 12:02:00 +00:00
title: Typography helpers
2017-07-24 18:22:16 +00:00
layout: documentation
doc-tab: modifiers
doc-subtab: typography-helpers
---
{% assign initial_vars = site.data.variables.utilities.initial-variables.vars %}
{% assign sizes = site.data.variables.utilities.derived-variables.vars.sizes.value | split: ' ' %}
2017-07-24 18:22:16 +00:00
{% capture thead %}
<thead>
<tr>
<th>
Class
</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 %}
2017-07-24 18:22:16 +00:00
</tr>
</thead>
{% endcapture %}
{% capture size1 %}
<td class="is-narrow">
<p class="notification is-success"><code>{{ initial_vars.size-1.value }}</code></p>
2017-07-24 18:22:16 +00:00
</td>
{% endcapture %}
{% capture unchanged %}
<td class="is-narrow">
<p class="notification">unchanged</p>
</td>
{% endcapture %}
{% capture left %}
<td class="is-narrow">
<p class="notification is-success">left-aligned</p>
</td>
{% endcapture %}
2017-07-24 18:22:16 +00:00
{% include subnav-modifiers.html %}
<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>
2017-08-30 19:44:39 +00:00
{% include anchor.html name="Size" %}
2017-07-24 18:22:16 +00:00
<div class="content">
<p>
There are <strong>{{ sizes | size }} sizes</strong> to choose from:
2017-07-24 18:22:16 +00:00
</p>
</div>
<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 %}
2017-07-24 18:22:16 +00:00
</tbody>
</table>
2017-08-30 19:44:39 +00:00
{% include anchor.html name="Responsive size" %}
2017-07-24 18:22:16 +00:00
<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>
<table class="table is-bordered">
{{ thead }}
<tbody>
<tr>
<td><code>is-size-1-mobile</code></td>
{{ size1 }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td><code>is-size-1-tablet</code></td>
{{ unchanged }}
{{ size1 }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td><code>is-size-1-touch</code></td>
{{ size1 }}
{{ size1 }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td><code>is-size-1-desktop</code></td>
{{ unchanged }}
{{ unchanged }}
{{ size1 }}
{{ size1 }}
{{ size1 }}
</tr>
<tr>
<td><code>is-size-1-widescreen</code></td>
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ size1 }}
{{ size1 }}
</tr>
<tr>
<td><code>is-size-1-fullhd</code></td>
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ size1 }}
</tr>
</tbody>
</table>
<div class="content">
<p>
You can use the same logic for each of the <strong>7 sizes</strong>.
</p>
</div>
2017-08-30 19:44:39 +00:00
{% include anchor.html name="Colors" %}
2017-07-24 18:22:16 +00:00
<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>
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/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>
2017-07-24 18:22:16 +00:00
</tbody>
</table>
2017-08-30 19:44:39 +00:00
{% include anchor.html name="Alignment" %}
2017-07-24 18:22:16 +00:00
<div class="content">
<p>
2017-10-22 14:46:37 +00:00
You can align the text with the use of one of <strong>4 alignment helpers</strong>:
2017-07-24 18:22:16 +00:00
</p>
</div>
<table class="table is-bordered">
<thead>
<tr>
<th>
Class
</th>
<th>
Alignment
2017-07-24 18:22:16 +00:00
</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>has-text-centered</code></td>
2017-07-24 18:22:16 +00:00
<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>
2017-07-24 18:22:16 +00:00
<td>Makes the text aligned to the <strong>left</strong></td>
</tr>
<tr>
<td><code>has-text-right</code></td>
2017-07-24 18:22:16 +00:00
<td>Makes the text aligned to the <strong>right</strong></td>
</tr>
</tbody>
</table>
2017-08-30 19:44:39 +00:00
{% include anchor.html name="Responsive Alignment" %}
<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>
2017-08-30 19:44:39 +00:00
<p>
For example, here are the modifiers for <code>has-text-left</code>:
</p>
</div>
<table class="table is-bordered">
{{ thead }}
<tbody>
<tr>
<td><code>has-text-left-mobile</code></td>
{{ left }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td><code>has-text-left-tablet</code></td>
{{ unchanged }}
{{ left }}
{{ left }}
{{ left }}
{{ left }}
</tr>
<tr>
<td><code>has-text-left-tablet-only</code></td>
{{ unchanged }}
{{ left }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td><code>has-text-left-touch</code></td>
{{ left }}
{{ left }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td><code>has-text-left-desktop</code></td>
{{ unchanged }}
{{ unchanged }}
{{ left }}
{{ left }}
{{ left }}
</tr>
<tr>
<td><code>has-text-left-desktop-only</code></td>
{{ unchanged }}
{{ unchanged }}
{{ left }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td><code>has-text-left-widescreen</code></td>
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ left }}
{{ left }}
</tr>
<tr>
<td><code>has-text-left-widescreen-only</code></td>
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ left }}
{{ unchanged }}
</tr>
<tr>
<td><code>has-text-left-fullhd</code></td>
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ left }}
</tr>
</tbody>
</table>
2017-08-30 19:44:39 +00:00
{% 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>
2017-08-04 22:43:26 +00:00
<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>
2017-07-24 18:22:16 +00:00
</div>
</section>