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.
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: