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

Gaps

←

The universal gap size class can be applied to Flexbox, CSS Grid, Columns and like shown here, stand-alone. In this case the gutter applies not in rows, but on vertically stacked items.

Syntax: .gap_{size}
SCSS: _gaps.scss
Medium
.gap_m
CSS is awesome
CSS is awesome
CSS is awesome
Small
.gap_s
CSS is awesome
CSS is awesome
CSS is awesome
Extra small
.gap_xs
CSS is awesome
CSS is awesome
CSS is awesome
Custom
.gap-custom
CSS is awesome
CSS is awesome
CSS is awesome
<div class="grid gap_s"><div class="span-3 span-2-t">
    <h5 class="flex wrap-no ma-b_xs">
      <div class="text-clip">Medium</div>
      <div class="span-auto text-thin text-mono">.gap_m</div>
    </h5>
    <div class="gap_m text-mono">
      <div class="box text-clip bg-b">CSS is awesome</div>
      <div class="box text-clip bg-c">CSS is awesome</div>
      <div class="box text-clip bg-d">CSS is awesome</div>
    </div>
  </div><div class="span-3 span-2-t">
    <h5 class="flex wrap-no ma-b_xs">
      <div class="text-clip">Small</div>
      <div class="span-auto text-thin text-mono">.gap_s</div>
    </h5>
    <div class="gap_s text-mono">
      <div class="box text-clip bg-b">CSS is awesome</div>
      <div class="box text-clip bg-c">CSS is awesome</div>
      <div class="box text-clip bg-d">CSS is awesome</div>
    </div>
  </div><div class="span-3 span-2-t">
    <h5 class="flex wrap-no ma-b_xs">
      <div class="text-clip">Extra small</div>
      <div class="span-auto text-thin text-mono">.gap_xs</div>
    </h5>
    <div class="gap_xs text-mono">
      <div class="box text-clip bg-b">CSS is awesome</div>
      <div class="box text-clip bg-c">CSS is awesome</div>
      <div class="box text-clip bg-d">CSS is awesome</div>
    </div>
  </div>
  <div class="span-3 span-2-t">
    <h5 class="flex wrap-no ma-b_xs">
      <div class="text-clip">Custom</div>
      <div class="span-auto text-thin text-mono">.gap-custom</div>
    </h5>
    <div class="gap-custom text-mono">
      <div class="box text-clip bg-b">CSS is awesome</div>
      <div class="box text-clip bg-c">CSS is awesome</div>
      <div class="box text-clip bg-d">CSS is awesome</div>
    </div>
  </div>
</div>