Space and layout

A 4px base, one reading column, heavy rules between regions, and square corners everywhere except on balls.

In this chapter 7 pages

Spacing scale

Use the scale for every margin, padding, and gap. Tight inside a group, generous between groups.

--ply-space-00
--ply-space-10.25rem
--ply-space-20.5rem
--ply-space-30.75rem
--ply-space-41rem
--ply-space-51.5rem
--ply-space-62rem
--ply-space-73rem
--ply-space-84rem
--ply-space-96rem
--ply-space-108rem

Page frame

Side margin --ply-layout-gutter: 16px on phones, growing to 72px.
Reading column --ply-layout-measure: 36rem, about 68 characters of body text. On a docs page, examples and .ply-wide blocks may run wider; in an article, everything outside the margin keeps to it. From 100rem, docs and article pages set their text at 18px in a 38rem column (--ply-layout-measure-wide), which holds the same number of characters.
Docs pages add a chapter sidebar from 56rem, with the on-this-page list under the current page. The text sits at the centre of the page once there is room for the sidebar beside it.
The page mast splits into title and exhibit from 64rem. Below that, the exhibit stacks under the title.
Sidenotes and margin figures move into the margin (--ply-layout-margin, at least 14rem) when the main column (container ply-main) has 52rem: the measure, a 2rem gap, and the margin. There the margin widens with the page, up to 21rem, so notes end at the page's edge. Outside a ply-main column, they move there from 90rem, 14rem wide.

Articles

.ply-article is the frame for a paper, a post, or a page of notes. The text sits at the centre of the page. The on-this-page list hangs in a rail at the left edge, and the margin after the text holds sidenotes and margin figures. A header in an .ply-article--head of its own starts at the same edge as the text. The paper and post patterns use it.

html

<div class="ply-container ply-article ply-article--head">
  <div class="ply-article__main"><header class="ply-paper">...</header></div>
</div>
<hr class="ply-rule" />
<div class="ply-container ply-article">
  <div class="ply-article__rail">
    <nav class="ply-toc" data-auto aria-label="On this page">
      <p class="ply-toc__heading">On this page</p><ul></ul>
    </nav>
  </div>
  <div class="ply-article__main" data-toc-scope>
    <div class="ply-prose ply-has-sidenotes">...</div>
  </div>
</div>

In plain HTML, js/toc.js fills the list from the headings. In Astro, <Article> writes the same markup and builds the list from your h2 and h3 headings at build time, so it is there without JavaScript. Pass toc={false} to drop the list.

astro

<Article>
  <PaperHeader slot="header" title="..." authors={authors} />
  <h2>1. Introduction</h2>
  <p>...</p>
</Article>

A block in an article sits in one of two lanes, and no block straddles the edge between them. Readers take that edge for a column line, so a block that crossed it would read as a mistake.

Lane	For	How
Text	Paragraphs, equations, figures, tables, and code.	The default. A table with many columns or code with long lines scrolls in its own frame.
Margin	Sidenotes, and a small figure, table, or code block beside its paragraph.	`<Sidenote>`; `.ply-margin` on a child placed before the paragraph, or `<Figure margin>`.

.ply-wide and <Figure wide> keep to the text in an article. On a docs page, where nothing hangs beside the text, they run a block on to the page's end edge.

Below 60rem the article is one column. Sidenotes and margin blocks drop under their paragraph.
From 60rem the margin opens after the text, and the text moves toward the centre as the page widens.
From 80rem the rail opens at the left edge and the text is centred on the page. Below that, the same list waits in an "On this page" disclosure above the text.
A section heading starts below any sidenote or margin figure still beside the text, so a note never sits beside the next section. Keep notes short; a long one leaves a gap in the text.

Rules and borders

Token	Width	Use
`--ply-border-rule`	3px	Between page regions: under the top bar, above a pager, at the top of a table.
`--ply-border-control`	2px	Buttons, inputs, table header rules.
`--ply-border-hair`	1px	Rows, list separators, swatch outlines.

Corners

Panels, buttons, inputs, tags, and code blocks are square, like exhibit labels cut from board. Only round things are round: balls, points, radio buttons, status dots.

Layout helpers

.ply-stack stacks children with a gap, .ply-cluster wraps them in a row, .ply-grid makes responsive columns from a minimum width. Each reads a custom property for its gap (--ply-stack-gap, --ply-cluster-gap, --ply-grid-gap).