Docs layout

Getting started

Link one stylesheet and write semantic HTML. Every element gets a clean, modern look without classes, and the page follows the reader's light or dark preference.

This page shows the layout conventions: a nav inside the top-level header becomes a sticky bar, a nav directly in body becomes a side nav, and an aside directly in body becomes a rail on the other side.

Install

Use the CDN or install the package from npm and import it through your bundler.

npm install @abraham/m.css

Customize

Set the public custom properties on the root or on any element. Spacing, type, and colors all derive from them, so a handful of values restyles the whole page.

Overrides never need !important, because every rule lives in a cascade layer with zero specificity.

Layout

On wide screens the side nav and the rail sit next to the content and stick while it scrolls. A side nav taller than the window scrolls on its own. On narrow screens everything stacks into one column, and the navs become rows that scroll sideways.

The top bar always stays one line tall, so headings you jump to, focused links, and sticky table headers all stop just below it.

Color

One primary color drives links, buttons, focus rings, and form controls. Hover and subtle variants are mixed from it, and dark mode lightens it automatically.

Text on primary backgrounds picks black or white for contrast unless you set it yourself.

Density

Density multiplies every spacing step. Lower values suit dashboards and data-heavy pages; higher values suit long-form reading.

Motion

Transitions are short and only use opacity, transforms, and color, except when the reader toggles something like a disclosure. Reduced motion turns them all off.

Properties

Primary color, text color on primary, density, radius, sans and mono fonts, base font size, and measure are the only public custom properties.

Attributes

A few data attributes override preferences: a theme, reduced motion, and an opt-in scroll progress bar. ARIA attributes such as busy and current page also get styles.

Browser support

The two latest major versions of each major browser. Newer features, such as hiding the top bar while scrolling down, are enhancements that other browsers simply skip.

Accessibility

Colors meet WCAG AA in both schemes, focus rings are always visible, and forced-colors mode redraws custom controls in system colors.

Print

Printing switches to light colors, drops backgrounds, unsticks bars, and prints link URLs.

FAQ