Spruce CSS Introduction

Let me introduce you to Spruce CSS, another CSS framework. Spruce is our very own lightweight design system built on Sass.

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.

For a more comprehensive introduction, please visit our related documentation page!

Why Make Another Framework?

We have not used any framework recently (for CSS), and it was a burden to manage multiple projects. Not using an extensive framework is great because you spare yourself the complications, but it is terrible because you miss basics like a variable, utilities, helpers, and a typography system.

Copying our code to the next project was unmanageable, so we thought, why not create our system and publish it on npm.

Is Spruce CSS Any Good?

Well, this is the question that we are not meant to answer. Of course, we think it is useable; this is how we work. But still, it is a new system with errors and rough edges.

We are sure that it will be better and that it can be helpful for many developers.

How to start with Spruce?

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.

Version 1.0

Spruce is right now under beta with the current version of 0.5. For the 1.0 version – we think – there isn’t much work, but now we want to gather some feedback if possible (and make the possible changes before the major release).

We use it in production in multiple cases.