Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-20 12:24:28 -07:00
Code Issues Packages Projects Releases Wiki Activity

Docs/variables data (#1314)

Browse Source 
* Replace variables.json with colors.json and update related files accordingly

* Add variables data files

* Update variables include template and all related files to use new variables data

* Fix mobile breakpoint id typo in responsivness docs page

* Fix Liquid syntax error in made-with-bulma docs page

* Update bulma sass files count in modular docs page

* Use breakpoints data in responsiveness helpers docs page

* Use breakpoints and variables data in typography helpers docs page

* Add missing page titles in docs pages front matter
This commit is contained in:
bstashio
2017-10-17 12:28:59 +03:00
committed by Jeremy Thomas
parent e4fd1b7579
commit 1523ce8527
65 changed files with 2736 additions and 1158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,234 +3,6 @@ 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 %}
@@ -241,6 +13,11 @@ generic_variables:
<h2 class="subtitle">Easily <strong>customize</strong> Bulma to match your design</h2>
<hr>
{% assign initial_variables = site.data.variables.utilities.initial-variables %}
{% assign initial_vars = initial_variables.vars %}
{% assign derived_variables = site.data.variables.utilities.derived-variables %}
{% assign derived_vars = derived_variables.vars %}
<div class="content">
<p>Bulma has <strong>two</strong> variable files divided into <strong>4</strong> sections:</p>
@@ -248,10 +25,10 @@ generic_variables:
<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>
<li><strong>colors</strong>: <code>{{ initial_vars.blue.name }}: {{ initial_vars.blue.value }}</code></li>
<li><strong>font sizes</strong>: <code>{{ initial_vars.size-1.name }}: {{ initial_vars.size-1.value }}</code></li>
<li><strong>dimensions</strong>: <code>{{ initial_vars.gap.name }}: {{ initial_vars.gap.value }}</code></li>
<li><strong>other values</strong>: <code>{{ initial_vars.easing.name }}: {{ initial_vars.easing.value }}</code> or <code>{{ initial_vars.radius-large.name }}: {{ initial_vars.radius-large.value }}</code></li>
</ul>
</li>
<li>
@@ -260,25 +37,25 @@ generic_variables:
<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>
<li><code>{{ derived_vars.primary.name }}: {{ derived_vars.primary.value }}</code></li>
<li><code>{{ derived_vars.link.name }}: {{ derived_vars.link.value }}</code></li>
<li><code>{{ derived_vars.info.name }}: {{ derived_vars.info.value }}</code></li>
<li><code>{{ derived_vars.success.name }}: {{ derived_vars.success.value }}</code></li>
<li><code>{{ derived_vars.warning.name }}: {{ derived_vars.warning.value }}</code></li>
<li><code>{{ derived_vars.danger.name }}: {{ derived_vars.danger.value }}</code></li>
<li><code>{{ derived_vars.dark.name }}: {{ derived_vars.dark.value }}</code></li>
<li><code>{{ derived_vars.text.name }}: {{ derived_vars.text.value }}</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><code>{{ derived_vars.background.name }}: {{ derived_vars.background.value }}</code>: a general background color</li>
<li><code>{{ derived_vars.link.name }}: {{ derived_vars.link.value }}</code>: the links use the primary color</li>
<li><code>{{ derived_vars.family-primary.name }}: {{ derived_vars.family-primary.value }}</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>
<li><code>{{ derived_vars.colors.name }}: {{ derived_vars.colors.value }}</code></li>
<li><code>{{ derived_vars.shades.name }}: {{ derived_vars.shades.value }}</code></li>
<li><code>{{ derived_vars.sizes.name }}: {{ derived_vars.sizes.value }}</code></li>
</ul>
</li>
</ul>
@@ -293,74 +70,52 @@ generic_variables:
<div class="content">
<p>
These are variables with a <strong>literal</strong> value.
These are <a href="{{ initial_variables.file_url }}" target="_blank">variables</a> 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 %}
<tbody>
{% for variable_hash in initial_vars %}
{% assign variable = variable_hash[1] %}
{% assign starts_with = variable.value | slice: 0, 3 %}
<tr>
<td>
<code style="white-space: nowrap;">{{ variable.name }}</code>
</td>
<td>
{% if starts_with == 'hsl' %}
<span class="bd-color" style="background: {{ variable.value }};"></span>
{% endif %}
<code>{{ variable.value }}</code>
</td>
</tr>
{% endfor %}
<tbody>
</table>
{% capture custom_message %}
These are <a href="{{ derived_variables.file_url }}" target="_blank">variables</a> with a value that <strong>references</strong> another variable.
{% endcapture %}
{%
include variables.html
anchor_name = 'Derived variables'
data = derived_variables
custom_message = custom_message
table_class = 'is-bordered is-striped'
%}
{% capture custom_message %}
You can use the following <a href="{{ site.data.variables.base.generic.file_url }}" target="_blank">generic variables</a> for general <strong>customization</strong>. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
{% endcapture %}
{%
include variables.html
anchor_name = 'Generic variables'
tab = 'base'
subtab = 'generic'
custom_message = custom_message
table_class = 'is-bordered is-striped'
%}
</div>
</section>