CSS Variables

CSS Variables for Colors

You can change the color of an element by setting its color property to var(--color-primary), then scoping that variable inside a parent element. For example, paragraphs are normally #2980b9, but inside of this section, the --color-primary variable is scoped to #27ae60.

CSS Variables for Grids

All the grid items in the following sections have the same CSS. Their width is controlled by the --grid-width variable, scoped to their .four-cols and .three-cols classes.

Four Columns

Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item

Three Columns

Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item

CSS Variables for Column Proportions

You can change the proportions of columns & sidebars by scoping --content-width and --sidebar-width to their containers.

--content-width and --sidebar-width have been changed in the .wide-sidebar element to change proportions here.

CSS Variables for Font Sizes

The fonts in this section are larger, because the --font-size variable is larger in this section.

CSS Variables with JS

Change the color variables by clicking the button below: