@uncinq/css-base

Framework-agnostic CSS foundation — reset, native element styles, and layout primitives.

What's included

Reset

Based on the Josh W Comeau custom CSS reset, with additions by Un Cinq:

• Box model normalization (box-sizing: border-box)
• Default margin removal
• interpolate-size: allow-keywords for keyword animations (behind prefers-reduced-motion: no-preference)
• Text rendering (-webkit-font-smoothing, text-rendering, font-variant-ligatures)
• Media defaults (display: block, max-width: 100% on img, picture, video, canvas, svg)
• Form controls font inheritance
• Overflow wrap on headings and paragraphs
• text-wrap: pretty on p, text-wrap: balance on headings

Base

Styles for native HTML elements, each driven by design tokens from @uncinq/design-tokens and @uncinq/component-tokens:

| File | Element(s) | | --- | --- | | base/body.css | body — background, text color, font family/size/weight/line-height | | base/headings.css | h1–h6 — color, font, size scale via --font-size-heading-01…06 | | base/typography.css | p — spacing, max-width | | base/link.css | a — color, underline style, hover transition | | base/blockquote.css | blockquote, cite — border-left, italic, muted color | | base/code.css | code, pre, kbd, samp — monospace font, background, inline vs block | | base/list.css | ul, ol, li — content list indent and spacing (prose context) | | base/address.css | address — removes italic, resets paragraph spacing | | base/details.css | details, summary — border, padding, open state, hover shadow | | base/figure.css | figure, figcaption — flex layout, responsive caption direction | | base/form.css | label, legend, input, select, textarea, [type='checkbox'], [type='radio'] | | base/picture.css | picture — inline-block display | | base/table.css | table, th, td, thead — collapse, padding, header weight | | base/time.css | time — small font size | | base/video.css | video — fluid width, auto height |

Layouts

Reusable layout utility classes:

| File | Class(es) | | --- | --- | | layouts/container.css | .container — centered, max-width responsive container with gutter | | layouts/grid.css | .grid — CSS grid wrapper with responsive --grid-column custom property | | layouts/row.css | .row, .col-xsmall, .col-small, .col-medium, .col-large, .offset-center, .offset-end |

CSS cascade layers

All rules are scoped to named cascade layers, making every declaration safely overridable:

| Layer | Contents | | --- | --- | | @layer config | Reset and design tokens — foundational baseline, lowest priority | | @layer base | Native element styles | | @layer layouts | Layout utility classes |

The intended layer order for a full stack is:

@layer config, base, layouts, vendors, components;

With cascade layers, the last layer in the order wins. Placing config first gives it the lowest priority — the reset and token defaults can never accidentally override base styles, component styles, or project overrides. @layer base and @layer layouts sit above it but below vendor and component styles.

Any layer can be overridden in your own project by importing after this package and writing to the same layer name:

@import '@uncinq/css-base'; /* package defaults */

/* your project overrides — same layer, wins by order */
@layer base {
  a {
    --color-link: #0070f3;
  }
}

→ MDN: Using CSS cascade layers

Installation

npm install @uncinq/css-base
# or
yarn add @uncinq/css-base

Usage

/* everything — reset + base + layouts */
@import '@uncinq/css-base';

/* or by group */
@import '@uncinq/css-base/css/reset.css';
@import '@uncinq/css-base/css/base.css';
@import '@uncinq/css-base/css/layouts.css';

/* or file by file */
@import '@uncinq/css-base/css/base/body.css';
@import '@uncinq/css-base/css/base/headings.css';
@import '@uncinq/css-base/css/layouts/container.css';
@import '@uncinq/css-base/css/layouts/row.css';

File structure

css/
  index.css                   ← imports reset, base, layouts in order
  reset.css                   ← Josh W Comeau reset + Un Cinq additions, in @layer config
  base.css                    ← barrel, imports all base/*
  layouts.css                 ← barrel, imports all layouts/*
  base/
    blockquote.css            ← blockquote + cite — border-left, italic, muted color
    code.css                  ← code, pre, kbd, samp — monospace, background, padding
    list.css                  ← ul, ol, li — content list indent and spacing
    address.css               ← address — removes italic, resets paragraph spacing
    body.css                  ← body — background, color, font, rendering
    details.css               ← details + summary — border, padding, open/hover states
    figure.css                ← figure + figcaption — flex layout, responsive captions
    form.css                  ← label, input, select, textarea, checkbox, radio
    headings.css              ← h1–h6 — color, font family, size scale
    link.css                  ← a — color, underline, hover transition
    picture.css               ← picture — inline-block display
    table.css                 ← table, th, td — collapse, padding, header weight
    time.css                  ← time — xs font size
    typography.css            ← p — spacing, max-width
    video.css                 ← video — fluid width
  layouts/
    container.css             ← .container — centered, responsive max-width
    grid.css                  ← .grid — CSS grid with responsive column custom property
    row.css                   ← .row + column/offset modifiers

Peer dependencies

This package requires @uncinq/design-tokens and @uncinq/component-tokens to resolve the CSS custom properties it references. It does not bundle any token values itself.

Token categories referenced across base and layout files include:

• --color-bg, --color-text, --color-heading, --color-link, --color-border
• --font-family-text, --font-family-heading
• --font-size-*, --font-weight-*, --line-height-*
• --spacing-*, --max-width-*
• --transition-normal
• --border-width-*, --border-style-*, --radius-*
• Component-scoped tokens: --input-*, --select-*, --textarea-*, --checkbox-*, --radio-*, --details-*, --table-*, --figure-*, --label-*
• Layout tokens: --gutter, --gap, --columns, --container-max-width-*, --flex-*, --spacing-section

Install both peer dependencies:

npm install @uncinq/design-tokens @uncinq/component-tokens

→ @uncinq/design-tokens — primitive and semantic design tokens (color, typography, spacing, …) → @uncinq/component-tokens — component-scoped tokens (form, table, figure, …)

Then import them before this package so the tokens resolve correctly:

@import '@uncinq/design-tokens';
@import '@uncinq/component-tokens';
@import '@uncinq/css-base';

References

• @uncinq/design-tokens — primitive and semantic design tokens
• @uncinq/component-tokens — component-scoped tokens
• Josh W Comeau custom CSS reset — the reset foundation used in css/reset.css
• MDN: CSS cascade layers