FrameShell

The frame shell — the rendered-class page root, the frame analog of the website page shell. The frame is a viewport: every host owes a frame document a window that is exactly the format’s bleed box, and the static half of the contract (.tr-frame, from the kit’s base stylesheet) fills that window, clips at the shell’s own edge, and lays sections out as a rigid flex column (flex-shrink: 0 on every direct child, so an overflowing stack overflows measurably instead of being silently compressed). The shell sets the three geometry tokens (--frame-w/--frame-h/--frame-bleed) — the declared geometry, for hosts and diagnostics to read — and stamps data-format, which the derived per-format variants (destination identity, never size) select on.

Children must be the page’s sections, direct — a wrapper element between shell and section would become the flex child instead of the section. The shell draws nothing: trim and bleed guides are host chrome, never markup, so rendered bytes are identical in every host.

Import from @homepages/template-kit.

Signature

function FrameShell(props: Props): JSX.Element

Parameters

Name	Type	Required	Description
{ format, children }	Props	required

Returns

JSX.Element

See also

• Every public export of the kit