mirror of
https://github.com/jgthms/bulma.git
synced 2025-01-09 15:44:25 +00:00
4871a6a564
Incorrect classes on the example text had all the examples the same size. Fixed to apply the correct class on the examples.
413 lines
9.8 KiB
HTML
413 lines
9.8 KiB
HTML
---
|
|
title: Typography helpers
|
|
layout: documentation
|
|
doc-tab: helpers
|
|
doc-subtab: helpers-typography
|
|
breadcrumb:
|
|
- 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 %}
|
|
<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 %}
|
|
</tr>
|
|
</thead>
|
|
{% endcapture %}
|
|
|
|
{% capture size1 %}
|
|
<td class="is-narrow has-background-danger-light">
|
|
<code class="has-background-danger-light">{{ initial_vars['$size-1'].value }}</code>
|
|
</td>
|
|
{% endcapture %}
|
|
|
|
{% capture unchanged %}
|
|
<td class="is-narrow 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" %}
|
|
|
|
<div class="content">
|
|
<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>
|
|
</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>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
|
|
{% include 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>:
|
|
</p>
|
|
</div>
|
|
|
|
<div class="table-container">
|
|
<table class="table is-bordered">
|
|
{{ thead }}
|
|
<tbody>
|
|
<tr>
|
|
<td class="is-narrow"><code>is-size-1-mobile</code></td>
|
|
{{ size1 }}
|
|
{{ unchanged }}
|
|
{{ unchanged }}
|
|
{{ unchanged }}
|
|
{{ unchanged }}
|
|
</tr>
|
|
<tr>
|
|
<td class="is-narrow"><code>is-size-1-touch</code></td>
|
|
{{ size1 }}
|
|
{{ size1 }}
|
|
{{ unchanged }}
|
|
{{ unchanged }}
|
|
{{ unchanged }}
|
|
</tr>
|
|
<tr>
|
|
<td class="is-narrow"><code>is-size-1-tablet</code></td>
|
|
{{ unchanged }}
|
|
{{ size1 }}
|
|
{{ size1 }}
|
|
{{ size1 }}
|
|
{{ size1 }}
|
|
</tr>
|
|
<tr>
|
|
<td class="is-narrow"><code>is-size-1-desktop</code></td>
|
|
{{ unchanged }}
|
|
{{ unchanged }}
|
|
{{ size1 }}
|
|
{{ size1 }}
|
|
{{ size1 }}
|
|
</tr>
|
|
<tr>
|
|
<td class="is-narrow"><code>is-size-1-widescreen</code></td>
|
|
{{ unchanged }}
|
|
{{ unchanged }}
|
|
{{ unchanged }}
|
|
{{ size1 }}
|
|
{{ size1 }}
|
|
</tr>
|
|
<tr>
|
|
<td class="is-narrow"><code>is-size-1-fullhd</code></td>
|
|
{{ unchanged }}
|
|
{{ unchanged }}
|
|
{{ unchanged }}
|
|
{{ unchanged }}
|
|
{{ size1 }}
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<p>
|
|
You can use the same logic for each of the <strong>7 sizes</strong>.
|
|
</p>
|
|
</div>
|
|
|
|
{% include 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>:
|
|
</p>
|
|
</div>
|
|
|
|
<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>
|
|
|
|
{% include 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.
|
|
</p>
|
|
|
|
<p>
|
|
For example, here are the modifiers for <code>has-text-left</code>:
|
|
</p>
|
|
</div>
|
|
|
|
<div class="table-container">
|
|
<table class="table is-bordered">
|
|
{{ thead }}
|
|
<tbody>
|
|
<tr>
|
|
<td class="is-narrow"><code>has-text-left-mobile</code></td>
|
|
{{ left }}
|
|
{{ unchanged }}
|
|
{{ unchanged }}
|
|
{{ unchanged }}
|
|
{{ unchanged }}
|
|
</tr>
|
|
<tr>
|
|
<td class="is-narrow"><code>has-text-left-touch</code></td>
|
|
{{ left }}
|
|
{{ left }}
|
|
{{ unchanged }}
|
|
{{ unchanged }}
|
|
{{ unchanged }}
|
|
</tr>
|
|
<tr>
|
|
<td class="is-narrow"><code>has-text-left-tablet-only</code></td>
|
|
{{ unchanged }}
|
|
{{ left }}
|
|
{{ unchanged }}
|
|
{{ unchanged }}
|
|
{{ unchanged }}
|
|
</tr>
|
|
<tr>
|
|
<td class="is-narrow"><code>has-text-left-tablet</code></td>
|
|
{{ unchanged }}
|
|
{{ left }}
|
|
{{ left }}
|
|
{{ left }}
|
|
{{ left }}
|
|
</tr>
|
|
<tr>
|
|
<td class="is-narrow"><code>has-text-left-desktop-only</code></td>
|
|
{{ unchanged }}
|
|
{{ unchanged }}
|
|
{{ left }}
|
|
{{ unchanged }}
|
|
{{ unchanged }}
|
|
</tr>
|
|
<tr>
|
|
<td class="is-narrow"><code>has-text-left-desktop</code></td>
|
|
{{ unchanged }}
|
|
{{ unchanged }}
|
|
{{ left }}
|
|
{{ left }}
|
|
{{ left }}
|
|
</tr>
|
|
<tr>
|
|
<td class="is-narrow"><code>has-text-left-widescreen-only</code></td>
|
|
{{ unchanged }}
|
|
{{ unchanged }}
|
|
{{ unchanged }}
|
|
{{ left }}
|
|
{{ unchanged }}
|
|
</tr>
|
|
<tr>
|
|
<td class="is-narrow"><code>has-text-left-widescreen</code></td>
|
|
{{ unchanged }}
|
|
{{ unchanged }}
|
|
{{ unchanged }}
|
|
{{ left }}
|
|
{{ left }}
|
|
</tr>
|
|
<tr>
|
|
<td class="is-narrow"><code>has-text-left-fullhd</code></td>
|
|
{{ unchanged }}
|
|
{{ unchanged }}
|
|
{{ unchanged }}
|
|
{{ unchanged }}
|
|
{{ left }}
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<p>
|
|
You can use the same logic for each of the <strong>4 alignments</strong>.
|
|
</p>
|
|
</div>
|
|
|
|
{% include elements/anchor.html name="Text transformation" %}
|
|
|
|
<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 <span class="is-capitalized">uppercase</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>is-lowercase</code></td>
|
|
<td>Transforms <strong>all characters</strong> to <span class="is-lowercase">lowercase</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>is-uppercase</code></td>
|
|
<td>Transforms <strong>all characters</strong> to <span class="is-uppercase">uppercase</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>is-italic</code></td>
|
|
<td>Transforms <strong>all characters</strong> to <span class="is-italic">italic</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
{% include 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>:
|
|
</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 <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>
|
|
</tr>
|
|
<tr>
|
|
<td><code>has-text-weight-medium</code></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>
|
|
</tr>
|
|
<tr>
|
|
<td><code>has-text-weight-bold</code></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" %}
|
|
|
|
<div class="content">
|
|
<p>
|
|
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: ',' %}
|
|
|
|
<table class="table is-bordered">
|
|
<thead>
|
|
<tr>
|
|
<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>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|