Layout patterns

High-level page shells live in src/layout/patterns.css (.velin-layout-*). Optional grid helpers for dense auto-flow and a classic app template live in src/layout/grid.css alongside the column utilities documented on Grid.

Shell layouts

Apply a single class on a wrapper element. Child order matters for a few patterns (noted below).

Class	Use case
`.velin-layout-sidebar`	Fixed sidebar + main; stacks on small viewports.
`.velin-layout-holy-grail`	Header, sidebar, main, footer — header/footer span full width.
`.velin-layout-sticky-footer`	Flex column; `main` or `[role="main"]` grows so the footer sits at the bottom.
`.velin-layout-center`	Centers content in the viewport (e.g. empty states).
`.velin-layout-pancake`	Header / flexible body / footer rows.
`.velin-layout-aside-main`	Main + 20rem aside; collapses to one column under 56rem.
`.velin-layout-split`	Two equal columns; single column under 48rem.
`.velin-layout-dashboard`	Expects header, then aside, then main as the first three children.
`.velin-layout-auth` + `.velin-layout-auth__panel`	Full-viewport centered column for sign-in / register cards.

Grid helpers

Use on a .velin-grid container (see Grid for base modifiers).

Class	Effect
`.velin-grid--flow-dense`	Sets `grid-auto-flow: dense` for tighter packing of auto-placed items.
`.velin-grid--areas-app`	Named template: top row `app-head` full width; second row `app-side` \| `app-main`.
`.velin-area-head`, `.velin-area-side`, `.velin-area-main`	Map children to the `app-*` areas when using `.velin-grid--areas-app`.

<div class="velin-grid velin-grid--areas-app">
  <header class="velin-area-head">…</header>
  <aside class="velin-area-side">…</aside>
  <main class="velin-area-main">…</main>
</div>