Spruce is a Sass-based minimalistic CSS framework that helps us get the foundation right and manage multiple projects better.

By minimalist, we mean that it contains only the bare minimum needed for a complex system. Besides the form elements, there aren’t any classical components in it. The generated CSS is relatively tiny, somewhere around +1000 lines of code (it uses normalize.css, which takes up +300 lines of code). Although it seems small, it isn’t. Spruce CSS uses Sass with many variables, mixins, and functions to ease the work.

What Spruce CSS Wants to Be?

  • It wants to be a little bit better with each release.
  • It wants to be minimal and small, with just the necessities for any project.
  • It wants to be modern. Defining modern is challenging in a constantly changing environment, but the essence here is to follow the new things in CSS.
  • It wants to separate the basic framework from a UI or component library. For UI, we plan to do a separate project named Spruce UI.
  • It wants to be semantic and follow accessibility best practices where possible.
  • It wants to do less (we will see if it actually happens).

Spruce UI will be a separate sister project of Spruce CSS, where you will find pre-built components. We plan to start to work on it at the end of this year (2022).

What Doesn’t Spruce Wants to Be?

  • We don’t want to compete or compered with other CSS frameworks. We think almost all of them are great - we learn(t) a lot from them. Besides, it all has its weakness and greatness, too, like Spruce CSS.
  • Although it has some design opinion, it is not something to help you design (User Interfaces). The goal is to give you the correct patterns and a small system to help you create manageable projects in the long run; the UI is your job.
  • Spruce CSS is just a tool. It can help you, and it will, but alone it can’t make your code better. You have to do your homework.

Who is Spruce For?

Choosing a CSS framework is not an easy task. Let us help you with why you should select Spruce:

  • 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 framework with a smaller learning curve. The codebase is small, but it can add more to any project with the available mixins and functions.
  • You like Sass. We think it is great, but you have to know what you are doing.
  • It is themeable. You can create different themes using CSS custom properties like a dark one.

Why Make Another CSS Framework?

As you may know, there are a great many CSS frameworks. Everybody can choose one that suits their work of style or project requirements. So why make another one? It is certainly not because we can do it better but because we want to do it our way.

We are sure everybody uses a CSS system; it can be a complete framework or a set of custom utilities. Everyone uses some subset for the new projects as we do. But managing it is something that will be a burden after a time. So why not outsource it, make it better, create a package, and document it well?

It Is Opinionated

Each system is opinionated but on a different level; this is valid for Spruce too. We don’t want to vote for (strictly) any particular solution (because there are always more than one), but we will show you what we think is the best for us (and maybe for you too). We don’t believe there is a good or bad solution, but we can learn from any of them.

We Left the Grid Out

One controversial decision we made with Spruce is to leave a classical grid system out. Because of the late CSS layout model developments like Flexbox and Grid, we think it can be eliminated; this doesn’t mean that we won’t show you how to make layouts with ease, but we try to make it the modern way.

Color Purple

Choosing a “brand” color is hard because all of them are taken. After we realized that all of our stuff uses blue, we made the boldest choice and picked purple. We swear we didn’t copy the color from Bootstrap, unlike many other things. 😐