Post-Modern CSS Full-Page Reset
Write semantic HTML, get a styled page.
Install from npm:
npm i @davidsouther/jiffies-cssOr pull the stylesheet straight from a CDN:
<link
rel="stylesheet"
href="https://unpkg.com/@davidsouther/jiffies-css/jiffies-css-bundle.min.css"
/>Then write semantic HTML. Jiffies styles base elements, derives components from
the relationships between them, and reads ARIA roles to select between
modalities. The single dial for color is --brand-color; set it once and the
whole scheme derives. See DESIGN.md for the full design system — the
architecture, component contracts, and token surface — and
PHILOSOPHY.md for the rationale.
- Beautiful styles for semantic base elements
- Components via relationships of semantic elements
- Aria roles for selecting between component modalities
- Express DOM states in visual style
- User configuration via CSS Variables
- User extension with targeted layers
- Opinionated tables, whitespace, & nav
- Responsive typography & container layouts; flexbox & css grid native utilities
- Pure-CSS advanced components, including Accordions, Tabs, Cards, Tables, Forms, and more.
- Accessible & Responsive
Jiffies CSS uses modern CSS features.
- oklch() — every color is assembled here from parts.
- relative color syntax —
oklch(from var(--brand-color) <L> <C> h)derives every palette from the one seed. - @property — registers the toe tokens (
--_l-*) with a typed numeric value. - color-mix() — state layers (hover/active) mix a role with its surface.
- :has() — selects a parent by what it contains (page-ends, breadcrumbs).
- :is() / :where() — group variants;
:where()keeps reset/defaults at zero specificity. - @layer — the cascade order that makes the token contract win.
- pow() — the modular type scale is one
calc().
Four example themes ship with Jiffies CSS. Apply one by setting data-theme on <html>:
<html data-theme="canvas">| Theme | Character |
|---|---|
canvas |
Default. Poppins body, Libre Baskerville headers, soft corners, M3 elevation. |
bento |
Editorial grid. Inter throughout, tight tile geometry, surface-variant card fills. |
paper |
Print edge. Sharp corners, hairline ink borders, no shadows, no motion. |
neumorphism |
Soft extruded geometry. Paired light/dark shadows on a mid-gray plane; no flat borders. |
To build your own theme, see docs/themes.md. The short version: every
visual decision the built-in themes make is a CSS variable override in a single
:root { … } or :root[data-theme="name"] { … } block — no element selectors required.
Two kinds of override, two different places to put them.
Structural rule overrides go in @layer user. The user layer is reserved for
your rules and sits above the library layers, so you win on specificity without
fighting it:
@layer user {
/* a one-off rule the library does not ship */
article.callout {
border-inline-start: var(--size-small) solid var(--color-primary);
padding-inline-start: var(--size-medium);
}
}Token retuning should be UNLAYERED or in :root. Do not retune tokens
inside @layer user. The declared order is
@layer fns, reset, layout, content, component, utility, user, theme — user
sits below theme, so for a conflicting :root token a declaration in
@layer theme wins over the same token set in @layer user. Set the seed (and any
other Intent token) unlayered, where an unlayered declaration outranks every layer:
/* unlayered :root — outranks all @layers, including theme */
:root {
--brand-color: oklch(0.55 0.15 270);
}That one dial re-derives the whole scheme. See
DESIGN.md › @layer order for why theme is
last and what that means for token conflicts.
Dark mode follows the OS via prefers-color-scheme; each role reassigns to a
different tone of the same palette. A manual [data-theme] toggle is not built
in — OS-driven color schemes are the current, intentional behavior.
Details of the design system, how to theme and customize, are detailed in DESIGN.md.