mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-28 12:24:23 +00:00
97 lines
3.1 KiB
HTML
97 lines
3.1 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">4 breakpoints</a> which defines <strong>5 screen sizes</strong>:</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>To make use of these breakpoints, Bulma provides <a href="{{ site.url }}/documentation/utilities/responsive-mixins/">9 responsive mixins</a>.</p>
|
|
</div>
|
|
|
|
{% include components/breakpoints-table.html %}
|
|
|
|
{% assign urm_link = site.data.links.by_id['utilities-responsive-mixins'] %}
|
|
|
|
<div class="content">
|
|
<p>
|
|
To simplify using these breakpoints, Bulma provides <a href="{{ site.url }}{{ urm_link.path }}">easy-to-use responsive mixins</a>.
|
|
</p>
|
|
</div>
|
|
|
|
{% assign vernum = site.data.meta.version | downcase | remove: "." | plus: 0 %}
|
|
|
|
{% if vernum >= 70 %}
|
|
|
|
{% include elements/anchor.html name="Disabling breakpoints" %}
|
|
|
|
<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="bd-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 components/variables.html
|
|
type='element'
|
|
variables_keys=page.variables_keys
|
|
custom_message=custom_message
|
|
folder='utilities'
|
|
file='initial-variables'
|
|
%}
|