Organize partials

This commit is contained in:
Jeremy Thomas
2018-04-09 22:25:26 +01:00
parent a1c1909001
commit e8d4efb274
97 changed files with 691 additions and 835 deletions

View File

@@ -10,7 +10,7 @@ breadcrumb:
- modifiers-color-helpers
---
{% include anchor.html name="Text color" %}
{% include elements/anchor.html name="Text color" %}
<div class="content">
<p>
@@ -52,7 +52,7 @@ breadcrumb:
</tbody>
</table>
{% include anchor.html name="Background color" %}
{% include elements/anchor.html name="Background color" %}
{% include elements/new-tag.html version="0.6.3" %}

View File

@@ -1,6 +1,7 @@
---
title: Responsive helpers
layout: documentation
hide_categories: true
doc-tab: modifiers
doc-subtab: responsive-helpers
breadcrumb:
@@ -57,7 +58,7 @@ breadcrumb:
</td>
{% endcapture %}
{% include anchor.html name="Show" %}
{% include elements/anchor.html name="Show" %}
<div class="content">
<p>
@@ -73,106 +74,114 @@ breadcrumb:
<p>For example, here's how the <code>is-flex</code> helper works:</p>
</div>
<table class="table is-bordered">
{{ thead }}
<tbody>
<tr>
<td class="is-narrow">
<code>is-flex-mobile</code>
</td>
{{ flex }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-tablet-only</code>
</td>
{{ unchanged }}
{{ flex }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-desktop-only</code>
</td>
{{ unchanged }}
{{ unchanged }}
{{ flex }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-widescreen-only</code>
</td>
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ flex }}
{{ unchanged }}
</tr>
<tr>
<th colspan="5">
<p>Classes to display <strong>up to</strong> or <strong>from</strong> a specific breakpoint</p>
</th>
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-touch</code>
</td>
{{ flex }}
{{ flex }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-tablet</code>
</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">
<code>is-flex-widescreen</code>
</td>
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ flex }}
{{ flex }}
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-fullhd</code>
</td>
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ flex }}
</tr>
</tbody>
</table>
{% include layout/main-close.html show_categories=true %}
<div class="container">
<div class="table-container">
<table class="table is-bordered">
{{ thead }}
<tbody>
<tr>
<td class="is-narrow">
<code>is-flex-mobile</code>
</td>
{{ flex }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-tablet-only</code>
</td>
{{ unchanged }}
{{ flex }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-desktop-only</code>
</td>
{{ unchanged }}
{{ unchanged }}
{{ flex }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-widescreen-only</code>
</td>
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ flex }}
{{ unchanged }}
</tr>
<tr>
<th colspan="5">
<p>Classes to display <strong>up to</strong> or <strong>from</strong> a specific breakpoint</p>
</th>
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-touch</code>
</td>
{{ flex }}
{{ flex }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-tablet</code>
</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">
<code>is-flex-widescreen</code>
</td>
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ flex }}
{{ flex }}
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-fullhd</code>
</td>
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ flex }}
</tr>
</tbody>
</table>
</div>
</div>
{% include layout/main-open.html %}
<div class="content">
<p>
@@ -180,105 +189,113 @@ breadcrumb:
</p>
</div>
{% include anchor.html name="Hide" %}
{% include elements/anchor.html name="Hide" %}
<table class="table is-bordered">
{{ thead }}
<tbody>
<tr>
<td class="is-narrow">
<code>is-hidden-mobile</code>
</td>
{{ hidden }}
{{ visible }}
{{ visible }}
{{ visible }}
{{ visible }}
</tr>
<tr>
<td class="is-narrow">
<code>is-hidden-tablet-only</code>
</td>
{{ visible }}
{{ hidden }}
{{ visible }}
{{ visible }}
{{ visible }}
</tr>
<tr>
<td class="is-narrow">
<code>is-hidden-desktop-only</code>
</td>
{{ visible }}
{{ visible }}
{{ hidden }}
{{ visible }}
{{ visible }}
</tr>
<tr>
<td class="is-narrow">
<code>is-hidden-widescreen-only</code>
</td>
{{ visible }}
{{ visible }}
{{ visible }}
{{ hidden }}
{{ visible }}
</tr>
<tr>
<th colspan="5">
<p>Classes to hide <strong>up to</strong> or <strong>from</strong> a specific breakpoint</p>
</th>
</tr>
<tr>
<td class="is-narrow">
<code>is-hidden-touch</code>
</td>
{{ hidden }}
{{ hidden }}
{{ visible }}
{{ visible }}
{{ visible }}
</tr>
<tr>
<td class="is-narrow">
<code>is-hidden-tablet</code>
</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">
<code>is-hidden-widescreen</code>
</td>
{{ visible }}
{{ visible }}
{{ visible }}
{{ hidden }}
{{ hidden }}
</tr>
<tr>
<td class="is-narrow">
<code>is-hidden-fullhd</code>
</td>
{{ visible }}
{{ visible }}
{{ visible }}
{{ visible }}
{{ hidden }}
</tr>
</tbody>
</table>
{% include layout/main-close.html %}
<div class="container">
<div class="table-container">
<table class="table is-bordered">
{{ thead }}
<tbody>
<tr>
<td class="is-narrow">
<code>is-hidden-mobile</code>
</td>
{{ hidden }}
{{ visible }}
{{ visible }}
{{ visible }}
{{ visible }}
</tr>
<tr>
<td class="is-narrow">
<code>is-hidden-tablet-only</code>
</td>
{{ visible }}
{{ hidden }}
{{ visible }}
{{ visible }}
{{ visible }}
</tr>
<tr>
<td class="is-narrow">
<code>is-hidden-desktop-only</code>
</td>
{{ visible }}
{{ visible }}
{{ hidden }}
{{ visible }}
{{ visible }}
</tr>
<tr>
<td class="is-narrow">
<code>is-hidden-widescreen-only</code>
</td>
{{ visible }}
{{ visible }}
{{ visible }}
{{ hidden }}
{{ visible }}
</tr>
<tr>
<th colspan="5">
<p>Classes to hide <strong>up to</strong> or <strong>from</strong> a specific breakpoint</p>
</th>
</tr>
<tr>
<td class="is-narrow">
<code>is-hidden-touch</code>
</td>
{{ hidden }}
{{ hidden }}
{{ visible }}
{{ visible }}
{{ visible }}
</tr>
<tr>
<td class="is-narrow">
<code>is-hidden-tablet</code>
</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">
<code>is-hidden-widescreen</code>
</td>
{{ visible }}
{{ visible }}
{{ visible }}
{{ hidden }}
{{ hidden }}
</tr>
<tr>
<td class="is-narrow">
<code>is-hidden-fullhd</code>
</td>
{{ visible }}
{{ visible }}
{{ visible }}
{{ visible }}
{{ hidden }}
</tr>
</tbody>
</table>
</div>
</div>
{% include layout/main-open.html %}

View File

@@ -55,7 +55,7 @@ breadcrumb:
</td>
{% endcapture %}
{% include anchor.html name="Size" %}
{% include elements/anchor.html name="Size" %}
<div class="content">
<p>
@@ -85,7 +85,7 @@ breadcrumb:
</tbody>
</table>
{% include anchor.html name="Responsive size" %}
{% include elements/anchor.html name="Responsive size" %}
<div class="content">
<p>
@@ -164,7 +164,7 @@ breadcrumb:
</p>
</div>
{% include anchor.html name="Colors" %}
{% include elements/anchor.html name="Colors" %}
<div class="content">
<p>
@@ -206,7 +206,7 @@ breadcrumb:
</tbody>
</table>
{% include anchor.html name="Alignment" %}
{% include elements/anchor.html name="Alignment" %}
<div class="content">
<p>
@@ -245,7 +245,7 @@ breadcrumb:
</tbody>
</table>
{% include anchor.html name="Responsive Alignment" %}
{% include elements/anchor.html name="Responsive Alignment" %}
<div class="content">
<p>
@@ -343,7 +343,7 @@ breadcrumb:
{% include layout/main-open.html %}
{% include anchor.html name="Text transformation" %}
{% include elements/anchor.html name="Text transformation" %}
<div class="content">
<p>
@@ -382,7 +382,7 @@ breadcrumb:
</tbody>
</table>
{% include anchor.html name="Text weight" %}
{% include elements/anchor.html name="Text weight" %}
<div class="content">
<p>