sprucecss

Spruce CSS is an open-source, lightweight and modernish CSS design system, framework built on Sass. Give your project a solid foundation.

What is Spruce CSS?

• It is a Sass-based, small framework that operates with just a few utility classes.
• It takes advantage of the Sass members: variables, mixins, and functions.
• It embraces Sass modules, so it uses @use and namespacing for import.
• 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 (~7kb gzipped) 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.
• It is themeable. You can create different themes using CSS custom properties like a dark one.
• The generated CSS code is separated from the framework. You can use only the tools (variables, mixins, functions) in your project without the generated styles.
• Include just a few components. For UI, we have a separate project named Spruce UI, where you can find drop-in components.
• It comes with dark-mode (or any theme mode) support. It uses CSS custom properties, so it isn’t that hard to create a new color theme.
• It doesn’t come with a classical grid system.

How to start with Spruce?

Firstly, we suggest checking out the documentation, precisely the installation page.

There is nothing new if you previously used Sass unless you don’t know the newer module system.

We made a Spruce CSS Eleventy Starter, a boilerplate starter template based on the popular static site generator 11ty. It includes a basic compile setup and, of course, Spruce CSS. You can find more information about it on GitHub.

Documentation

For the complete documentation, please visit our site at sprucecss.com. You can edit it at our separate repository.

Getting Started

• Introduction
• Installation
• Structure and Code
• Sass
• Inclusivity and Accessibility
• Internationalization
• Print
• JS
• Contribution
• Appendix

Customization

• Variables
• Settings
• Themes

Sass

• Colors
• Variables
• Mixins
• Functions

Elements

• Generators
• Typography
• Tables
• Buttons
• Forms
• Media

Components

This collection of reusable user interfaces aims to help you create more coherently with Spruce CSS.

Templates

• Spruce Docs - A simple documentation template made with Eleventy.
• Root - A straightforward administration template with standard views and lots of components.

Contributing

Thank you for considering contributing to Spruce CSS! The contribution guide can be found in the documentation.

Changelog

v2.3.2 (2024-08-20)

What's Changed

• FIX transition: set a fallback default CSS custom property if user has reduced motion.
• $form-control: add font-family property.
• $form-label: add text-transform property.
• $form-switch: add separate colors.