Changeable parameters:
:root {
--content-width: 72ch;
}Basic helpers
The classes .inline .block and
.inline-block set their display: property to
that value.
You can use .box-left and .box-right to
float: items in that direction. You probably will want to
use .clearfix on its parent to contain any floating
elements inside of it.
If you just want to align the text within, use .left
.right or .center.
Use .padded to add 1rem of padding inside
of an element, like a pillow!
You can add .scroll-x and .scroll-y if an
element's contents are too big for it.
Flow helpers
You may want to use these for larger parts of the page.
.content will create a column of
--content-width size that is centered on the page if its
parent has .center.
.section is like a paragraph, adding vertical spacing
between major sections of the page.
Flex
There are helpers for CSS flexbox that make it easy to cerate more advanced layouts.
You can use .flex along with one of the following to
change how its contents are laid out.
| Class name | flex-direction: |
|---|---|
.col |
column |
.col-r |
column-reverse |
.row |
row |
.row-r |
row-reverse |
For elements inside flexboxes you can use .flex-grow and
.flex-shrink to change its behavior.