Landmarks

body, and the direct header/main/footer children of body, are Cirth's top level page landmarks.

Live UI · Default buildAuthentic Cirth · shell overrides declared in source

Header

body > header, body > main, and body > footer each get vertical block spacing automatically.

Show HTML

<header>
  <h3>Header</h3>
</header>
<main>
  <p><code>body &gt; header</code>, <code>body &gt; main</code>, and
  <code>body &gt; footer</code> each get vertical block spacing automatically.</p>
</main>
<footer>
  <small>Footer</small>
</footer>

<body>
  <header>…</header>
  <main>…</main>
  <footer>…</footer>
</body>

Behavior #

body is full width with its margin removed.
main renders as display: block (IE fallback).
Direct children of body that are header, main, or footer get vertical block padding via --cirth-block-spacing-vertical, which is what keeps the top of the page, the content, and the footer evenly spaced without any wrapper class.

This is the default build's behavior ($enable-classes: true): simple vertical padding, no width constraint. Combine it with .container on main if you also want a centered page with constrained width.

Classless build #

When $enable-classes is disabled (the classless build), the same body > header/main/footer selector instead behaves like .container: centered, constrained in width, and fluid at every viewport size. It reads the same --cirth-container-gutter and --cirth-container-max-width tokens, but does not expose .breakout because there is no class with which to express that visual exception. See Get Started → Classless.