Layout

A grid of four, seven spaces, a few fixed heights and widths. A window is a rail, a page and, when there is a selection, a panel.

The grid of four

Every size, space and margin is a multiple of 4. There are seven steps to choose from, and an app takes its gaps from them.

Seven squares at one and a half times their size: xs 4, s 8, m 12, l 16, xl 24, xxl 32 and page 48. — The seven spaces.

Name	Pixels	Typical use
`xs`	4	Between a back and a forward button
`s`	8	Between the parts of a title; in a row of actions
`m`	12	List inset from the window; under a heading
`l`	16	Inside a row, from its edge to its symbol; the header's left side
`xl`	24	Panel padding; between tools in a header
`xxl`	32	Between a page header and a page state
`page`	48	The stage around a subject; a cover grid's side

Heights

Name	Pixels	Of
`header`	72	The page header; its hairline sits under it
`row`	44	A list row
`richRow`	72	A row with a picture of 56
`railRow`	32	A row in the rail
`action`	40	An action as a word, and a forward Slab
`field`	36	A field and a quiet Slab
`band`	84	The player bar
`menuRow`	34	A line in a menu

Widths

Name	Pixels	Of
`rail`	300	The rail
`railFolded`	56	The rail folded, with its symbols only
`panel`	400	The docked panel
`list`	720	The most a list of names with one number may take
`scrollBar`	4	The scroll bar's thickness

Symbols have three sizes (icon): #17 in the rail (rail), #20 in a row or a tool (row) and #22 for back and forward (nav).

Rail, page and panel

A window is a rail on the left, a page, and a panel on the right when something is selected. The page header runs across the page with one hairline under it; the panel hangs from that line into the window's right edge. The list narrows once, when the panel opens, and not at each click.

A window of 1000 pixels drawn from the real parts: a rail 300 wide, a header 72 high, a list and a docked panel 400 wide, measured along the top. — Rail, page and panel.

Half width

At half width the rail folds to its symbols, a stage subject drops from 56 to 40, and the panel covers the list from the right, the page clipping the list at the panel's edge. The queue stays and the history goes. The fold is the toggle's alone: the pointer never opens it.

A window of 560 pixels from the real parts: a rail folded to 56, a header, a list of 104 and a docked panel of 400 that covers the rest of the list, the page clipping the list at its edge. — At half width.

Margins

A page header starts 16 from the page's edge and keeps its tools 24 from the right. Inside a row it is 16 to the symbol, which is 20 wide, and the name starts at 52. The examples pad a panel by 24. These come from the steps above and are not separate tokens.

Experimental, in Tacit.Kit 0.1.

Text and figures: CC BY 4.0. Tacit.Kit: LGPL-3.0 code, OFL fonts. The Tacit name.