sprucecss

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.
It is relatively small. Right now just over 1000 lines, but it will expand in the future. As we see right now, the maximum is somewhere near 2000 lines of code.
It is modern. By modern, we mean using the newest CSS features like the grid, aspect-ratio, logical properties, etc.
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.
It uses just a few classical components (form elements mostly). We plan a separate component library for Spruce named UI.
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.

Firstly, we suggest checking out the documentation, precisely the installation page.

There is nothing new if you previously used Sass unless you don’t know the newer module system.

To start a new Spruce-based project (or experiment), we suggest using our starter kit containing a simple Sass build environment.

Simple examples for how to use and how to get started with Spruce CSS.

Authentication: A simple login example where you can check out the form styling and some usage of Spruce’s mixins and functions.
Article: A centered, breaking-out article layout for seeing the typography.

For complete the documentation, please visit our site at sprucecss.com.

Thank you for considering contributing to Spruce CSS! The contribution guide can be found in the documentation.