library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add from and until mixins docs

Browse Source
This commit is contained in:
Jeremy Thomas 2021-09-20 00:34:41 +01:00
parent f6c0cfc813
commit 009ec28a6d
4 changed files with 149 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
docs/bulma-docs.scss
View File

@ -249,3 +249,11 @@ $navbar-breakpoint: $tablet;
@import "./_sass/global/cc";
@import "./_sass/examples/mixins";
.my-element {
background: red;
@include from(1280px) {
background: blue;
}
}

10
docs/css/bulma-docs.css
View File

@ -22925,4 +22925,14 @@ fieldset[disabled] .bulma-control-mixin {
color: white;
}
.my-element {
background: red;
}
@media screen and (min-width: 1280px) {
.my-element {
background: blue;
}
}
/*# sourceMappingURL=bulma-docs.css.map */

2
docs/css/bulma-docs.min.css vendored
View File

File diff suppressed because one or more lines are too long

133
docs/documentation/utilities/responsive-mixins.html
View File

@ -15,10 +15,137 @@ breadcrumb:
<p>
Bulma is <strong>responsive by default</strong>. <a href="{{ site.url}}/overview/responsiveness/">Learn more about Bulma's responsiveness</a>.
</p>
</div>
<div class="content">
By having <strong>4 breakpoints</strong> and supporting <strong>5 screen sizes</strong>, Bulma can support a lot of different setups. To simplify your development process, the framework provides several <strong>responsive mixins</strong> that you can use to create a <strong>responsive design</strong>:
</div>
{% include 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 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 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 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 %}.my-element {
background: red;
@include 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 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 %}$breakpoint: 1280px;
.my-element {
@include until($breakpoint) {
background: green;
}
@include 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 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 elements/snippet-inline.html content="@include from()" %} and {% include elements/snippet-inline.html content="@include 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 %}