css-base on Socle

Cascade layers

Mon, 01 Jan 0001 00:00:00 +0000

css-base scopes every rule it ships to one of three cascade layers it owns.

Layer	Contents
`@layer reset`	The CSS reset, the foundational baseline
`@layer base`	Native element styles
`@layer layouts`	Layout primitives

Custom media queries in css/mediaqueries.css are the exception: @custom-media is resolved at build time, so it is never subject to the cascade and sits outside any layer.

Declare the order in your project

The full layer order, including layers owned by sibling packages (tokens, components) and by the project itself (libs, vendors, pages, utilities), belongs to the consuming project. css-base deliberately does not declare it.

Reset

Mon, 01 Jan 0001 00:00:00 +0000

css/reset.css is a single file scoped to @layer reset. It is based on the Josh W Comeau custom CSS reset, with a few additions by Un Cinq.

Being the first layer in the recommended order, everything here is the weakest thing in the stylesheet. Any base, layout or component rule overrides it without needing extra specificity.

What it does

Rule	Effect
`box-sizing: border-box`	Applied to every element and pseudo-element
`margin: 0`	Removed from everything except `dialog`, whose centering depends on its own margin
`interpolate-size: allow-keywords`	Enables animating to and from `auto`, `min-content` and friends. Applied only under `prefers-reduced-motion: no-preference`
Text rendering on `body`	`-webkit-font-smoothing: antialiased`, `-moz-osx-font-smoothing: grayscale`, `text-rendering: optimizelegibility`, `font-variant-ligatures: common-ligatures`
Media defaults	`display: block` and `max-width: 100%` on `img`, `picture`, `video`, `canvas`, `svg`
Form control fonts	`font: inherit` on `input`, `button`, `textarea`, `select`
Overflow	`overflow-wrap: break-word` on `p` and `h1` to `h6`
Line wrapping	`text-wrap: pretty` on `p`, `text-wrap: balance` on `h1` to `h6`

Deviations from the original reset

Two rules from the upstream reset are present but commented out, on purpose.

Base

Mon, 01 Jan 0001 00:00:00 +0000

@layer base styles native HTML elements so that unstyled markup already looks right. There is no class to apply: write <table>, <blockquote> or <input type="date"> and they are styled.

Every value comes from a custom property resolved by @uncinq/design-tokens and @uncinq/component-tokens. This package hardcodes almost nothing, so restyling is a matter of changing a token, not overriding a rule.

css/base.css imports all 23 files below.

Typography and text

File	Selectors
`base/body.css`	`body`: background, text color, font family, size, weight, line-height
`base/headings.css`	`h1` to `h6`: color, font family, weight, letter-spacing, line-height, margin, plus a per-level size from `--font-size-heading-01` to `-06`
`base/typography.css`	`p`: block spacing and `--max-width-paragraph`
`base/link.css`	`a`: color, underline offset, thickness and color, hover transition, focus-visible outline
`base/blockquote.css`	`blockquote`, `blockquote cite`: inline-start border, italic, muted cite block
`base/list.css`	`ul`, `ol`, `li` in prose context, including nested list indentation
`base/code.css`	`code`, `kbd`, `samp`, `pre`, and inline `code` outside `pre` styled separately from block code
`base/address.css`	`address`: removes the UA italic and resets inner paragraph spacing
`base/abbr.css`	`abbr[title]`: dotted underline with its own offset and thickness
`base/sup.css`	`sup`: raised without growing the line box, see the note below

Media and embedded content

File	Selectors
`base/figure.css`	`figure`, `figcaption`, and nested `picture`, `img`, `.credit`. Flex column layout with responsive caption direction
`base/picture.css`	`picture`: `inline-block`
`base/video.css`	`video`: fluid width, auto height
`base/table.css`	`table`, `thead`, `tbody`, `th`, `td`: collapsed borders, cell padding, header weight, no border on the last row
`base/details.css`	`details`, `summary`, `details[open]`, the `summary::after` marker and the disclosed panel

Forms

Six of these seven files are largely inspired by KNACSS.

Layouts

Mon, 01 Jan 0001 00:00:00 +0000

@layer layouts ships three primitives. They are deliberately few: everything else is a component’s job.

All three read the responsive column count and gutter from tokens, so a project changes its grid by changing tokens rather than by rewriting layout rules.

`.container`

A centered wrapper with a responsive max-width and a gutter on both sides.

<div class="container">...</div>

Property read	Role
`--container-max-width-*`	Max-width per breakpoint rung
`--container-bleed-*`	Bleed allowance per rung, the paired token
`--gutter`	Inline padding

It also publishes one property of its own, --container-bleed.

Media queries

Mon, 01 Jan 0001 00:00:00 +0000

css/mediaqueries.css declares the breakpoint scale as @custom-media rules. It is imported first by css/index.css and sits outside any cascade layer, because @custom-media is resolved at build time and is never subject to the cascade.

The scale

Custom media	Min width	Pixels at 16px root
`--sm`	`48rem`	768
`--md`	`64rem`	1024
`--lg`	`90rem`	1440
`--xl`	`100rem`	1600

.thing {
 @media (--md) {
 display: grid;
 }
}

These are rungs on a ladder, not devices. A width tells you nothing about the hardware: a 1024px window on a 27 inch monitor is not a tablet. Naming the steps after devices is also what left the previous scale with a compound name, --tablet-wide, which belongs to no device at all.