Appearance

What is remCSS? ​

remCSS is a modern, production-ready CSS framework built on two foundational ideas:

Everything scales from a single unit. Every spatial value — spacing, sizing, typography, radius, gaps — is derived from rem. Change the browser root font size and everything scales proportionally. No pixel values, no compounding em units.

Every value has a mathematical reason. The Golden Ratio (φ ≈ 1.618) generates the entire scale. No arbitrary values, no "just feels right" spacing. Each step is exactly φ times the previous.

Design Principles ​

rem-only ​

px is forbidden in the authored source. This is enforced by a CI test on every commit. rem units scale with the user's browser font-size preference — an accessibility requirement, not just good practice.

Pure CSS ​

No Sass, no PostCSS variables, no JavaScript runtime. The source file is the output (modulo Lightning CSS transforms for browser compatibility). You can read the generated dist/remcss.css and understand every rule.

@layer architecture ​

Three explicit layers with guaranteed cascade order:

@layer base, components, utilities;

Utilities always beat components. Components always beat base. No !important needed.

Zero opinions on layout ​

remCSS does not dictate how you structure your pages. The grid utility is opt-in. Components work in any layout system.

Browser Support ​

remCSS targets Baseline 2023 — broadly available in Chrome 109+, Firefox 119+, Safari 17+. Transformations for older browsers are applied automatically at build time via Lightning CSS.

Features used:

  • @scope (with @supports fallback)
  • @container queries
  • :has() relational selector
  • light-dark() color function
  • oklch() color space
  • @layer cascade layers
  • Logical properties (margin-inline, padding-block, etc.)
  • clamp() for fluid sizing
  • dvh, dvb viewport units

Package ​

sh
npm install @dstn/remcss
html
<link rel="stylesheet" href="node_modules/@dstn/remcss/dist/remcss.css" />

Or with a bundler:

js
import '@dstn/remcss';