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,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>
|
||||
|
||||
Reference in New Issue
Block a user