Version 2 is out, check out what is changed!

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.

config/_config.scss
@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},
),
);

Documentation

Learn about Spruce CSS through our extensive documentation.

Components

Explore our extensive UI library built with Spruce CSS.

Blog

Read about front-end development and concepts of Spruce CSS.

Good to Know

Spruce CSS in nutshell.

Find us on GitHub

Did you found a bug? Have an idea or a question? Open an issue to help us develop the project.