mirror of
https://github.com/jgthms/bulma.git
synced 2025-01-09 15:44:25 +00:00
Add colors page
This commit is contained in:
Jeremy Thomas
parent
63d4fb79b6
commit
8b36d5ad3d
@ -1,2 +1,2 @@
|
||||
<span class="color" style="background: hsl(0, 0%, 7%);"></span>
|
||||
hsl(0, 0%, 7%)
|
||||
<code>hsl(0, 0%, 7%)</code>
|
||||
|
||||
@ -1,2 +1,2 @@
|
||||
<span class="color" style="background: hsl(0, 0%, 14%);"></span>
|
||||
hsl(0, 0%, 14%)
|
||||
<code>hsl(0, 0%, 14%)</code>
|
||||
|
||||
@ -1,2 +1,2 @@
|
||||
<span class="color" style="background: hsl(0, 0%, 4%);"></span>
|
||||
hsl(0, 0%, 4%)
|
||||
<code>hsl(0, 0%, 4%)</code>
|
||||
|
||||
@ -1,2 +1,2 @@
|
||||
<span class="color" style="background: hsl(217, 71%, 53%);"></span>
|
||||
hsl(217, 71%, 53%)
|
||||
<code>hsl(217, 71%, 53%)</code>
|
||||
|
||||
@ -1,2 +1,2 @@
|
||||
<span class="color" style="background: hsl(141, 71%, 48%);"></span>
|
||||
hsl(141, 71%, 48%)
|
||||
<code>hsl(141, 71%, 48%)</code>
|
||||
|
||||
@ -1,2 +1,2 @@
|
||||
<span class="color" style="background: hsl(0, 0%, 29%);"></span>
|
||||
hsl(0, 0%, 29%)
|
||||
<code>hsl(0, 0%, 29%)</code>
|
||||
|
||||
@ -1,2 +1,2 @@
|
||||
<span class="color" style="background: hsl(0, 0%, 21%);"></span>
|
||||
hsl(0, 0%, 21%)
|
||||
<code>hsl(0, 0%, 21%)</code>
|
||||
|
||||
@ -1,2 +1,2 @@
|
||||
<span class="color" style="background: hsl(0, 0%, 71%);"></span>
|
||||
hsl(0, 0%, 71%)
|
||||
<code>hsl(0, 0%, 71%)</code>
|
||||
|
||||
@ -1,2 +1,2 @@
|
||||
<span class="color" style="background: hsl(0, 0%, 86%);"></span>
|
||||
hsl(0, 0%, 86%)
|
||||
<code>hsl(0, 0%, 86%)</code>
|
||||
|
||||
@ -1,2 +1,2 @@
|
||||
<span class="color" style="background: hsl(0, 0%, 48%);"></span>
|
||||
hsl(0, 0%, 48%)
|
||||
<code>hsl(0, 0%, 48%)</code>
|
||||
|
||||
@ -1,2 +1,2 @@
|
||||
<span class="color" style="background: hsl(14, 100%, 53%);"></span>
|
||||
hsl(14, 100%, 53%)
|
||||
<code>hsl(14, 100%, 53%)</code>
|
||||
|
||||
@ -1,2 +1,2 @@
|
||||
<span class="color" style="background: hsl(271, 100%, 71%);"></span>
|
||||
hsl(271, 100%, 71%)
|
||||
<code>hsl(271, 100%, 71%)</code>
|
||||
|
||||
@ -1,2 +1,2 @@
|
||||
<span class="color" style="background: hsl(348, 100%, 61%);"></span>
|
||||
hsl(348, 100%, 61%)
|
||||
<code>hsl(348, 100%, 61%)</code>
|
||||
|
||||
@ -1,2 +1,2 @@
|
||||
<span class="color" style="background: hsl(171, 100%, 41%);"></span>
|
||||
hsl(171, 100%, 41%)
|
||||
<code>hsl(171, 100%, 41%)</code>
|
||||
|
||||
@ -1,2 +1,2 @@
|
||||
<span class="color" style="background: hsl(0, 0%, 98%);"></span>
|
||||
hsl(0, 0%, 98%)
|
||||
<code>hsl(0, 0%, 98%)</code>
|
||||
|
||||
@ -1,2 +1,2 @@
|
||||
<span class="color" style="background: hsl(0, 0%, 96%);"></span>
|
||||
hsl(0, 0%, 96%)
|
||||
<code>hsl(0, 0%, 96%)</code>
|
||||
|
||||
@ -1,2 +1,2 @@
|
||||
<span class="color" style="background: hsl(0, 0%, 100%);"></span>
|
||||
hsl(0, 0%, 100%)
|
||||
<code>hsl(0, 0%, 100%)</code>
|
||||
|
||||
@ -1,2 +1,2 @@
|
||||
<span class="color" style="background: hsl(48, 100%, 67%);"></span>
|
||||
hsl(48, 100%, 67%)
|
||||
<code>hsl(48, 100%, 67%)</code>
|
||||
|
||||
@ -63,7 +63,9 @@
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div>
|
||||
<p class="has-text-info is-size-6-desktop"><strong>{{ site.version }}</strong></p>
|
||||
<p class="is-size-6-desktop">
|
||||
<strong class="has-text-info">{{ site.version }}</strong>
|
||||
</p>
|
||||
{{#unless site.deprecated}}
|
||||
<small>
|
||||
<a class="view-all-versions" href="/versions">View all versions</a>
|
||||
|
||||
@ -16,12 +16,15 @@
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'responsiveness' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/responsiveness/">
|
||||
Responsiveness
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'functions' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/functions/">
|
||||
Functions
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'variables' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/variables/">
|
||||
Variables
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'colors' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/colors/">
|
||||
Colors
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'functions' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/functions/">
|
||||
Functions
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'mixins' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/mixins/">
|
||||
Mixins
|
||||
</a>
|
||||
|
||||
@ -65,7 +65,7 @@ route: documentation
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<p class="has-text-centered has-text-grey-light">
|
||||
<p class="has-text-grey-light">
|
||||
This page is <strong class="has-text-grey">open source</strong>.
|
||||
Noticed a typo?
|
||||
Or something unclear?
|
||||
|
||||
181
docs/documentation/overview/colors.html
Normal file
181
docs/documentation/overview/colors.html
Normal file
@ -0,0 +1,181 @@
|
||||
---
|
||||
title: Colors
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: colors
|
||||
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%)
|
||||
colors:
|
||||
- id: "white"
|
||||
variable: "$white"
|
||||
value: "$white"
|
||||
value_hex: white
|
||||
invert: "$black"
|
||||
invert_hex: black
|
||||
- id: "black"
|
||||
variable: "$black"
|
||||
value: "$black"
|
||||
value_hex: black
|
||||
invert: "$white"
|
||||
invert_hex: white
|
||||
- id: "light"
|
||||
variable: "$light"
|
||||
value: "$white-ter"
|
||||
value_hex: white-ter
|
||||
invert: "$light-invert"
|
||||
invert_hex: black
|
||||
- id: "dark"
|
||||
variable: "$dark"
|
||||
value: "$grey-darker"
|
||||
value_hex: grey-darker
|
||||
invert: "$dark-invert"
|
||||
invert_hex: white
|
||||
- id: "primary"
|
||||
variable: "$primary"
|
||||
value: "$turquoise"
|
||||
value_hex: turquoise
|
||||
invert: "$primary-invert"
|
||||
invert_hex: white
|
||||
- id: "info"
|
||||
variable: "$info"
|
||||
value: "$blue"
|
||||
value_hex: blue
|
||||
invert: "$info-invert"
|
||||
invert_hex: white
|
||||
- id: "success"
|
||||
variable: "$success"
|
||||
value: "$green"
|
||||
value_hex: green
|
||||
invert: "$success-invert"
|
||||
invert_hex: white
|
||||
- id: "warning"
|
||||
variable: "$warning"
|
||||
value: "$yellow"
|
||||
value_hex: yellow
|
||||
invert: "$warning-invert"
|
||||
invert_hex: black
|
||||
- id: "danger"
|
||||
variable: "$danger"
|
||||
value: "$red"
|
||||
value_hex: red
|
||||
invert: "$danger-invert"
|
||||
invert_hex: white
|
||||
shades:
|
||||
- id: "black-bis"
|
||||
value: "$black-bis"
|
||||
- id: "black-ter"
|
||||
value: "$black-ter"
|
||||
- id: "grey-darker"
|
||||
value: "$grey-darker"
|
||||
- id: "grey-dark"
|
||||
value: "$grey-dark"
|
||||
- id: "grey"
|
||||
value: "$grey"
|
||||
- id: "grey-light"
|
||||
value: "$grey-light"
|
||||
- id: "grey-lighter"
|
||||
value: "$grey-lighter"
|
||||
- id: "white-ter"
|
||||
value: "$white-ter"
|
||||
- id: "white-bis"
|
||||
value: "$white-bis"
|
||||
---
|
||||
|
||||
{% include subnav-overview.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Colors</h1>
|
||||
<h2 class="subtitle">The <strong>colors</strong> that <strong>style</strong> all Bulma elements and components</h2>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Most elements and components have color variations thanks to <strong>modifiers</strong> with syntax <code>.is-$color</code>, like <code>is-primary</code> or <code>is-dark</code>.
|
||||
</p>
|
||||
<p>
|
||||
This is thanks to the <code>$colors</code> <strong>Sass map</strong>, through which Bulma cycles to grab all the colors and their inverts.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Color</th>
|
||||
<th>Variable</th>
|
||||
<th>Value</th>
|
||||
<th>Actual value</th>
|
||||
<th>Invert variable</th>
|
||||
<th>Actual invert value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for color in page.colors %}
|
||||
{% assign includePath = color.value_hex | prepend: "color/" | append: ".html" %}
|
||||
<tr>
|
||||
<td>
|
||||
<strong>{{ color.id | capitalize }}</strong>
|
||||
</td>
|
||||
<td>
|
||||
<code>{{ color.variable }}</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>{{ color.value }}</code>
|
||||
</td>
|
||||
<td>
|
||||
{% include {{ includePath }} %}
|
||||
</td>
|
||||
<td>
|
||||
<code>{{ color.invert }}</code>
|
||||
</td>
|
||||
<td>
|
||||
{% if color.invert_hex == "black" %}
|
||||
<span class="color" style="background: rgba(0, 0, 0, 0.7);"></span>
|
||||
<code>rgba(0, 0, 0, 0.7)</code>
|
||||
{% else %}
|
||||
<span class="color" style="background: #fff;"></span>
|
||||
<code>#fff</code>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
@ -35,9 +35,9 @@ 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>1000px</code></li>
|
||||
<li><code>widescreen</code>: from <code>1192px</code></li>
|
||||
<li><span class="tag is-success">New!</span> <code>fullhd</code>: from <code>1384px</code></li>
|
||||
<li><code>desktop</code>: from <code>1008px</code></li>
|
||||
<li><code>widescreen</code>: from <code>1200px</code></li>
|
||||
<li><span class="tag is-success">New!</span> <code>fullhd</code>: from <code>1392px</code></li>
|
||||
</ul>
|
||||
<p>Bulma uses 9 responsive mixins:</p>
|
||||
<ul>
|
||||
@ -51,32 +51,32 @@ doc-subtab: responsiveness
|
||||
</li>
|
||||
<li>
|
||||
<code>=tablet-only</code><br>
|
||||
from <code>769px</code> and until <code>999px</code>
|
||||
from <code>769px</code> and until <code>1007px</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>=touch</code><br>
|
||||
until <code>999px</code>
|
||||
until <code>1007px</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>=desktop</code><br>
|
||||
from <code>1000px</code>
|
||||
from <code>1008px</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>=desktop-only</code><br>
|
||||
from <code>1000px</code> and until <code>1191px</code>
|
||||
from <code>1008px</code> and until <code>1199px</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>=widescreen</code><br>
|
||||
from <code>1192px</code>
|
||||
from <code>1200px</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>=widescreen-only</code><br>
|
||||
from <code>1192px</code> and until <code>1383px</code>
|
||||
from <code>1200px</code> and until <code>1391px</code>
|
||||
</li>
|
||||
<li>
|
||||
<span class="tag is-success">New!</span>
|
||||
<code>=fullhd</code><br>
|
||||
from <code>1384px</code>
|
||||
from <code>1392px</code>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -90,19 +90,19 @@ doc-subtab: responsiveness
|
||||
</th>
|
||||
<th style="width: 20%;">
|
||||
Tablet<br>
|
||||
Between <code>769px</code> and <code>999px</code>
|
||||
Between <code>769px</code> and <code>1007px</code>
|
||||
</th>
|
||||
<th style="width: 20%;">
|
||||
Desktop<br>
|
||||
Between <code>1000px</code> and <code>1191px</code>
|
||||
Between <code>1008px</code> and <code>1199px</code>
|
||||
</th>
|
||||
<th style="width: 20%;">
|
||||
Widescreen<br>
|
||||
Between <code>1192px</code> and <code>1383px</code>
|
||||
Between <code>1200px</code> and <code>1391px</code>
|
||||
</th>
|
||||
<th style="width: 20%;">
|
||||
FullHD<br>
|
||||
<code>1384px</code> and above
|
||||
<code>1392px</code> and above
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
@ -3,6 +3,195 @@ 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: $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 %}
|
||||
@ -15,486 +204,102 @@ doc-subtab: variables
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<p>Bulma has 1 variable file divided into <strong>4</strong> sections:</p>
|
||||
<ul>
|
||||
<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>direct value</strong>, like:
|
||||
<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: 24px</code></li>
|
||||
<li><strong>other values</strong>: <code>$easing: ease-out</code> or <code>$radius-large: 5px</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Primary colors</strong> derived from the initial variables:
|
||||
<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><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>
|
||||
<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 main background color</li>
|
||||
<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>
|
||||
<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>
|
||||
<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>$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ol>
|
||||
<p>
|
||||
To <strong>override</strong> any of these variables, just set them <em>before</em> importing Bulma.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
{% include heading.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">
|
||||
<tr><th colspan="2">1. Initial variables</th></tr>
|
||||
|
||||
<tr><th colspan="2">Colors</th></tr>
|
||||
<tr>
|
||||
<td><code>$black</code></td>
|
||||
<td>
|
||||
<span class="color" style="background: hsl(0, 0%, 4%);"></span>
|
||||
hsl(0, 0%, 4%)
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$black-bis</code></td>
|
||||
<td>
|
||||
<span class="color" style="background: hsl(0, 0%, 7%);"></span>
|
||||
hsl(0, 0%, 7%)
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$black-ter</code></td>
|
||||
<td>
|
||||
<span class="color" style="background: hsl(0, 0%, 14%);"></span>
|
||||
hsl(0, 0%, 14%)
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$grey-darker</code></td>
|
||||
<td>
|
||||
<span class="color" style="background: hsl(0, 0%, 21%);"></span>
|
||||
hsl(0, 0%, 21%)
|
||||
{% for color in page.initial_colors %}
|
||||
<tr>
|
||||
<td>
|
||||
<code style="white-space: nowrap;">{{ color.name }}</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="color" style="background: {{ color.value }};"></span>
|
||||
<code>{{ color.value }}</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$grey-dark</code></td>
|
||||
<td>
|
||||
<span class="color" style="background: hsl(0, 0%, 29%);"></span>
|
||||
hsl(0, 0%, 29%)
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$grey</code></td>
|
||||
<td>
|
||||
<span class="color" style="background: hsl(0, 0%, 48%);"></span>
|
||||
hsl(0, 0%, 48%)
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$grey-light</code></td>
|
||||
<td>
|
||||
<span class="color" style="background: hsl(0, 0%, 71%);"></span>
|
||||
hsl(0, 0%, 71%)
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$grey-lighter</code></td>
|
||||
<td>
|
||||
<span class="color" style="background: hsl(0, 0%, 86%);"></span>
|
||||
hsl(0, 0%, 86%)
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$white-ter</code></td>
|
||||
<td>
|
||||
<span class="color" style="background: hsl(0, 0%, 96%);"></span>
|
||||
hsl(0, 0%, 96%)
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$white-bis</code></td>
|
||||
<td>
|
||||
<span class="color" style="background: hsl(0, 0%, 98%);"></span>
|
||||
hsl(0, 0%, 98%)
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$white</code></td>
|
||||
<td>
|
||||
<span class="color" style="background: hsl(0, 0%, 100%);"></span>
|
||||
hsl(0, 0%, 100%)
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$orange</code></td>
|
||||
<td>
|
||||
<span class="color" style="background: hsl(14, 100%, 53%);"></span>
|
||||
hsl(14, 100%, 53%)
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$yellow</code></td>
|
||||
<td>
|
||||
<span class="color" style="background: hsl(48, 100%, 67%);"></span>
|
||||
hsl(48, 100%, 67%)
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$green</code></td>
|
||||
<td>
|
||||
<span class="color" style="background: hsl(141, 71%, 48%);"></span>
|
||||
hsl(141, 71%, 48%)
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$turquoise</code></td>
|
||||
<td>
|
||||
<span class="color" style="background: hsl(171, 100%, 41%);"></span>
|
||||
hsl(171, 100%, 41%)
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$blue</code></td>
|
||||
<td>
|
||||
<span class="color" style="background: hsl(217, 71%, 53%);"></span>
|
||||
hsl(217, 71%, 53%)
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$purple</code></td>
|
||||
<td>
|
||||
<span class="color" style="background: hsl(271, 100%, 71%);"></span>
|
||||
hsl(271, 100%, 71%)
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$red</code></td>
|
||||
<td>
|
||||
<span class="color" style="background: hsl(348, 100%, 61%);"></span>
|
||||
hsl(348, 100%, 61%)
|
||||
</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>
|
||||
|
||||
<tr><th colspan="2">Typography</th></tr>
|
||||
<tr>
|
||||
<td><code>$family-sans-serif</code></td>
|
||||
<td>-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",<br>"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",<br>"Helvetica Neue", "Helvetica", "Arial", sans-serif</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$family-monospace</code></td>
|
||||
<td>monospace</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$size-1</code></td>
|
||||
<td>3rem</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$size-2</code></td>
|
||||
<td>2.5rem</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$size-3</code></td>
|
||||
<td>2rem</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$size-4</code></td>
|
||||
<td>1.5rem</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$size-5</code></td>
|
||||
<td>1.25rem</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$size-6</code></td>
|
||||
<td>1rem</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$size-7</code></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>
|
||||
{% include heading.html name="Derived variables" %}
|
||||
|
||||
<tr><th colspan="2">Body</th></tr>
|
||||
<tr>
|
||||
<td><code>$body-background</code></td>
|
||||
<td><code>$white</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$body-size</code></td>
|
||||
<td><code>16px</code></td>
|
||||
</tr>
|
||||
<div class="content">
|
||||
<p>
|
||||
These are variables with a value that <strong>references</strong> another variable.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<tr><th colspan="5">Breakpoints</th></tr>
|
||||
<tr>
|
||||
<td><code>$gap</code></td>
|
||||
<td>24px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$tablet</code></td>
|
||||
<td>769px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$desktop</code></td>
|
||||
<td>1008px (960px + 2 * <code>$gap</code>)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$widescreen</code></td>
|
||||
<td>1200px (1152px+ 2 * <code>$gap</code>)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$fullhd</code></td>
|
||||
<td>1392px (1344px+ 2 * <code>$gap</code>)</td>
|
||||
</tr>
|
||||
|
||||
<tr><th colspan="2">Miscellaneous</th></tr>
|
||||
<tr>
|
||||
<td><code>$easing</code></td>
|
||||
<td>ease-out</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$radius</code></td>
|
||||
<td>3px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$speed</code></td>
|
||||
<td>86ms</td>
|
||||
</tr>
|
||||
|
||||
<tr><th colspan="2">2. Primary colors</th></tr>
|
||||
<tr>
|
||||
<td><code>$primary</code></td>
|
||||
<td><code>$turquoise</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$info</code></td>
|
||||
<td><code>$blue</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$success</code></td>
|
||||
<td><code>$green</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$warning</code></td>
|
||||
<td><code>$yellow</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$danger</code></td>
|
||||
<td><code>$red</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$light</code></td>
|
||||
<td><code>$white-ter</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$dark</code></td>
|
||||
<td><code>$grey-darker</code></td>
|
||||
</tr>
|
||||
|
||||
<tr><th colspan="2">3. Generated variables</th></tr>
|
||||
|
||||
<tr><th colspan="2">Invert colors</th></tr>
|
||||
<tr>
|
||||
<td><code>$primary-invert</code></td>
|
||||
<td><code>findColorInvert($primary)</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$info-invert</code></td>
|
||||
<td><code>findColorInvert($info)</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$success-invert</code></td>
|
||||
<td><code>findColorInvert($success)</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$warning-invert</code></td>
|
||||
<td><code>findColorInvert($warning)</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$danger-invert</code></td>
|
||||
<td><code>findColorInvert($danger)</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$light-invert</code></td>
|
||||
<td><code>$dark</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$dark-invert</code></td>
|
||||
<td><code>$light</code></td>
|
||||
</tr>
|
||||
|
||||
<tr><th colspan="2">General colors</th></tr>
|
||||
<tr>
|
||||
<td><code>$body-background</code></td>
|
||||
<td><code>$grey-lighter</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$background</code></td>
|
||||
<td><code>$grey-lighter</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$border</code></td>
|
||||
<td><code>$grey-light</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$border-hover</code></td>
|
||||
<td><code>$grey</code></td>
|
||||
</tr>
|
||||
|
||||
<tr><th colspan="2">Text colors</th></tr>
|
||||
<tr>
|
||||
<td><code>$text</code></td>
|
||||
<td><code>$grey-dark</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$text-invert</code></td>
|
||||
<td><code>findColorInvert($text)</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$text-light</code></td>
|
||||
<td><code>$grey</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$text-strong</code></td>
|
||||
<td><code>$grey-darker</code></td>
|
||||
</tr>
|
||||
|
||||
<tr><th colspan="2">Code colors</th></tr>
|
||||
<tr>
|
||||
<td><code>$code</code></td>
|
||||
<td><code>$red</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$code-background</code></td>
|
||||
<td><code>$background</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$pre</code></td>
|
||||
<td><code>$text</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$pre-background</code></td>
|
||||
<td><code>$background</code></td>
|
||||
</tr>
|
||||
|
||||
<tr><th colspan="2">Link colors</th></tr>
|
||||
<tr>
|
||||
<td><code>$link</code></td>
|
||||
<td><code>$primary</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$link-invert</code></td>
|
||||
<td><code>$primary-invert</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$link-visited</code></td>
|
||||
<td><code>$purple</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$link-hover</code></td>
|
||||
<td><code>$grey-darker</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$link-hover-border</code></td>
|
||||
<td><code>$grey-darker</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$link-focus</code></td>
|
||||
<td><code>$grey-darker</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$link-focus-border</code></td>
|
||||
<td><code>$primary</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$link-active</code></td>
|
||||
<td><code>$grey-darker</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$link-active-border</code></td>
|
||||
<td><code>$grey-dark</code></td>
|
||||
</tr>
|
||||
|
||||
<tr><th colspan="2">Typography</th></tr>
|
||||
<tr>
|
||||
<td><code>$family-primary</code></td>
|
||||
<td><code>$family-sans-serif</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$family-code</code></td>
|
||||
<td><code>$family-monospace</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$size-small</code></td>
|
||||
<td><code>$size-7</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$size-normal</code></td>
|
||||
<td><code>$size-6</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$size-medium</code></td>
|
||||
<td><code>$size-5</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$size-large</code></td>
|
||||
<td><code>$size-4</code></td>
|
||||
</tr>
|
||||
|
||||
<tr><th colspan="2">4. Lists and maps</th></tr>
|
||||
<tr>
|
||||
<td><code>$colors</code>
|
||||
<td>
|
||||
<pre>
|
||||
(
|
||||
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)
|
||||
)
|
||||
</pre>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><code>$sizes</code></td>
|
||||
<td><code>$size-1 $size-2 $size-3 $size-4 $size-5 $size-6</code></td>
|
||||
</tr>
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user