sprucecss

Spruce CSS is an open-source CSS design system and framework built on Sass. It is distributed through npm and released under the MIT license, and positions itself as a low-level foundation that can be added to a project rather than a complete component kit. Characteristics described in the README and documentation: - Sass-based tooling: the framework is built around Sass variables, mixins and functions, and adopts the Sass module system, using @use with namespacing for imports. - Small utility surface: it deliberately relies on only a few classic utility classes and, according to the README, does not include a classical grid system. The project states the framework is relatively small (around 7 KB gzipped) with a small codebase and a smaller learning curve. - Aimed at CSS authors: the authors present Spruce as a good choice for people who prefer writing CSS rather than composing markup-heavy utility classes, describing it as the code they found themselves carrying manually from project to project. - Theming: themes are built with CSS custom properties, and dark mode support is included; other colour themes can be created in the same manner. - Separation of tools and output: the generated CSS is kept separate from the framework, so the variables, mixins and functions can be used without pulling in the generated styles. - Documentation themes: the docs cover accessibility and inclusivity, internationalization and print, alongside customization, Sass foundations and element pages for typography, tables, buttons, forms and media. - Components live elsewhere: drop-in UI components are maintained in a separate project, Spruce UI, rather than inside the core framework. Getting started: the README points to the sprucecss.com documentation, particularly the installation page, and notes the main change for existing Sass users is the newer module system. A companion Eleventy starter template (sprucecss-eleventy-starter) provides a boilerplate with a basic compile setup. Two further templates are listed: Spruce Docs, a documentation template made with Eleventy, and Root, an administration template with standard views and many components. Documentation and contribution: full documentation is hosted at sprucecss.com and maintained in a separate repository, with a contribution guide included in the docs. The README also links to the GitHub release, the npm package and a test workflow, and mentions a light/dark logo used in the project's own assets.