Base styles that are utility classes or even mixins/functions but that are NOT tokens will all end up in assets/css/base-styles/.
These base styles are imported into every project
Components located in ./components/base-components are for imported into every project as well.
To see how styles are imported for every sub-project, check out their respective files at the root of assets/css.
Please remember to document any functions/utilities/mixins and follow the SASSDOC docs.
As stated in adding design tokens, styles generated from Design Tokens
will only every be included through maps.
There a few exceptions to this, which will be detailed below.
First let's take a look at the style types generated from tokens.
Spacings are generated through maps, but in certain cases, they are to be used
with mixins, to be sure not to deviate from predefined component spacings rules.
// use the following mixins for spacings
// apply to parent element for children
// vertical spacing (margins), uses values from component stack map
// only affects sibling elements
@include spacer-component-stack("sm");
// apply to parent element for children
// horizontal spacing (margins), uses values from component stack map
// every child gets a right margin except for the last one
@include spacer-component-inline("sm");
// apply to component for equal padding, uses values from component inset map
@include spacer-component-inset("sm");
// apply to component for greater horizontal padding,
// uses values from component inset map
// will not work if first argument is greater than second or if value oes not exist in inset map
@include spacer-component-inset-horiz-greater('sm','md');
// apply to component for greater horizontal padding,
// uses values from component inset map
// will not work if first argument is smaller than second or if value oes not exist in inset map
@include spacer-component-inset-vert-greater('md','sm');
// if only one horizontal padding or vertical padding is defined, use like so
// use the values from stack map for vertical margins
// use the values from inline map for vertical margins
// use the values from inset map for padding
.element {
padding: 0 map-deep-get($token-spacer-inset-map, "lg");
margin: 0 map-deep-get($token-spacer-inline-map, "lg");
}
.element {
padding: map-deep-get($token-spacer-inset-map, "lg") 0;
margin: map-deep-get($token-spacer-stack-map, "lg") 0;
}
// for any other cases you can use the spacer unit map
.element {
padding-top: map-deep-get($token-spacer-unit-map, "64");
}
Spacings also have specific utility classes generated from token sass maps. More info on that in the SASSDOC.
Spuerkeess Design System's grid comes with a few variations in its column spacings.
They are as follows
All columns have a vertical spacing that is equal to the horizontal spacing.
Row elements have a negative bottom margin to cancel out the columns' bottom margins.
The base grid system uses bootstrap's classes, with no changes. Use it like so.
<!-- Base grid -->
<div class="row">
<div class="col-6"></div>
<div class="col-6"></div>
</div>
<!-- Medium grid -->
<div class="row row-sm">
<div class="col-6"></div>
<div class="col-6"></div>
</div>
<!-- Small grid -->
<div class="row row-xs">
<div class="col-6"></div>
<div class="col-6"></div>
</div>
This part aims to shed light at how to define vertical spacing in a grid context versus component context.
As stated above vertical spacing is taken care of in any grid context through styles applied directly to the .row element and its .col children
As far as components a set of specific utility classes are to be used.
These utility classes are used to create vertical spacing between sibling elements,
mostly inside of components, or between elements of textual content.
As such they are only to be applied on parent elements as they only affect the children of an element they are applied to.
The list is as follows:
.sds-stackMin {}
.sds-stackMax {}
They can also be used in a broader context when using .row wouldn't make sense.
For example, giving spacing to content sections on a page.
Instead of adding a parent row and a col-12, inside of which you'd have to repeat the structure, just do this:
// use stack class for spacing between sections
<div class="sds-stackXl">
<section>
<div class="row">
<div class="col-6"></div>
<div class="col-6"></div>
</div>
</section>
<section>
<div class="row">
// use stack class for spacing between content inside col
<div class="col-6 sds-stackSm">
<h2>Title</h2>
<p>Description Text</p>
</div>
<div class="col-6"></div>
</div>
</section>
</div>
Each class has an exception child class that is applied when a different spacing is used for a specific element.
These exception classes are based on the token stack map.
[class*="sds-stack"] {
> * + *.sds-exceptionStackMin {}
> * + *.sds-exceptionStackMax {}
}
A lot of UI elements in S-Net are white "boxes" with rounded corners
The .sds-box utility class is used to give most of these elements their background and border radius.
The box utility class can be found in assets/css/base-styles/utilities/_frames.scss and has the follwing padding classes:
.sds-box {
// equal padding for box
.-insetMin {}
// equal padding for box
.-insetMax {}
}
Use these padding modifiers classes to give the box an equal padding on all sides.
If the box doesn't have equal paddings, apply the padding through the class of the component you are adding the box class to.
Example Usage:
.sds-exampleComponent {
padding: @include spacer-component-inset-vert-greater('md','sm');
}
// in this case, padding is applied on .sds-exampleComponent
// background color and border-radius on .sds-box
<div class="sds-exampleComponent sds-box"></div>