CSS Custom Properties (CSS Variables) Sample
Available in Chrome 49+ |
View on GitHub |
CSS custom properties allow you to store and retrieve values from properties
you define yourself.
They follow the same rules as other CSS properties, so you're able to define
and use them at multiple levels, following standard CSS cascading and
Combining custom variables with
calc(), in particular, allows
for some very interesting possibilities.
Click the buttons on the cards to set the default color scheme for the
The colors on the cards are not affected because they're individually
defined at the card level, and thus prioritised according to standard CSS
Use the controls above to adjust some properties that affect the entire
Every size on the page is calculated as a multiple of the spacing unit,
so setting the property to a different value resizes all elements.
Changing the number of columns is done by recalculating the relative size
of cells on the grid.
Margins adjusts both the spacing around the grid and the gutters inside of