Layout & the content seam
How platform pages are placed inside a template. Every platform page (donate, services, events, campaigns, the members area) renders through a fixed set of LAYOUT INTENTS, the content SEAM. A template STYLES these intents to place content its way; it must never build a parallel content container, or platform pages drift from the template’s own sections. Enforced at publish by the conformance validator.
The content seam
Section titled “The content seam”| Class | Intent | Notes |
|---|---|---|
.container |
contained | The contained content column, text, forms, cards. Style it (and override –container) to set your content width and gutter. Use it in your own layout and sections too, so everything shares one column. |
.full |
full-bleed | Edge-to-edge regardless of the container it sits in, a hero image, a colour band. Restyle it freely; the default breaks out to the viewport width. |
Set your content width with the --container token and style .container/.full in your assets/theme.css. Use .container in your own layout and sections too, so your chrome and every platform page share one column.
The rule, enforced at publish
Section titled “The rule, enforced at publish”A selector other than .container / .full that sizes its width off var(--container) is refused at publish, before review, it builds its own content container from var(–container). Platform pages render inside .container, so a parallel container drifts from your sections, style .container instead (override –container for width and add your gutter there), and use .full for edge-to-edge.
/* ✗ REJECTED, a parallel content container */.mytheme-container { max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; }
/* ✓ style the seam instead */:root:root { --container: min(1200px, 92vw); }.container { padding-inline: 1.5rem; }
