/sprucecss

An open-source, lightweight and modern CSS framework, design system built on Sass. Give your project a solid foundation.

Primary LanguageSCSSMIT LicenseMIT


Spruce CSS

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

Github release npm version Back-end License

The Spruce CSS logo, a minimalistic, low-level CSS framework caption and an abstract 3D illustration.

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

Customization

Sass

Elements

Components

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

Components

Sections

Pages

Templates

  • Spruce Docs - A simple documentation template made with Eleventy.

Contributing

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