introduction #

Moss is a CSS framework and design system that's built around style variables, which are CSS custom properties and design tokens with additional capabilities and conventions.

Moss can be used with any website and JS framework. It exports one main stylesheet and a theme stylesheet, and it also exports the underlying CSS data, types, and helpers for more complex usage.

About Moss:

  • plain CSS
  • zero dependencies
  • exports one main stylesheet that can be optimized by other tools
  • also exports the underlying CSS data, helpers, and types
  • uses its own concept of style variables, a specialization of CSS custom properties and design tokens
    • variables are the main source of truth
    • each variable provides values to light and/or dark mode
    • includes optional utility and component classes that use the variables
  • themes are groups of variables
  • dark mode is a first-class concept in the system, not a theme, instead each theme can support light and/or dark color-schemes
  • includes a CSS reset that styles HTML tags directly with the variables
  • is agnostic to JS frameworks, for example usage see Themed in my Svelte UI library Fuz

The stylesheets:

  • 🗎 @ryanatkn/moss/style.css - the main stylesheet and CSS reset
  • 🗎 $routes/moss.css - local to your project and generated by gro_plugin_moss, includes only the utility classes your code uses
  • 🗎 @ryanatkn/moss/theme.css - or bring your own
  • optimizing the stylesheet is out of Moss's scope, but it's just CSS so it works with existing tools
    • I'm planning to include a Vite plugin to remove unused styles in my Svelte UI library Fuz
    • optimizing the stylesheet will become increasingly important as the variables and utility classes fill out

Moss is being made to support Zzz and my other projects that focus on end-users, so it'll grow relatively slowly as I encounter more usecases. It's hobby-ready but expect a lot of breaking changes. Feel free to take the code and ideas for your own purposes.

In the docs, you'll see I'm writing asides using "⚠️" with open questions and other discussion of uncertainties. Your input is appreciated in the GitHub issues, or other social media, on these and other topics, see contributing.md for more 🌿