mirror of
https://github.com/jgthms/bulma
synced 2026-03-15 10:14:29 -07:00
Init mixin docs
This commit is contained in:
Jeremy Thomas
@@ -11,11 +11,23 @@ breadcrumb:
|
||||
---
|
||||
|
||||
<div class="content">
|
||||
<p>Bulma uses 3 custom functions to help define the values and colors dynamically:</p>
|
||||
<p>
|
||||
Bulma has <strong>custom Sass functions</strong> to help find <strong>related colors</strong> dynamically:
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li><code>powerNumber($number, $exp)</code>: calculates the value of a number exposed to another one. Returns a number.</li>
|
||||
<li><code>colorLuminance($color)</code>: defines if a color is dark or light. Return a decimal number between 0 and 1 where <= 0.5 is dark and > 0.5 is light.</li>
|
||||
<li><code>findColorInvert($color)</code>: returns either 70% transparent black or 100% opaque white depending on the luminance of the color.</li>
|
||||
<li><code>findColorInvert($color)</code>: returns either 70% transparent black or 100% opaque white depending on the luminance of the color</li>
|
||||
<li><code>findLightColor($color)</code>: returns the current color but with a lightness of at <em>least</em> 96%</li>
|
||||
<li><code>findDarkColor($color)</code>: returns the current color but with a lightness of at <em>most</em> 29%</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
Bulma also has a few utility functions to calculate useful values:
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li><code>powerNumber($number, $exp)</code>: calculates the value of a number exposed to another one. Returns a number</li>
|
||||
<li><code>colorLuminance($color)</code>: defines if a color is dark or light. Return a decimal number between 0 and 1 where <= 0.5 is dark and > 0.5 is light</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -232,3 +244,11 @@ breadcrumb:
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="The <code>findLightColor()</code> and <code>findDarkColor()</code> functions" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>findLightColor($color)</code> and <code>findDarkColor($color)</code> functions take a <strong>color</strong> as an input, and output that color's light and dark versions respectively</code>:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -11,75 +11,75 @@ breadcrumb:
|
||||
---
|
||||
|
||||
{% capture button_example %}
|
||||
<a class="button">
|
||||
<button class="button">
|
||||
Button
|
||||
</a>
|
||||
</button>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture button_primary_example %}
|
||||
<a class="button is-primary">
|
||||
<button class="button is-primary">
|
||||
Button
|
||||
</a>
|
||||
</button>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture button_colors %}
|
||||
<a class="button is-primary">
|
||||
<button class="button is-primary">
|
||||
Button
|
||||
</a>
|
||||
<a class="button is-link">
|
||||
</button>
|
||||
<button class="button is-link">
|
||||
Button
|
||||
</a>
|
||||
<a class="button is-info">
|
||||
</button>
|
||||
<button class="button is-info">
|
||||
Button
|
||||
</a>
|
||||
<a class="button is-success">
|
||||
</button>
|
||||
<button class="button is-success">
|
||||
Button
|
||||
</a>
|
||||
<a class="button is-warning">
|
||||
</button>
|
||||
<button class="button is-warning">
|
||||
Button
|
||||
</a>
|
||||
<a class="button is-danger">
|
||||
</button>
|
||||
<button class="button is-danger">
|
||||
Button
|
||||
</a>
|
||||
</button>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture button_sizes %}
|
||||
<a class="button is-small">
|
||||
<button class="button is-small">
|
||||
Button
|
||||
</a>
|
||||
<a class="button">
|
||||
</button>
|
||||
<button class="button">
|
||||
Button
|
||||
</a>
|
||||
<a class="button is-medium">
|
||||
</button>
|
||||
<button class="button is-medium">
|
||||
Button
|
||||
</a>
|
||||
<a class="button is-large">
|
||||
</button>
|
||||
<button class="button is-large">
|
||||
Button
|
||||
</a>
|
||||
</button>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture button_states %}
|
||||
<a class="button is-primary is-outlined">
|
||||
<button class="button is-primary is-outlined">
|
||||
Button
|
||||
</a>
|
||||
<a class="button is-loading">
|
||||
</button>
|
||||
<button class="button is-loading">
|
||||
Button
|
||||
</a>
|
||||
<a class="button" disabled>
|
||||
</button>
|
||||
<button class="button" disabled>
|
||||
Button
|
||||
</a>
|
||||
</button>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture button_combinations %}
|
||||
<a class="button is-primary is-small" disabled>
|
||||
<button class="button is-primary is-small" disabled>
|
||||
Button
|
||||
</a>
|
||||
<a class="button is-info is-loading">
|
||||
</button>
|
||||
<button class="button is-info is-loading">
|
||||
Button
|
||||
</a>
|
||||
<a class="button is-danger is-outlined is-large">
|
||||
</button>
|
||||
<button class="button is-danger is-outlined is-large">
|
||||
Button
|
||||
</a>
|
||||
</button>
|
||||
{% endcapture %}
|
||||
|
||||
<div class="columns">
|
||||
@@ -124,22 +124,22 @@ breadcrumb:
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="field">
|
||||
<a class="button is-primary">Button</a>
|
||||
<button class="button is-primary">Button</button>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-link">Button</a>
|
||||
<button class="button is-link">Button</button>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-info">Button</a>
|
||||
<button class="button is-info">Button</button>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-success">Button</a>
|
||||
<button class="button is-success">Button</button>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-warning">Button</a>
|
||||
<button class="button is-warning">Button</button>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-danger">Button</a>
|
||||
<button class="button is-danger">Button</button>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
@@ -162,16 +162,16 @@ breadcrumb:
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="field">
|
||||
<a class="button is-small">Button</a>
|
||||
<button class="button is-small">Button</button>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button">Button</a>
|
||||
<button class="button">Button</button>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-medium">Button</a>
|
||||
<button class="button is-medium">Button</button>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-large">Button</a>
|
||||
<button class="button is-large">Button</button>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
@@ -192,13 +192,13 @@ breadcrumb:
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="field">
|
||||
<a class="button is-primary is-outlined">Button</a>
|
||||
<button class="button is-primary is-outlined">Button</button>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-loading">Button</a>
|
||||
<button class="button is-loading">Button</button>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button" disabled>Button</a>
|
||||
<button class="button" disabled>Button</button>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
@@ -214,13 +214,13 @@ breadcrumb:
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="field">
|
||||
<a class="button is-primary is-small" disabled>Button</a>
|
||||
<button class="button is-primary is-small" disabled>Button</button>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-info is-loading">Button</a>
|
||||
<button class="button is-info is-loading">Button</button>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-danger is-outlined is-large">Button</a>
|
||||
<button class="button is-danger is-outlined is-large">Button</button>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
|
||||
68
docs/documentation/utilities/control-mixins.html
Normal file
68
docs/documentation/utilities/control-mixins.html
Normal file
@@ -0,0 +1,68 @@
|
||||
---
|
||||
title: Mixins
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: mixins
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- overview
|
||||
- overview-mixins
|
||||
---
|
||||
|
||||
<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>
|
||||
</div>
|
||||
68
docs/documentation/utilities/extends.html
Normal file
68
docs/documentation/utilities/extends.html
Normal file
@@ -0,0 +1,68 @@
|
||||
---
|
||||
title: Mixins
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: mixins
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- overview
|
||||
- overview-mixins
|
||||
---
|
||||
|
||||
<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>
|
||||
</div>
|
||||
254
docs/documentation/utilities/functions.html
Normal file
254
docs/documentation/utilities/functions.html
Normal file
@@ -0,0 +1,254 @@
|
||||
---
|
||||
title: Functions
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: functions
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- overview
|
||||
- overview-functions
|
||||
---
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Bulma has <strong>custom Sass functions</strong> to help find <strong>related colors</strong> dynamically:
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li><code>findColorInvert($color)</code>: returns either 70% transparent black or 100% opaque white depending on the luminance of the color</li>
|
||||
<li><code>findLightColor($color)</code>: returns the current color but with a lightness of at <em>least</em> 96%</li>
|
||||
<li><code>findDarkColor($color)</code>: returns the current color but with a lightness of at <em>most</em> 29%</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
Bulma also has a few utility functions to calculate useful values:
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li><code>powerNumber($number, $exp)</code>: calculates the value of a number exposed to another one. Returns a number</li>
|
||||
<li><code>colorLuminance($color)</code>: defines if a color is dark or light. Return a decimal number between 0 and 1 where <= 0.5 is dark and > 0.5 is light</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="The <code>findColorInvert()</code> function" %}
|
||||
|
||||
<div class="content">
|
||||
<p>The <code>findColorInvert($color)</code> function takes a <strong>color</strong> as an input, and outputs either transparent <strong>black</strong> <code>rgba(#000, 0.7)</code> or <strong>white</strong> <code>#fff</code>:</p>
|
||||
<ul>
|
||||
<li>if <code>colorLuminance($color) > 0.55</code>, it outputs <code>rgba(#000, 0.7)</code></li>
|
||||
<li>otherwise, it outputs <code>#fff</code></li>
|
||||
</ul>
|
||||
<p>Its purpose is to guarantee a <strong>readable</strong> shade for the <em>text</em> when the input color is used as the <em>background</em>.</p>
|
||||
<div class="table-container">
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>color</th>
|
||||
<th>color luminance</th>
|
||||
<th>findColorInvert()</th>
|
||||
<th>result</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #00d1b2;"></span>
|
||||
<code>#00d1b2</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.52831</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #fff;"></span>
|
||||
<code>#fff</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: #00d1b2; border-color: #00d1b2; color: #fff;">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #3273dc;"></span>
|
||||
<code>#3273dc</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.23119</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #fff;"></span>
|
||||
<code>#fff</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: #3273dc; border-color: #3273dc; color: #fff;">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #23d160;"></span>
|
||||
<code>#23d160</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.51067</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #fff;"></span>
|
||||
<code>#fff</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: #23d160; border-color: #23d160; color: #fff;">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #ffdd57;"></span>
|
||||
<code>#ffdd57</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.76863</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: rgba(0, 0, 0, 0.7);"></span>
|
||||
<code>rgba(0, 0, 0, 0.7)</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: #ffdd57; border-color: #ffdd57; color: rgba(0, 0, 0, 0.7);">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #ff3860;"></span>
|
||||
<code>#ff3860</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.27313</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #fff;"></span>
|
||||
<code>#fff</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: #ff3860; border-color: #ff3860; color: #fff;">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #ffb3b3;"></span>
|
||||
<code>#ffb3b3</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.61796</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
|
||||
<code>rgba(0,0,0,0.7)</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: #ffb3b3; border-color: #ffb3b3; color: rgba(0,0,0,0.7);">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #ffbc6b;"></span>
|
||||
<code>#ffbc6b</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.63053</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
|
||||
<code>rgba(0,0,0,0.7)</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: #ffbc6b; border-color: #ffbc6b; color: rgba(0,0,0,0.7);">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="bd-color" style="background: hsl(294, 71%, 79%);"></span>
|
||||
<code>hsl(294, 71%, 79%)</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.5529</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
|
||||
<code>rgba(0,0,0,0.7)</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: hsl(294, 71%, 79%); border-color: hsl(294, 71%, 79%); color: rgba(0,0,0,0.7);">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p>
|
||||
For colors that have a luminance close to the <code>0.55</code> threshold, it can be useful to <strong>override</strong> the <code>findColorInvert()</code> function, and rather set the invert color <strong>manually.</strong>
|
||||
<br>
|
||||
For example, this shade of <span class="bd-color" style="background: hsl(294, 71%, 79%); float: none; height: 16px; width: 16px; margin-right: 0; vertical-align: middle;"></span> purple has a color luminance of <code>0.5529</code>. It can be preferable to set a color invert of white instead of transparent black:
|
||||
</p>
|
||||
<div class="table-container">
|
||||
<table class="table is-bordered">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>
|
||||
with <code>findColorInvert()</code>
|
||||
</th>
|
||||
<td>
|
||||
<code>$purple-invert: findColorInvert($purple)</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
|
||||
<code>rgba(0,0,0,0.7)</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: hsl(294, 71%, 79%); border-color: hsl(294, 71%, 79%); color: rgba(0,0,0,0.7);">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
with manual setting
|
||||
</th>
|
||||
<td>
|
||||
<code>$purple-invert: #fff</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #fff;"></span>
|
||||
<code>#fff</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: hsl(294, 71%, 79%); border-color: hsl(294, 71%, 79%); color: #fff;">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="The <code>findLightColor()</code> and <code>findDarkColor()</code> functions" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>findLightColor($color)</code> and <code>findDarkColor($color)</code> functions take a <strong>color</strong> as an input, and output that color's light and dark versions respectively</code>:
|
||||
</p>
|
||||
</div>
|
||||
119
docs/documentation/utilities/mixins.html
Normal file
119
docs/documentation/utilities/mixins.html
Normal file
@@ -0,0 +1,119 @@
|
||||
---
|
||||
title: Mixins
|
||||
layout: documentation
|
||||
doc-tab: utilities
|
||||
doc-subtab: mixins
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- utilities
|
||||
- utilities-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 elements/anchor.html name="Element Mixins" %}
|
||||
|
||||
<h4 class="title is-5">Arrow</h4>
|
||||
|
||||
<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 arrow(purple);
|
||||
}{% endhighlight %}
|
||||
|
||||
{% capture arrow %}
|
||||
<span class="bulma-arrow-mixin"></span>
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/snippet.html content=arrow %}
|
||||
|
||||
<!-- -->
|
||||
|
||||
<h4 class="title is-5">Hamburger</h4>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>hamburger()</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-hamburger-mixin {
|
||||
@include hamburger(2.5rem);
|
||||
}{% endhighlight %}
|
||||
|
||||
{% capture hamburger %}
|
||||
<button class="bulma-hamburger-mixin">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/snippet.html content=hamburger %}
|
||||
|
||||
<!-- -->
|
||||
|
||||
<h4 class="title is-5">Delete</h4>
|
||||
|
||||
<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 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 elements/snippet.html content=delete %}
|
||||
|
||||
<!-- -->
|
||||
|
||||
@include loader
|
||||
|
||||
@include fa($size, $dimensions)
|
||||
|
||||
@include block($spacing: $block-spacing)
|
||||
|
||||
@include overlay($offset: 0)
|
||||
|
||||
@include placeholder
|
||||
|
||||
// Tools
|
||||
|
||||
@include clearfix
|
||||
|
||||
@include center($width, $height: 0)
|
||||
|
||||
@include overflow-touch
|
||||
|
||||
@include reset
|
||||
|
||||
@include unselectable
|
||||
|
||||
// RTL
|
||||
|
||||
@include ltr
|
||||
|
||||
@include rtl
|
||||
|
||||
@include ltr-property($property, $spacing, $right: true)
|
||||
|
||||
@include ltr-position($spacing, $right: true)
|
||||
|
||||
68
docs/documentation/utilities/responsive-mixins.html
Normal file
68
docs/documentation/utilities/responsive-mixins.html
Normal file
@@ -0,0 +1,68 @@
|
||||
---
|
||||
title: Mixins
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: mixins
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- overview
|
||||
- overview-mixins
|
||||
---
|
||||
|
||||
<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>
|
||||
</div>
|
||||
Reference in New Issue
Block a user