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.
scss$settings: ( color-fallback: false, html-smooth-scrolling: true, hyphens: true, optimal-responsive-font-size: '2vw + 1rem', optimal-spacer-size: '5vw', prefix: 'spruce', utilities: false, print: false);
color-fallback
Setting the color-fallback
key to true, you can turn the color fallback when using spruce.color()
function.
scss// Without fallbackbody { // color: spruce.color(text); color: var(--spruce-base-color-text);}
// With fallbackbody { // 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 ));
html-smooth-scrolling
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.
scss@use '~sprucecss/scss/spruce' with ( $settings: ( html-smooth-scrolling: false ));
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 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:
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
optimal-spacer-size
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:
scss@use '~sprucecss/scss/spruce' with ( $settings: ( optimal-spacer-size: '5vw' ));
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;}
You can also set null
value to remove them.
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 ));
Spruce comes with a small set of print styles. To turn them on, set the print
value to true
.
scss@use '~sprucecss/scss/spruce' with ( $settings: ( print: true ));