introduction #

fuz_css is a semantic-first CSS framework and design system. It styles elements by default and integrates custom properties, themes, and utility classes into a complete system. It ships two plain CSS files, the base style.css and replaceable theme.css, that work with any framework and plain HTML, and its class generator supports HTML/JS/TS, Svelte, React, Preact, Solid, and other JSX frameworks. For more see the framework support docs, and for the companion Svelte components see fuz_ui.

The only required parts are a reset stylesheet with the semantic defaults and a replaceable theme stylesheet containing the variables used in the reset, and these require no dependencies. There's also utility classes for composition and convenience with a Vite plugin, and the library exports the full API for complex usage.

More at the docs and repo.

Design details
#

plain CSS
minimal dependencies, all optional (none needed if you only use the stylesheets)
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 three types (token, 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

Use the Vite plugin or Gro generator for bundled CSS that includes theme variables, base styles, and utility classes in a single import. Add the plugin to your Vite config:

// 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()]});

Then import it, normally from your root layout:

// bundled mode (recommended)
// includes only used base styles, variables, and utilities
import 'virtual:fuz.css'; // Vite plugin
// or
import './fuz.css'; // Gro generator, written to the filesystem

That single import is all most projects need, since it already holds the base styles and theme variables your code uses. Projects managing their own theme or base styles can use utility-only mode instead, importing the full stylesheets and turning the generated ones off so neither layer ships twice:

// utility-only mode - set `base_css: null, variables: null` on the plugin
import '@fuzdev/fuz_css/style.css'; // all base styles
import '@fuzdev/fuz_css/theme.css'; // all variables
import 'virtual:fuz.css'; // used utilities only

See the classes reference for setup details and configuration options.

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, and 16.5 for color-scheme modifier classes like dark:, which emit nested CSS.

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.