mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Explain functions
This commit is contained in:
Jeremy Thomas
parent
82e7672458
commit
e66684c514
@ -1,10 +1,8 @@
|
||||
<section class="hero is-primary">
|
||||
<div class="hero-head">
|
||||
<div class="container">
|
||||
<div class="container">
|
||||
{% include header.html %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="hero is-primary">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
|
||||
@ -4,17 +4,20 @@
|
||||
<a class="nav-item is-tab {% if page.doc-subtab == 'start' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/start/">
|
||||
Start
|
||||
</a>
|
||||
<a class="nav-item is-tab {% if page.doc-subtab == 'classes' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/classes/">
|
||||
Classes
|
||||
</a>
|
||||
<a class="nav-item is-tab {% if page.doc-subtab == 'modular' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/modular/">
|
||||
Modular
|
||||
</a>
|
||||
<a class="nav-item is-tab {% if page.doc-subtab == 'variables' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/variables/">
|
||||
Variables
|
||||
</a>
|
||||
<a class="nav-item is-tab {% if page.doc-subtab == 'responsiveness' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/responsiveness/">
|
||||
Responsiveness
|
||||
</a>
|
||||
<a class="nav-item is-tab {% if page.doc-subtab == 'modular' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/modular/">
|
||||
Modular
|
||||
</a>
|
||||
<a class="nav-item is-tab {% if page.doc-subtab == 'classes' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/classes/">
|
||||
Classes
|
||||
<a class="nav-item is-tab {% if page.doc-subtab == 'functions' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/functions/">
|
||||
Functions
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
27
docs/documentation/overview/functions.html
Normal file
27
docs/documentation/overview/functions.html
Normal file
@ -0,0 +1,27 @@
|
||||
---
|
||||
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>
|
||||
@ -19,8 +19,8 @@ doc-subtab: responsiveness
|
||||
<ul>
|
||||
<li><code>mobile</code>: up to <code>768px</code></li>
|
||||
<li><code>tablet</code>: from <code>769px</code></li>
|
||||
<li><code>desktop</code>: from <code>980px</code></li>
|
||||
<li><code>widescreen</code>: from <code>1180px</code></li>
|
||||
<li><code>desktop</code>: from <code>1000px</code></li>
|
||||
<li><code>widescreen</code>: from <code>1192px</code></li>
|
||||
</ul>
|
||||
<p>Bulma uses 7 responsive mixins:</p>
|
||||
<ul>
|
||||
@ -34,23 +34,23 @@ doc-subtab: responsiveness
|
||||
</li>
|
||||
<li>
|
||||
<code>=tablet-only</code><br>
|
||||
from <code>769px</code> and until <code>979px</code>
|
||||
from <code>769px</code> and until <code>999px</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>=touch</code><br>
|
||||
until <code>979px</code>
|
||||
until <code>999px</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>=desktop</code><br>
|
||||
from <code>980px</code>
|
||||
from <code>1000px</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>=desktop-only</code><br>
|
||||
from <code>980px</code> and until <code>1179px</code>
|
||||
from <code>1000px</code> and until <code>1191px</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>=widescreen</code><br>
|
||||
from <code>1180px</code>
|
||||
from <code>1192px</code>
|
||||
</li>
|
||||
</ul>
|
||||
<p>How Bulma works is that <strong>everything is mobile-first</strong> by default, and responsive mixins act as <em>minimum viewport widths</em> where some alternative styles are applied.</p>
|
||||
@ -65,15 +65,15 @@ doc-subtab: responsiveness
|
||||
</th>
|
||||
<th>
|
||||
Tablet<br>
|
||||
Between <code>769px</code> and <code>979px</code>
|
||||
Between <code>769px</code> and <code>999px</code>
|
||||
</th>
|
||||
<th>
|
||||
Desktop<br>
|
||||
Between <code>980px</code> and <code>1179px</code>
|
||||
Between <code>1000px</code> and <code>1191px</code>
|
||||
</th>
|
||||
<th>
|
||||
Widescreen<br>
|
||||
<code>1180px</code> and above
|
||||
<code>1192px</code> and above
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
@ -20,9 +20,9 @@ doc-subtab: variables
|
||||
<strong>Initial variables</strong>: where you define variables by <strong>direct value</strong>, like:
|
||||
<ul>
|
||||
<li><strong>colors</strong>: <code>$blue: #42afe3</code></li>
|
||||
<li><strong>font families</strong>: <code>$family-sans-serif: "Helvetica Neue", "Helvetica", "Arial", sans-serif</code></li>
|
||||
<li><strong>font sizes</strong>: <code>$size-1: 48px</code></li>
|
||||
<li><strong>other values</strong>: <code>$nav-height: 50px</code> or <code>$easing: ease-out</code></li>
|
||||
<li><strong>font families</strong>: <code>$family-monospace: "Inconsolata", "Consolas", "Monaco", monospace</code></li>
|
||||
<li><strong>font sizes</strong>: <code>$size-1: 3.5rem</code></li>
|
||||
<li><strong>other values</strong>: <code>$easing: ease-out</code> or <code>$radius-large: 5px</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
@ -40,7 +40,7 @@ doc-subtab: variables
|
||||
<li>
|
||||
<strong>Generated variables</strong> where variables are <strong>calculated</strong> from the values set in the previous file. For example, you can have:
|
||||
<ul>
|
||||
<li><code>$body-background: $white</code>: the page's main background</li>
|
||||
<li><code>$background: $white-ter</code>: the main background color</li>
|
||||
<li><code>$link: $primary</code>: the links use the primary color</li>
|
||||
<li><code>$family-primary: $family-sans-serif</code>: the primary font family is the sans-serif one</li>
|
||||
</ul>
|
||||
@ -174,23 +174,23 @@ doc-subtab: variables
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$size-1</code></td>
|
||||
<td>48px</td>
|
||||
<td>3.5rem</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$size-2</code></td>
|
||||
<td>40px</td>
|
||||
<td>2.75rem</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$size-3</code></td>
|
||||
<td>28px</td>
|
||||
<td>2rem</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$size-4</code></td>
|
||||
<td>24px</td>
|
||||
<td>1.5rem</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$size-5</code></td>
|
||||
<td>18px</td>
|
||||
<td>1.25rem</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$size-6</code></td>
|
||||
@ -198,24 +198,24 @@ doc-subtab: variables
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$size-7</code></td>
|
||||
<td>11px</td>
|
||||
<td>0.75rem</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$weight-light</code></td>
|
||||
<td>300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$weight-normal</code></td>
|
||||
<td>400</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$weight-semibold</code></td>
|
||||
<td>500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$weight-bold</code></td>
|
||||
<td>700</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$weight-title-normal</code></td>
|
||||
<td>300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$weight-title-bold</code></td>
|
||||
<td>500</td>
|
||||
</tr>
|
||||
|
||||
<tr><th colspan="2">Breakpoints</th></tr>
|
||||
<tr>
|
||||
@ -224,11 +224,11 @@ doc-subtab: variables
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$desktop</code></td>
|
||||
<td>980px</td>
|
||||
<td>1000px (960px + 40px container)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$widescreen</code></td>
|
||||
<td>1180px</td>
|
||||
<td>1192px (1152px+ 40px container)</td>
|
||||
</tr>
|
||||
|
||||
<tr><th colspan="2">Miscellaneous</th></tr>
|
||||
@ -268,15 +268,11 @@ doc-subtab: variables
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$light</code></td>
|
||||
<td>$grey-lighter</td>
|
||||
<td>$white-ter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$dark</code></td>
|
||||
<td>$grey-dark</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$text</code></td>
|
||||
<td>$grey-dark</td>
|
||||
<td>$grey-darker</td>
|
||||
</tr>
|
||||
|
||||
<tr><th colspan="2">3. Generated variables</th></tr>
|
||||
@ -330,6 +326,10 @@ doc-subtab: variables
|
||||
</tr>
|
||||
|
||||
<tr><th colspan="2">Text colors</th></tr>
|
||||
<tr>
|
||||
<td><code>$text</code></td>
|
||||
<td>$grey-dark</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$text-invert</code></td>
|
||||
<td>findColorInvert($text)</td>
|
||||
@ -378,59 +378,25 @@ doc-subtab: variables
|
||||
<td><code>$link-hover</code></td>
|
||||
<td>$grey-darker</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$link-hover-background</code></td>
|
||||
<td>$grey-lighter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$link-hover-border</code></td>
|
||||
<td>$grey-darker</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$link-focus</code></td>
|
||||
<td>$grey-darker</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$link-focus-border</code></td>
|
||||
<td>$primary</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$link-active</code></td>
|
||||
<td>$grey-darker</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$link-active-border</code></td>
|
||||
<td>$grey-darker</td>
|
||||
</tr>
|
||||
|
||||
<tr><th colspan="2">Control colors</th></tr>
|
||||
<tr>
|
||||
<td><code>$control</code></td>
|
||||
<td>$text-strong</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$control-background</code></td>
|
||||
<td>$text-invert</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$control-border</code></td>
|
||||
<td>$border</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$control-hover</code></td>
|
||||
<td>$link-hover</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$control-hover-border</code></td>
|
||||
<td>$border-hover</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$control-active</code></td>
|
||||
<td>$link</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$control-active-background</code></td>
|
||||
<td>$link</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$control-active-background-invert</code></td>
|
||||
<td>$link-invert</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$control-active-border</code></td>
|
||||
<td>$link</td>
|
||||
<td>$grey-dark</td>
|
||||
</tr>
|
||||
|
||||
<tr><th colspan="2">Typography</th></tr>
|
||||
@ -448,7 +414,7 @@ doc-subtab: variables
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$size-normal</code></td>
|
||||
<td>$size-6</td>
|
||||
<td>1rem</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$size-medium</code></td>
|
||||
@ -456,7 +422,7 @@ doc-subtab: variables
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$size-large</code></td>
|
||||
<td>$size-3</td>
|
||||
<td>$size-4</td>
|
||||
</tr>
|
||||
|
||||
<tr><th colspan="2">4. Lists and maps</th></tr>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 142 KiB After Width: | Height: | Size: 364 KiB |
@ -486,7 +486,7 @@ route: index
|
||||
<h4 class="subtitle is-4">Buttons, form controls, menus, tabs, titles, notifications, etc.</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-one-quarter">
|
||||
<div class="column is-one-third">
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<figure class="image is-4by3">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user