Introduction

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

Minimalism means 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 +1400 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 and use its code on demand.

We call it a framework because we didn’t know how to call it. It is clearly a framework of some kind but undoubtedly a smaller one.

Our Goals with Spruce CSS

• Make it a little bit better with each release.
• Keep it small, with just the necessities for any project.
• Keep it modern. Defining modern is challenging in a constantly changing environment, but the essence here is to follow the new things in CSS; this is a number one priority because it helps us learn and utilize the new stuff.
• Include just a few components. For UI, we plan to do a separate project named Spruce UI. Our main goal is to make a cool pattern and template library, but it is a long road.
• Follow semantic and accessibility best practices when possible; this doesn’t mean much in the core library but will be under the UI.

Some Thoughts

• We don’t want to compete or be compared with other CSS frameworks. We think almost all of them are great - we learn(t) a lot from them. Besides, they have weaknesses and greatnesses, too, like Spruce CSS.
• Although it has some design opinions, 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. As with any framework or tool, your knowledge is what truly matters.

Who is Spruce For?

Choosing a CSS library is a challenging 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 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.
• You like Sass. We think it is great, but you must know what you are doing. Although it uses Sass, it generates custom CSS properties where needed.
• 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 many CSS frameworks (hundreds of them, and a many are not maintained today). Everybody can choose one that suits their work 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 want to be in control and make decisions.

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 new projects, as we do. But managing it is something that will be a burden over 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 is 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

We made a controversial decision with Spruce 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. Unlike many other things, we swear we didn’t copy the color from Bootstrap. 😐