breakpoint
With the breakpoint
mixin, you can create a min-width
based (mobile-first) breakpoint on a predefined breakpoint from the $breakpoints
map.
The predefined breakpoints are the followings:
scss$breakpoints: ( xs: 32em, sm: 48em, md: 64em, lg: 80em, xl: 90em, xxl: 110em);
Argument(s)
Name | Default Value | Description |
---|---|---|
$breakpoint | The name of the key from the $breakpoints map. | |
$logic | false | Any custom logic next to the min-width value connected with the “and” logical operator. |
Example(s)
scss.footer { display: block; align-items: center;
@include spruce.breakpoint(md) { // @media (min-width: 64em) display: flex; justify-content: space-between; }}
scss.footer { display: block; align-items: center;
@include spruce.breakpoint(md) { // @media screen and (min-width: 64em) display: flex; justify-content: space-between; }}
Button
btn-variant
Using the btn-variant
mixin, you can create a new button variant. First, you must declare the colors of the new button (background, foreground is required) in the $colors
map at the very first @use
of Spruce.
Argument(s)
Name | Default Value | Description |
---|---|---|
$type | primary | The name/prefix of the related colors under the btn map. |
Example(s)
Declare the colors of the button. The mixin will search for the keys under the btn object.
scss@use '~sprucecss/scss/spruce' with ( $colors: ( btn: ( custom-background: hsl(0, 0%, 95%), custom-foreground: hsl(0, 0%, 10%) ) ));
In many cases, declaring just the background and foreground color is enough. Spruce will generate the rest (hover states). But if you want to control more or use dark mode (where you want to overwrite the color values), you can be more specific.
scss@use '~sprucecss/scss/spruce' with ( $colors: ( btn: ( primary-background: hsl(261 52% 59%), primary-background-hover: hsl(261 52% 49%), primary-foreground: hsl(0 0% 100%), primary-foreground-hover: hsl(0 0% 100%), primary-shadow-focus: hsl(261 52% 59% / 0.25), ) ));
scss.btn--custom { @include spruce.btn-variant(custom);}
html<a href="https://conedevelopment.com" class="btn btn--custom btn--lg">Go to Cone</a>
btn-focus
The btn-focus()
is a small internal helper mixin to set up the focus state of the buttons. It is called by the btn-variant()
, and it accepts a color value (or a color variable).
Argument(s)
Name | Default Value | Description |
---|---|---|
$box-shadow | The color value of the box shadow. |
Example(s)
scss.btn--primary:focus { @include spruce.btn-focus(spruce.color(primary));}
Form
field-focus
The field-focus()
is a small internal helper mixin to set up the focus state of the form fields. We call it on the .form-control
and .form-check
classes.
Argument(s)
Name | Default Value | Description |
---|---|---|
$border | The color value of the border. | |
$box-shadow | The color value of the box shadow. |
Example(s)
scss.form-control:focus { @include spruce.field-focus( spruce.color(border-focus, form), spruce.color(shadow-focus, form) );}
field-disabled
The field-disabled()
is a small internal helper mixin to set up the disabled state on form fields. We call it on the .form-control
and .form-check
classes.
Argument(s)
Name | Default Value | Description |
---|---|---|
$background | The color value of the background. | |
$border | The color value of the border. |
Example(s)
scss.form-control:[disabled],.form-control:[disabled='true'] { @include spruce.field-disabled( spruce.color(background-disabled, form), spruce.color(border-disabled, form) );}
field-icon
The field-icon()
mixin is a getter function for form input backgrounds. Spruce CSS uses custom images (used as inline SVG) for various inputs (checkbox, radio, select, success, error states).
This mixin first replaces the given color value as a fill value on the SVG image then escapes it.
It is helpful for dark mode because we can’t pass a CSS variable to an inline SVG, so we have to overwrite it.
Argument(s)
Name | Default Value | Description |
---|---|---|
$icon | The name of the icon variable. | |
$color | The color value of the fill. |
Example(s)
scssselect { &:not([multiple]):not([size]) { @include spruce.field-icon( spruce.$select-image, spruce.color(select-foreground, form) ); }}
form-check
The form-check()
mixin is a helper to create custom checkboxes. It accepts three selectors and generates radio and checkbox styles.
Argument(s)
Name | Default Value | Description |
---|---|---|
$parent | The selector of the parent element. | |
$input | The selector of the input element. | |
$label | The selector of the label element. | |
$has-sizes | false | Turn on the sizes variants (*--sm , *--lg ). |
Example(s)
scss@include form-check('.form-check', '.form-check__control', '.form-check__label', true);
Layout
layout-center
With the help of the layout-center
mixin, you can center any element. It is most useful for the generic container element for the main layouts.
Argument(s)
Name | Default Value | Description |
---|---|---|
$gap | spruce.spacer(m) | The padding value on either side of the element. The value comes from the $spacers map. |
$max-width | spruce.$container-width | Set the max-width value of the element. |
Example(s)
scss.hero { &__container { @include spruce.layout-center( clamp(spruce.spacer(m), 5vw, spruce.spacer(l)) ); }}
layout-stack
Using the help of the layout-stack
mixin, you can classical stack layout where the elements are stacked under each other.
Argument(s)
Name | Default Value | Description |
---|---|---|
$gap | spruce.spacer(m) | The margin value between the elements. The value comes from the $spacers map. |
$width | false | Set width: 100%; on the stacked elements. |
$align | none | Set explicit align to the elements(none , left , right ). |
$important | false | Add !important on descandent elements to margin-block-start . |
$split | 0 | Split the elements vertically from the nth element. |
Example(s)
scssul { @include spruce.layout-stack(spruce.spacer(xs));}
layout-grid
With the help of the layout-grid
mixin you can create auto-fit grid layouts where you can determine the columns' min-width.
Argument(s)
Name | Default Value | Description |
---|---|---|
$gap | spruce.spacer(m) | The gutter value between the elements. The value comes from the $spacers map. |
$minimum | 12.5rem | The minimum value of the child elements where it automatically breaks. |
Example(s)
scss.docs-cards { &__inner { @include spruce.layout-grid(spruce.spacer(l), 20rem); }}
layout-sidebar
Using the layout-sidebar
mixin, you can create a two-column sidebar layout declaring the sidebar width explicitly.
Argument(s)
Name | Default Value | Description |
---|---|---|
$gap | spruce.spacer(m) | The gutter value between the elements. The value comes from the $spacers map. |
$sidebar-width | 18.75rem | The width of the sidebar element. |
Example(s)
scss.docs-template { @include spruce.layout-sidebar(spruce.spacer(l), 22rem);}
layout-flex
Using the layout-flex
mixin, you can create intrinsic flexbox grids with explicit column width.
Argument(s)
Name | Default Value | Description |
---|---|---|
$gap | spruce.spacer(m) | The gutter value between the elements. The value comes from the $spacers map. |
$width-variable | --col-width | The optimal width of the columns. |
Example(s)
scss.form-row--mixed { --col-width: 10rem;
@include spruce.layout-flex;}
Utilities
text-ellipsis
Crop text and display an ellipsis with multiline support where possible.
Argument(s)
Name | Default Value | Description |
---|---|---|
$number-of-lines | 1 | Multiline text cropping where supported. |
Example(s)
scss.crop-text { @include spruce.text-ellipsis(2); width: 20rem;}
visually-hidden
Hide something from the screen but keep it visible for assistive technology.
Example(s)
scss.sr-only { @include spruce.visually-hidden;}
scrollbar
Create natively styled custom scrollbars.
Argument(s)
Name | Default Value | Description |
---|---|---|
$thumb-background-color | spruce.color(thumb-background, scrollbar) | The color of the scrollbar handle. |
$thumb-background-color-hover | spruce.color(thumb-background-hover, scrollbar) | The color of the scrollbar handle on hover state. |
$track-background-color | spruce.color(track-background, scrollbar) | The background color of the scrollbar. |
$size | 0.5rem | The width or height of the scrollbar. |
$border-radius | spruce.$border-radius-sm | The border-radius of the scrollbar and handle. |
Example(s)
scsscode { @include spruce.scrollbar( $thumb-background-color: spruce.color(primary) ); background-color: transparent; border-radius: 0; display: block; overflow-x: auto; padding: spruce.spacer(xs) 0;}
clear-btn
Clear the default browser button styles.
Example(s)
scss.remove-button-styles { @include clear-btn;}
clear-list
Remove the list-style
, margin
, and padding
stylings from the element.
Example(s)
scssul { @include clear-list;}
a11y-card-link
Create better card component linking by only using the title’s link (and not the whole block). Please visit this article about cards by Heydon Pickering for more information about the technique.
Name | Default Value | Description |
---|---|---|
$link | The selector of the link element. | |
$at-root | false | Wheater output the link as a child of the parent component or at the root level. |
Example(s)
scss.card { @include spruce.a11y-card-link('.card__link', true); border: 1px solid spruce.color(border); border-radius: spruce.$border-radius-lg; padding: spruce.spacer(m);
&__link { color: spruce.color(heading); font-size: spruce.font-size(h3); font-weight: 700; text-decoration: none; }}
word-wrap
Break long strings of text.
Example(s)
scss.break-long-url { @include spruce.word-wrap;}