Cascade layers
The three layers this package owns, and why declaring the full order is the consuming project's job.
Read more
Search
Search
Framework-agnostic CSS foundation, providing a reset, native element styles and layout primitives.
@uncinq/css-base is the CSS foundation the other Un Cinq packages build on. It styles native HTML elements and provides a handful of layout primitives, without introducing a component system and without any framework dependency.
It ships plain CSS source files. There is no build step, no preprocessor and no JavaScript.
| Group | Scope |
|---|---|
| Reset | Baseline normalization, based on the Josh W Comeau custom CSS reset |
| Base | Styles for native HTML elements, driven entirely by design tokens |
| Layouts | .container, .grid, .row and their modifiers |
| Media queries | The --sm / --md / --lg / --xl custom media scale |
Each group scopes itself to a cascade layer it owns. Read Cascade layers before your first import: the layer order is the consuming project’s responsibility, and getting it wrong is the most common source of surprises.
npm install @uncinq/css-base
This package carries no token values of its own. It resolves every custom property it references from two peer dependencies, which must be installed and imported first:
npm install @uncinq/design-tokens @uncinq/component-tokens
Import everything at once:
@import '@uncinq/css-base';
Import a single group:
@import '@uncinq/css-base/css/reset.css';
@import '@uncinq/css-base/css/base.css';
@import '@uncinq/css-base/css/layouts.css';
Or import file by file, when you want only part of the base layer:
@import '@uncinq/css-base/css/base/body.css';
@import '@uncinq/css-base/css/base/headings.css';
@import '@uncinq/css-base/css/layouts/container.css';
The full import order, tokens before CSS, looks like this:
@layer reset, tokens, libs, vendors, base, 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 */
css/mediaqueries.css declares @custom-media rules, which no browser implements natively. Your build must run postcss-custom-media, otherwise every @media (--sm) query in the layout files is dropped and the layouts stay at their mobile values. See Media queries.
css/
index.css imports mediaqueries, reset, base, layouts
mediaqueries.css @custom-media scale, outside any layer
reset.css @layer reset
base.css barrel, imports all base/*
layouts.css barrel, imports all layouts/*
base/ 23 files, @layer base
layouts/ 3 files, @layer layouts