Including Spruce CSS in your project is an easy job. First, you must install it (the best with npm) and set up the Sass compile. Second, you need a quick config setting and are good to go.

A config setting is needed to set your custom values and generate Spruce’s styles.

We can utilize Sass’s newer index file feature.

Create a config folder inside your scss folder. We need an _index.scss, a _config.scss, and a _styles.scss file in this folder. Inside the _index.scss file, we forward the others to our main entry point (that we compile into a single CSS file) main.scss, which is in the root of the scss folder.

scss
.
└── scss/
├── config/
│ ├── _index.scss
│ ├── _config.scss
│ └── _styles.scss
└── main.scss

You can see this file structure in action at our Spruce CSS Starter Kit.

_index.scss

In this file, we just forward all of the config files.

scss
@forward 'config';
@forward 'styles';

_config.scss

Inside the _config.scss file, we set our Spruce CSS customizations as you see under the settings and variables.

scss
@use 'sprucecss/scss/spruce' with (
$colors: (
card: (
background: hsl(0, 0%, 100%),
border: hsl(220 32% 87%)
)
)
);

_styles.scss

Inside the _styles.scss file, we set the generators. Usually, this means the generate-content and generate-form, but we can do it any way we want.

scss
@use 'sprucecss/scss/spruce';
@include spruce.generate-content;
@include spruce.generate-form;

main.scss

For the complete picture, we include the main file here, where the first step is loading the config.

scss
@forward 'config';
// @forward 'components';

The Advantages of This Structure

  • You separated every config-related code inside one folder, which is always nice.
  • For example, you can easily extend this structure in the future if you need another theme, like a dark one.
  • You can load the config in multiple files, which are usually handy (or just the _config.scss).