Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-18 03:14:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

Add typography helpers

Browse Source
This commit is contained in:
Jeremy Thomas
2017-07-24 20:22:16 +02:00
parent d7e49a4dc3
commit 3f8655c87d
23 changed files with 1343 additions and 2105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

372
docs/documentation/modifiers/responsive-helpers.html
View File

@@ -4,6 +4,60 @@ doc-tab: modifiers
doc-subtab: responsive-helpers
---
{% capture thead %}
<thead>
<tr>
<th>
Class
</th>
<th>
Mobile<br>
Up to <code>768px</code>
</th>
<th>
Tablet<br>
Between <code>769px</code> and <code>1007px</code>
</th>
<th>
Desktop<br>
Between <code>1008px</code> and <code>1199px</code>
</th>
<th>
Widescreen<br>
Between <code>1200px</code> and <code>1391px</code>
</th>
<th>
FullHD<br>
Above <code>1392px</code>
</th>
</tr>
</thead>
{% endcapture %}
{% capture flex %}
<td class="is-narrow">
<p class="notification is-success">flex</p>
</td>
{% endcapture %}
{% capture visible %}
<td class="is-narrow">
<p class="notification is-success">visible</p>
</td>
{% endcapture %}
{% capture hidden %}
<td class="is-narrow">
<p class="notification">hidden</p>
</td>
{% endcapture %}
{% capture unchanged %}
<td class="is-narrow">
<p class="notification">unchanged</p>
</td>
{% endcapture %}
{% include subnav-modifiers.html %}
<section class="section">
@@ -30,100 +84,50 @@ doc-subtab: responsive-helpers
</div>
<table class="table is-bordered">
<thead>
<tr>
<th>
Class
</th>
<th>
Mobile<br>
Up to <code>768px</code>
</th>
<th>
Tablet<br>
Between <code>769px</code> and <code>979px</code>
</th>
<th>
Desktop<br>
Between <code>980px</code> and <code>1179px</code>
</th>
<th>
Widescreen<br>
Above <code>1180px</code>
</th>
</tr>
</thead>
{{ thead }}
<tbody>
<tr>
<td class="is-narrow">
<code>is-flex-mobile</code>
</td>
<td class="is-narrow">
<p class="notification is-success">flex</p>
</td>
<td class="is-narrow">
<p class="notification">unchanged</p>
</td>
<td class="is-narrow">
<p class="notification">unchanged</p>
</td>
<td class="is-narrow">
<p class="notification">unchanged</p>
</td>
{{ flex }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-tablet-only</code>
</td>
<td class="is-narrow">
<p class="notification">unchanged</p>
</td>
<td class="is-narrow">
<p class="notification is-success">flex</p>
</td>
<td class="is-narrow">
<p class="notification">unchanged</p>
</td>
<td class="is-narrow">
<p class="notification">unchanged</p>
</td>
{{ unchanged }}
{{ flex }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-desktop-only</code>
</td>
<td class="is-narrow">
<p class="notification">unchanged</p>
</td>
<td class="is-narrow">
<p class="notification">unchanged</p>
</td>
<td class="is-narrow">
<p class="notification is-success">flex</p>
</td>
<td class="is-narrow">
<p class="notification">unchanged</p>
</td>
{{ unchanged }}
{{ unchanged }}
{{ flex }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-widescreen</code>
</td>
<td class="is-narrow">
<p class="notification">unchanged</p>
</td>
<td class="is-narrow">
<p class="notification">unchanged</p>
</td>
<td class="is-narrow">
<p class="notification">unchanged</p>
</td>
<td class="is-narrow">
<p class="notification is-success">flex</p>
<code>is-flex-widescreen-only</code>
</td>
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ flex }}
{{ unchanged }}
</tr>
<tr>
<th colspan="4">
<th colspan="5">
<p>Classes to display <strong>up to</strong> or <strong>from</strong> a specific breakpoint</p>
</th>
</tr>
@@ -131,52 +135,51 @@ doc-subtab: responsive-helpers
<td class="is-narrow">
<code>is-flex-touch</code>
</td>
<td class="is-narrow">
<p class="notification is-success">flex</p>
</td>
<td class="is-narrow">
<p class="notification is-success">flex</p>
</td>
<td class="is-narrow">
<p class="notification">unchanged</p>
</td>
<td class="is-narrow">
<p class="notification">unchanged</p>
</td>
{{ flex }}
{{ flex }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-tablet</code>
</td>
<td class="is-narrow">
<p class="notification">unchanged</p>
</td>
<td class="is-narrow">
<p class="notification is-success">flex</p>
</td>
<td class="is-narrow">
<p class="notification is-success">flex</p>
</td>
<td class="is-narrow">
<p class="notification is-success">flex</p>
</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">
<p class="notification">unchanged</p>
<code>is-flex-widescreen</code>
</td>
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ flex }}
{{ flex }}
</tr>
<tr>
<td class="is-narrow">
<p class="notification">unchanged</p>
</td>
<td class="is-narrow">
<p class="notification is-success">flex</p>
</td>
<td class="is-narrow">
<p class="notification is-success">flex</p>
<code>is-flex-fullhd</code>
</td>
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ flex }}
</tr>
</tbody>
</table>
@@ -189,100 +192,50 @@ doc-subtab: responsive-helpers
<h3 class="title">Hide</h3>
<table class="table is-bordered">
<thead>
<tr>
<th>
Class
</th>
<th>
Mobile<br>
Up to <code>768px</code>
</th>
<th>
Tablet<br>
Between <code>769px</code> and <code>999px</code>
</th>
<th>
Desktop<br>
Between <code>1000px</code> and <code>1239px</code>
</th>
<th>
Widescreen<br>
Above <code>1240px</code>
</th>
</tr>
</thead>
{{ thead }}
<tbody>
<tr>
<td class="is-narrow">
<code>is-hidden-mobile</code>
</td>
<td class="is-narrow">
<p class="notification">hidden</p>
</td>
<td class="is-narrow">
<p class="notification is-success">visible</p>
</td>
<td class="is-narrow">
<p class="notification is-success">visible</p>
</td>
<td class="is-narrow">
<p class="notification is-success">visible</p>
</td>
{{ hidden }}
{{ visible }}
{{ visible }}
{{ visible }}
{{ visible }}
</tr>
<tr>
<td class="is-narrow">
<code>is-hidden-tablet-only</code>
</td>
<td class="is-narrow">
<p class="notification is-success">visible</p>
</td>
<td class="is-narrow">
<p class="notification">hidden</p>
</td>
<td class="is-narrow">
<p class="notification is-success">visible</p>
</td>
<td class="is-narrow">
<p class="notification is-success">visible</p>
</td>
{{ visible }}
{{ hidden }}
{{ visible }}
{{ visible }}
{{ visible }}
</tr>
<tr>
<td class="is-narrow">
<code>is-hidden-desktop-only</code>
</td>
<td class="is-narrow">
<p class="notification is-success">visible</p>
</td>
<td class="is-narrow">
<p class="notification is-success">visible</p>
</td>
<td class="is-narrow">
<p class="notification">hidden</p>
</td>
<td class="is-narrow">
<p class="notification is-success">visible</p>
</td>
{{ visible }}
{{ visible }}
{{ hidden }}
{{ visible }}
{{ visible }}
</tr>
<tr>
<td class="is-narrow">
<code>is-hidden-widescreen</code>
</td>
<td class="is-narrow">
<p class="notification is-success">visible</p>
</td>
<td class="is-narrow">
<p class="notification is-success">visible</p>
</td>
<td class="is-narrow">
<p class="notification is-success">visible</p>
</td>
<td class="is-narrow">
<p class="notification">hidden</p>
<code>is-hidden-widescreen-only</code>
</td>
{{ visible }}
{{ visible }}
{{ visible }}
{{ hidden }}
{{ visible }}
</tr>
<tr>
<th colspan="4">
<th colspan="5">
<p>Classes to hide <strong>up to</strong> or <strong>from</strong> a specific breakpoint</p>
</th>
</tr>
@@ -290,52 +243,51 @@ doc-subtab: responsive-helpers
<td class="is-narrow">
<code>is-hidden-touch</code>
</td>
<td class="is-narrow">
<p class="notification">hidden</p>
</td>
<td class="is-narrow">
<p class="notification">hidden</p>
</td>
<td class="is-narrow">
<p class="notification is-success">visible</p>
</td>
<td class="is-narrow">
<p class="notification is-success">visible</p>
</td>
{{ hidden }}
{{ hidden }}
{{ visible }}
{{ visible }}
{{ visible }}
</tr>
<tr>
<td class="is-narrow">
<code>is-hidden-tablet</code>
</td>
<td class="is-narrow">
<p class="notification is-success">visible</p>
</td>
<td class="is-narrow">
<p class="notification">hidden</p>
</td>
<td class="is-narrow">
<p class="notification">hidden</p>
</td>
<td class="is-narrow">
<p class="notification">hidden</p>
</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">
<p class="notification is-success">visible</p>
<code>is-hidden-widescreen</code>
</td>
{{ visible }}
{{ visible }}
{{ visible }}
{{ hidden }}
{{ hidden }}
</tr>
<tr>
<td class="is-narrow">
<p class="notification is-success">visible</p>
</td>
<td class="is-narrow">
<p class="notification">hidden</p>
</td>
<td class="is-narrow">
<p class="notification">hidden</p>
<code>is-hidden-fullhd</code>
</td>
{{ visible }}
{{ visible }}
{{ visible }}
{{ visible }}
{{ hidden }}
</tr>
</tbody>
</table>

269
docs/documentation/modifiers/typography-helpers.html Normal file
View File

@@ -0,0 +1,269 @@
---
layout: documentation
doc-tab: modifiers
doc-subtab: typography-helpers
---
{% capture thead %}
<thead>
<tr>
<th>
Class
</th>
<th>
Mobile<br>
Up to <code>768px</code>
</th>
<th>
Tablet<br>
Between <code>769px</code> and <code>1007px</code>
</th>
<th>
Desktop<br>
Between <code>1008px</code> and <code>1199px</code>
</th>
<th>
Widescreen<br>
Between <code>1200px</code> and <code>1391px</code>
</th>
<th>
FullHD<br>
Above <code>1392px</code>
</th>
</tr>
</thead>
{% endcapture %}
{% capture size1 %}
<td class="is-narrow">
<p class="notification is-success"><code>3rem</code></p>
</td>
{% endcapture %}
{% capture unchanged %}
<td class="is-narrow">
<p class="notification">unchanged</p>
</td>
{% endcapture %}
{% 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>
<hr>
<h3 class="title">Size</h3>
<div class="content">
<p>
There are <strong>7 sizes</strong> to choose from:
</p>
</div>
<table class="table is-bordered">
<thead>
<tr>
<th>
Class
</th>
<th>
Font-size
</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>is-size-1</code></td>
<td><code>3rem</code></td>
</tr>
<tr>
<td><code>is-size-2</code></td>
<td><code>2.5rem</code></td>
</tr>
<tr>
<td><code>is-size-3</code></td>
<td><code>2rem</code></td>
</tr>
<tr>
<td><code>is-size-4</code></td>
<td><code>1.5rem</code></td>
</tr>
<tr>
<td><code>is-size-5</code></td>
<td><code>1.25rem</code></td>
</tr>
<tr>
<td><code>is-size-6</code></td>
<td><code>1rem</code></td>
</tr>
<tr>
<td><code>is-size-7</code></td>
<td><code>0.75rem</code></td>
</tr>
</tbody>
</table>
<hr>
<h3 class="title">
Responsive size
</h3>
<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>
<hr>
<h3 class="title">
Colors
</h3>
<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>
</tbody>
</table>
<hr>
<h3 class="title">Alignment</h3>
<div class="content">
<p>
You can align the text with the use of one of <strong>3 alignment helpers</strong>:
</p>
</div>
<table class="table is-bordered">
<thead>
<tr>
<th>
Class
</th>
<th>
Color
</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-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>
</section>