mostlycss
Theme

Frame

.frame

Frame — the document's own column: header, content, footer, and a footer that stays at the bottom of a short page.

Examples

A footer at the bottom of a short page

View “A footer at the bottom of a short page” as
A bar

One short paragraph — nowhere near enough to fill the frame.

The footer is at the bottom anyway.

<div class="frame" style="--frame-min-block-size: 18rem; --footer-padding-block: var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-box); overflow: hidden">
  <header style="padding: var(--space-3); background: var(--color-surface-raised)">A bar</header>
  <main style="padding: var(--space-3)"><p>One short paragraph — nowhere near enough to fill the frame.</p></main>
  <footer class="footer" style="padding-inline: var(--space-3)">
    <div class="footer-bottom"><p class="footer-note">The footer is at the bottom anyway.</p></div>
  </footer>
</div>

Wear it on <body>; the height and the border here are only so the demo has an edge.

main grows by name — anything else takes frame-grow — and .footer was already carrying the margin-block-start: auto that needs this container to do anything. Measured on this markup: the footer sits 0px off the bottom, and 70px off it without the class.

The same markup without it

View “The same markup without it” as
A bar

One short paragraph — nowhere near enough to fill the frame.

And the footer floats where the text left it.

<div style="min-block-size: 18rem; --footer-padding-block: var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-box); overflow: hidden">
  <header style="padding: var(--space-3); background: var(--color-surface-raised)">A bar</header>
  <main style="padding: var(--space-3)"><p>One short paragraph — nowhere near enough to fill the frame.</p></main>
  <footer class="footer" style="padding-inline: var(--space-3)">
    <div class="footer-bottom"><p class="footer-note">And the footer floats where the text left it.</p></div>
  </footer>
</div>

An auto margin only pushes inside a flex or grid container, so in normal flow the footer stops where the content stopped.

Tokens 1

Level 2, declared on .frame itself. Set any of them on that selector to restyle this block without touching the skin.

Level 2 tokens declared by frame
TokenDefault
--frame-min-block-size100svb

Variants and states

Variants

None. It is one shape, and the page does the rest.

State it reads

None.

Before you ship it

What you have to do 1 requirements

  1. Wear frame on the element that holds the whole page — <body> in all eight sites this came from. It is a class and not a bare body selector on purpose: a rule that turned every consumer's <body> into a flex column the moment this file was imported would switch off margin collapsing across a whole site as a side effect of an @import, which is the shape of defect base/reset.css records at the bottom of the file and asks not to be repeated. Give the frame something to grow. main grows by name; anything else needs frame-grow. Without a growing child and without a .footer, a short page simply ends early and the frame does nothing — which is not a break, but is also not what anybody wanted.

src/css/blocks/frame.css · npx mostlycss add frame