Settings

In Spruce CSS, the settings are global options controlled through a Sass map.

You can access any setting with the setting() helper function. Below, you can see the $settings map (object) with its default values.

View Source on GitHub

@use 'sprucecss/scss/spruce' with (
  $settings: (
    'color-fallback': false,
    'css-custom-properties': false,
    'html-smooth-scrolling': true,
    'hyphens': true,
    'optimal-responsive-font-size': '2vw + 1rem',
    'optimal-spacer-size': '5vw',
    'prefix': 'spruce',
    'print': false,
    'scaler': 15,
    'utilities': (
      'display': true,
      'typography': true,
    ),
  ),
);

Setting the color-fallback key to true, you can turn the color fallback when using color() function.

// Without fallback
body {
  // color: color(text);
  color: var(--spruce-base-color-text);
}

// With fallback
body {
  // color: color(text);
  color: var(--spruce-base-color-text, #474d52);
}

Turn on the color fallback:

@use 'sprucecss/scss/spruce' with (
  $settings: (
    'color-fallback': true,
  ),
);

By default, Spruce doesn't generate unnecessary CSS variables only for the colors. Turning this option to true, you will get more CSS custom properties (for example, for buttons and inputs) that you can control directly without compiling.

@use 'sprucecss/scss/spruce' with (
  $settings: (
    'css-custom-properties': true,
  ),
);

Turn off the smooth scrolling (scroll-behavior: smooth;) on the html element. You maybe need this because you work with a SPA, and it interferes with its transitions.

@use 'sprucecss/scss/spruce' with (
  $settings: (
    'html-smooth-scrolling': false,
  ),
);

By default Spruce uses a simple hyphenation setup which you can find here.

Turn off the hyphenation:

@use 'sprucecss/scss/spruce' with (
  $settings: (
    'hyphens': false,
  ),
);

Optimal responsive font size used at font-size() and responsive-font-size() function which is used in a clamp() function as the middle value.

Using the mentioned functions, you can modify this value per call too. A global fallback is a much-needed thing here, but we need to fine-tune it uniquely in some cases (like bigger sizes).

Modify the optimal font-size value:

@use 'sprucecss/scss/spruce' with (
  $settings: (
    'optimal-responsive-font-size': '5vw + 1',
  ),
);

• font-size()
• responsive-font-size()
• clamp()

Optimal spacer size used at spacer-clamp() function which is used in a clamp() function as the middle value.

Using the mentioned function, you can modify this value per call too. A global fallback is a much-needed thing here, but we need to fine-tune it uniquely in some cases (like bigger or smaller sizes).

Modify the optimal spacer size value:

@use 'sprucecss/scss/spruce' with (
  $settings: (
    'optimal-spacer-size': '5vw',
  ),
);

• spacer-clamp()

Spruce CSS uses this prefix for generating the custom properties.

Modify the prefix value:

@use 'sprucecss/scss/spruce' with (
  $settings: (
    'prefix': 'my-custom-prefix',
  ),
);

Generated CSS custom properties:

:root {
  --spruce-alert-color-danger: #db2929;
  --spruce-alert-color-info: #00a1d6;
  --spruce-alert-color-success: #00a854;
  --spruce-alert-color-warning: #f2ca26;
}

You can also set null value to remove them.

View Source on GitHub

Spruce comes with a small set of print styles. To turn them on, set the print value to true.

@use 'sprucecss/scss/spruce' with (
  $settings: (
    'print': true,
  ),
);

A global setting for the scaler value used by the font size functions.

@use 'sprucecss/scss/spruce' with (
  $settings: (
    'scaler': 15,
  ),
);

We use just a few classical utility classes. We don’t plan to add too much in the future, but it can change. If we create more, it sure will always be opt-in.

@use 'sprucecss/scss/spruce' with (
  $settings: (
    'utilities': (
      'display': true,
      'typography': true,
    ),
  ),
);

You can find the complete list of utilities on GitHub.