Section
A page's structure is one element and one rule. Everything lives in a single
main, and every heading is wrapped in its own section, nested to
mirror the outline. From that fixed structure the stylesheet spaces the whole page on its own,
so the same markup can read as full-width bands or as bare rhythm.
Main
One main per page holds its unique content, the region between the header and
footer that everything here lives inside. It is the root of the outline: the h1
and the top-level sections are its children. See Page for the
shell around it.
Page title
The page's unique content.
<main>
<h1>Page title</h1>
<p>The page's unique content.</p>
</main>main holding the page's h1 and content.Sections & headings
A section wraps each heading with its content, and the rule is strict: every
heading opens a section of its own, so each section holds exactly one heading as
its first child. Nest the sections to mirror the outline, one h1 for the page and
an h2–h6 for each level down. This pairing is specific to the
framework, and it is what makes the spacing work.
A part can hold several subsections at the same level, and each of those can hold its own. The example runs two levels deep with siblings at each level, so the rhythm below has real nesting to work on.
Introduction
Example content
Background
Example content
Goals
Example content
Short term
Example content
Long term
Example content
<section>
<h2>Introduction</h2>
<p>Example content</p>
<section>
<h3>Background</h3>
<p>Example content</p>
</section>
<section>
<h3>Goals</h3>
<p>Example content</p>
<section>
<h4>Short term</h4>
<p>Example content</p>
</section>
<section>
<h4>Long term</h4>
<p>Example content</p>
</section>
</section>
</section>Spacing & rhythm
With the outline fixed in the markup, the stylesheet spaces the page with two rhythms and nothing else, driven only by a section's position in the outline.
Within a part, every piece of content sits one constant --gap
from the next, heading to text, paragraph to paragraph, text to list, the same at every depth.
Between parts, dropping a heading level adds a larger step above the new
section, the separation --sep. That step is scaled by depth: widest at the top of
the outline and tightening as the headings get smaller, so subsections draw closer as they
nest. It is the only margin in the flow; everything else is the gap.
Outlines are added below to show the nesting. These are real sections:
A part
Example content, one gap under the heading.
A second paragraph, the same gap apart.
A sub-part
Set off by a step above its heading; its own content is back at the base gap.
Another sub-part
A sibling, the same step apart.
A deeper part
Deeper in, the step is smaller, so the level draws closer.
Another deeper part
Its sibling, that same smaller step apart.
/* within a part: one gap between every child, at every depth; the first child opens flush */
main > *, main section > * { margin-top: var(--gap); }
main > :first-child, main section > :first-child { margin-top: 0; }
/* between parts: a subsection takes the larger step instead, scaled by nesting depth */
main > * { --sep: var(--sep-1); } /* 28px — first level */
main section > * { --sep: var(--sep-2); } /* 20px — one level in */
main section section > * { --sep: var(--sep-3); } /* 14px — two levels in */
main section > section { margin-top: var(--sep); }