introduction #

fuz_css is a semantic-first CSS framework and design system. Semantic HTML looks finished with zero classes: headings, links, buttons, forms, tables, and callouts come styled, and block elements space themselves. Themes are a handful of knobs, not a stylesheet: hues, intents, lightness curves, and scales re-derive every color and size in plain CSS, and the contrast, gamut, and ramp-order checks the shipped themes pass are an API for checking your own. See the themes and try the editor.

The Vite plugin generates one stylesheet with the theme variables, base styles, and utility classes your code uses, for Svelte, React, Preact, Solid, and plain HTML. Without a build step, link the package's two plain stylesheets. For companion Svelte components see fuz_ui.

More at the docs and repo.

Design details
#

plain CSS
exports a reset stylesheet with semantic defaults that styles HTML elements, and also exports the underlying data, helpers, and types for open-ended usage
supports themes as sets of style variables, baked in at build time or swapped at runtime; dark mode isn't a theme but a color scheme any theme can support
supports optional utility classes with four types (token, keyword, composite, CSS-literal) and modifiers for responsive, state, color-scheme, and pseudo-elements
uses its own concept of style variables, a specialization of CSS custom properties and design tokens that integrate with the other systems (e.g. the reset stylesheet and token classes use variables, and themes are groups of variables)
the stylesheets work with any framework and plain HTML; utility class generation supports HTML/JS/TS, Svelte, and JSX - see the utility class framework support, and for the companion Svelte integration see ThemeRoot in fuz_ui
see the comparison to alternatives to understand fuz_css relative to TailwindCSS and UnoCSS

Usage
#

npm i -D @fuzdev/fuz_css

Add the Vite plugin, then import its virtual module once, from your root layout or entry file. It generates the theme variables, base styles, and utility classes your code uses:

// vite.config.ts
import {vite_plugin_fuz_css} from '@fuzdev/fuz_css/vite_plugin_fuz_css.ts';

export default defineConfig({plugins: [sveltekit(), vite_plugin_fuz_css()]});

// src/routes/+layout.svelte, or your entry file
import 'virtual:fuz.css';

See setup for SvelteKit, React, Preact, Solid, and plain HTML, and for linking the stylesheets without a build step.

fuz_css sets the root font size to 62.5%, so 1rem is 10px - see root font size.

Browser support
#

The shipped CSS needs Chrome or Edge 120, Firefox 118, or Safari 16.2 - Safari 16.4 if you use responsive modifier classes like md:, which emit media range syntax.

There are no fallbacks. Every rule sits in a cascade layer ( @layer), the color scales are computed in CSS with oklch(), calc(), and pow(), and color-mix() drives button fills, shadows, and the placeholder color. pow() sets the Chrome and Firefox floors: a browser without it keeps the page background and color scheme (the ends of each scale don't use it) but loses every stop between, which carry the text, border, and accent colors. A browser without cascade layers drops every rule, leaving unstyled HTML.