Guides
Layout
Arrange pages with a few layout classes and let containers, not the viewport, decide when a layout changes.
Layout classes
@oddkin/components/css/layout.css defines one class per arrangement, each tuned by a variable and spaced by the theme’s layout tokens:
| Class | Arrangement | Variables |
|---|---|---|
odd-stack | Children in a column | --odd-stack-gap |
odd-row | Children in one row | --odd-row-gap |
odd-cluster | A row that wraps | --odd-cluster-gap |
odd-grid | Equal columns | --odd-grid-columns, --odd-grid-gap |
odd-auto-grid | As many columns as fit | --odd-auto-grid-min |
odd-split | A side beside the main content, wrapping below a minimum | --odd-split-side-width, --odd-split-main-min |
odd-center | Its content centred in both directions | |
odd-box | Padding from the inset tokens | --odd-box-inset |
<link rel="stylesheet" href="/node_modules/@oddkin/components/dist/css/layout.css" />
<main class="odd-split">
<nav class="odd-stack">…</nav>
<article class="odd-stack odd-stack-loose">…</article>
</main>Containers and scrolling
<odd-container> keeps content to a readable measure and is a size container, so what is inside responds to its width. <odd-scroll-region> is a labelled, keyboard-scrollable region for content wider or taller than its space.
Inside components
Components arrange their own regions with the same helpers (stack, row, autoGrid, split) as layout recipes, extracted to CSS at build time; see layout-recipes.md and the side navigation guide.