Appearance

Getting Started ​

Installation ​

bash
npm install @dstn/remcss

Usage ​

In a CSS file ​

css
@import '@dstn/remcss';

In a JavaScript/TypeScript bundler ​

js
import '@dstn/remcss';

Via CDN (no build step) ​

html
<link rel="stylesheet" href="https://unpkg.com/@dstn/remcss/dist/remcss.css" />

What you get ​

A single dist/remcss.css file that includes:

  1. Design tokens — Golden Ratio scale (--step-n3 → --step-12), oklch() color palette, fluid type tokens
  2. Base reset — Modern CSS reset that replaces normalize.css
  3. Components — Buttons, forms, tables, and grid layouts
  4. Utilities — Margin, padding, gap, flex, and grid utility classes

Layer architecture ​

remCSS declares its cascade layers at the top of the file:

css
@layer base, components, utilities;

This means:

  • Your own styles, written without @layer, always win over remCSS
  • You can override components without touching specificity: just write a @layer components rule in your own stylesheet
css
/* Your stylesheet */
@import '@dstn/remcss';

/* This wins over remCSS's button styles, no !important needed */
@layer components {
	.button {
		border-radius: var(--radius-pill);
	}
}

Customization ​

Override any CSS custom property on :root or any element:

css
:root {
	/* Change the brand accent color */
	--palette-accent-50: oklch(58% 0.24 270); /* purple */

	/* Shift the entire scale up (larger base unit) */
	--step-0: 1.125rem;
}

Browser support ​

Baseline 2023 — Chrome 109+, Firefox 119+, Safari 17+.

@scope is used as progressive enhancement. Browsers that don't support it fall back to the flat selectors defined alongside each component.