Utilities

Spacing

These utility classes add horizontal space between elements. The amount of space is relative to the --base-space CSS variable, which defaults to 0.6em.

Classes

Class Name	Description
space-3	Adds horizontal space equal to --base-space * 3.
space-2	Adds horizontal space equal to --base-space * 2.
space-1-5	Adds horizontal space equal to --base-space * 1.5.
space-1-25	Adds horizontal space equal to --base-space * 1.25.
space-1	Adds horizontal space equal to --base-space * 1.
space-0-5	Adds horizontal space equal to --base-space * 0.5.
space-0-25	Adds horizontal space equal to --base-space * 0.25.
space-n-0-25	Adds horizontal space equal to --base-space * -0.25.
space-n-0-5	Adds horizontal space equal to --base-space * -0.5.
space-n-1	Adds horizontal space equal to --base-space * -1.
space-n-1-25	Adds horizontal space equal to --base-space * -1.25.
space-n-1-5	Adds horizontal space equal to --base-space * -1.5.
space-n-2	Adds horizontal space equal to --base-space * -2.
space-n-3	Adds horizontal space equal to --base-space * -3.

Example

In layered compositions, they can precisely position elements.

without spaces

<div class="kaomoji">
  <div id="face" class="kaomoji layer bounce">
    <div class="face-happy"></div>
  </div>
  <div id="body" class="kaomoji layer bounce delay-50">
    <div class="body-round-left"></div>
    <div class="body-round-right"></div>
  </div>
  <div id="hands" class="kaomoji layer bounce delay-100">
    <div class="arms-hugging"></div>
    <div class="arms-hugging"></div>
  </div>
</div>

with spaces

<div class="kaomoji">
  <div id="face" class="kaomoji layer bounce">
  <div class="space-1"></div>
    <div class="face-happy"></div>
  </div>
  <div id="body" class="kaomoji layer bounce delay-50">
    <div class="body-round-left"></div>
    <div class="space-3"></div>
    <div class="space-0-5"></div>
    <div class="body-round-right"></div>
  </div>
  <div id="hands" class="kaomoji layer bounce delay-100">
    <div class="space-0-25"></div>
    <div class="arms-hugging"></div>
    <div class="space-2"></div>
    <div class="space-1"></div>
    <div class="arms-hugging"></div>
  </div>
</div>

Flipping

These utility classes allow you to flip elements horizontally or vertically.

Classes

Class Name	Description
flip-h	Flips an element horizontally.
flip-v	Flips an element vertically.

Example

This is useful when a kaomoji part is only available for one side.

<div class="kaomoji">
  <div class="arms-hugging flip-h"></div>
  <div class="space-quarter"></div>
  <div class="face-happy"></div>
  <div class="space-quarter"></div>
  <div class="arms-hugging"></div>
</div>