Pre-release
Build responsive layouts
Any project. Any stack. Any screen.
Compose interfaces from four layouts and a few modifiers, without media queries.
Ship your next idea
The name sits on the left and the links on the right. Narrow the frame and the links wrap under the name.
Blog
Four layouts are enough
Fill, scroll and between
Dashboard
Projects12
Open tasks48
Team7
The header stays put. The sidebar and this area each scroll on their own.
Website redesignToday
Mobile appTomorrow
Billing updateFriday
Onboarding emailsNext week
SearchNext month
Dark themeLater
Cabin by the lake
NewThe title and the badge are pushed apart. When the card is too narrow for both, the badge moves under the title.
JD
Results
The content takes the width the sidebar leaves. When less than 16em would be left, it moves below the sidebar.
Highlights
Four layouts
Column, row, grid and frame, plus a divider. Four names to learn, and modifiers for the rest: gap, alignment, padding and size.
No media queries
Rows wrap, grids fit as many cells as the width allows, and content drops below its sidebar when it runs out of room. Layouts follow the space they're given, not the screen.
Classes or elements
Put the rl- classes on any HTML, in any framework, or use the same layouts as web components: <rl-row rl-gap-m>.
Say what grows
rl-width-fill and rl-height-fill let any child take the space that's left, and rl-scroll scrolls only the area that should.
Tokens to theme
Spacing, text sizes, colours and shadows are CSS custom properties, with light and dark defaults. Override one on :root and everything that uses it follows.
Small, no dependencies
The CSS is about 2.5 KB gzipped, and the web components under 8 KB with Lit built in. Open source, under the MIT license.