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>