Adaptive MatrixOne design width per design file

A px cannot be converted until you know which design file it was drawn on. Give every design file its own canvas, and pages, mobile components and desktop components all scale correctly at the same time.

Get started

Configuration reference

GitHub

FROM DESIGN TO BROWSER

Move the viewport. Understand the numbers.

Start with 24px of spacing on a 375px canvas. Bounds are optional and the formula stays visible.

Design canvas24px

Spacing in the browser24px

padding: clamp(20.48px, 6.4vw, 38.4px);

Viewport width375pxLimit to 320–600px

This illustrates ordinary lengths. Compile complete CSS, typography and component libraries in the playground.

Multi-canvas by design

Pages, a mobile component library and a desktop component library come from three different design files. Each gets its own canvas, and every px is converted against the width of the canvas it belongs to — no choosing between a page that scales and components that do not.

How the numbers are derived

Fluid sizing with optional bounds

Choose only the limits your design needs. Two bounds produce clamp(), one bound produces min() or max(), and no bounds leave the fluid expression unbounded. minWidth and maxWidth are independently optional.

Every option

Text stays zoomable

A rem + viewport hybrid keeps a portion of the font size responsive to the reader's font settings. Set fluidity to zero for plain rem. Verify text resizing and reflow in your actual layout; a formula alone cannot establish accessibility compliance.

Support and degradation

Component libraries already handled

The canvases for the component libraries a project actually uses are built in and matched by class-name prefix, custom-property prefix and file path. The default configuration is correct before you configure anything.

What is built in

Breakpoints get a canvas too

A rule inside a desktop media query is compiled against the desktop canvas, not the phone one. When a rule's live width range falls outside its canvas, the compiler says so instead of quietly emitting a constant.

Routing by breakpoint

Defined by data, not by prose

The behaviour is pinned by a language-agnostic conformance suite — pure JSON plus CSS fixtures, runnable as an acceptance suite by an implementation in any language. Pure TypeScript, one runtime dependency.

The conformance suite

Built for agents as well as people

Every page is fetchable as raw Markdown at its own URL plus .md, the whole set is indexed at llms.txt, and every option is published as a JSON Schema whose defaults are read out of the compiler itself.

Documentation for agents

Preview before you commit

The CLI compiles a stylesheet and prints the result, so a configuration change is something you read rather than something you deploy and hope about.

CLI preview

POSTCSS 8 · TYPESCRIPT · OPEN SOURCE

Start with one line of CSS.

See the output first. Choose your canvas and bounds when you need them.

npm i -D postcss-adaptive-matrix

English · 简体中文