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.