# Layout

Places content on a 12 column grid inside a 1440 px frame and takes gaps from one spacing scale.

* Kind: foundation
* Page: https://design.werklist.com/foundations/layout
* Version: 2.1.2

## Rules

* Set the width of a block in columns of the grid. No fixed width on a paragraph inside a wide column.
* A reading page is a heading, running text and a figure or a table. The heading, the figure and the table may span every column. Running text keeps to its line length.
* Take margins, padding and gaps from --space-1 to --space-32. No gaps off the scale, such as 18 or 22 px.
* Space inside a control: 4 to 12 px. Between items of one kind: 8 to 16 px. Between groups in a section: 24 to 48 px.
* Between the sections of a reading page: 96 px, and 64 px below 768 px. No line between them.
* Half steps of 2, 6 and 10 px appear only inside a component, to center an icon optically.
* Running text holds 45 to 75 characters a line and never spans the full width. A statement set large may.
* Change the layout only at the breakpoints: 640 px, 768 px, 1024 px, 1280 px. Choose by the width of the window, not by the device.
* Below 640 px a board shows its rows as cards. From 1024 px the navigation rail appears, and the side padding grows.
* On a touch screen, whatever its width, a target is at least 44 px and editable text at least 16 px.
* Row and control heights are minimums, so a row grows when the reader enlarges text.
* The page never scrolls sideways. A wide table scrolls inside its own box.
* One vertical scroll area per view. No second vertical scroll area inside the page.

## Anatomy

* Frame: 1440 px, centered (--frame)
* Gutter: 24 px (--gutter)
* Side padding: 24 px, 32 px from 1024 px (--pad)
* Columns: 12 from 1024 px, 1 below
* Product board or list: fills the window up to 1600 px, centered
* Product form or document: up to 768 px, centered

## Sizes

* Board row, compact (default): height 36 px
* Board row, comfortable: height 52 px
* Board row, tall: height 76 px
* Toolbar control: height 36 px
* Form control: height 44 px
* Target on a touch screen: height 44 px

## Tokens

* --frame
* --gutter
* --pad
* --space-1
* --space-2
* --space-3
* --space-4
* --space-5
* --space-6
* --space-8
* --space-10
* --space-12
* --space-16
* --space-24
* --space-32
* --breakpoint-sm
* --breakpoint-md
* --breakpoint-lg
* --breakpoint-xl