Building a page

Every screen is a stack of flat sheets. A sheet has one colour, a small corner and a shadow that says how high it floats.

The baseline grid

All spacing is a multiple of eight. Text sits on a four unit baseline, so a 16px paragraph takes a 24px line and a 13px caption takes sixteen. Set the gutter with grid.gutter and the kit works out the rest. Read the breakpoint reference for the full scale.

• Bars span the window; content keeps a fixed inset.
• Cards sit eight units apart and never touch.
• One floating action per screen, in the accent colour.

Installing

Add the package, then import the sheet you need.

chronoskin add layout
chronoskin build --grid 8