diff --git a/docs/_includes/color/black-bis.html b/docs/_includes/color/black-bis.html index c0031bdf..cd5ce819 100644 --- a/docs/_includes/color/black-bis.html +++ b/docs/_includes/color/black-bis.html @@ -1,2 +1,2 @@ -hsl(0, 0%, 7%) +hsl(0, 0%, 7%) diff --git a/docs/_includes/color/black-ter.html b/docs/_includes/color/black-ter.html index 9a393cb5..b1771437 100644 --- a/docs/_includes/color/black-ter.html +++ b/docs/_includes/color/black-ter.html @@ -1,2 +1,2 @@ -hsl(0, 0%, 14%) +hsl(0, 0%, 14%) diff --git a/docs/_includes/color/black.html b/docs/_includes/color/black.html index 8061f018..09588cb0 100644 --- a/docs/_includes/color/black.html +++ b/docs/_includes/color/black.html @@ -1,2 +1,2 @@ -hsl(0, 0%, 4%) +hsl(0, 0%, 4%) diff --git a/docs/_includes/color/blue.html b/docs/_includes/color/blue.html index c9339579..cce7f427 100644 --- a/docs/_includes/color/blue.html +++ b/docs/_includes/color/blue.html @@ -1,2 +1,2 @@ -hsl(217, 71%, 53%) +hsl(217, 71%, 53%) diff --git a/docs/_includes/color/green.html b/docs/_includes/color/green.html index 52c079ba..bce2f227 100644 --- a/docs/_includes/color/green.html +++ b/docs/_includes/color/green.html @@ -1,2 +1,2 @@ -hsl(141, 71%, 48%) +hsl(141, 71%, 48%) diff --git a/docs/_includes/color/grey-dark.html b/docs/_includes/color/grey-dark.html index 44b93023..08601190 100644 --- a/docs/_includes/color/grey-dark.html +++ b/docs/_includes/color/grey-dark.html @@ -1,2 +1,2 @@ -hsl(0, 0%, 29%) +hsl(0, 0%, 29%) diff --git a/docs/_includes/color/grey-darker.html b/docs/_includes/color/grey-darker.html index 51fa5f76..9dc0d4f7 100644 --- a/docs/_includes/color/grey-darker.html +++ b/docs/_includes/color/grey-darker.html @@ -1,2 +1,2 @@ - hsl(0, 0%, 21%) +hsl(0, 0%, 21%) diff --git a/docs/_includes/color/grey-light.html b/docs/_includes/color/grey-light.html index 68730ea6..d1782f94 100644 --- a/docs/_includes/color/grey-light.html +++ b/docs/_includes/color/grey-light.html @@ -1,2 +1,2 @@ -hsl(0, 0%, 71%) +hsl(0, 0%, 71%) diff --git a/docs/_includes/color/grey-lighter.html b/docs/_includes/color/grey-lighter.html index 96e1d3d3..a95468c4 100644 --- a/docs/_includes/color/grey-lighter.html +++ b/docs/_includes/color/grey-lighter.html @@ -1,2 +1,2 @@ -hsl(0, 0%, 86%) +hsl(0, 0%, 86%) diff --git a/docs/_includes/color/grey.html b/docs/_includes/color/grey.html index e4b4bf56..6ef9ec6d 100644 --- a/docs/_includes/color/grey.html +++ b/docs/_includes/color/grey.html @@ -1,2 +1,2 @@ -hsl(0, 0%, 48%) +hsl(0, 0%, 48%) diff --git a/docs/_includes/color/orange.html b/docs/_includes/color/orange.html index 038d5a1b..afa19bce 100644 --- a/docs/_includes/color/orange.html +++ b/docs/_includes/color/orange.html @@ -1,2 +1,2 @@ -hsl(14, 100%, 53%) +hsl(14, 100%, 53%) diff --git a/docs/_includes/color/purple.html b/docs/_includes/color/purple.html index 4da5f0c0..b54a9f0b 100644 --- a/docs/_includes/color/purple.html +++ b/docs/_includes/color/purple.html @@ -1,2 +1,2 @@ -hsl(271, 100%, 71%) +hsl(271, 100%, 71%) diff --git a/docs/_includes/color/red.html b/docs/_includes/color/red.html index 371589cd..24d136b3 100644 --- a/docs/_includes/color/red.html +++ b/docs/_includes/color/red.html @@ -1,2 +1,2 @@ -hsl(348, 100%, 61%) +hsl(348, 100%, 61%) diff --git a/docs/_includes/color/turquoise.html b/docs/_includes/color/turquoise.html index dcce471e..9e0a87d1 100644 --- a/docs/_includes/color/turquoise.html +++ b/docs/_includes/color/turquoise.html @@ -1,2 +1,2 @@ -hsl(171, 100%, 41%) +hsl(171, 100%, 41%) diff --git a/docs/_includes/color/white-bis.html b/docs/_includes/color/white-bis.html index e07e5bb3..b78f0795 100644 --- a/docs/_includes/color/white-bis.html +++ b/docs/_includes/color/white-bis.html @@ -1,2 +1,2 @@ -hsl(0, 0%, 98%) +hsl(0, 0%, 98%) diff --git a/docs/_includes/color/white-ter.html b/docs/_includes/color/white-ter.html index 9f288074..a355e404 100644 --- a/docs/_includes/color/white-ter.html +++ b/docs/_includes/color/white-ter.html @@ -1,2 +1,2 @@ -hsl(0, 0%, 96%) +hsl(0, 0%, 96%) diff --git a/docs/_includes/color/white.html b/docs/_includes/color/white.html index eb12ab8c..0ede4d1b 100644 --- a/docs/_includes/color/white.html +++ b/docs/_includes/color/white.html @@ -1,2 +1,2 @@ -hsl(0, 0%, 100%) +hsl(0, 0%, 100%) diff --git a/docs/_includes/color/yellow.html b/docs/_includes/color/yellow.html index 916ff569..51dccfec 100644 --- a/docs/_includes/color/yellow.html +++ b/docs/_includes/color/yellow.html @@ -1,2 +1,2 @@ -hsl(48, 100%, 67%) +hsl(48, 100%, 67%) diff --git a/docs/_includes/navbar.html b/docs/_includes/navbar.html index 49b60ba4..7d3eb278 100644 --- a/docs/_includes/navbar.html +++ b/docs/_includes/navbar.html @@ -63,7 +63,9 @@
-

{{ site.version }}

+

+ {{ site.version }} +

{{#unless site.deprecated}} View all versions diff --git a/docs/_includes/subnav-overview.html b/docs/_includes/subnav-overview.html index 683152d7..790d336c 100644 --- a/docs/_includes/subnav-overview.html +++ b/docs/_includes/subnav-overview.html @@ -16,12 +16,15 @@ Responsiveness - - Functions - Variables + + Colors + + + Functions + Mixins diff --git a/docs/_layouts/documentation.html b/docs/_layouts/documentation.html index d5b42222..05e3693c 100644 --- a/docs/_layouts/documentation.html +++ b/docs/_layouts/documentation.html @@ -65,7 +65,7 @@ route: documentation
-

+

This page is open source. Noticed a typo? Or something unclear? diff --git a/docs/documentation/overview/colors.html b/docs/documentation/overview/colors.html new file mode 100644 index 00000000..35071580 --- /dev/null +++ b/docs/documentation/overview/colors.html @@ -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 %} + +

+
+

Colors

+

The colors that style all Bulma elements and components

+ +
+ +
+

+ Most elements and components have color variations thanks to modifiers with syntax .is-$color, like is-primary or is-dark. +

+

+ This is thanks to the $colors Sass map, through which Bulma cycles to grab all the colors and their inverts. +

+
+ + + + + + + + + + + + + + {% for color in page.colors %} + {% assign includePath = color.value_hex | prepend: "color/" | append: ".html" %} + + + + + + + + + {% endfor %} + +
ColorVariableValueActual valueInvert variableActual invert value
+ {{ color.id | capitalize }} + + {{ color.variable }} + + {{ color.value }} + + {% include {{ includePath }} %} + + {{ color.invert }} + + {% if color.invert_hex == "black" %} + + rgba(0, 0, 0, 0.7) + {% else %} + + #fff + {% endif %} +
+
+
\ No newline at end of file diff --git a/docs/documentation/overview/responsiveness.html b/docs/documentation/overview/responsiveness.html index 1f66d826..783a6e9a 100644 --- a/docs/documentation/overview/responsiveness.html +++ b/docs/documentation/overview/responsiveness.html @@ -35,9 +35,9 @@ doc-subtab: responsiveness
  • mobile: up to 768px
  • tablet: from 769px
    • -
  • desktop: from 1000px
    • -
  • widescreen: from 1192px
    • -
  • New! fullhd: from 1384px
    • +
  • desktop: from 1008px
    • +
  • widescreen: from 1200px
    • +
  • New! fullhd: from 1392px

Bulma uses 9 responsive mixins:

    @@ -51,32 +51,32 @@ doc-subtab: responsiveness
  • =tablet-only
    - from 769px and until 999px + from 769px and until 1007px
  • =touch
    - until 999px + until 1007px
  • =desktop
    - from 1000px + from 1008px
  • =desktop-only
    - from 1000px and until 1191px + from 1008px and until 1199px
  • =widescreen
    - from 1192px + from 1200px
  • =widescreen-only
    - from 1192px and until 1383px + from 1200px and until 1391px
  • New! =fullhd
    - from 1384px + from 1392px
@@ -90,19 +90,19 @@ doc-subtab: responsiveness Tablet
- Between 769px and 999px + Between 769px and 1007px Desktop
- Between 1000px and 1191px + Between 1008px and 1199px Widescreen
- Between 1192px and 1383px + Between 1200px and 1391px FullHD
- 1384px and above + 1392px and above diff --git a/docs/documentation/overview/variables.html b/docs/documentation/overview/variables.html index 1e9e6322..a2df4d6a 100644 --- a/docs/documentation/overview/variables.html +++ b/docs/documentation/overview/variables.html @@ -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
-

Bulma has 1 variable file divided into 4 sections:

-
    +

    Bulma has two variable files divided into 4 sections:

    +
    1. - Initial variables: where you define variables by direct value, like: + Initial variables: where you define variables by literal value, like:
      • colors: $blue: hsl(217, 71%, 53%)
      • font sizes: $size-1: 3rem
        • +
      • dimensions: $gap: 24px
      • other values: $easing: ease-out or $radius-large: 5px
    2. - Primary colors derived from the initial variables: + Derived variables where variables are calculated from the values set in the previous file. For example, you can have:
        -
      • $primary: $turquoise
        • -
      • $info: $blue
        • -
      • $success: $green
        • -
      • $warning: $yellow
        • -
      • $danger: $red
        • -
      • $dark: $grey-darker
        • -
      • $text: $grey-dark
        • -
      -
      3. -
    3. - Generated variables where variables are calculated from the values set in the previous file. For example, you can have: -
        -
      • $body-background: $white: the main background color
        • +
      • + Primary colors derived from the initial variables: +
          +
        • $primary: $turquoise
          • +
        • $info: $blue
          • +
        • $success: $green
          • +
        • $warning: $yellow
          • +
        • $danger: $red
          • +
        • $dark: $grey-darker
          • +
        • $text: $grey-dark
          • +
        +
        • +
      • $background: $white-ter: a general background color
      • $link: $primary: the links use the primary color
      • $family-primary: $family-sans-serif: the primary font family is the sans-serif one
        • +
      • + Lists and maps which are collections so already defined variables: +
          +
        • $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))
          • +
        • $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)
          • +
        • $sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6
          • +
        +
      4. -
    4. - Lists and maps which are collections so already defined variables: -
        -
      • $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))
        • -
      • $sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6
        • -
      -
      5. -
+

To override any of these variables, just set them before importing Bulma.

-
+ {% include heading.html name="Initial variables" %} + +
+

+ These are variables with a literal value. +

+
- - - - - - - - - - - - - - - - - - + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + {% endfor %} + {% for variable in page.initial_variables %} + + + + + {% endfor %} +
1. Initial variables
Colors
$black - - hsl(0, 0%, 4%) -
$black-bis - - hsl(0, 0%, 7%) -
$black-ter - - hsl(0, 0%, 14%) -
$grey-darker - - hsl(0, 0%, 21%) + {% for color in page.initial_colors %} +
+ {{ color.name }} + + + {{ color.value }}
$grey-dark - - hsl(0, 0%, 29%) -
$grey - - hsl(0, 0%, 48%) -
$grey-light - - hsl(0, 0%, 71%) -
$grey-lighter - - hsl(0, 0%, 86%) -
$white-ter - - hsl(0, 0%, 96%) -
$white-bis - - hsl(0, 0%, 98%) -
$white - - hsl(0, 0%, 100%) -
$orange - - hsl(14, 100%, 53%) -
$yellow - - hsl(48, 100%, 67%) -
$green - - hsl(141, 71%, 48%) -
$turquoise - - hsl(171, 100%, 41%) -
$blue - - hsl(217, 71%, 53%) -
$purple - - hsl(271, 100%, 71%) -
$red - - hsl(348, 100%, 61%) -
+ {{ variable.name }} + + {{ variable.value }} +
- Typography - - $family-sans-serif - -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
"Helvetica Neue", "Helvetica", "Arial", sans-serif - - - $family-monospace - monospace - - - $size-1 - 3rem - - - $size-2 - 2.5rem - - - $size-3 - 2rem - - - $size-4 - 1.5rem - - - $size-5 - 1.25rem - - - $size-6 - 1rem - - - $size-7 - 0.75rem - - - $weight-light - 300 - - - $weight-normal - 400 - - - $weight-semibold - 500 - - - $weight-bold - 700 - + {% include heading.html name="Derived variables" %} - Body - - $body-background - $white - - - $body-size - 16px - +
+

+ These are variables with a value that references another variable. +

+
- Breakpoints - - $gap - 24px - - - $tablet - 769px - - - $desktop - 1008px (960px + 2 * $gap) - - - $widescreen - 1200px (1152px+ 2 * $gap) - - - $fullhd - 1392px (1344px+ 2 * $gap) - - - Miscellaneous - - $easing - ease-out - - - $radius - 3px - - - $speed - 86ms - - - 2. Primary colors - - $primary - $turquoise - - - $info - $blue - - - $success - $green - - - $warning - $yellow - - - $danger - $red - - - $light - $white-ter - - - $dark - $grey-darker - - - 3. Generated variables - - Invert colors - - $primary-invert - findColorInvert($primary) - - - $info-invert - findColorInvert($info) - - - $success-invert - findColorInvert($success) - - - $warning-invert - findColorInvert($warning) - - - $danger-invert - findColorInvert($danger) - - - $light-invert - $dark - - - $dark-invert - $light - - - General colors - - $body-background - $grey-lighter - - - $background - $grey-lighter - - - $border - $grey-light - - - $border-hover - $grey - - - Text colors - - $text - $grey-dark - - - $text-invert - findColorInvert($text) - - - $text-light - $grey - - - $text-strong - $grey-darker - - - Code colors - - $code - $red - - - $code-background - $background - - - $pre - $text - - - $pre-background - $background - - - Link colors - - $link - $primary - - - $link-invert - $primary-invert - - - $link-visited - $purple - - - $link-hover - $grey-darker - - - $link-hover-border - $grey-darker - - - $link-focus - $grey-darker - - - $link-focus-border - $primary - - - $link-active - $grey-darker - - - $link-active-border - $grey-dark - - - Typography - - $family-primary - $family-sans-serif - - - $family-code - $family-monospace - - - $size-small - $size-7 - - - $size-normal - $size-6 - - - $size-medium - $size-5 - - - $size-large - $size-4 - - - 4. Lists and maps - - $colors - - 
-(
-  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)
-)
-
- - - - - $sizes - $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 - + + {% for variable in page.derived_variables %} + + + + + {% endfor %}
+ {{ variable.name }} + + {{ variable.value }} +