css-components on Socle

Cascade layers

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

This package writes to two layers.

Layer	Contents
`@layer components`	All 29 components
`@layer utilities`	`.scrollsnap`, the only utility

The full order, including layers owned by the sibling packages and by the project itself, is the consuming project’s responsibility. Declare it once, at the very top of your entry stylesheet, before any @import:

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

CSS fixes a layer’s position the first time its name is seen, and later re-declarations do not reorder it. If that line comes after an import, it is already too late. See the css-base page for the full explanation, including why libs and vendors are a pair.

Buttons

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

`.btn`

The base class. Works on <button>, <a> and <input type="submit">, and reads --btn-* from @uncinq/component-tokens.

<button class="btn">Send</button>
<a class="btn btn-secondary" href="/contact">Contact</a>

Colour variants

Class	Intent
`.btn-primary`	Primary action
`.btn-secondary`	Secondary action
`.btn-brand`	Brand-coloured
`.btn-neutral`	Neutral emphasis
`.btn-dark`	Dark surface
`.btn-light`	Light surface
`.btn-success`	Confirmation
`.btn-danger`	Destructive action
`.btn-warning`	Warning
`.btn-info`	Informational

Each variant sets --btn-color-background, --btn-color-border and --btn-color-text together. The text colour always comes from the matching --color-text-on-* semantic token, so contrast is preserved when the underlying colour is overridden. That pairing is the reason to change --color-brand rather than --btn-color-background when rebranding.

Overlays

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

The shared panel skeleton

.modal and .drawer are the same panel. Same structure (header, content, footer), same open and closed contract, same backdrop. They differ only in where they sit: modal centres them, drawer sticks them to an edge.

components/panel.css owns every rule. The two variants are pure configuration: modal.css and drawer.css declare nothing but --panel-* tokens.

There is no .panel class to apply. The file targets :where(.modal, .drawer) directly, so the skeleton arrives with either variant class. panel names the shared concept and the token namespace, not a class.

Content

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

`.alert`

An inline notification block.

<div class="alert alert-info">
 <p class="alert-heading">Heads up</p>
 <p>Your changes were saved.</p>
</div>

Variants: .alert-primary, .alert-secondary, .alert-brand, .alert-neutral, .alert-dark, .alert-light, .alert-success, .alert-danger, .alert-warning, .alert-info.

Each sets the background, border and text colour from the matching -muted and -strong semantic tokens, so the pairing stays legible if the underlying colour changes.

Two behaviours are worth knowing. --color-link is reassigned to the alert’s own text colour, so links inside an alert do not fall back to the page link colour against a tinted background. And an alert whose first child is an .icon, with no .alert-heading, switches to a horizontal layout automatically.

Navigation

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

`.nav`

The base navigation list, vertical by default.

<ul class="nav">
 <li><a href="/">Home</a></li>
 <li><a href="/about">About</a></li>
</ul>

Works on ul or ol. Direction is set by context, not by a modifier class: a header lays its nav out horizontally by setting flex-direction: row on it. That keeps the component free of layout variants that would only ever be used in one place.

`.nav-title`

A title within a navigation block, for labelling a group of links.

Embeds

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

`.embed`

A responsive container for third-party embeds, holding an aspect ratio so the page does not reflow once the iframe loads.

<div class="embed">
 <iframe src="https://..." title="Video title" allowfullscreen></iframe>
</div>

Accepts iframe, video, embed or object as its child. The ratio comes from --embed-ratio, which defaults to the video ratio token. Override it per instance for a square or portrait embed:

<div class="embed" style="--embed-ratio: 1">...</div>

Always give the iframe a title. It is the only accessible name an embedded frame has.

Forms

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

Form controls are styled by @uncinq/css-base, on the native elements themselves. There is no .input or .select class to apply.

This package adds only what css-base cannot: the layout around those controls.

`.form`

A responsive two-column grid that collapses to one column when there is not enough room.

<form class="form">
 <div>
 <label for="first">First name</label>
 <input id="first" type="text">
 </div>
 <div>
 <label for="last">Last name</label>
 <input id="last" type="text">
 </div>
 <div class="full">
 <label for="message">Message</label>
 <textarea id="message"></textarea>
 <p class="help">Markdown is supported.</p>
 </div>
 <div class="actions">
 <button class="btn" type="submit">Send</button>
 </div>
</form>

The column rule is worth reading once:

Utilities

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

`.scrollsnap`

Turns a grid into a horizontal carousel with snap points. Items keep their own width, the grid stops wrapping, and the row scrolls sideways, bleeding into the gutter so the next item peeks in.

<div class="items scrollsnap-md">
 <article class="card">...</article>
 <article class="card">...</article>
 <article class="card">...</article>
</div>

It is opt-in, applied to the element that owns the grid, so the same component is a carousel in one context and a plain grid in another.