Compose layouts.
Don't fight them.
26 declarative custom elements. Zero build step required. Every primitive composable, every attribute a design token.
Click any primitive to highlight
every
instance on this page.
↑ Each button highlights all instances of that layout primitive. Blue dashed borders = layout primitive boundaries. Thicker gray borders = selected.
Every layout pattern.
One
cohesive language.
Composable
Nest any primitive inside any other. sandwich-layout inside bookend-layout inside region-layout. No special rules.
Token-driven
Every attribute maps to a CSS
custom property. Set
gap="s-m" and get
var(--ds-space-s-m). Scale-coherent by default.
No build step
Drop a
<link> and a
<script> on
the page. Done. Your bundler can
still import it too.
Agent-friendly
Declarative HTML attributes. Every token named. LLMs can generate correct layouts without learning a framework.
Fluid ratios
A musical-interval scale drives
spacing AND typography. Set
.golden on a
section and the entire subtree
recalibrates.
Motion-ready
presence-layout wraps any subtree with 3-step state management, exponential easing, and View Transitions API hooks.
Import core tokens
One CSS file. Design tokens,
reset, and the layer stack.
Everything downstream can use
--ds-space-* and
--ds-text-* tokens.
Register modules à la carte
Import only what you need. Each module is a CSS file + optional JS. Use the CDN links or your bundler's tree-shaking.
Compose with HTML
Wrap, nest, and configure with attributes. Apply ratio preset classes to subtrees. The spacing and type scale cascade correctly.
Named-area grids
with
split-pane-layout
Define layout topology with a panes string. Each child declares its area. The grid topology is visible in the markup.
split-pane-layout
panes="H H H
S M M
S F F"
cols="180px 1fr 1fr"
rows="64px 1fr 48px"
gap="m"
style="block-size:320px"
pane-layout area="H" → header
pane-layout area="S" → sidebar
pane-layout area="M" → main
pane-layout area="F" → footerFull-bleed content inside a padded region.
breakout-layout → full bleed
This banner breaks out of the region's wide padding.
breakin-layout pulls the text back into a readable column — no extra wrappers.
↑ The banner bleeds to the scroll container edge. The text column inside stays at max 55ch, centered.
scrolling-layout + aspect-ratio-layout
What developers say
Finally, layout primitives that compose instead of fight. I built our entire app shell with bookend inside sandwich inside region — and it just works.
The token system is elegant. gap="s-m" resolves to a midpoint between two scale steps. I stopped using arbitrary pixels entirely.
I had our LLM generate a complex layout by just describing the sections. It used split-pane-layout with pane-layout children and got the panes string right on the first try. The declarative API made this possible.
The sticky-layout with safe attribute saved me four lines of CSS per sticky header. On iOS, it just works.
presence-layout's 3-step machine solved a problem I'd been hacking around for years. absent → invisible → visible with exponential easing and zero JS required on my part.
↑ masonry-layout — multicol baseline, CSS grid masonry where supported. subgrid-layout is used in the columns demo below.
Cross-element alignment
with
subgrid
Three cards in a 3-column grid. Each is a subgrid-layout spanning 1 column and 3 rows. Their header/body/footer sections align across all three cards — driven by the tallest content in each row.
region-layout
--ds-region-pad-inline
for descendant breakout/breakin
primitives.
presence-layout
split-pane-layout
grid-template-areas as
inline styles.
↑ Headers, bodies, and footers align across all 3 cards — driven by the tallest row content, not hardcoded heights.
3-step visibility machine
Absent → invisible → visible (and reverse). Exponential easing: expo-out entry, expo-in exit. Scale + translateY combined. Click the buttons to see it live.
Presence panel
This element is animated
with scale + translateY
+ opacity.
Expo-out on entry,
expo-in on exit.