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

Init mixin docs

Browse Source
This commit is contained in:
Jeremy Thomas
2021-09-19 01:23:53 +01:00
parent 67ab02b289
commit 8def6f6afa
15 changed files with 986 additions and 474 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
docs/documentation/overview/functions.html
View File

@@ -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>

104
docs/documentation/overview/modifiers.html
View File

@@ -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">