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

• Settings
• Themes

Sass

• 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.

Components

• Accordion Card
• Accordion List
• Alert
• Auth Form
• Breadcrumb List
• Container
• Cookie Consent
• Invoice
• Pagination
• Post Author
• Post Card
• Preloader
• Site Navigation
• Skip Link
• Theme Switcher

Sections

• Feature
• Gallery
• Post Content
• Post Heading
• Post List
• Site Footer
• Site Header

Pages

• Auth
• Post

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.0 (2023-12-17)

What's Changed

• NEW $form-fieldset: add legend-font-family property.
• NEW $typography: add letter-spacing-heading property.
• NEW $colors: add 'strong option under base to customize the <strong> element's color.
• FIX layout-center() mixin: add inline-size: 100%;.
• IMPROVEMENT layout-grid(), layout-flex(), layout-sidebar() mixins: enable multiple $gap value like 'm:l' to control both block and inline values.
• IMPROVEMENT spacer() function: enable multiple value shorthand like 'm:l' to control both block and inline values.
• BREAKING CHANGE Remove the transition() function (you can migrate overt config() function or transition() mixin.).
• IMPROVEMENT transition() mixin: enable multiple values for property with quotes.
• NEW short-ring() mixin: add a new mixin as a shorthand to access the two basic ring styling on focus quickly (input, button).
• Modify the defaults for config('border-radius-sm', $display) and config('border-radius-lg', $display).