OOOOPS. Your browser seems to be too old for this. Please update your browser.
Teutonic CSS
Use it

Magnificent modifier classes

The examples below are not very sexy looking, but you’ll get an overview on how you can tweak the design of most elements.

On this page

Margin

Sometimes your elements just need a little space on the outside. Use margin to separate the block from things outside it. Here are utility classes for all cardinal directions, plus combined horizontal and vertical helpers.

Example: ma-t_s — where the first letter m obviously stands for margin, while -t is for top and _s for the small size.

Syntax: .m{-direction}{_size}
SCSS: _margin.scss

Top

ma-t_xs
ma-t_s
ma-t_m
ma-t_l

Right

ma-r_xs
ma-r_s
ma-r_m
ma-r_l

Bottom

ma-b_xs
ma-b_s
ma-b_m
ma-b_l

Left

ma-l_xs
ma-l_s
ma-l_m
ma-l_l

Vertical

ma-v_xs
ma-v_s
ma-v_m
ma-v_l

Horizontal

ma-h_xs
ma-h_s
ma-h_m
ma-h_l
<h3 class="ma-t_l">Top</h3>
<div class="ma-b_m">
  <div class="docs-margin-helper bg-0 ma-v_xs"><div class="box text-mono text-clip bg-b ma-t_xs">ma-t_xs</div></div>
  <div class="docs-margin-helper bg-0 ma-v_xs"><div class="box text-mono text-clip bg-c ma-t_s">ma-t_s</div></div>
  <div class="docs-margin-helper bg-0 ma-v_xs"><div class="box text-mono text-clip bg-d ma-t_m">ma-t_m</div></div>
  <div class="docs-margin-helper bg-0 ma-v_xs"><div class="box text-mono text-clip bg-e ma-t_l">ma-t_l</div></div>
</div>
<h3 class="ma-t_l">Right</h3>
<div class="ma-b_m">
  <div class="docs-margin-helper bg-0 ma-v_xs"><div class="box text-mono text-clip bg-b ma-r_xs">ma-r_xs</div></div>
  <div class="docs-margin-helper bg-0 ma-v_xs"><div class="box text-mono text-clip bg-c ma-r_s">ma-r_s</div></div>
  <div class="docs-margin-helper bg-0 ma-v_xs"><div class="box text-mono text-clip bg-d ma-r_m">ma-r_m</div></div>
  <div class="docs-margin-helper bg-0 ma-v_xs"><div class="box text-mono text-clip bg-e ma-r_l">ma-r_l</div></div>
</div>
<h3 class="ma-t_l">Bottom</h3>
<div class="ma-b_m">
  <div class="docs-margin-helper bg-0 ma-v_xs"><div class="box text-mono text-clip bg-b ma-b_xs">ma-b_xs</div></div>
  <div class="docs-margin-helper bg-0 ma-v_xs"><div class="box text-mono text-clip bg-c ma-b_s">ma-b_s</div></div>
  <div class="docs-margin-helper bg-0 ma-v_xs"><div class="box text-mono text-clip bg-d ma-b_m">ma-b_m</div></div>
  <div class="docs-margin-helper bg-0 ma-v_xs"><div class="box text-mono text-clip bg-e ma-b_l">ma-b_l</div></div>
</div>
<h3 class="ma-t_l">Left</h3>
<div class="ma-b_m">
  <div class="docs-margin-helper bg-0 ma-v_xs"><div class="box text-mono text-clip bg-b ma-l_xs">ma-l_xs</div></div>
  <div class="docs-margin-helper bg-0 ma-v_xs"><div class="box text-mono text-clip bg-c ma-l_s">ma-l_s</div></div>
  <div class="docs-margin-helper bg-0 ma-v_xs"><div class="box text-mono text-clip bg-d ma-l_m">ma-l_m</div></div>
  <div class="docs-margin-helper bg-0 ma-v_xs"><div class="box text-mono text-clip bg-e ma-l_l">ma-l_l</div></div>
</div>
<h3 class="ma-t_l">Vertical</h3>
<div class="ma-b_m">
  <div class="docs-margin-helper bg-0 ma-v_xs"><div class="box text-mono text-clip bg-b ma-v_xs">ma-v_xs</div></div>
  <div class="docs-margin-helper bg-0 ma-v_xs"><div class="box text-mono text-clip bg-c ma-v_s">ma-v_s</div></div>
  <div class="docs-margin-helper bg-0 ma-v_xs"><div class="box text-mono text-clip bg-d ma-v_m">ma-v_m</div></div>
  <div class="docs-margin-helper bg-0 ma-v_xs"><div class="box text-mono text-clip bg-e ma-v_l">ma-v_l</div></div>
</div>
<h3 class="ma-t_l">Horizontal</h3>
<div class="ma-b_m">
  <div class="docs-margin-helper bg-0 ma-v_xs"><div class="box text-mono text-clip bg-b ma-h_xs">ma-h_xs</div></div>
  <div class="docs-margin-helper bg-0 ma-v_xs"><div class="box text-mono text-clip bg-c ma-h_s">ma-h_s</div></div>
  <div class="docs-margin-helper bg-0 ma-v_xs"><div class="box text-mono text-clip bg-d ma-h_m">ma-h_m</div></div>
  <div class="docs-margin-helper bg-0 ma-v_xs"><div class="box text-mono text-clip bg-e ma-h_l">ma-h_l</div></div>
</div>


<style>
  .docs-margin-helper {  border: 1px solid transparent; } /* avoid margin collaspe */
</style>

Negative margin

Sometimes you just want to break out. For instance: your page might be contained in a wrapping container, that comes with some margin or padding to the left and to the right. Or you want to have some fancy looking overlapping elements. The margin utility classes also contain a notation for a “minus margin”: just add a dash at the end of the margin class.

The class name is the same as for the standard margin classes, only that dash for minus is added at the end.

Syntax: .m{-direction}{_size}-
SCSS: _margin.scss

Here is some normal content.

Here is some break out content.

Here is some more normal content.

Here be dragons. This content is pulled up.

<div class="pa-b_s">
  <div class="bg-0 pa_l">
    <p>Here is some normal content.</p>
    <div class="bg-1 ma-h_l- ma-v_xs pa-h_l pa-v_s">
      <p>Here is some break out content.</p>
    </div>
    <p>Here is some more normal content.</p>
  </div>
  <div class="bg-2 bo-r_s pa-h_l pa-v_s ma-t_m- ma-b_m read_l">
    <p>Here be dragons. This content is pulled up.</p>
  </div>
</div>

Padding

Here is a little bit of extra padding. Use padding to move the contents away from the edges of the block.

Use the padding helpers in combination with any block element, especially with .box, .button and form elemets. When no padding class is given, the default value for interface elements is mostly --space-s.

Syntax: .p{-direction?}{_size?}
SCSS: _padding.scss

All

pa_xs
pa_s
pa_m
pa_l

Top

pa-t_xs
pa-t_s
pa-t_m
pa-t_l

Right

pa-r_xs
pa-r_s
pa-r_m
pa-r_l

Bottom

pa-b_xs
pa-b_s
pa-b_m
pa-b_l

Left

pa-l_xs
pa-l_s
pa-l_m
pa-l_l

Vertical

pa-v_xs
pa-v_s
pa-v_m
pa-v_l

Horizontal

pa-h_xs
pa-h_s
pa-h_m
pa-h_l
<div class="docs-padding-helper">
  <h3 class="ma-t_l">All</h3>
  <div class="bg-0 ma-v_xs pa_xs"><div class="box text-clip text-mono bg-b">pa_xs</div></div>
  <div class="bg-0 ma-v_xs pa_s"><div class="box text-clip text-mono bg-c">pa_s</div></div>
  <div class="bg-0 ma-v_xs pa_m"><div class="box text-clip text-mono bg-d">pa_m</div></div>
  <div class="bg-0 ma-v_xs pa_l"><div class="box text-clip text-mono bg-e">pa_l</div></div>
  <h3 class="ma-t_l">Top</h3>
  <div class="bg-0 ma-v_xs pa-t_xs"><div class="box text-clip text-mono bg-b">pa-t_xs</div></div>
  <div class="bg-0 ma-v_xs pa-t_s"><div class="box text-clip text-mono bg-c">pa-t_s</div></div>
  <div class="bg-0 ma-v_xs pa-t_m"><div class="box text-clip text-mono bg-d">pa-t_m</div></div>
  <div class="bg-0 ma-v_xs pa-t_l"><div class="box text-clip text-mono bg-e">pa-t_l</div></div>
  <h3 class="ma-t_l">Right</h3>
  <div class="bg-0 ma-v_xs pa-r_xs"><div class="box text-clip text-mono bg-b">pa-r_xs</div></div>
  <div class="bg-0 ma-v_xs pa-r_s"><div class="box text-clip text-mono bg-c">pa-r_s</div></div>
  <div class="bg-0 ma-v_xs pa-r_m"><div class="box text-clip text-mono bg-d">pa-r_m</div></div>
  <div class="bg-0 ma-v_xs pa-r_l"><div class="box text-clip text-mono bg-e">pa-r_l</div></div>
  <h3 class="ma-t_l">Bottom</h3>
  <div class="bg-0 ma-v_xs pa-b_xs"><div class="box text-clip text-mono bg-b">pa-b_xs</div></div>
  <div class="bg-0 ma-v_xs pa-b_s"><div class="box text-clip text-mono bg-c">pa-b_s</div></div>
  <div class="bg-0 ma-v_xs pa-b_m"><div class="box text-clip text-mono bg-d">pa-b_m</div></div>
  <div class="bg-0 ma-v_xs pa-b_l"><div class="box text-clip text-mono bg-e">pa-b_l</div></div>
  <h3 class="ma-t_l">Left</h3>
  <div class="bg-0 ma-v_xs pa-l_xs"><div class="box text-clip text-mono bg-b">pa-l_xs</div></div>
  <div class="bg-0 ma-v_xs pa-l_s"><div class="box text-clip text-mono bg-c">pa-l_s</div></div>
  <div class="bg-0 ma-v_xs pa-l_m"><div class="box text-clip text-mono bg-d">pa-l_m</div></div>
  <div class="bg-0 ma-v_xs pa-l_l"><div class="box text-clip text-mono bg-e">pa-l_l</div></div>
  <h3 class="ma-t_l">Vertical</h3>
  <div class="bg-0 ma-v_xs pa-v_xs"><div class="box text-clip text-mono bg-b">pa-v_xs</div></div>
  <div class="bg-0 ma-v_xs pa-v_s"><div class="box text-clip text-mono bg-c">pa-v_s</div></div>
  <div class="bg-0 ma-v_xs pa-v_m"><div class="box text-clip text-mono bg-d">pa-v_m</div></div>
  <div class="bg-0 ma-v_xs pa-v_l"><div class="box text-clip text-mono bg-e">pa-v_l</div></div>
  <h3 class="ma-t_l">Horizontal</h3>
  <div class="bg-0 ma-v_xs pa-h_xs"><div class="box text-clip text-mono bg-b">pa-h_xs</div></div>
  <div class="bg-0 ma-v_xs pa-h_s"><div class="box text-clip text-mono bg-c">pa-h_s</div></div>
  <div class="bg-0 ma-v_xs pa-h_m"><div class="box text-clip text-mono bg-d">pa-h_m</div></div>
  <div class="bg-0 ma-v_xs pa-h_l"><div class="box text-clip text-mono bg-e">pa-h_l</div></div>
</div>
<style>
  .docs-padding-helper > div {  border: 1px solid transparent; } /* avoid margin collaspe */
</style>

Border size

To border or not to border, that’s the question! When no side is given, the border applies to all sides. When no width is given, the default var width of --space-px will apply. There is also a border reset class that will remove all borders for sure. You can customize the border color with CSS variables.

In the example, different border sizes are mixed, an unlikely design case. A border usually adds up to the size of a container, to align the boxes here a fixed height is set and the text labels are centered using a flexbox alignment.

Syntax: .bo{-side?}{_width?}
SCSS: _borders.scss

Border on all sides

bo_px
bo_xs
bo_s

Top border

bo-t_px
bo-t_xs
bo-t_s

Right border

bo-r_px
bo-r_xs
bo-r_s

Bottom border

bo-b_px
bo-b_xs
bo-b_s

Left border

bo-l_px
bo-l_xs
bo-l_s

Reset border

.box.bo-no

Custom border

.bo-t_s.bo-custom
<h4 class="ma-b_xs">
  Border on all sides
</h4>
<div class="grid-auto ma-b_m text-mono">
  <div class="s-h_l bg-j pa_s bo_px flex-center">
    <div class="text-clip">bo_px</div>
  </div>
  <div class="s-h_l bg-j pa_s bo_xs flex-center">
    <div class="text-clip">bo_xs</div>
  </div>
  <div class="s-h_l bg-j pa_s bo_s flex-center">
    <div class="text-clip">bo_s</div>
  </div>
</div>
<h4 class="ma-b_xs">
 Top border
</h4>
<div class="grid-auto ma-b_s text-mono">
  <div class="pa_s flex-center height_l pos-rel bg-b bo-t_px">
    <div>bo-t_px</div>
  </div>
  <div class="pa_s flex-center height_l pos-rel bg-c bo-t_xs">
    <div>bo-t_xs</div>
  </div>
  <div class="pa_s flex-center height_l pos-rel bg-d bo-t_s">
    <div>bo-t_s</div>
  </div>
</div>
<h4 class="ma-b_xs">
 Right border
</h4>
<div class="grid-auto ma-b_s text-mono">
  <div class="pa_s flex-center height_l pos-rel bg-b bo-r_px">
    <div>bo-r_px</div>
  </div>
  <div class="pa_s flex-center height_l pos-rel bg-c bo-r_xs">
    <div>bo-r_xs</div>
  </div>
  <div class="pa_s flex-center height_l pos-rel bg-d bo-r_s">
    <div>bo-r_s</div>
  </div>
</div>
<h4 class="ma-b_xs">
 Bottom border
</h4>
<div class="grid-auto ma-b_s text-mono">
  <div class="pa_s flex-center height_l pos-rel bg-b bo-b_px">
    <div>bo-b_px</div>
  </div>
  <div class="pa_s flex-center height_l pos-rel bg-c bo-b_xs">
    <div>bo-b_xs</div>
  </div>
  <div class="pa_s flex-center height_l pos-rel bg-d bo-b_s">
    <div>bo-b_s</div>
  </div>
</div>
<h4 class="ma-b_xs">
 Left border
</h4>
<div class="grid-auto ma-b_s text-mono">
  <div class="pa_s flex-center height_l pos-rel bg-b bo-l_px">
    <div>bo-l_px</div>
  </div>
  <div class="pa_s flex-center height_l pos-rel bg-c bo-l_xs">
    <div>bo-l_xs</div>
  </div>
  <div class="pa_s flex-center height_l pos-rel bg-d bo-l_s">
    <div>bo-l_s</div>
  </div>
</div>

<div class="grid gap_s ma-t_m">
  <div class="span-6">
    <h4 class="ma-b_xs">
      Reset border
    </h4>
    <div class="text-clip flex-center height_l bg-o box bo-no">
      <div class="text-mono text-clip">.box.bo-no</div>
    </div>
  </div>
  <div class="span-6">
    <h4 class="ma-b_xs">
      Custom border
    </h4>
    <div class="text-clip flex-center height_l bg-f bo-t_s bo-custom">
      <div class="text-mono text-clip">.bo-t_s.bo-custom</div>
    </div>
  </div>
</div>

Radius

Some people believe rounded corners are better recognoziable by humans. So here are your radius helper classes. There are three sizes, defined by space CSS vars, options for all directions as well as an extra pill-look class and a perfectly rounded square, AKA circle.

When no direction is given, the border radius will apply on all for corners. When a cardinal direction (t,r,b,l) is present, radius will apply on two corners. When a diagonal direction (tr,br,bl,l) is given, only one corner will be rounded.

Syntax: .ra{-direction?}{_size?}
SCSS: _radius.scss
ra_xs
ra-t_xs
ra-r_xs
ra-b_xs
ra-l_xs
ra-tr_xs
ra-br_xs
ra-bl_xs
ra-tl_xs
ra_s
ra-t_s
ra-r_s
ra-b_s
ra-l_s
ra-tr_s
ra-br_s
ra-bl_s
ra-tl_s
ra_m
ra-t_m
ra-r_m
ra-b_m
ra-l_m
ra-tr_m
ra-br_m
ra-bl_m
ra-tl_m
ra-pill
ra-pill
<div class="grid gap_s collapse-p text-mono ma-b_s " style="--grid-cols: 9">
  <div class="text-clip pa_m bg-a ra_xs">ra_xs</div>
  <div class="text-clip pa_m bg-d ra-t_xs">ra-t_xs</div>
  <div class="text-clip pa_m bg-d ra-r_xs">ra-r_xs</div>
  <div class="text-clip pa_m bg-d ra-b_xs">ra-b_xs</div>
  <div class="text-clip pa_m bg-d ra-l_xs">ra-l_xs</div>
  <div class="text-clip pa_m bg-j ra-tr_xs">ra-tr_xs</div>
  <div class="text-clip pa_m bg-j ra-br_xs">ra-br_xs</div>
  <div class="text-clip pa_m bg-j ra-bl_xs">ra-bl_xs</div>
  <div class="text-clip pa_m bg-j ra-tl_xs">ra-tl_xs</div>
</div>
<div class="grid gap_s collapse-p text-mono ma-b_s " style="--grid-cols: 9">
  <div class="text-clip pa_m bg-a ra_s">ra_s</div>
  <div class="text-clip pa_m bg-d ra-t_s">ra-t_s</div>
  <div class="text-clip pa_m bg-d ra-r_s">ra-r_s</div>
  <div class="text-clip pa_m bg-d ra-b_s">ra-b_s</div>
  <div class="text-clip pa_m bg-d ra-l_s">ra-l_s</div>
  <div class="text-clip pa_m bg-j ra-tr_s">ra-tr_s</div>
  <div class="text-clip pa_m bg-j ra-br_s">ra-br_s</div>
  <div class="text-clip pa_m bg-j ra-bl_s">ra-bl_s</div>
  <div class="text-clip pa_m bg-j ra-tl_s">ra-tl_s</div>
</div>
<div class="grid gap_s collapse-p text-mono ma-b_s " style="--grid-cols: 9">
  <div class="text-clip pa_m bg-a ra_m">ra_m</div>
  <div class="text-clip pa_m bg-d ra-t_m">ra-t_m</div>
  <div class="text-clip pa_m bg-d ra-r_m">ra-r_m</div>
  <div class="text-clip pa_m bg-d ra-b_m">ra-b_m</div>
  <div class="text-clip pa_m bg-d ra-l_m">ra-l_m</div>
  <div class="text-clip pa_m bg-j ra-tr_m">ra-tr_m</div>
  <div class="text-clip pa_m bg-j ra-br_m">ra-br_m</div>
  <div class="text-clip pa_m bg-j ra-bl_m">ra-bl_m</div>
  <div class="text-clip pa_m bg-j ra-tl_m">ra-tl_m</div>
</div><div class="grid text-mono ma-t_s">
  <div class="text-center pa_m span-6 ra-pill" style="background-color: RoyalBlue">ra-pill</div>
  <div class="text-center pa_m span-6 ra-pill" style="background-color: OrangeRed">ra-pill</div>
</div>

<div class="grid gap-no ma-t_s">
  <button class="text-center button pa_m span-6 ra-pill-l">ra-pill-l</button>
  <button class="text-center button pa_m span-6 ra-pill-r">ra-pill-r</button>
</div>

Box shadow

Some material design look.

Predefined sizes are: xs, s, m and l. Within a container called .bs_{your-custom-string} you can define the CSS vars. MS Edge (17) currently fails with this, --space-m is not interpreted correcty.

Syntax: .bs_{size}
SCSS: _box-shadow.scss
bs_xs
bs_s
bs_m
bs_l
bs_custom
<div class="grid-auto text-mono">
  <div class="text-clip box bg-b bs_xs">bs_xs</div>
  <div class="text-clip box bg-c bs_s">bs_s</div>
  <div class="text-clip box bg-d bs_m">bs_m</div>
  <div class="text-clip box bg-e bs_l">bs_l</div>
  <div class="text-clip box bg-e bs_custom">bs_custom</div>
</div>

Hide

This is a general responsive helper class to be applied to any element. -t is for tablet and -p for phone screen resolutions. This one here set hides certain content on smaller devices.

Syntax: .hide-{breakpoint}
SCSS: _media-queries.scss
Always shown, first box of three
.hide-t, hidden on tablet and smaller, second box of three
.hide-p, hidden on phone sizes, third box of three
<div class="gap_s text-mono">
  <div class="text-clip box bg-r">Always shown, first box of three</div>
  <div class="text-clip box bg-s hide-t">.hide-t, hidden on tablet and smaller, second box of three</div>
  <div class="text-clip box bg-t hide-p">.hide-p, hidden on phone sizes, third box of three</div>
</div>

Collapse

This set of media query related helper classes makes flowed content collapse on smaller sizes. -t is for tablet and -p for phone screen resolutions. This class can be applied in combination with .grid, .flex or .column.

There are additional responsive helper methods for each conent flow method: grid breakpoints, flex breakpoints and column breakpoints.

Syntax: .collapse-{breakpoint}
SCSS: _media-queries.scss
.collapse-t
will
collapse
on
tablet
screen
size
so
that
every
word
is
one
row
.collapse-p
will
collapse
on
tablet
screen
size
so
that
every
word
is
one
row
<div class="flex gap-no collapse-t">
  <div class="box bg-t text-mono">.collapse-t</div>
  <div class="box bg-a">will</div>
  <div class="box bg-b">collapse</div>
  <div class="box bg-c">on</div>
  <div class="box bg-d">tablet</div>
  <div class="box bg-e">screen</div>
  <div class="box bg-f">size</div>
  <div class="box bg-g">so</div>
  <div class="box bg-h">that</div>
  <div class="box bg-i">every</div>
  <div class="box bg-j">word</div>
  <div class="box bg-k">is</div>
  <div class="box bg-l">one</div>
  <div class="box bg-m">row</div>
</div>

<div class="flex gap-no collapse-p ma-t_s">
  <div class="box bg-t text-mono">.collapse-p</div>
  <div class="box bg-a">will</div>
  <div class="box bg-b">collapse</div>
  <div class="box bg-c">on</div>
  <div class="box bg-d">tablet</div>
  <div class="box bg-e">screen</div>
  <div class="box bg-f">size</div>
  <div class="box bg-g">so</div>
  <div class="box bg-h">that</div>
  <div class="box bg-i">every</div>
  <div class="box bg-j">word</div>
  <div class="box bg-k">is</div>
  <div class="box bg-l">one</div>
  <div class="box bg-m">row</div>
</div>

Display

Here are some common display properties you might find useful.

.block
.inline-block
.inline
.inline-flex
<div class="gap_xs text-mono">
  <div class="box pa_m bg-c block">.block</div>
  <div>
    <div class="box pa_m bg-d inline-block">.inline-block</div>
    <div class="box pa_m bg-d inline">.inline</div>
    <div class="box pa_m bg-d inline-flex">.inline-flex</div>
  </div>
</div>

Fixed sizes

Here are a few “fixed” size helper classes, width, height and both directions. Standard spacing sizes are in use.

Available sizes: s, m, l, xl. The sizes are REM based. So they will get a bit smaller on tablet and phone breakpoints. Those classes are also available as min-sizes, like min-size_{size}. Also have a look at the read widths.

Syntax: size_{size}
SCSS: _fixed-sizes.scss

Width and height

Height

Width

<div class="flex gap_m">
  <div class="span-auto">
    <h4 class="ma-b_xs">Width and height</h4>
    <div class="flex gap_xs">
      <div class="span-auto">
        <div data-tooltip="size_xl" class="size_xl pos-rel bo_px bg-b"></div>
      </div>
      <div class="span-auto">
        <div data-tooltip="size_l" class="size_l pos-rel bo_px bg-c"></div>
      </div>
      <div class="span-auto">
        <div data-tooltip="size_m" class="size_m pos-rel bo_px bg-d"></div>
      </div>
      <div class="span-auto">
        <div data-tooltip="size_s" class="size_s pos-rel bo_px bg-e"></div>
      </div>
    </div>
  </div>
  <div class="span-auto">
    <h4 class="ma-b_xs">Height</h4>
    <div class="flex gap_xs">
      <div class="span-auto">
        <div data-tooltip="height_xl" class="height_xl width_m pos-rel bo_px bg-b"></div>
      </div>
      <div class="span-auto">
        <div data-tooltip="height_l" class="height_l width_m pos-rel bo_px bg-c"></div>
      </div>
      <div class="span-auto">
        <div data-tooltip="height_m" class="height_m width_m pos-rel bo_px bg-d"></div>
      </div>
      <div class="span-auto">
        <div data-tooltip="height_s" class="height_s width_m pos-rel bo_px bg-e"></div>
      </div>
    </div>
  </div>
  <div class="span-auto">
    <h4 class="ma-b_xs">Width</h4>
    <div class="flex gap_xs">
      <div class="span-full">
        <div data-tooltip="width_xl" class="width_xl height_m pos-rel bo_px bg-b"></div>
      </div>
      <div class="span-full">
        <div data-tooltip="width_l" class="width_l height_m pos-rel bo_px bg-c"></div>
      </div>
      <div class="span-full">
        <div data-tooltip="width_m" class="width_m height_m pos-rel bo_px bg-d"></div>
      </div>
      <div class="span-full">
        <div data-tooltip="width_s" class="width_s height_m pos-rel bo_px bg-e"></div>
      </div>
    </div>
  </div>
</div>

Visibility

Here are three boxes. You can clearly see the .visible box. You can not see the .invisible box, but you can see that it still takes it space in the layout. The .removed box finally is just not there in any way.

.visible
.removed
<div class="gap_s pa_m bg-0 text-mono">
  <div class="box visible">.visible</div>     <!-- visibility:visible -->
  <div class="box invisible">.invisible</div> <!-- visibility:hidden -->
  <div class="box removed">.removed</div>     <!-- display:none -->
</div>

Z-index

Add zi-1 - zi-4 or zi-99, zi-999, zi-max to change the z-index of an object. Mind that z-index will only work on relative or absolute positioned elements.

Syntax: z-{height}
SCSS: _z-index.scss
Snoop Dogg
50 Cent
Drake
Eminem
JAY-Z
Kayne West
Tupac Shakur
<div class="docs-zindex bg-1 text_l">
  <div class="box pa_m bg-a docs-z-1 zi-1">Snoop Dogg</div>
  <div class="box pa_m bg-b docs-z-2 zi-2">50 Cent</div>
  <div class="box pa_m bg-c docs-z-3 zi-3">Drake</div>
  <div class="box pa_m bg-d docs-z-4 zi-4">Eminem</div>
  <div class="box pa_m bg-f docs-z-99 zi-99">JAY-Z</div>
  <div class="box pa_m bg-g docs-z-999 zi-999">Kayne West</div>
  <div class="box pa_m bg-h docs-z-max zi-max">Tupac Shakur</div>
</div>

<style>
  .docs-zindex {
    position: relative;
    width: 100%;
    min-height: 20rem;
  }
  .docs-zindex [class*="docs-z-"] { position: absolute; }
  .docs-z-1   { left: -2rem;  top: -1rem; }
  .docs-z-2   { left: -1rem;  top: 3rem;  }
  .docs-z-3   { left: 12rem;  top: 12rem; }
  .docs-z-4   { left: 12rem;  top: 6rem;  }
  .docs-z-99  { left: 6rem;   top: 13rem; }
  .docs-z-999 { left: 4rem;   top: 4rem;  }
  .docs-z-max { left: 4rem;   top: 9rem;  }
</style>

Position defaults

Here are some shortcut helpers classes to quickly position absolute elements. The parent container needs to have a relative position. Some “translate magic” to deal with unkown sizes of the positioned containers themselves is included.

Syntax: pos-{direction}
SCSS: _position-defaults.scss
.pos-tl
.pos-tr
.pos-bl
.pos-br
.pos-ct
.pos-cr
.pos-cb
.pos-cl
.pos-c
<div class="bg-1 pos-rel height_xl">
  <div class="mini-info pos-tl">.pos-tl</div>
  <div class="mini-info pos-tr">.pos-tr</div>
  <div class="mini-info pos-bl">.pos-bl</div>
  <div class="mini-info pos-br">.pos-br</div>
  <div class="mini-info pos-ct">.pos-ct</div>
  <div class="mini-info pos-cr">.pos-cr</div>
  <div class="mini-info pos-cb">.pos-cb</div>
  <div class="mini-info pos-cl">.pos-cl</div>
  <div class="mini-info pos-c inline">.pos-c</div>
</div>

Position helpers

Here are some helper classes to position things. This will set the CSS proprtry position. Values are: rel for relative, abs for absolute, stick for sticky and fix for fixed.

Sorry no example so far. But this is hard to show.

Syntax: pos-{value}
SCSS: _position-helpers.scss