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
76
docs/documentation/sass/extends.html
Normal file
76
docs/documentation/sass/extends.html
Normal file
@@ -0,0 +1,76 @@
|
||||
---
|
||||
title: Bulma Sass Extends
|
||||
layout: docs
|
||||
theme: sass
|
||||
doc-tab: sass
|
||||
doc-subtab: extends
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- sass
|
||||
- sass-extends
|
||||
---
|
||||
|
||||
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
In Bulma, a lot of element <strong>share</strong> a set of styles. While mixins allow sharing, they repeat the CSS rules everytime they are used.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
To avoid the repetition, Bulma uses the <code>@extend</code> rule to share code. This rule tells Sass that one selector should inherit the styles of another. <a href="https://sass-lang.com/documentation/at-rules/extend" target="_blank">Learn more about the extend rule</a>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Instead of creating CSS classes that might not be used to be the <strong>source</strong> of the set of styles, Bulma uses Sass <strong>placeholders</strong>:
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
{% include docs/elements/snippet-inline.html content="%control" %}
|
||||
</li>
|
||||
<li>
|
||||
{% include docs/elements/snippet-inline.html content="%unselectable" %}
|
||||
</li>
|
||||
<li>
|
||||
{% include docs/elements/snippet-inline.html content="%arrow" %}
|
||||
</li>
|
||||
<li>
|
||||
{% include docs/elements/snippet-inline.html content="%block" %}
|
||||
</li>
|
||||
<li>
|
||||
{% include docs/elements/snippet-inline.html content="%delete" %}
|
||||
</li>
|
||||
<li>
|
||||
{% include docs/elements/snippet-inline.html content="%loader" %}
|
||||
</li>
|
||||
<li>
|
||||
{% include docs/elements/snippet-inline.html content="%overlay" %}
|
||||
</li>
|
||||
<li>
|
||||
{% include docs/elements/snippet-inline.html content="%reset" %}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
{% assign mixins_link = site.data.links.by_id['utilities-mixins'] %}
|
||||
{% assign controls_link = site.data.links.by_id['utilities-control-mixins'] %}
|
||||
|
||||
<p>
|
||||
Each of these placeholders are simply the <code>@extend</code> version of their <a href="{{ site.url }}{{ mixins_link.path }}">corresponding mixins</a> (here for the <a href="{{ site.url }}{{ controls_link.path }}">control mixin</a>).
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include docs/elements/anchor.html name="How to use Bulma extends" %}
|
||||
|
||||
<div class="content">Import the extend rules with <code>@use</code> and use them with <code>@extend</code>:</div>
|
||||
|
||||
{% highlight sass %}
|
||||
@use "bulma/sass/utilities/extends";
|
||||
|
||||
.my-control {
|
||||
@extend %control;
|
||||
background-color: purple;
|
||||
color: white;
|
||||
}
|
||||
{% endhighlight %}
|
||||
136
docs/documentation/sass/form-control-mixins.html
Normal file
136
docs/documentation/sass/form-control-mixins.html
Normal file
@@ -0,0 +1,136 @@
|
||||
---
|
||||
title: Bulma Sass Form Control Mixins
|
||||
layout: docs
|
||||
theme: sass
|
||||
doc-tab: sass
|
||||
doc-subtab: form-control-mixins
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- sass
|
||||
- sass-form-control-mixins
|
||||
---
|
||||
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
In Bulma, the <strong>form controls</strong> are an essential part of the framework. They comprise the following elements:
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<code>.button</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>.input</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>.select</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>.file-cta</code>
|
||||
<code>.file-name</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>.pagination-previous</code>
|
||||
<code>.pagination-next</code>
|
||||
<code>.pagination-link</code>
|
||||
<code>.pagination-ellipsis</code>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
The <code>control()</code> mixin ensures <strong>consistency</strong> by providing a set of styles that are shared between all these form controls. You can use it to create additional controls:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight sass %}@use "bulma/sass/utilities/controls";
|
||||
|
||||
.bulma-control-mixin {
|
||||
@include controls.control;
|
||||
background: deeppink;
|
||||
color: white;
|
||||
}{% endhighlight %}
|
||||
|
||||
{% capture control-mixin %}
|
||||
<button class="bulma-control-mixin">
|
||||
My control
|
||||
</button>
|
||||
{% endcapture %}
|
||||
|
||||
{% include docs/elements/snippet.html content=control-mixin %}
|
||||
|
||||
{% include docs/elements/anchor.html name="Sizes" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Controls have a default font size of <code>$size-normal</code> and also come in <strong>3 additional sizes</strong>, which can be accessed via 3 additional mixins:
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
{% include docs/elements/snippet-inline.html content="@include control-small;" %} with a font size <code>$size-small</code>
|
||||
</li>
|
||||
<li>
|
||||
{% include docs/elements/snippet-inline.html content="@include control-medium;" %} with a font size <code>$size-medium</code>
|
||||
</li>
|
||||
<li>
|
||||
{% include docs/elements/snippet-inline.html content="@include control-large;" %} with a font size <code>$size-large</code>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% highlight sass %}.bulma-control-mixin {
|
||||
&.is-small {
|
||||
@include control-small;
|
||||
}
|
||||
|
||||
&.is-medium {
|
||||
@include control-medium;
|
||||
}
|
||||
|
||||
&.is-large {
|
||||
@include control-large;
|
||||
}
|
||||
}{% endhighlight %}
|
||||
|
||||
{% capture control-mixin-sizes %}
|
||||
<button class="bulma-control-mixin is-small">
|
||||
Small
|
||||
</button>
|
||||
<button class="bulma-control-mixin">
|
||||
Normal
|
||||
</button>
|
||||
<button class="bulma-control-mixin is-medium">
|
||||
Medium
|
||||
</button>
|
||||
<button class="bulma-control-mixin is-large">
|
||||
Large
|
||||
</button>
|
||||
{% endcapture %}
|
||||
|
||||
{% include docs/elements/snippet.html content=control-mixin-sizes %}
|
||||
|
||||
{% include docs/elements/anchor.html name="Control placeholder" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>control()</code> mixin also exists as <a href="https://sass-lang.com/documentation/at-rules/extend#placeholder-selectors" target="_blank">Sass placeholder</a> <code>%control</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight sass %}@use "bulma/sass/utilities/extends";
|
||||
|
||||
.bulma-control-extend {
|
||||
@extend %control;
|
||||
background: mediumblue;
|
||||
color: white;
|
||||
}{% endhighlight %}
|
||||
|
||||
{% capture control-extend %}
|
||||
<button class="bulma-control-extend">
|
||||
My control
|
||||
</button>
|
||||
{% endcapture %}
|
||||
|
||||
{% include docs/elements/snippet.html content=control-extend %}
|
||||
12
docs/documentation/sass/functions.html
Normal file
12
docs/documentation/sass/functions.html
Normal file
@@ -0,0 +1,12 @@
|
||||
---
|
||||
title: Bulma Sass Functions
|
||||
layout: docs
|
||||
theme: sass
|
||||
doc-tab: sass
|
||||
doc-subtab: functions
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- sass
|
||||
- sass-functions
|
||||
---
|
||||
530
docs/documentation/sass/mixins.html
Normal file
530
docs/documentation/sass/mixins.html
Normal file
@@ -0,0 +1,530 @@
|
||||
---
|
||||
title: Bulma Sass Mixins
|
||||
layout: docs
|
||||
theme: sass
|
||||
doc-tab: sass
|
||||
doc-subtab: mixins
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- sass
|
||||
- sass-mixins
|
||||
---
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Throughout the codebase, Bulma uses Sass mixins to <strong>enhance</strong> and facilitate the CSS output. While these mixins are mainly used within the context of Bulma, they are of course available for you to <strong>re-use</strong> in your own projects.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include docs/elements/anchor.html name="Element Mixins" %}
|
||||
|
||||
<p class="block">
|
||||
These mixins create a <strong>visual</strong> HTML element.
|
||||
</p>
|
||||
|
||||
{% include docs/elements/anchor-bis.html name="Arrow" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>arrow()</code> mixin creates a down-facing arrow. The <code>$color</code> parameter defines the color of the arrow.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight sass %}.bulma-arrow-mixin {
|
||||
@include mixins.arrow(purple);
|
||||
}{% endhighlight %}
|
||||
|
||||
{% capture arrow %}
|
||||
<span class="bulma-arrow-mixin"></span>
|
||||
{% endcapture %}
|
||||
|
||||
{% include docs/elements/snippet.html content=arrow %}
|
||||
|
||||
<!-- -->
|
||||
|
||||
{% include docs/elements/anchor-bis.html name="Burger" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>burger()</code> mixin creates a 16x16px set of <strong>3 horizontal bars</strong> grouped within square. The dimensions of this square are defined by the <code>$dimensions</code> parameter.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight sass %}.bulma-burger-mixin {
|
||||
@include mixins.burger(2.5rem);
|
||||
}{% endhighlight %}
|
||||
|
||||
{% capture burger %}
|
||||
<button class="bulma-burger-mixin">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
{% endcapture %}
|
||||
|
||||
{% include docs/elements/snippet.html content=burger %}
|
||||
|
||||
<!-- -->
|
||||
|
||||
{% include docs/elements/anchor-bis.html name="Delete" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>delete()</code> mixin creates a 20x20px circle containing a <strong>cross</strong>. It comes with 3 modifiers: <code>is-small</code>, <code>is-medium</code> and <code>is-large</code>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight sass %}.bulma-delete-mixin {
|
||||
@include mixins.delete;
|
||||
}{% endhighlight %}
|
||||
|
||||
{% capture delete %}
|
||||
<button class="bulma-delete-mixin is-small"></button>
|
||||
<button class="bulma-delete-mixin"></button>
|
||||
<button class="bulma-delete-mixin is-medium"></button>
|
||||
<button class="bulma-delete-mixin is-large"></button>
|
||||
{% endcapture %}
|
||||
|
||||
{% include docs/elements/snippet.html content=delete %}
|
||||
|
||||
<!-- -->
|
||||
|
||||
{% include docs/elements/anchor-bis.html name="Loader" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>loader()</code> mixin creates a 1em <strong>spinning circle</strong>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight sass %}.bulma-loader-mixin {
|
||||
@include mixins.loader;
|
||||
}{% endhighlight %}
|
||||
|
||||
{% capture loader %}
|
||||
<span class="bulma-loader-mixin"></span>
|
||||
{% endcapture %}
|
||||
|
||||
{% include docs/elements/snippet.html content=loader %}
|
||||
|
||||
<!-- -->
|
||||
|
||||
{% include docs/elements/anchor-bis.html name="Font Awesome container" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>fa()</code> mixin creates a <strong>square inline-block element</strong>, ideal for containing a Font Awesome icon, or any other type of icon font.
|
||||
<br>
|
||||
The first <code>$size</code> parameter defines the icon font size.
|
||||
<br>
|
||||
The second <code>$dimensions</code> parameter defines the dimensions of the square container.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight sass %}.bulma-fa-mixin {
|
||||
@include mixins.fa(1rem, 2rem);
|
||||
background-color: lavender; // For demo purposes
|
||||
}{% endhighlight %}
|
||||
|
||||
{% capture fa %}
|
||||
<span class="bulma-fa-mixin">
|
||||
<i class="fas fa-thumbs-up"></i>
|
||||
</span>
|
||||
{% endcapture %}
|
||||
|
||||
{% include docs/elements/snippet.html content=fa %}
|
||||
|
||||
<!-- -->
|
||||
|
||||
{% include docs/elements/anchor.html name="CSS Mixins" %}
|
||||
|
||||
<p class="block">
|
||||
These mixins add <strong>CSS rules</strong> to the element.
|
||||
</p>
|
||||
|
||||
<!-- -->
|
||||
|
||||
{% include docs/elements/anchor-bis.html name="Block" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>block()</code> mixin adds <strong>spacing</strong> below an element, but only if it's <strong>not the last child</strong>.
|
||||
<br>
|
||||
The <code>$spacing</code> parameter defines the value of the <code>margin-bottom</code>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight sass %}.bulma-block-mixin {
|
||||
@include mixins.block(1rem);
|
||||
}{% endhighlight %}
|
||||
|
||||
{% capture block %}
|
||||
<p class="bulma-block-mixin">This element has a margin-bottom.</p>
|
||||
<p class="bulma-block-mixin">This element too.</p>
|
||||
<p class="bulma-block-mixin">Not this one because it's the last child.</p>
|
||||
{% endcapture %}
|
||||
|
||||
{% include docs/elements/snippet.html content=block %}
|
||||
|
||||
<!-- -->
|
||||
|
||||
{% include docs/elements/anchor-bis.html name="Overlay" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>overlay()</code> mixin makes the element <strong>cover</strong> its closest positioned ancestor.
|
||||
<br>
|
||||
The <code>$offset</code> parameter defines how far inside the element is positioned from each edge (top, bottom, left and right).
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight sass %}.bulma-overlay-mixin {
|
||||
@include mixins.overlay(1.5rem);
|
||||
background-color: darkorange;
|
||||
border-radius: 0.25em;
|
||||
color: white;
|
||||
opacity: 0.9;
|
||||
padding: 1em;
|
||||
}{% endhighlight %}
|
||||
|
||||
{% capture overlay %}
|
||||
<div class="bulma-overlay-mixin-parent">
|
||||
<div class="bulma-overlay-mixin">Overlay element</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include docs/elements/snippet.html content=overlay %}
|
||||
|
||||
<!-- -->
|
||||
|
||||
{% include docs/elements/anchor-bis.html name="Center" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>center()</code> mixin allows you to absolutely position an element with <strong>fixed dimensions</strong> at the <strong>center</strong> of its closest positioned ancestor.
|
||||
<br>
|
||||
The value of the <code>$width</code> parameter should be the width of the element the mixin is applied on.
|
||||
<br>
|
||||
Unless the element has square dimensions, the second parameter <code>$height</code> is required and its value should be the height of the element the mixin is applied on.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight sass %}.bulma-center-mixin {
|
||||
@include mixins.center;
|
||||
}{% endhighlight %}
|
||||
|
||||
{% capture center %}
|
||||
<div class="bulma-center-mixin-parent">
|
||||
<img class="bulma-center-mixin" height="96" width="96" src="https://source.unsplash.com/mEZ3PoFGs_k/192x192">
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include docs/elements/snippet.html content=center %}
|
||||
|
||||
<!-- -->
|
||||
|
||||
{% include docs/elements/anchor-bis.html name="Placeholder" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>placeholder()</code> mixin allows you to change the style of an <strong>input's placeholder</strong>.
|
||||
<br>
|
||||
The <code>$offset</code> parameter defines how far inside the element is positioned from each edge (top, bottom, left and right).
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight sass %}.bulma-placeholder-mixin {
|
||||
@include mixins.placeholder {
|
||||
color: lightblue;
|
||||
}
|
||||
}{% endhighlight %}
|
||||
|
||||
{% capture placeholder %}
|
||||
<input
|
||||
class="input bulma-placeholder-mixin"
|
||||
type="text"
|
||||
placeholder="I am a styled placeholder"
|
||||
>
|
||||
{% endcapture %}
|
||||
|
||||
{% include docs/elements/snippet.html content=placeholder %}
|
||||
|
||||
<!-- -->
|
||||
|
||||
{% include docs/elements/anchor-bis.html name="Clearfix" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>clearfix()</code> mixin adds a <code>::after</code></strong> pseudo-element with a <code>clear: both</code> rule.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight sass %}.bulma-clearfix-mixin {
|
||||
@include mixins.clearfix;
|
||||
}{% endhighlight %}
|
||||
|
||||
{% capture clearfix %}
|
||||
<div class="bulma-clearfix-mixin">
|
||||
<img height="80" width="80" style="float: left;" src="https://source.unsplash.com/La2kOu2dmH4/160x160">
|
||||
<p>This is a short image description.</p>
|
||||
</div>
|
||||
|
||||
<p>This text is following the clearfix element and is correctly placed after.</p>
|
||||
{% endcapture %}
|
||||
|
||||
{% include docs/elements/snippet.html content=clearfix %}
|
||||
|
||||
<!-- -->
|
||||
|
||||
{% include docs/elements/anchor-bis.html name="Reset" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>reset()</code> mixin applies a soft style reset. This is especially useful for <code><button></code> elements.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight sass %}.bulma-reset-mixin {
|
||||
@include mixins.reset;
|
||||
}{% endhighlight %}
|
||||
|
||||
{% capture reset %}
|
||||
<button>Default button</button>
|
||||
<button class="bulma-reset-mixin">Reset button</button>
|
||||
{% endcapture %}
|
||||
|
||||
{% include docs/elements/snippet.html content=reset %}
|
||||
|
||||
<!-- -->
|
||||
|
||||
{% include docs/elements/anchor-bis.html name="Unselectable" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>unselectable()</code> mixin makes an element not selectable. This is to prevent the text to be selected when double-clicked.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight sass %}.bulma-unselectable-mixin {
|
||||
@include mixins.unselectable;
|
||||
}{% endhighlight %}
|
||||
|
||||
{% capture unselectable %}
|
||||
<p>This text is selectable.</p>
|
||||
<p class="bulma-unselectable-mixin">This text is not selectable.</p>
|
||||
{% endcapture %}
|
||||
|
||||
{% include docs/elements/snippet.html content=unselectable %}
|
||||
|
||||
<!-- -->
|
||||
|
||||
{% include docs/elements/anchor-bis.html name="Overflow Touch" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>overflow-touch()</code> mixin add the <code>-webkit-overflow-scrolling: touch;</code> rule to the element.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- -->
|
||||
|
||||
{% include docs/elements/anchor.html name="Direction Mixins" %}
|
||||
|
||||
{% include docs/elements/anchor-bis.html name="Left-to-right and Right-to-left Mixins" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Bulma has a global <code>$rtl</code> flag, which allows the framework to output a Right-to-left version of the CSS. By default, this flag's value is set to <code>false</code>. This means the framework output a Left-to-right version.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
The mixins <code>@mixin ltr</code> and <code>@mixin rtl</code> are here to output CSS rules based on the value of <code>$rtl</code>:
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
if <code>$rtl: true</code>, <code>@include mixins.ltr</code> outputs nothing
|
||||
</li>
|
||||
<li>
|
||||
if <code>$rtl: false</code>, <code>@include mixins.rtl</code> outputs nothing
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
This is useful for properties that are specific to the side of an element.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight sass %}.bulma-ltr-rtl-mixin {
|
||||
background-color: lightgreen;
|
||||
padding: 0.5em 1em;
|
||||
border: 1px solid seagreen;
|
||||
margin-right: -1px;
|
||||
|
||||
&:first-child {
|
||||
@include mixins.ltr {
|
||||
border-bottom-left-radius: 0.5em;
|
||||
border-top-left-radius: 0.5em;
|
||||
}
|
||||
|
||||
@include mixins.rtl {
|
||||
border-bottom-right-radius: 0.5em;
|
||||
border-top-right-radius: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
@include mixins.ltr {
|
||||
border-bottom-right-radius: 0.5em;
|
||||
border-top-right-radius: 0.5em;
|
||||
}
|
||||
|
||||
@include mixins.rtl {
|
||||
border-bottom-left-radius: 0.5em;
|
||||
border-top-left-radius: 0.5em;
|
||||
}
|
||||
}
|
||||
}{% endhighlight %}
|
||||
|
||||
{% capture ltr-rtl %}
|
||||
<div style="display: flex;">
|
||||
<span class="bulma-ltr-rtl-mixin">One</span>
|
||||
<span class="bulma-ltr-rtl-mixin">Two</span>
|
||||
<span class="bulma-ltr-rtl-mixin">Three</span>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include docs/elements/snippet.html content=ltr-rtl %}
|
||||
|
||||
<!-- -->
|
||||
|
||||
{% include docs/elements/anchor-bis.html name="LTR Position" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>ltr-position()</code> mixin is a quick way to switch between <code>left</code> and <code>right</code> CSS properties when dealing with positioned elements.
|
||||
<br>
|
||||
The first <code>$spacing</code> parameter defines the value of the offset, whether it's right or left.
|
||||
<br>
|
||||
The second <code>$right</code> parameter defines if the property outputs <code>right</code> (default) or <code>left</code>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Here is what the output looks like with a <code>$spacing</code> parameter set to <code>1rem</code>:
|
||||
</p>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Flag →</th>
|
||||
<th><code>$rtl: false;</code></th>
|
||||
<th><code>$rtl: true;</code></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>@include mixins.ltr-position(1rem, true)</code></td>
|
||||
<td><code>right: 1rem</code></td>
|
||||
<td><code>left: 1rem</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@include mixins.ltr-position(1rem, false)</code></td>
|
||||
<td><code>left: 1rem</code></td>
|
||||
<td><code>right: 1rem</code></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p class="title is-6">Sass source</p>
|
||||
|
||||
{% highlight sass %}.bulma-ltr-position-mixin {
|
||||
@include mixins.ltr-position(1rem, false);
|
||||
border-radius: 0.25em;
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
}{% endhighlight %}
|
||||
|
||||
<p class="title is-6">CSS output</p>
|
||||
|
||||
{% highlight css %}.bulma-ltr-position-mixin {
|
||||
left: 1rem;
|
||||
border-radius: 0.25em;
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
}{% endhighlight %}
|
||||
|
||||
{% capture ltr-position %}
|
||||
<div class="bulma-ltr-position-mixin-parent">
|
||||
<img class="bulma-ltr-position-mixin" height="48" width="48" src="https://source.unsplash.com/iFgRcqHznqg/96x96">
|
||||
<p>Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum.</p>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include docs/elements/snippet.html content=ltr-position %}
|
||||
<!-- -->
|
||||
|
||||
{% include docs/elements/anchor-bis.html name="LTR Property" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>ltr-property()</code> mixin works like the <code>ltr-position()</code> mixin but allows you to choose <strong>which CSS property</strong> to set. The mixin will append <code>-right</code> or <code>-left</code> to that property. This is especially useful for <code>margin</code> and <code>padding</code>.
|
||||
<br>
|
||||
The first <code>$property</code> parameter which property you want to "flip" left and right.
|
||||
<br>
|
||||
The second <code>$spacing</code> parameter defines the value of the offset, whether it's right or left.
|
||||
<br>
|
||||
The third <code>$right</code> parameter defines if the property outputs <code>right</code> (default) or <code>left</code>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Here is what the output looks like with a <code>$spacing</code> parameter set to <code>1rem</code>:
|
||||
</p>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Flag →</th>
|
||||
<th><code>$rtl: false;</code></th>
|
||||
<th><code>$rtl: true;</code></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>@include mixins.ltr-property("margin", 1rem, true)</code></td>
|
||||
<td><code>margin-right: 1rem</code></td>
|
||||
<td><code>margin-left: 1rem</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@include mixins.ltr-property("margin", 1rem, false)</code></td>
|
||||
<td><code>margin-left: 1rem</code></td>
|
||||
<td><code>margin-right: 1rem</code></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p class="title is-6">Sass source</p>
|
||||
|
||||
{% highlight sass %}.bulma-ltr-property-mixin {
|
||||
@include mixins.ltr-property("margin", 1rem, false);
|
||||
border-radius: 0.25em;
|
||||
}{% endhighlight %}
|
||||
|
||||
<p class="title is-6">CSS output</p>
|
||||
|
||||
{% highlight css %}.bulma-ltr-property-mixin {
|
||||
margin-left: 1rem;
|
||||
border-radius: 0.25em;
|
||||
}{% endhighlight %}
|
||||
|
||||
{% capture ltr-property %}
|
||||
<div class="bulma-ltr-property-mixin-parent">
|
||||
<p>Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum.</p>
|
||||
<img class="bulma-ltr-property-mixin" height="96" width="96" src="https://source.unsplash.com/jTSf1xnsoCs/192x192">
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include docs/elements/snippet.html content=ltr-property %}
|
||||
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