A CSS grid with heart
A dead simple, desktop first boilerplate. No build step, no toolchain. Copy the folder and start building.
See what is inside Component showcaseA dead simple, desktop first boilerplate. No build step, no toolchain. Copy the folder and start building.
See what is inside Component showcase12
columns in a fluid grid
0
build steps or dependencies to install
2
themes, light and dark, in one stylesheet
Fifths share a row with the same gutters as the twelve column grid.
Twelve columns, offsets, nesting and a balanced gap between rows.
A golden ratio scale for headings and line heights.
One base button with a palette of colours and hover states.
Inputs, selects and text areas that match the buttons.
Follows the visitor's system, or use the toggle above.
Even widths centre with offset-by, odd widths with offset-for.
A row inside a column starts a fresh twelve column grid, so layouts can be as deep as the content needs.
Tin Man: "I'll get a heart."
The Wizard of Oz
Notification boxes work in a sidebar too.