A minimalistic, low-level CSS framework
A low-level, lightweight and modern CSS system, authoring tool built on Sass. Give your project a solid foundation.
How to use Spruce CSS
Import the Spruce CSS library into your project.
@use 'dark-colors' as dark;
@use 'sprucecss/scss/spruce' with ( $colors: ( 'footer': ( 'background': hsl(215deg 100% 98%), ) ), $dark-colors: dark.$colors, $typography: ( 'font-family-base': #{'Open Sans', sans-serif}, 'font-family-heading': #{'Manrope', sans-serif}, ),);
Good to Know
Spruce CSS in nutshell.
Spruce CSS is small and tries not to be in your way. It gives you a solid foundation and utilities, but the only included components are forms (which you can opt out of).
It is for you if you like to handle your CSS/SCSS in separate files and write your code. It uses just a few helper classes; most components are drop-ins.
By modern, we mean it uses new CSS stuff sometimes at the expense of backward compatibility. Fortunately, nowadays, the new CSS features are released in bulk across different vendors.
With modern CSS, you can solve more with less code. It is around 1400 lines and weights a little, and you can choose what things you want to use to make it even smaller.
Using modern CSS to handle a dark theme or support a different writing direction (RTL) is more manageable. If you use Spruce CSS the intended way, you will be okay with a new theme or RTL support.
Everything on this documentation page or under the components supports them with just a little code.
Sass can help a lot when writing a CSS framework or using one. You can use Spruce as a standalone CSS file, too, but to maximalize its potential, we suggest Sass. For a simple compile setup, check out our related blog post.