Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-18 11:24:29 -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>