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 object with its default values.

View Source on GitHub

scss$settings: (
  color-fallback: false,
  hyphens:  true,
  optimal-responsive-font-size: '2vw + 1rem',
  prefix: 'spruce',
  utilities: false
);

color-fallback

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

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

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

Turn on the color fallback:

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

hyphens

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

Turn off the hyphenation:

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

optimal-responsive-font-size

Optimal 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:

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

We added a simple formula: one value with a relative viewport unit (vw) to make it responsive and one value with a root-relative unit (to set up a minimum value, it never will be smaller than 1rem). You can specify any numerical value, but use quotations if you use an operation.

References

prefix

Spruce CSS uses this prefix for generating the custom properties.

Modify the prefix value:

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

Generated CSS custom properties:

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

View Source on GitHub

utilities

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.

Right now, you can globally turn them on using this snippet:

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

On this page