introduction #

Moss is a CSS framework and design system that can be used with any website and JS framework. It's built around style variables, which are CSS custom properties and design tokens with additional capabilities and conventions.

About Moss:

• plain CSS
• zero dependencies
• exports one main stylesheet that can be optimized by other tools
• also exports the underlying CSS partials, helpers, types, and data
• 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, which is composed of:
  • 🗎 @ryanatkn/moss/style_reset.css - required
  • 🗎 @ryanatkn/moss/style_utilities.css - optional
  • 🗎 @ryanatkn/moss/style_components.css - optional
  • 🗎 @ryanatkn/moss/style_animations.css - optional
• 🗎 @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 Discord, the GitHub issues, or other social media, on these and other topics, see contributing.md for more 🌿