Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-19 03:44:31 -07:00
Code Issues Packages Projects Releases Wiki Activity

Add utilities documentation

Browse Source
This commit is contained in:
Jeremy Thomas
2021-09-19 23:36:15 +01:00
parent e145c9d680
commit f6c0cfc813
19 changed files with 1227 additions and 444 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
docs/documentation/utilities/extends.html
View File

@@ -1,68 +1,59 @@
---
title: Mixins
title: Extends
layout: documentation
doc-tab: overview
doc-subtab: mixins
doc-tab: utilities
doc-subtab: extends
breadcrumb:
- home
- documentation
- overview
- overview-mixins
- utilities
- utilities-extends
---
<div class="table-container">
<table class="table is-bordered">
<tr>
<td><code>=arrow($color)</code></td>
<td>Creates a CSS-only down arrow. Used for the dropdown select.</td>
</tr>
<tr>
<td><code>=block</code></td>
<td>Defines a margin-bottom of 1.5rem, except when the element is the last child. Used for almost all block elements.</td>
</tr>
<tr>
<td><code>=clearfix</code></td>
<td>Adds a clearfix at the end of the element. Used for the "is-clearfix" helper.</td>
</tr>
<tr>
<td><code>=center($size)</code></td>
<td>Positions an element in the exact center of its parent. Used for the spinner in a loading button.</td>
</tr>
<tr>
<td><code>=delete</code></td>
<td>Creates a CSS-only cross. Used for the delete element in modals, messages, tags...</td>
</tr>
<tr>
<td><code>=fa($size, $dimensions)</code></td>
<td>Sets the style of a Font Awesome icon container.</td>
</tr>
<tr>
<td><code>=hamburger($dimensions)</code></td>
<td>Creates a CSS-only hamburger menu with 3 bars. Used for the "nav-toggle".</td>
</tr>
<tr>
<td><code>=loader</code></td>
<td>Creates a CSS-only loading spinner. Used for the ".loader" element, and for input and button spinners.</td>
</tr>
<tr>
<td><code>=overflow-touch</code></td>
<td>Sets the style of a container so that it keeps momentum when scrolling on iOS devices.</td>
</tr>
<tr>
<td><code>=overlay($offset: 0)</code></td>
<td>Makes the element overlay its parent container, like the transparent modal background.</td>
</tr>
<tr>
<td><code>=placeholder</code></td>
<td>Sets the styles of an input placeholder.</td>
</tr>
<tr>
<td><code>=unselectable</code></td>
<td>Turns the element unselectable. Used for buttons to prevent selection when clicking.</td>
</tr>
</table>
</div>
<div class="content">
<p>These mixins are already used throughout Bulma, but you can use them as well to extend your own styles.</p>
<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 elements/snippet-inline.html content="%control" %}
</li>
<li>
{% include elements/snippet-inline.html content="%unselectable" %}
</li>
<li>
{% include elements/snippet-inline.html content="%arrow" %}
</li>
<li>
{% include elements/snippet-inline.html content="%block" %}
</li>
<li>
{% include elements/snippet-inline.html content="%delete" %}
</li>
<li>
{% include elements/snippet-inline.html content="%loader" %}
</li>
<li>
{% include elements/snippet-inline.html content="%overlay" %}
</li>
<li>
{% include 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>