mirror of
https://github.com/jgthms/bulma.git
synced 2025-01-09 15:44:25 +00:00
Add typography helpers
This commit is contained in:
Jeremy Thomas
parent
d7e49a4dc3
commit
3f8655c87d
2
docs/_includes/color/black-bis.html
Normal file
2
docs/_includes/color/black-bis.html
Normal file
@ -0,0 +1,2 @@
|
||||
<span class="color" style="background: hsl(0, 0%, 7%);"></span>
|
||||
hsl(0, 0%, 7%)
|
||||
2
docs/_includes/color/black-ter.html
Normal file
2
docs/_includes/color/black-ter.html
Normal file
@ -0,0 +1,2 @@
|
||||
<span class="color" style="background: hsl(0, 0%, 14%);"></span>
|
||||
hsl(0, 0%, 14%)
|
||||
2
docs/_includes/color/black.html
Normal file
2
docs/_includes/color/black.html
Normal file
@ -0,0 +1,2 @@
|
||||
<span class="color" style="background: hsl(0, 0%, 4%);"></span>
|
||||
hsl(0, 0%, 4%)
|
||||
2
docs/_includes/color/blue.html
Normal file
2
docs/_includes/color/blue.html
Normal file
@ -0,0 +1,2 @@
|
||||
<span class="color" style="background: hsl(217, 71%, 53%);"></span>
|
||||
hsl(217, 71%, 53%)
|
||||
2
docs/_includes/color/green.html
Normal file
2
docs/_includes/color/green.html
Normal file
@ -0,0 +1,2 @@
|
||||
<span class="color" style="background: hsl(141, 71%, 48%);"></span>
|
||||
hsl(141, 71%, 48%)
|
||||
2
docs/_includes/color/grey-dark.html
Normal file
2
docs/_includes/color/grey-dark.html
Normal file
@ -0,0 +1,2 @@
|
||||
<span class="color" style="background: hsl(0, 0%, 29%);"></span>
|
||||
hsl(0, 0%, 29%)
|
||||
2
docs/_includes/color/grey-darker.html
Normal file
2
docs/_includes/color/grey-darker.html
Normal file
@ -0,0 +1,2 @@
|
||||
<span class="color" style="background: hsl(0, 0%, 21%);"></span>
|
||||
hsl(0, 0%, 21%)
|
||||
2
docs/_includes/color/grey-light.html
Normal file
2
docs/_includes/color/grey-light.html
Normal file
@ -0,0 +1,2 @@
|
||||
<span class="color" style="background: hsl(0, 0%, 71%);"></span>
|
||||
hsl(0, 0%, 71%)
|
||||
2
docs/_includes/color/grey-lighter.html
Normal file
2
docs/_includes/color/grey-lighter.html
Normal file
@ -0,0 +1,2 @@
|
||||
<span class="color" style="background: hsl(0, 0%, 86%);"></span>
|
||||
hsl(0, 0%, 86%)
|
||||
2
docs/_includes/color/grey.html
Normal file
2
docs/_includes/color/grey.html
Normal file
@ -0,0 +1,2 @@
|
||||
<span class="color" style="background: hsl(0, 0%, 48%);"></span>
|
||||
hsl(0, 0%, 48%)
|
||||
2
docs/_includes/color/orange.html
Normal file
2
docs/_includes/color/orange.html
Normal file
@ -0,0 +1,2 @@
|
||||
<span class="color" style="background: hsl(14, 100%, 53%);"></span>
|
||||
hsl(14, 100%, 53%)
|
||||
2
docs/_includes/color/purple.html
Normal file
2
docs/_includes/color/purple.html
Normal file
@ -0,0 +1,2 @@
|
||||
<span class="color" style="background: hsl(271, 100%, 71%);"></span>
|
||||
hsl(271, 100%, 71%)
|
||||
2
docs/_includes/color/red.html
Normal file
2
docs/_includes/color/red.html
Normal file
@ -0,0 +1,2 @@
|
||||
<span class="color" style="background: hsl(348, 100%, 61%);"></span>
|
||||
hsl(348, 100%, 61%)
|
||||
2
docs/_includes/color/turquoise.html
Normal file
2
docs/_includes/color/turquoise.html
Normal file
@ -0,0 +1,2 @@
|
||||
<span class="color" style="background: hsl(171, 100%, 41%);"></span>
|
||||
hsl(171, 100%, 41%)
|
||||
2
docs/_includes/color/white-bis.html
Normal file
2
docs/_includes/color/white-bis.html
Normal file
@ -0,0 +1,2 @@
|
||||
<span class="color" style="background: hsl(0, 0%, 98%);"></span>
|
||||
hsl(0, 0%, 98%)
|
||||
2
docs/_includes/color/white-ter.html
Normal file
2
docs/_includes/color/white-ter.html
Normal file
@ -0,0 +1,2 @@
|
||||
<span class="color" style="background: hsl(0, 0%, 96%);"></span>
|
||||
hsl(0, 0%, 96%)
|
||||
2
docs/_includes/color/white.html
Normal file
2
docs/_includes/color/white.html
Normal file
@ -0,0 +1,2 @@
|
||||
<span class="color" style="background: hsl(0, 0%, 100%);"></span>
|
||||
hsl(0, 0%, 100%)
|
||||
2
docs/_includes/color/yellow.html
Normal file
2
docs/_includes/color/yellow.html
Normal file
@ -0,0 +1,2 @@
|
||||
<span class="color" style="background: hsl(48, 100%, 67%);"></span>
|
||||
hsl(48, 100%, 67%)
|
||||
@ -10,6 +10,12 @@
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'responsive-helpers' %}is-active{% endif %}" href="{{ site.url }}/documentation/modifiers/responsive-helpers/">
|
||||
Responsive helpers
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'typography-helpers' %}is-active{% endif %}" href="{{ site.url }}/documentation/modifiers/typography-helpers/">
|
||||
Typography helpers
|
||||
<span class="tag is-success" style="margin-left: 1em;">
|
||||
New!
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -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
269
docs/documentation/modifiers/typography-helpers.html
Normal 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>
|
||||
@ -1,32 +1,3 @@
|
||||
// Display
|
||||
|
||||
$displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
|
||||
|
||||
@each $display in $displays
|
||||
.is-#{$display}
|
||||
display: #{$display}
|
||||
+mobile
|
||||
.is-#{$display}-mobile
|
||||
display: #{$display} !important
|
||||
+tablet
|
||||
.is-#{$display}-tablet
|
||||
display: #{$display} !important
|
||||
+tablet-only
|
||||
.is-#{$display}-tablet-only
|
||||
display: #{$display} !important
|
||||
+touch
|
||||
.is-#{$display}-touch
|
||||
display: #{$display} !important
|
||||
+desktop
|
||||
.is-#{$display}-desktop
|
||||
display: #{$display} !important
|
||||
+desktop-only
|
||||
.is-#{$display}-desktop-only
|
||||
display: #{$display} !important
|
||||
+widescreen
|
||||
.is-#{$display}-widescreen
|
||||
display: #{$display} !important
|
||||
|
||||
// Float
|
||||
|
||||
.is-clearfix
|
||||
@ -48,7 +19,7 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
|
||||
.is-overlay
|
||||
+overlay
|
||||
|
||||
// Text
|
||||
// Typography
|
||||
|
||||
@each $size in $sizes
|
||||
$i: index($sizes, $size)
|
||||
@ -97,6 +68,39 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
|
||||
|
||||
// Visibility
|
||||
|
||||
$displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
|
||||
|
||||
@each $display in $displays
|
||||
.is-#{$display}
|
||||
display: #{$display}
|
||||
+mobile
|
||||
.is-#{$display}-mobile
|
||||
display: #{$display} !important
|
||||
+tablet
|
||||
.is-#{$display}-tablet
|
||||
display: #{$display} !important
|
||||
+tablet-only
|
||||
.is-#{$display}-tablet-only
|
||||
display: #{$display} !important
|
||||
+touch
|
||||
.is-#{$display}-touch
|
||||
display: #{$display} !important
|
||||
+desktop
|
||||
.is-#{$display}-desktop
|
||||
display: #{$display} !important
|
||||
+desktop-only
|
||||
.is-#{$display}-desktop-only
|
||||
display: #{$display} !important
|
||||
+widescreen
|
||||
.is-#{$display}-widescreen
|
||||
display: #{$display} !important
|
||||
+widescreen-only
|
||||
.is-#{$display}-widescreen-only
|
||||
display: #{$display} !important
|
||||
+fullhd
|
||||
.is-#{$display}-fullhd
|
||||
display: #{$display} !important
|
||||
|
||||
.is-hidden
|
||||
display: none !important
|
||||
|
||||
@ -128,6 +132,14 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
|
||||
.is-hidden-widescreen
|
||||
display: none !important
|
||||
|
||||
+widescreen-only
|
||||
.is-hidden-widescreen-only
|
||||
display: none !important
|
||||
|
||||
+fullhd
|
||||
.is-hidden-fullhd
|
||||
display: none !important
|
||||
|
||||
// Other
|
||||
|
||||
.is-marginless
|
||||
|
||||
Loading…
Reference in New Issue
Block a user