More plugins on scope(), each a package of its own with its rules and limits in its README. Import them with the attribute, like cssints.
| Package | Members | What it does |
|---|---|---|
@cssints/fluid |
fluid(min, max, { from?, to?, zoom? }), fluid.container(...) |
A clamp() that grows between two widths, computed at build time; a range that fails WCAG 1.4.4 is a build error |
@cssints/layout |
stack(), cluster(), sidebar(), switcher(), cover(), autoGrid() |
Every Layout primitives as chain members |
@cssints/fonts |
font(family, { provider, ... }) → .family(), .trim() |
@font-face and a metric-matched fallback face; cap-height trimming by text-box, else capsize's margins |
@cssints/reset |
reset({ media?, prose? }) |
A modern reset in a top-level @layer reset declared before the engine's, below every style |
@cssints/tokens |
/open-props, /radix, /flexoki, /reasonable-colors |
DTCG data for createTokens |
@cssints/gradient |
gradient(kind, direction, from, to, easing?, stops?) |
Eased colour stops mixed in oklab at build time |
@cssints/motion |
motion().preset().duration().delay().easing() |
Animation presets over keyframes(), with reduced motion |
@cssints/squircle |
squircle().radius() |
corner-shape: squircle, else a CSS mask of the same shape |
@cssints/reveal |
reveal().preset().range().duration().easing() |
motion's entrance presets on animation-timeline: view(); for other targets a script plays it once on entry (delivered by the runtime) |
@cssints/stuck |
sticky().top(), stuck(styles), stuck("bottom")(styles) |
Styles inside a sticky element while it is stuck, by @container scroll-state(); for other targets an IntersectionObserver (delivered by the runtime) |
@cssints/balance |
balance(), pretty() |
text-wrap: balance / pretty; for targets without balance a script balances the lines (delivered by the runtime) |
@cssints/masonry |
masonry().columns().gap() |
display: grid-lanes, else CSS columns (top to bottom per column) |
@cssints/placeholder |
placeholder(path, { mode? }) |
An <image> from a JPEG or PNG read at build time: a gradient of its colours laid out as the image, or a tiny thumbhash PNG |
@cssints/ramp |
ramp(base, { mode, steps | ratios, background }), overrides(ramp) |
An OKLCH palette as DTCG data for createTokens; the contrast mode meets each ratio against its background |
@cssints/rybitten |
color(hue, { cube }), wheel(steps, { cube }), shades(hue, lightness), overrides(group) |
RYBitten's red-yellow-blue colours (36 historical cubes) as DTCG data for createTokens: a hue, a wheel of hues, a hue at several lightnesses |
@cssints/skeleton |
skeleton().radius().color().highlight() |
Loading placeholders whose shimmer is in phase across the page (one clock on :root), static under reduced motion |