introduction #

fuz_css is a CSS framework and design system for semantic HTML. It styles elements by default and integrates custom properties, themes, and utility classes into a complete system. It's Svelte-first but works with plain HTML/JS/TS, 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.

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:

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

For projects managing their own theme or base styles, use utility-only mode with separate imports:

// utility-only mode - full package CSS, only used utilities import '@fuzdev/fuz_css/style.css'; // all base styles import '@fuzdev/fuz_css/theme.css'; // all variables import 'virtual:fuz.css'; // with base_css: null, variables: null

See the classes reference for setup details and configuration options.

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 with a basic theme stylesheet, 🗎 @fuzdev/fuz_css/theme.css, that can be replaced with your own -- dark mode is a first-class concept, not a theme; instead, each theme can support light and/or dark color-schemes
  • 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 Svelte, JSX, and TypeScript/JS -- see the utility class framework support, and for the companion Svelte integration see Themed in fuz_ui
  • see the comparison to alternatives to understand fuz_css relative to TailwindCSS and UnoCSS