Viewing: Utilities

Utility classes are used to define or even overwrite properties defined earlier in the cascade. This is the only place '!important' is allowed!

block

display as blockdisplay as inline-block
<!-- display: block; -->
<span class="sdi-block">display as block</span>

<!-- display: inline-block; -->
<span class="sdi-inline-block">display as inline-block</span>

When to use

In rare cases it is nessecary to apply margins to inline elements, which won't work. In that case apply sdi-block or sdi-inline-block

Last modified: 17 Apr 2019

full-width

<div class="sdi-full-width">
</div>

When to use

We can add sdi-full-width to any element, we want to span the full-width. Regardless of the container-width.

Last modified: 15 Apr 2019

hidden

<!-- hide using js -->
<div class="sdi-js-hidden">
</div>

<!-- hide only visually (not for sreenreaders) -->
<div class="sdi-v-hidden">
</div>

<!-- always hide -->
<div class="sdi-hidden">
</div>

<!-- visible only on mobile -->
<div class="sdi-hidden--m-up">
</div>

When to use

The are several ways of hiding elements. sdi-js-hidden should only be used, when it can be toggled with js.

Last modified: 15 Apr 2019

margin

<!-- margin at bottom -->
<div class="sdi-margin-bottom">
</div>

<!-- doubled margin at bottom -->
<div class="sdi-margin-bottom--200">
</div>

<!-- halfed margin at bottom -->
<div class="sdi-margin-bottom--50">
</div>

<!-- quarter margin at bottom -->
<div class="sdi-margin-bottom--25">
</div>

<!-- NO margin at bottom -->
<div class="sdi-margin-bottom--0">
</div>

When to use

These are helpers to add to elements, when we're in need for more than the default margin.

Last modified: 17 Apr 2019

sticky

This sticks to it's parent
<!-- stick something using browser behavior -->
<div class="sdi-sticky">This sticks to it's parent</div>

When to use

Adding this class to an element, it becomes sticky, using the display: sticky property. Works without js in modern browsers. If nessecary we could use feature-detection to add this behavior to older browsers via js.

Last modified: 17 Apr 2019

⇧