mirror of
https://github.com/jgthms/bulma.git
synced 2024-10-17 09:04:18 +00:00
367 lines
10 KiB
HTML
367 lines
10 KiB
HTML
---
|
|
title: Variables
|
|
layout: documentation
|
|
doc-tab: overview
|
|
doc-subtab: variables
|
|
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: $cyan
|
|
value: hsl(204, 86%, 53%)
|
|
- name: $cyan
|
|
value: hsl(204, 86%, 53%)
|
|
- 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: 32px
|
|
- 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: $link
|
|
value: $blue
|
|
- name: $info
|
|
value: $cyan
|
|
- 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: $blue
|
|
- name: $link-invert
|
|
value: $blue-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: $blue
|
|
- 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), "link": ($link, $link-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
|
|
generic_variables:
|
|
- name: $body-background-color
|
|
value: '#fff'
|
|
- name: $body-size
|
|
value: 16px
|
|
- name: $body-rendering
|
|
value: optimizeLegibility
|
|
- name: $body-family
|
|
value: $family-primary
|
|
- name: $body-color
|
|
value: $text
|
|
- name: $body-weight
|
|
value: $weight-normal
|
|
- name: $body-line-height
|
|
value: 1.5
|
|
- name: $code-family
|
|
value: $family-code
|
|
- name: $code-padding
|
|
value: 0.25em 0.5em 0.25em
|
|
- name: $code-weight
|
|
value: normal
|
|
- name: $code-size
|
|
value: 0.875em
|
|
- name: $hr-background-color
|
|
value: $border
|
|
- name: $hr-height
|
|
value: 1px
|
|
- name: $hr-margin
|
|
value: 1.5rem 0
|
|
- name: $strong-color
|
|
value: $text-strong
|
|
- name: $strong-weight
|
|
value: $weight-bold
|
|
---
|
|
|
|
{% 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">
|
|
<p>Bulma has <strong>two</strong> variable files divided into <strong>4</strong> sections:</p>
|
|
<ol>
|
|
<li>
|
|
<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>
|
|
<li><strong>dimensions</strong>: <code>$gap: 32px</code></li>
|
|
<li><strong>other values</strong>: <code>$easing: ease-out</code> or <code>$radius-large: 5px</code></li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<strong>Derived variables</strong> where variables are <strong>calculated</strong> from the values set in the previous file. For example, you can have:
|
|
<ul>
|
|
<li>
|
|
<strong>Primary colors</strong> derived from the initial variables:
|
|
<ul>
|
|
<li><code>$primary: $turquoise</code></li>
|
|
<li><code>$link: $blue</code></li>
|
|
<li><code>$info: $cyan</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>
|
|
<li>
|
|
<strong>Lists and maps</strong> which are collections so already defined variables:
|
|
<ul>
|
|
<li><code>$colors: ("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "link": ($link, $link-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>
|
|
</ol>
|
|
<p>
|
|
To <strong>override</strong> any of these variables, just set them <em>before</em> importing Bulma.
|
|
</p>
|
|
</div>
|
|
|
|
{% include anchor.html name="Initial variables" %}
|
|
|
|
<div class="content">
|
|
<p>
|
|
These are variables with a <strong>literal</strong> value.
|
|
</p>
|
|
</div>
|
|
|
|
<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>
|
|
<span class="bd-color" style="background: {{ color.value }};"></span>
|
|
<code>{{ color.value }}</code>
|
|
</td>
|
|
</tr>
|
|
{% 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>
|
|
|
|
{% include anchor.html name="Derived variables" %}
|
|
|
|
<div class="content">
|
|
<p>
|
|
These are variables with a value that <strong>references</strong> another variable.
|
|
</p>
|
|
</div>
|
|
|
|
<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 %}
|
|
</table>
|
|
|
|
{% include anchor.html name="Generic variables" %}
|
|
|
|
<div class="content">
|
|
<p>
|
|
The following generic variables are provided in <code>./sass/base/generic.sass</code>.
|
|
</p>
|
|
</div>
|
|
|
|
<table class="table is-bordered is-striped">
|
|
{% for variable in page.generic_variables %}
|
|
<tr>
|
|
<td>
|
|
<code style="white-space: nowrap;">{{ variable.name }}</code>
|
|
</td>
|
|
<td>
|
|
<code>{{ variable.value }}</code>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</table>
|
|
</div>
|
|
</section>
|