Variable Basics
A variables guideline based on the latest CSS4
specification and parts of the PostCSS
ecosystem.
Variable Colors
Colors
The color palette is a set of fixed hex values:
:root { --color-primary: #ff3300; --color-secondary: #6600ff; --color-tertiary: #cc0033; }
Abstracts
Abstract color variables contain a light or dark suffix extension:
:root { --color-primary-light: color(var(--color-primary) l(70%)); --color-primary-dark: color(var(--color-primary) l(30%)); }Edit on GitHub
Variable Gradients
Gradients
The gradient palette is based on the present color variables:
:root { --gradient-primary: linear-gradient(var(--color-primary), var(--color-primary-light)); --gradient-secondary: linear-gradient(var(--color-secondary), var(--color-secondary-dark)); --gradient-tertiary: linear-gradient(var(--color-tertiary-light), var(--color-tertiary-dark)); }
Abstracts
Abstract gradient variables contain a light or dark suffix extension:
:root { --gradient-primary-light: linear-gradient(var(--color-primary), var(--color-primary) l(70%)); --gradient-primary-dark: linear-gradient(var(--color-primary), var(--color-primary) l(30%)); }Edit on GitHub
Variable Fonts
Fonts
:root { --font-primary: arial, sans-serif; --font-code: monospace, arial, sans-serif; --font-icon: icon; }Edit on GitHub
Variable Queries
Queries
@custom-media --media-small-max (max-width: 29.999em); @custom-media --media-small-min (min-width: 30em); @custom-media --media-medium-max (max-width: 49.999em); @custom-media --media-medium-min (min-width: 50em); @custom-media --media-large-max (max-width: 79.999em); @custom-media --media-large-min (min-width: 80em); @custom-media --media-retina (min-resolution: 192dpi);Edit on GitHub