Spruce CSS is an open-source, lightweight and modernish CSS design system, framework built on Sass. Give your project a solid foundation.
What is Spruce CSS? #
- It is a Sass-based, small framework that operates with just a few utility classes.
- It takes advantage of the Sass members: variables, mixins, and functions.
- It embraces Sass modules, so it uses @use and namespacing for import.
- Spruce is a good choice if you prefer writing CSS instead of HTML. It uses just a few classic utility classes.
- It is a relatively small (~7kb gzipped) framework with a smaller learning curve. The codebase is small but can add more to any project with the available mixins and functions.
- It is that bunch of code you keep manually carrying from project to project.
- It is themeable. You can create different themes using CSS custom properties like a dark one.
- The generated CSS code is separated from the framework. You can use only the tools (variables, mixins, functions) in your project without the generated styles.
- Include just a few components. For UI, we have a separate project named Spruce UI, where you can find drop-in components.
- It comes with dark-mode (or any theme mode) support. It uses CSS custom properties, so it isn’t that hard to create a new color theme.
- It doesn’t come with a classical grid system.