Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-18 19:34:30 -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

81
docs/documentation/utilities/functions.html
View File

@@ -1,13 +1,13 @@
---
title: Functions
layout: documentation
doc-tab: overview
doc-tab: utilities
doc-subtab: functions
breadcrumb:
- home
- documentation
- overview
- overview-functions
- utilities
- utilities-functions
---
<div class="content">
@@ -203,6 +203,7 @@ breadcrumb:
<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>
@@ -252,3 +253,77 @@ breadcrumb:
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>
<div class="table-container">
<table class="table is-bordered">
<thead>
<tr>
<th>color</th>
<th>findLightColor</th>
<th>findDarkColor</th>
</tr>
</thead>
<tbody>
<tr>
<td>
{% include elements/color-square.html value="hsl(171deg, 100%, 41%)" %}
</td>
<td>
{% include elements/color-square.html value="hsl(171deg, 100%, 96%)" %}
</td>
<td>
{% include elements/color-square.html value="hsl(171deg, 100%, 29%)" %}
</td>
</tr>
<tr>
<td>
{% include elements/color-square.html value="hsl(229deg 53% 53%)" %}
</td>
<td>
{% include elements/color-square.html value="hsl(229deg 52% 96%)" %}
</td>
<td>
{% include elements/color-square.html value="hsl(229deg 53% 47%)" %}
</td>
</tr>
<tr>
<td>
{% include elements/color-square.html value="hsl(153deg 53% 53%)" %}
</td>
<td>
{% include elements/color-square.html value="hsl(153deg 52% 96%)" %}
</td>
<td>
{% include elements/color-square.html value="hsl(153deg 53% 31%)" %}
</td>
</tr>
<tr>
<td>
{% include elements/color-square.html value="hsl(44deg 100% 77%)" %}
</td>
<td>
{% include elements/color-square.html value="hsl(45deg 100% 96%)" %}
</td>
<td>
{% include elements/color-square.html value="hsl(44deg 100% 29%)" %}
</td>
</tr>
<tr>
<td>
{% include elements/color-square.html value="hsl(348deg 86% 61%)" %}
</td>
<td>
{% include elements/color-square.html value="hsl(347deg 90% 96%)" %}
</td>
<td>
{% include elements/color-square.html value="hsl(348deg 86% 43%)" %}
</td>
</tr>
</tbody>
</table>
</div>