ResponsiveJS documentation
One page per question — start from what you're trying to do.
| Your question | The page |
|---|---|
| I have a site — is it right? | Getting started — one command, nothing installed, every width judged |
| I have a site and want to keep it right | Adopting r$ — measure → pin a contract → gate it in CI → only then write constructs |
Why this and not clamp() / Percy / axe? | Why r$ — the honest comparison, and when not to use it |
| Something does not behave | Troubleshooting — by symptom |
| Teach me — I'll build along | The tutorial — empty page → fluid, measured, contract-pinned landing in 7 steps (~30 min) |
| How does the model work? | Concepts — value = f(width), snapshots, the oracle, CSS-first |
| How do I author responsive behavior in JS/TS? | The runtime guide — r$.: every construct's purpose, gradual examples, customizing & debugging |
| What's the pattern for MY problem? | The pattern catalog — every construct on a real problem, organized by what you're building; three unpacked end to end |
| How do I validate/score a page? | The design guide — r$(page): measure → model → judge, analyze(), contracts, cutting false positives |
| How do I test all of this? | Testing responsive behavior — what's unit-testable vs what needs a browser, patterns and traps |
| How do I wire it into CI? | CI guide — pipelines, SARIF, baselines strategy |
| What's the exact signature of X? | API reference: runtime · design · contract · cli · core · adapters |
| How do I use it in React / Vue / Angular? | Adapters reference — the lifecycle, per framework |
| I have no build step (CMS, plain HTML) | runtime/global — one <script>, window.r$ |
| A live page using everything | Fluid landing example — run it, resize it, read its tutorial |
| The oracle inside DevTools | The r$ devtool — sweep, curve inspector, score HUD, contract recorder (load unpacked) |
For AI agents (compact, exact I/O — different documents on purpose):
- Validation reference — commands, exit codes, report JSON shapes, the 27 constraints, contract skeleton, the fix loop
- Authoring reference — invariants, signatures, construct chooser, the minimal correct pattern
- r$ for AI agents — the narrative guide: drivers (CDP/eval/agent-browser), contracts as instructions
The aesthetic score is grounded in Ngo, Teo & Byrne (2003), Modelling interface aesthetics, and Birkhoff (1933), Aesthetic Measure — see api/core.md.