library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Explain functions

Browse Source
This commit is contained in:
Jeremy Thomas 2017-01-04 14:05:24 +01:00
parent 82e7672458
commit e66684c514
7 changed files with 87 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/_includes/blog-hero.html
View File

@ -1,10 +1,8 @@
<section class="hero is-primary">
<div class="hero-head">
<div class="container"> <div class="container">
{% include header.html %} {% include header.html %}
</div> </div>
</div>
<section class="hero is-primary">
<div class="hero-body"> <div class="hero-body">
<div class="container"> <div class="container">
<div class="columns is-vcentered"> <div class="columns is-vcentered">

13
docs/_includes/subnav-overview.html
View File

@ -4,17 +4,20 @@
<a class="nav-item is-tab {% if page.doc-subtab == 'start' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/start/"> <a class="nav-item is-tab {% if page.doc-subtab == 'start' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/start/">
Start Start
</a> </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/"> <a class="nav-item is-tab {% if page.doc-subtab == 'variables' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/variables/">
Variables Variables
</a> </a>
<a class="nav-item is-tab {% if page.doc-subtab == 'responsiveness' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/responsiveness/"> <a class="nav-item is-tab {% if page.doc-subtab == 'responsiveness' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/responsiveness/">
Responsiveness Responsiveness
</a> </a>
<a class="nav-item is-tab {% if page.doc-subtab == 'modular' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/modular/"> <a class="nav-item is-tab {% if page.doc-subtab == 'functions' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/functions/">
Modular Functions
</a>
<a class="nav-item is-tab {% if page.doc-subtab == 'classes' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/classes/">
Classes
</a> </a>
</div> </div>
</div> </div>

27
docs/documentation/overview/functions.html Normal file
View 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>

20
docs/documentation/overview/responsiveness.html
View File

@ -19,8 +19,8 @@ doc-subtab: responsiveness
<ul> <ul>
<li><code>mobile</code>: up to <code>768px</code></li> <li><code>mobile</code>: up to <code>768px</code></li>
<li><code>tablet</code>: from <code>769px</code></li> <li><code>tablet</code>: from <code>769px</code></li>
<li><code>desktop</code>: from <code>980px</code></li> <li><code>desktop</code>: from <code>1000px</code></li>
<li><code>widescreen</code>: from <code>1180px</code></li> <li><code>widescreen</code>: from <code>1192px</code></li>
</ul> </ul>
<p>Bulma uses 7 responsive mixins:</p> <p>Bulma uses 7 responsive mixins:</p>
<ul> <ul>
@ -34,23 +34,23 @@ doc-subtab: responsiveness
</li> </li>
<li> <li>
<code>=tablet-only</code><br> <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>
<li> <li>
<code>=touch</code><br> <code>=touch</code><br>
until <code>979px</code> until <code>999px</code>
</li> </li>
<li> <li>
<code>=desktop</code><br> <code>=desktop</code><br>
from <code>980px</code> from <code>1000px</code>
</li> </li>
<li> <li>
<code>=desktop-only</code><br> <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>
<li> <li>
<code>=widescreen</code><br> <code>=widescreen</code><br>
from <code>1180px</code> from <code>1192px</code>
</li> </li>
</ul> </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> <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>
<th> <th>
Tablet<br> Tablet<br>
Between <code>769px</code> and <code>979px</code> Between <code>769px</code> and <code>999px</code>
</th> </th>
<th> <th>
Desktop<br> Desktop<br>
Between <code>980px</code> and <code>1179px</code> Between <code>1000px</code> and <code>1191px</code>
</th> </th>
<th> <th>
Widescreen<br> Widescreen<br>
<code>1180px</code> and above <code>1192px</code> and above
</th> </th>
</tr> </tr>
</thead> </thead>

108
docs/documentation/overview/variables.html
View File

@ -20,9 +20,9 @@ doc-subtab: variables
<strong>Initial variables</strong>: where you define variables by <strong>direct value</strong>, like: <strong>Initial variables</strong>: where you define variables by <strong>direct value</strong>, like:
<ul> <ul>
<li><strong>colors</strong>: <code>$blue: #42afe3</code></li> <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 families</strong>: <code>$family-monospace: "Inconsolata", "Consolas", "Monaco", monospace</code></li>
<li><strong>font sizes</strong>: <code>$size-1: 48px</code></li> <li><strong>font sizes</strong>: <code>$size-1: 3.5rem</code></li>
<li><strong>other values</strong>: <code>$nav-height: 50px</code> or <code>$easing: ease-out</code></li> <li><strong>other values</strong>: <code>$easing: ease-out</code> or <code>$radius-large: 5px</code></li>
</ul> </ul>
</li> </li>
<li> <li>
@ -40,7 +40,7 @@ doc-subtab: variables
<li> <li>
<strong>Generated variables</strong> where variables are <strong>calculated</strong> from the values set in the previous file. For example, you can have: <strong>Generated variables</strong> where variables are <strong>calculated</strong> from the values set in the previous file. For example, you can have:
<ul> <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>$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> <li><code>$family-primary: $family-sans-serif</code>: the primary font family is the sans-serif one</li>
</ul> </ul>
@ -174,23 +174,23 @@ doc-subtab: variables
</tr> </tr>
<tr> <tr>
<td><code>$size-1</code></td> <td><code>$size-1</code></td>
<td>48px</td> <td>3.5rem</td>
</tr> </tr>
<tr> <tr>
<td><code>$size-2</code></td> <td><code>$size-2</code></td>
<td>40px</td> <td>2.75rem</td>
</tr> </tr>
<tr> <tr>
<td><code>$size-3</code></td> <td><code>$size-3</code></td>
<td>28px</td> <td>2rem</td>
</tr> </tr>
<tr> <tr>
<td><code>$size-4</code></td> <td><code>$size-4</code></td>
<td>24px</td> <td>1.5rem</td>
</tr> </tr>
<tr> <tr>
<td><code>$size-5</code></td> <td><code>$size-5</code></td>
<td>18px</td> <td>1.25rem</td>
</tr> </tr>
<tr> <tr>
<td><code>$size-6</code></td> <td><code>$size-6</code></td>
@ -198,24 +198,24 @@ doc-subtab: variables
</tr> </tr>
<tr> <tr>
<td><code>$size-7</code></td> <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>
<tr> <tr>
<td><code>$weight-normal</code></td> <td><code>$weight-normal</code></td>
<td>400</td> <td>400</td>
</tr> </tr>
<tr>
<td><code>$weight-semibold</code></td>
<td>500</td>
</tr>
<tr> <tr>
<td><code>$weight-bold</code></td> <td><code>$weight-bold</code></td>
<td>700</td> <td>700</td>
</tr> </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><th colspan="2">Breakpoints</th></tr>
<tr> <tr>
@ -224,11 +224,11 @@ doc-subtab: variables
</tr> </tr>
<tr> <tr>
<td><code>$desktop</code></td> <td><code>$desktop</code></td>
<td>980px</td> <td>1000px (960px + 40px container)</td>
</tr> </tr>
<tr> <tr>
<td><code>$widescreen</code></td> <td><code>$widescreen</code></td>
<td>1180px</td> <td>1192px (1152px+ 40px container)</td>
</tr> </tr>
<tr><th colspan="2">Miscellaneous</th></tr> <tr><th colspan="2">Miscellaneous</th></tr>
@ -268,15 +268,11 @@ doc-subtab: variables
</tr> </tr>
<tr> <tr>
<td><code>$light</code></td> <td><code>$light</code></td>
<td>$grey-lighter</td> <td>$white-ter</td>
</tr> </tr>
<tr> <tr>
<td><code>$dark</code></td> <td><code>$dark</code></td>
<td>$grey-dark</td> <td>$grey-darker</td>
</tr>
<tr>
<td><code>$text</code></td>
<td>$grey-dark</td>
</tr> </tr>
<tr><th colspan="2">3. Generated variables</th></tr> <tr><th colspan="2">3. Generated variables</th></tr>
@ -330,6 +326,10 @@ doc-subtab: variables
</tr> </tr>
<tr><th colspan="2">Text colors</th></tr> <tr><th colspan="2">Text colors</th></tr>
<tr>
<td><code>$text</code></td>
<td>$grey-dark</td>
</tr>
<tr> <tr>
<td><code>$text-invert</code></td> <td><code>$text-invert</code></td>
<td>findColorInvert($text)</td> <td>findColorInvert($text)</td>
@ -378,59 +378,25 @@ doc-subtab: variables
<td><code>$link-hover</code></td> <td><code>$link-hover</code></td>
<td>$grey-darker</td> <td>$grey-darker</td>
</tr> </tr>
<tr>
<td><code>$link-hover-background</code></td>
<td>$grey-lighter</td>
</tr>
<tr> <tr>
<td><code>$link-hover-border</code></td> <td><code>$link-hover-border</code></td>
<td>$grey-darker</td> <td>$grey-darker</td>
</tr> </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> <tr>
<td><code>$link-active</code></td> <td><code>$link-active</code></td>
<td>$grey-darker</td> <td>$grey-darker</td>
</tr> </tr>
<tr> <tr>
<td><code>$link-active-border</code></td> <td><code>$link-active-border</code></td>
<td>$grey-darker</td> <td>$grey-dark</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>
</tr> </tr>
<tr><th colspan="2">Typography</th></tr> <tr><th colspan="2">Typography</th></tr>
@ -448,7 +414,7 @@ doc-subtab: variables
</tr> </tr>
<tr> <tr>
<td><code>$size-normal</code></td> <td><code>$size-normal</code></td>
<td>$size-6</td> <td>1rem</td>
</tr> </tr>
<tr> <tr>
<td><code>$size-medium</code></td> <td><code>$size-medium</code></td>
@ -456,7 +422,7 @@ doc-subtab: variables
</tr> </tr>
<tr> <tr>
<td><code>$size-large</code></td> <td><code>$size-large</code></td>
<td>$size-3</td> <td>$size-4</td>
</tr> </tr>
<tr><th colspan="2">4. Lists and maps</th></tr> <tr><th colspan="2">4. Lists and maps</th></tr>

BIN
docs/images/blog/metro-ui-css-grid-tiles.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 142 KiB

After

Width:  |  Height:  |  Size: 364 KiB

2
docs/index.html
View File

@ -486,7 +486,7 @@ route: index
<h4 class="subtitle is-4">Buttons, form controls, menus, tabs, titles, notifications, etc.</h4> <h4 class="subtitle is-4">Buttons, form controls, menus, tabs, titles, notifications, etc.</h4>
<div class="columns"> <div class="columns">
<div class="column is-one-quarter"> <div class="column is-one-third">
<div class="card"> <div class="card">
<div class="card-image"> <div class="card-image">
<figure class="image is-4by3"> <figure class="image is-4by3">