mirror of
https://github.com/jgthms/bulma
synced 2026-03-15 02:04:29 -07:00
Init v1
This commit is contained in:
Jeremy Thomas
384
docs/documentation/sass/responsive-mixins.html
Normal file
384
docs/documentation/sass/responsive-mixins.html
Normal file
@@ -0,0 +1,384 @@
|
||||
---
|
||||
title: Bulma Sass Responsive Mixins
|
||||
layout: docs
|
||||
theme: sass
|
||||
doc-tab: sass
|
||||
doc-subtab: responsive-mixins
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- sass
|
||||
- sass-responsive-mixins
|
||||
---
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Bulma is <strong>responsive by default</strong>. <a href="{{ site.url}}/documentation/overview/responsiveness/">Learn more about Bulma's responsiveness</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include docs/elements/anchor.html name="from() and until() mixins" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Responsiveness in CSS is based on <strong>media queries</strong> (see <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries" target="_blank">MDN documentation</a>).
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Bulma provides <strong>2 useful responsive mixins:</strong>
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
{% include docs/elements/snippet-inline.html content="@mixin from($breakpoint)" %} to target devices with a screen <em>wider</em> than or equal to the breakpoint
|
||||
</li>
|
||||
<li>
|
||||
{% include docs/elements/snippet-inline.html content="@mixin until($breakpoint)" %} to target devices with a screen <em>narrower</em> than the breakpoint
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>Their usage is very simple:</p>
|
||||
</div>
|
||||
|
||||
{% include docs/elements/anchor-bis.html name="from()" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>from()</code> mixin has a single parameter which sets the <strong>screen width</strong> from which the styles it contains will be applied:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p class="title is-6">Sass source</p>
|
||||
|
||||
{% highlight sass %}@use "bulma/sass/utilities/mixins";
|
||||
|
||||
.my-element {
|
||||
background: red;
|
||||
|
||||
@include mixins.from(1280px) {
|
||||
background: blue;
|
||||
}
|
||||
}{% endhighlight %}
|
||||
|
||||
<p class="title is-6">CSS output</p>
|
||||
|
||||
{% highlight css %}.my-element {
|
||||
background: red;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1280px) {
|
||||
.my-element {
|
||||
background: blue;
|
||||
}
|
||||
}{% endhighlight %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
For screens with a width of 1279px or less, the element's background will be <strong style="color: red;">red</strong>.
|
||||
<br>
|
||||
For screens 1280px-wide or more, the element's background will be <strong style="color: blue;">blue</strong>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include docs/elements/anchor-bis.html name="until()" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>until()</code> mixin has a single parameter which sets the <strong>screen width (minus <code>1px</code>)</strong> until which the styles it contains will be applied.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
This means that if you set a value of <code>1280px</code>, the styles will be applied on a screen width of <code>1279px</code> but <strong>not</strong> on a screen width of <code>1280px</code>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
The reason for this <strong>1px offset</strong> is to allow you to use both <code>from()</code> and <code>until()</code> with the <strong>same breakpoint value</strong>. This leaves <strong>no gap</strong> between the 2 sets of rules.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p class="title is-6">Sass source</p>
|
||||
|
||||
{% highlight sass %}@use "bulma/sass/utilities/mixins";
|
||||
|
||||
$breakpoint: 1280px;
|
||||
|
||||
.my-element {
|
||||
@include mixins.until($breakpoint) {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@include mixins.from($breakpoint) {
|
||||
background: orange;
|
||||
}
|
||||
}{% endhighlight %}
|
||||
|
||||
<p class="title is-6">CSS output</p>
|
||||
|
||||
{% highlight css %}@media screen and (max-width: 1279px) {
|
||||
.my-element {
|
||||
background: green;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1280px) {
|
||||
.my-element {
|
||||
background: orange;
|
||||
}
|
||||
}{% endhighlight %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
For screens with a width of 1279px or less, the element's background will be <strong style="color: green;">green</strong>.
|
||||
<br>
|
||||
For screens 1280px-wide or more, the element's background will be <strong style="color: orange;">orange</strong>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include docs/elements/anchor.html name="Named mixins" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
By having <strong>4 breakpoints</strong> and supporting <strong>5 screen sizes</strong>, Bulma can support a lot of different setups.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
While you could use the mixins {% include docs/elements/snippet-inline.html content="@include mixins.from()" %} and {% include docs/elements/snippet-inline.html content="@include mixins.until()" %}, Bulma provides <strong>quick shortcuts</strong> with <strong>11 named mixins</strong>.
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
These <strong>responsive mixins</strong> are named after the screen sizes and breakpoints used in Bulma, so that you can use them to create a <strong>responsive designs</strong>:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% capture inc-mobile %}
|
||||
@use "bulma/sass/utilities/mixins";
|
||||
|
||||
@include mixins.mobile {
|
||||
// Styles applied
|
||||
// below $tablet
|
||||
}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture inc-tablet %}
|
||||
@use "bulma/sass/utilities/mixins";
|
||||
|
||||
@include mixins.tablet {
|
||||
// Styles applied
|
||||
// above $tablet
|
||||
}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture inc-tablet-only %}
|
||||
@use "bulma/sass/utilities/mixins";
|
||||
|
||||
@include mixins.tablet-only {
|
||||
// Styles applied
|
||||
// between $tablet
|
||||
// and $desktop
|
||||
}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture inc-desktop-only %}
|
||||
@use "bulma/sass/utilities/mixins";
|
||||
|
||||
@include mixins.desktop-only {
|
||||
// Styles applied
|
||||
// between $desktop
|
||||
// and $widescreen
|
||||
}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture inc-widescreen-only %}
|
||||
@use "bulma/sass/utilities/mixins";
|
||||
|
||||
@include mixins.widescreen-only {
|
||||
// Styles applied
|
||||
// between $widescreen
|
||||
// and $fullhd
|
||||
}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture inc-desktop %}
|
||||
@use "bulma/sass/utilities/mixins";
|
||||
|
||||
@include mixins.desktop {
|
||||
// Styles applied
|
||||
// above $desktop
|
||||
}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture inc-widescreen %}
|
||||
@use "bulma/sass/utilities/mixins";
|
||||
|
||||
@include mixins.widescreen {
|
||||
// Styles applied
|
||||
// above $widescreen
|
||||
}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture inc-fullhd %}
|
||||
@use "bulma/sass/utilities/mixins";
|
||||
|
||||
@include mixins.fullhd {
|
||||
// Styles applied
|
||||
// above $fullhd
|
||||
}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture inc-touch %}
|
||||
@use "bulma/sass/utilities/mixins";
|
||||
|
||||
@include mixins.touch {
|
||||
// Styles applied
|
||||
// below $desktop
|
||||
}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture inc-until-widescreen %}
|
||||
@use "bulma/sass/utilities/mixins";
|
||||
|
||||
@include mixins.until-widescreen {
|
||||
// Styles applied
|
||||
// below $widescreen
|
||||
}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture inc-until-fullhd %}
|
||||
@use "bulma/sass/utilities/mixins";
|
||||
|
||||
@include mixins.until {
|
||||
// Styles applied
|
||||
// below $fullhd
|
||||
}
|
||||
{% endcapture %}
|
||||
|
||||
<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>
|
||||
{% highlight sass %}{{ inc-mobile }}{% endhighlight %}
|
||||
</td>
|
||||
<td colspan="4">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td colspan="4">
|
||||
{% highlight sass %}{{ inc-tablet }}{% endhighlight %}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td colspan="3">
|
||||
{% highlight sass %}{{ inc-desktop }}{% endhighlight %}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td colspan="2">
|
||||
{% highlight sass %}{{ inc-widescreen }}{% endhighlight %}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td>
|
||||
{% highlight sass %}{{ inc-fullhd }}{% endhighlight %}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td>
|
||||
{% highlight sass %}{{ inc-tablet-only }}{% endhighlight %}
|
||||
</td>
|
||||
<td colspan="3">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td>
|
||||
{% highlight sass %}{{ inc-desktop-only }}{% endhighlight %}
|
||||
</td>
|
||||
<td colspan="2">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td>
|
||||
{% highlight sass %}{{ inc-widescreen-only }}{% endhighlight %}
|
||||
</td>
|
||||
<td>
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
{% highlight sass %}{{ inc-touch }}{% endhighlight %}
|
||||
</td>
|
||||
<td colspan="3">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
{% highlight sass %}{{ inc-until-widescreen }}{% endhighlight %}
|
||||
</td>
|
||||
<td colspan="2">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
{% highlight sass %}{{ inc-until-fullhd }}{% endhighlight %}
|
||||
</td>
|
||||
<td colspan="1">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{% assign or_link = site.data.links.by_id['overview-responsiveness'] %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Learn more about <a href="{{ site.url }}{{ or_link.path }}">Bulma responsiveness</a>.
|
||||
</p>
|
||||
</div>
|
||||
Reference in New Issue
Block a user