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

Import the two required stylesheets:

import '@fuzdev/fuz_css/style.css'; import '@fuzdev/fuz_css/theme.css'; // or bring your own

For utility classes, see the classes reference which covers the Vite plugin and alternative Gro generator.

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