Relayout Docs

Relayout is a lightweight framework which separates layout from aspect and handles structure, spacing and boundaries, not colors, typography or styling. It works as CSS classes, as web components, or both, in any project, design system or framework.

There are four layouts, column, row, grid and frame, plus divider. Modifiers set the gap, alignment, padding, size and scrolling, and common patterns come from combining the two.

IntroductionThe layout problem, Relayout's approach, and how layouts compose.

InstallationLoad Relayout from a CDN, as a local CSS file, or from npm.

ColumnElements one under another, with even spacing.

RowElements side by side, wrapping onto the next line when they don't fit.

GridCells of equal width, as many per line as fit.

FrameContent centered in the space of its parent.

Height, fill and scrollMake an element fill the space around it, and choose which area scrolls.

RecipesHeaders, sidebars, app shells and equal columns, built from the four layouts.