@uncinq/css-base

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

Installation

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

Both token packages are peer dependencies: this package carries no values of its own and resolves every custom property it references from them.

Usage

Declare the cascade layer order once at the top of your entry stylesheet, before any import, then import in this order:

@layer reset, tokens, libs, base, vendors, layouts, components, pages, utilities;

@import '@uncinq/design-tokens';    /* @layer tokens */
@import '@uncinq/css-base';         /* @layer reset, base, layouts */
@import '@uncinq/component-tokens'; /* @layer tokens */
@import '@uncinq/css-components';   /* @layer components */

Groups and individual files are importable too:

@import '@uncinq/css-base/css/base.css';
@import '@uncinq/css-base/css/base/headings.css';

Your build must run postcss-custom-media, otherwise the breakpoints in css/mediaqueries.css are dropped silently.

What's included

| Group | Layer | Scope | | --- | --- | --- | | Reset | @layer reset | Baseline normalization, based on the Josh W Comeau reset | | Base | @layer base | 23 files styling native HTML elements from tokens | | Layouts | @layer layouts | .container, .grid, .row and their modifiers | | Media queries | none | The --sm / --md / --lg / --xl custom media scale |

Documentation

Full documentation: socle.uncinq.dev/docs/css-base/

It is also versioned with the code in docs/, one page per element and per layout primitive, and ships inside the npm package, so it is readable offline and from node_modules:

• Overview — installation, import order, file structure
• Cascade layers — the three layers, and why the order is yours to declare
• Reset
• Base — 23 pages, one per file
  • Text — body, headings, paragraphs, links, lists, blockquotes, code, address, abbreviations, superscript
  • Media — figures, picture, video, tables, details
  • Forms — inputs and labels, checkboxes, radios, range, select, switch, textarea
  • Accessibility helpers
• Layouts — .container and the --container-bleed contract, .grid, .row
• Media queries

References

• @uncinq/design-tokens — primitive and semantic design tokens
• @uncinq/component-tokens — component-scoped tokens
• @uncinq/css-components — the component layer built on this package
• MDN: CSS cascade layers

License

MIT © Un Cinq