A minimalistic, low-level CSS framework
A low-level, lightweight and modern CSS design 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.
If you like to handle your CSS/SCSS in separate files and write your code, this tool is for you. 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 1000 lines and wights a little. Also, 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.