Layouts
The layout grid
How Flux turns the order of your markup into a page layout.
The element that directly wraps flux:main becomes a 3×3 CSS grid whose areas are named header, sidebar, main, aside and footer. You never write the grid — you pick an arrangement by the order you place the children in.
<body>
<flux:sidebar sticky>…</flux:sidebar>
<flux:header sticky>…</flux:header>
<flux:main>…</flux:main>
<flux:aside sticky>…</flux:aside>
<flux:footer>…</flux:footer>
</body>Order decides the arrangement
Put flux:sidebar before flux:header and the sidebar claims the full page height with the header beside it. Put the header first and it spans the full width with the sidebar underneath. That is the whole API — two lines swapped.
{{-- Sidebar first: it owns the full height --}}
<flux:sidebar sticky>…</flux:sidebar>
<flux:header sticky>…</flux:header>
{{-- Header first: it owns the full width --}}
<flux:header sticky>…</flux:header>
<flux:sidebar sticky>…</flux:sidebar>RTL comes free
CSS grid columns follow the page's writing direction, so on a page with dir="rtl" the same grid puts the sidebar on the right and the aside on the left. There is no RTL variant of any of these components, and no direction-specific classes to write.
dir="ltr"
dir="rtl"
<html lang="fa" dir="rtl">Reference
flux:main
The main content area. Its parent becomes the layout grid.
| Prop | Description |
|---|---|
| container | Caps the content at max-w-7xl and centres it. |
flux:container
Caps and centres any block by hand — for a full-bleed band whose contents must stay aligned with the rest of the page.
flux:spacer
A flexible gap that pushes what follows to the far edge of a flex row.