mirror of
https://github.com/jgthms/bulma.git
synced 2024-10-17 09:04:18 +00:00
28 lines
1.2 KiB
HTML
28 lines
1.2 KiB
HTML
---
|
|
layout: documentation
|
|
doc-tab: overview
|
|
doc-subtab: functions
|
|
---
|
|
|
|
{% include subnav-overview.html %}
|
|
|
|
<section class="section">
|
|
<div class="container">
|
|
<h1 class="title">Functions</h1>
|
|
<h2 class="subtitle">Utility functions to calculate colors and other values</h2>
|
|
|
|
<hr>
|
|
|
|
<div class="content">
|
|
<p>Bulma uses 5 custom functions to help define the values and colors 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>removeUnit($number)</code>: removes the unit of a Sass number. So "10px" becomes "10" and "3.5rem" returns "3.5". Used for string concatenation.</li>
|
|
<li><code>roundToEvenNumber($number)</code>: rounds a number to the closest but lower even one. So 23 becomes 22, and 7.5 returns 6.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|