A flex row split into two children: .tabs-vertical-nav
(a flex column that shrinks to fit its widest label — no fixed width) and
.tabs-vertical-content (flex: 1, takes the rest). Panels are
matched to their radio by id using :has(), since the nav and the content pane
are no longer direct siblings the way .tabs' horizontal version relies on.
Every color, spacing value, radius, and shadow in the framework is a
CSS custom property in :root. Change --default-border-radius
once and every panel, control, and input picks it up through calc().
The stylesheet is organized into named @layer blocks —
theme, style, base, layout, components, components-advanced, utilities,
utilities-advanced, overrides — so your own overrides always win without
needing !important or specificity hacks.
Roughly 500 single-purpose utility classes cover spacing, flex, grid, color, shadow, and typography — enough to build most sections, like the two on this page, without writing a single custom rule.
No build step means no purge/tree-shaking — you ship the whole stylesheet. And the accessibility layer is still in progress, so accessibility-critical projects should wait for that to land before adopting the framework wholesale.
Built with love in by Kim Majali, EITO team, and contributors.