bulma/docs/documentation/overview/variables.html

306 lines
8.8 KiB
HTML
Raw Normal View History

---
2017-07-29 12:02:00 +00:00
title: Variables
layout: documentation
doc-tab: overview
doc-subtab: variables
2017-07-29 16:58:13 +00:00
initial_colors:
- name: $black
value: hsl(0, 0%, 4%)
- name: $black-bis
value: hsl(0, 0%, 7%)
- name: $black-ter
value: hsl(0, 0%, 14%)
- name: $grey-darker
value: hsl(0, 0%, 21%)
- name: $grey-dark
value: hsl(0, 0%, 29%)
- name: $grey
value: hsl(0, 0%, 48%)
- name: $grey-light
value: hsl(0, 0%, 71%)
- name: $grey-lighter
value: hsl(0, 0%, 86%)
- name: $white-ter
value: hsl(0, 0%, 96%)
- name: $white-bis
value: hsl(0, 0%, 98%)
- name: $white
value: hsl(0, 0%, 100%)
- name: $orange
value: hsl(14, 100%, 53%)
- name: $yellow
value: hsl(48, 100%, 67%)
- name: $green
value: hsl(141, 71%, 48%)
- name: $turquoise
value: hsl(171, 100%, 41%)
- name: $blue
value: hsl(217, 71%, 53%)
- name: $purple
value: hsl(271, 100%, 71%)
- name: $red
value: hsl(348, 100%, 61%)
initial_variables:
- name: $family-sans-serif
value: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif
- name: $family-monospace
value: monospace
- name: $render-mode
value: optimizeLegibility
- name: $size-1
value: 3rem
- name: $size-2
value: 2.5rem
- name: $size-3
value: 2rem
- name: $size-4
value: 1.5rem
- name: $size-5
value: 1.25rem
- name: $size-6
value: 1rem
- name: $size-7
value: 0.75rem
- name: $weight-light
value: 300
- name: $weight-normal
value: 400
- name: $weight-medium
value: 500
- name: $weight-semibold
value: 600
- name: $weight-bold
value: 700
- name: $gap
value: 24px
- name: $tablet
value: 769px
- name: $desktop
value: 960px + (2 * $gap)
- name: $widescreen
value: 1152px + (2 * $gap)
- name: $fullhd
value: 1344px + (2 * $gap)
- name: $easing
value: ease-out
- name: $radius-small
value: 2px
- name: $radius
value: 3px
- name: $radius-large
value: 5px
- name: $speed
value: 86ms
derived_variables:
- name: $primary
value: $turquoise
- name: $info
value: $blue
- name: $success
value: $green
- name: $warning
value: $yellow
- name: $danger
value: $red
- name: $light
value: $white-ter
- name: $dark
value: $grey-darker
- name: $orange-invert
value: findColorInvert($orange)
- name: $yellow-invert
value: findColorInvert($yellow)
- name: $green-invert
value: findColorInvert($green)
- name: $turquoise-invert
value: findColorInvert($turquoise)
- name: $blue-invert
value: findColorInvert($blue)
- name: $purple-invert
value: findColorInvert($purple)
- name: $red-invert
value: findColorInvert($red)
- name: $primary-invert
value: $turquoise-invert
- name: $info-invert
value: $blue-invert
- name: $success-invert
value: $green-invert
- name: $warning-invert
value: $yellow-invert
- name: $danger-invert
value: $red-invert
- name: $light-invert
value: $dark
- name: $dark-invert
value: $light
- name: $background
value: $white-ter
- name: $border
value: $grey-lighter
- name: $border-hover
value: $grey-light
- name: $text
value: $grey-dark
- name: $text-invert
value: findColorInvert($text)
- name: $text-light
value: $grey
- name: $text-strong
value: $grey-darker
- name: $code
value: $red
- name: $code-background
value: $background
- name: $pre
value: $text
- name: $pre-background
value: $background
- name: $link
value: $primary
- name: $link-invert
value: $primary-invert
- name: $link-visited
value: $purple
- name: $link-hover
value: $grey-darker
- name: $link-hover-border
value: $grey-light
- name: $link-focus
value: $grey-darker
- name: $link-focus-border
value: $primary
- name: $link-active
value: $grey-darker
- name: $link-active-border
value: $grey-dark
- name: $family-primary
value: $family-sans-serif
- name: $family-code
value: $family-monospace
- name: $size-small
value: $size-7
- name: $size-normal
value: $size-6
- name: $size-medium
value: $size-5
- name: $size-large
value: $size-4
- name: $colors
value: '("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert))'
- name: $shades
value: '("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis)'
- name: $sizes
value: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6
---
{% include subnav-overview.html %}
<section class="section">
<div class="container">
<h1 class="title">Variables</h1>
<h2 class="subtitle">Easily <strong>customize</strong> Bulma to match your design</h2>
<hr>
<div class="content">
2017-07-29 16:58:13 +00:00
<p>Bulma has <strong>two</strong> variable files divided into <strong>4</strong> sections:</p>
<ol>
<li>
2017-07-29 16:58:13 +00:00
<strong>Initial variables</strong>: where you define variables by <strong>literal value</strong>, like:
<ul>
<li><strong>colors</strong>: <code>$blue: hsl(217, 71%, 53%)</code></li>
<li><strong>font sizes</strong>: <code>$size-1: 3rem</code></li>
2017-07-29 16:58:13 +00:00
<li><strong>dimensions</strong>: <code>$gap: 24px</code></li>
2017-01-04 13:05:24 +00:00
<li><strong>other values</strong>: <code>$easing: ease-out</code> or <code>$radius-large: 5px</code></li>
</ul>
</li>
<li>
2017-07-29 16:58:13 +00:00
<strong>Derived variables</strong> where variables are <strong>calculated</strong> from the values set in the previous file. For example, you can have:
<ul>
2017-07-29 16:58:13 +00:00
<li>
<strong>Primary colors</strong> derived from the initial variables:
<ul>
<li><code>$primary: $turquoise</code></li>
<li><code>$info: $blue</code></li>
<li><code>$success: $green</code></li>
<li><code>$warning: $yellow</code></li>
<li><code>$danger: $red</code></li>
<li><code>$dark: $grey-darker</code></li>
<li><code>$text: $grey-dark</code></li>
</ul>
</li>
<li><code>$background: $white-ter</code>: a general 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>
2017-07-29 16:58:13 +00:00
<li>
<strong>Lists and maps</strong> which are collections so already defined variables:
<ul>
<li><code>$colors: (dark: ($dark, $dark-invert), primary: ($primary, $primary-invert), info: ($info, $info-invert), success: ($success, $success-invert), warning: ($warning, $warning-invert), danger: ($danger, $danger-invert))</code></li>
<li><code>$shades: ("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis)</code></li>
<li><code>$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6</code></li>
</ul>
</li>
</ul>
</li>
2017-07-29 16:58:13 +00:00
</ol>
<p>
To <strong>override</strong> any of these variables, just set them <em>before</em> importing Bulma.
</p>
</div>
2017-08-14 17:25:14 +00:00
{% include anchor.html name="Initial variables" %}
2017-07-29 16:58:13 +00:00
<div class="content">
<p>
These are variables with a <strong>literal</strong> value.
</p>
</div>
2016-10-03 08:47:36 +00:00
2017-07-29 16:58:13 +00:00
<table class="table is-bordered is-striped">
{% for color in page.initial_colors %}
<tr>
<td>
<code style="white-space: nowrap;">{{ color.name }}</code>
</td>
<td>
2017-08-14 11:44:24 +00:00
<span class="bd-color" style="background: {{ color.value }};"></span>
2017-07-29 16:58:13 +00:00
<code>{{ color.value }}</code>
2017-01-15 21:26:24 +00:00
</td>
</tr>
2017-07-29 16:58:13 +00:00
{% endfor %}
{% for variable in page.initial_variables %}
<tr>
<td>
<code style="white-space: nowrap;">{{ variable.name }}</code>
</td>
<td>
<code>{{ variable.value }}</code>
</td>
</tr>
{% endfor %}
</table>
2016-10-03 08:47:36 +00:00
2017-08-14 17:25:14 +00:00
{% include anchor.html name="Derived variables" %}
2016-10-03 08:47:36 +00:00
2017-07-29 16:58:13 +00:00
<div class="content">
<p>
These are variables with a value that <strong>references</strong> another variable.
</p>
</div>
2016-10-03 08:47:36 +00:00
2017-07-29 16:58:13 +00:00
<table class="table is-bordered is-striped">
{% for variable in page.derived_variables %}
<tr>
<td>
<code style="white-space: nowrap;">{{ variable.name }}</code>
</td>
<td>
<code>{{ variable.value }}</code>
</td>
</tr>
{% endfor %}
2016-10-03 08:47:36 +00:00
</table>
</div>
</section>