Spruce is a Sass-based, minimalistic CSS framework to get the foundation right for any web-based project. One markup, many looks: with version 3, the same HTML can wear eight different design styles.
By minimalism, we mean it contains only the bare minimum needed for a complex system. It styles the native elements (typography, tables, forms, details, dialog, progress) and buttons; there aren’t any classical components in it. Those live in Spruce UI.
The generated CSS is small (~9 KB gzipped), around 2,000 lines of code, including normalize.css (about 200 lines). Every new feature of v3 that adds a lot of CSS, like the styles and the dark mode, is opt-in.
- Design styles: restyle the same markup as minimal, brutalist, soft, glass, corporate, playful, editorial or terminal, or create your own.
- Built-in dark mode with a complete default palette.
- New elements: details and dialog, progress and meter, code blocks and keyboard keys.
- More options everywhere: new button variants, table modifiers, form sizes, shadow, radius and z-index tokens.
- Layout and text utilities (opt-in).
- AI skills for coding assistants.
Upgrading? Read the upgrade guide.
- Make it 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 have a separate project named Spruce UI, where you can find drop-in components.
- Follow semantic and accessibility best practices when possible; this doesn’t mean much in the core library but will be under the UI.
- 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 strengths 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.
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 (~9 KB gzipped) framework with a smaller learning curve. The codebase is small, but you can do a lot more 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. It has a built-in dark mode, and with the style presets your project can switch its whole look at runtime.
As you may know, there are many CSS frameworks (hundreds of them, and 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?
