Layout

Landmarks

css/base.css styles semantic page landmarks and adds vertical spacing to classless content landmarks.

Use header and footer landmarks

Place <header> first and <footer> last among the direct children of <body>. Minium then applies surface colors, borders, and spacing to both landmarks. It also applies margin-block-start: auto to the footer so that it remains at the bottom of short pages.

This documentation page uses the same pattern.

<body>
  <header>Site header</header>
  <main>Page content</main>
  <footer>Site footer</footer>
</body>

Use classless content landmarks

Classless main, article, and section elements add --flow-space between consecutive direct children:

> * + * { margin-block-start: var(--flow-space); }

Classless section

Minium adds spacing between these elements.

Change the default flow

Add .flow-loose to replace the default flow spacing with larger spacing.

Loose flow

This section has larger spacing between its direct children.