introduction #

Moss is a CSS framework and design system that's built around style variables, which are design tokens/CSS custom properties with particular 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.

Details:

• plain CSS
• zero dependencies
• exports one main stylesheet that doubles as a reset with basic HTML tag styles
• exports a basic theme that can be replaced with your own
• also exports the underlying CSS data, helpers, and types, which can be used in many ways, including outputting an optimized utilities class file
• 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
• 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
• 🗎 @ryanatkn/moss/theme.css - or bring your own
• 🗎 $routes/moss.css - a reference implementation using Moss' helpers that includes only the utility classes your code uses, generated by Gro's gro_plugin_moss (you may want to implement this in your own build system if you don't use Gro)
• There are no tools yet for optimizing away unused variables, so style.css and theme.css have some bloat.

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 🌿