bulma/docs/documentation/overview/responsiveness.html
agoede 11c44b0922 Update correct lines in Github repository
Fix lines docs in Github repository
2019-10-15 17:43:49 +01:00

242 lines
6.8 KiB
HTML

---
title: Responsiveness
layout: documentation
doc-tab: overview
doc-subtab: responsiveness
breadcrumb:
- home
- documentation
- overview
- overview-responsiveness
variables_keys:
- $gap
- $tablet
- $desktop
- $widescreen
- $fullhd
---
{% capture scss_code %}
// Disable the widescreen breakpoint
$widescreen-enabled: false
// Disable the fullhd breakpoint
$fullhd-enabled: false
{% endcapture %}
{% include elements/anchor.html name="Vertical by default" %}
<div class="content">
<p>
Every element in Bulma is <strong>mobile-first</strong> and optimizes for <strong>vertical reading</strong>, so by default on mobile:
</p>
<ul>
<li><code>columns</code> are stacked vertically</li>
<li>the <code>level</code> component will show its children stacked vertically</li>
<li>the <code>nav</code> menu will be hidden</li>
</ul>
<p>You can however enforce the <strong>horizontal</strong> layout for both <code>columns</code> or <code>level</code> by appending the <code>is-mobile</code> modifier.</p>
</div>
{% include elements/anchor.html name="Breakpoints" %}
{% assign variables_file_url = "/blob/master/sass/utilities/initial-variables.sass#L56,L64" | prepend: site.data.meta.github %}
{% assign mixins_file_url = "/blob/master/sass/utilities/mixins.sass#L81,L129" | prepend: site.data.meta.github %}
<div class="content">
<p>Bulma has <a href="{{ variables_file_url }}" target="_blank">5 breakpoints</a>:</p>
<ul>
{% for breakpoint_hash in site.data.breakpoints %}
{% assign breakpoint = breakpoint_hash[1] %}
<li><code>{{ breakpoint.id }}</code>: {% if breakpoint.id == 'mobile' %}up to <code>{{ breakpoint.to }}px</code>{% else %}from <code>{{ breakpoint.from }}px</code>{% endif %}</li>
{% endfor %}
</ul>
<p>Bulma uses <a href="{{ mixins_file_url }}" target="_blank">9 responsive mixins</a>:</p>
<ul>
{% for breakpoint_hash in site.data.breakpoints %}
{% assign breakpoint = breakpoint_hash[1] %}
{% case breakpoint.id %}
{% when 'mobile' %}
<li>
<code>={{ breakpoint.id }}</code><br>
until <code>{{ breakpoint.to }}px</code>
</li>
{% when 'fullhd' %}
<li>
<code>={{ breakpoint.id }}</code><br>
from <code>{{ breakpoint.from }}px</code>
</li>
{% else %}
<li>
<code>={{ breakpoint.id }}</code><br>
from <code>{{ breakpoint.from }}px</code>
</li>
<li>
<code>={{ breakpoint.id }}-only</code><br>
from <code>{{ breakpoint.from }}px</code> and until <code>{{ breakpoint.to }}px</code>
</li>
{% if breakpoint.id == 'tablet' %}
<li>
<code>=touch</code><br>
until <code>{{ breakpoint.to }}px</code>
</li>
{% endif %}
{% endcase %}
{% endfor %}
</ul>
</div>
<div class="table-container">
<table class="table is-bordered">
<thead>
<tr>
{% for breakpoint_hash in site.data.breakpoints %}
{% assign breakpoint = breakpoint_hash[1] %}
<th style="width: 20%;">
{{ 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>
<tbody>
<tr>
<td>
<p class="notification is-success">mobile</p>
</td>
<td colspan="4">
<p class="notification">-</p>
</td>
</tr>
<tr>
<td>
<p class="notification">-</p>
</td>
<td colspan="4">
<p class="notification is-success">tablet</p>
</td>
</tr>
<tr>
<td colspan="2">
<p class="notification">-</p>
</td>
<td colspan="3">
<p class="notification is-success">desktop</p>
</td>
</tr>
<tr>
<td colspan="3">
<p class="notification">-</p>
</td>
<td colspan="2">
<p class="notification is-success">widescreen</p>
</td>
</tr>
<tr>
<td colspan="4">
<p class="notification">-</p>
</td>
<td>
<p class="notification is-success">fullhd</p>
</td>
</tr>
<tr>
<td>
<p class="notification">-</p>
</td>
<td>
<p class="notification is-success">tablet-only</p>
</td>
<td colspan="3">
<p class="notification">-</p>
</td>
</tr>
<tr>
<td colspan="2">
<p class="notification">-</p>
</td>
<td>
<p class="notification is-success">desktop-only</p>
</td>
<td colspan="2">
<p class="notification">-</p>
</td>
</tr>
<tr>
<td colspan="3">
<p class="notification">-</p>
</td>
<td>
<p class="notification is-success">widescreen-only</p>
</td>
<td>
<p class="notification">-</p>
</td>
</tr>
<tr>
<td colspan="2">
<p class="notification is-success">touch</p>
</td>
<td colspan="3">
<p class="notification">-</p>
</td>
</tr>
<tr>
<td colspan="3">
<p class="notification is-success">until-widescreen</p>
</td>
<td colspan="2">
<p class="notification">-</p>
</td>
</tr>
<tr>
<td colspan="4">
<p class="notification is-success">until-fullhd</p>
</td>
<td colspan="1">
<p class="notification">-</p>
</td>
</tr>
</tbody>
</table>
</div>
{% assign vernum = site.data.meta.version | downcase | remove: "." | plus: 0 %}
{% if vernum >= 70 %}
{% include elements/anchor.html name="Disabling breakpoints" %}
{% include elements/new-tag.html version="0.7.0" %}
<div class="content">
<p>
By default, the <code>$widescreen</code> and <code>$fullhd</code> breakpoints are <strong>enabled</strong>. You can disable them by setting the corresponding Sass boolean to <code>false</code>:
</p>
</div>
<div class="highlight-full">
{% highlight sass %}{{ scss_code }}{% endhighlight %}
</div>
{% endif %}
{% capture custom_message %}
These are <a href="{{ derived_variables.file_url }}" target="_blank">variables</a> with a value that <strong>references</strong> another variable.
{% endcapture %}
{% include elements/variables.html
type='element'
variables_keys=page.variables_keys
custom_message=custom_message
folder='utilities'
file='initial-variables'
%}