mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
1523ce8527
* Replace variables.json with colors.json and update related files accordingly * Add variables data files * Update variables include template and all related files to use new variables data * Fix mobile breakpoint id typo in responsivness docs page * Fix Liquid syntax error in made-with-bulma docs page * Update bulma sass files count in modular docs page * Use breakpoints data in responsiveness helpers docs page * Use breakpoints and variables data in typography helpers docs page * Add missing page titles in docs pages front matter
289 lines
6.9 KiB
HTML
289 lines
6.9 KiB
HTML
---
|
|
title: Responsive helpers
|
|
layout: documentation
|
|
doc-tab: modifiers
|
|
doc-subtab: responsive-helpers
|
|
---
|
|
|
|
{% capture thead %}
|
|
<thead>
|
|
<tr>
|
|
<th>
|
|
Class
|
|
</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 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">
|
|
<div class="container">
|
|
<h1 class="title">Responsive helpers</h1>
|
|
<h2 class="subtitle"><strong>Show/hide content</strong> depending on the width of the viewport</h2>
|
|
|
|
{% include anchor.html name="Show" %}
|
|
|
|
<div class="content">
|
|
<p>
|
|
You can use one of the following <code>display</code> classes:
|
|
</p>
|
|
<ul>
|
|
<li><code>block</code></li>
|
|
<li><code>flex</code></li>
|
|
<li><code>inline</code></li>
|
|
<li><code>inline-block</code></li>
|
|
<li><code>inline-flex</code></li>
|
|
</ul>
|
|
<p>For example, here's what 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>
|
|
|
|
<div class="content">
|
|
<p>
|
|
For the other display options, just replace <code>is-flex</code> with <code>is-block</code> <code>is-inline</code> <code>is-inline-block</code> or <code>is-inline-flex</code>
|
|
</p>
|
|
</div>
|
|
|
|
{% include 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>
|
|
</div>
|
|
</section>
|