StylePlayground ↬ Spacing Custom Properties and Utility Class Reference

Using the same base values from the fluid type calculator, we have created a related fluid space system. These space values should be used wherever space values are needed such as padding and margins. View Space Scale →

Utility Classes

View utility class reference ↓

Space-based utility classes include Margin, Padding & Gap classes. These classes follow patterns with letters representing the type of space. m=magin, p=padding and gap=gap. using these by themselves (with a value) will provide margin and padding on all sides the element and have the gap value set for both row and column.

Margin and padding can have position based values to them to target each side of the element (top(t), right(r), bottom(b), left(l)) or use logical properties to target the block (y) (top + bottom) or inline (x) (left + right) sides of the element.

Margin and padding classes then add a value — these values are tied to the space custom property values (2xs - 3xl)

Combined, these patterns look like:   m-xl, pt-2xl, py-l, mx-2xl …etc.

Utility Class Reference

Padding

All Sides

  • p-2xs
  • p-xs
  • p-s
  • p-m
  • p-l
  • p-xl
  • p-2xl
  • p-3xl

examples: p-m, p-2xl

Padding — Sides

top, left, bottom, right

  • p[t|r|b|l]-2xs
  • p[t|r|b|l]-xs
  • p[t|r|b|l]-s
  • p[t|r|b|l]-m
  • p[t|r|b|l]-l
  • p[t|r|b|l]-xl
  • p[t|r|b|l]-2xl
  • p[t|r|b|l]-3xl

examples: pt-xl, pl-s

Padding — Logical Properties

block (y) and inline (x)

  • p[y|x]-2xs
  • p[y|x]-xs
  • p[y|x]-s
  • p[y|x]-m
  • p[y|x]-l
  • p[y|x]-xl
  • p[y|x]-2xl
  • p[y|x]-3xl

examples: py-3xl, px-xl

Margin

All Sides

  • m-2xs
  • m-xs
  • m-s
  • m-m
  • m-l
  • m-xl
  • m-2xl
  • m-3xl

examples: m-m, m-2xl

Margin — Sides

top, left, bottom, right

  • m[t|r|b|l]-2xs
  • m[t|r|b|l]-xs
  • m[t|r|b|l]-s
  • m[t|r|b|l]-m
  • m[t|r|b|l]-l
  • m[t|r|b|l]-xl
  • m[t|r|b|l]-2xl
  • m[t|r|b|l]-3xl

examples: mt-xl, ml-s

Margin — Logical Properties

block (y) and inline (x)

  • m[y|x]-2xs
  • m[y|x]-xs
  • m[y|x]-s
  • m[y|x]-m
  • m[y|x]-l
  • m[y|x]-xl
  • m[y|x]-2xl
  • m[y|x]-3xl

examples: my-3xl, mx-xl

Gap Values

row & column gap

  • gap-2xs
  • gap-xs
  • gap-s
  • gap-m
  • gap-l
  • gap-xl
  • gap-2xl
  • gap-3xl

examples: gap-3xl, gap-s

Fluid Space Scale

- MIN[@320px | Size: 18px | Type Scale: 1.2 (Minor Third)] → →
    + MAX[@1140px | Size: 20px | Type Scale: 1.25 (Major Third)]

View fluid spacing scale on Utopia →

3xExtra Small | --space-3xs | 5px → 5px
2xExtra Small | --space-2xs | 9px → 10px
Extra Small | --space-xs | 14px → 15px
Small | --space-s | 18px → 20px
Medium | --space-m | 27px → 30px
Large | --space-l | 36px → 40px
Extra Large | --space-xl | 54px → 60px
2xExtra Large | --space-2xl | 72px → 80px
3xExtra Large | --space-3xl | 108px → 120px

|| Space Value Pairs - Single Steps

Spaces listed below as space value pairs — you can use these to introduce more dramatic space variance between different viewport sizes.

3xs → 2xs | --space-3xs-2xs | 5px → 10px
2xs → xs | --space-2xs-xs | 9px → 15px
xs → s | --space-xs-s | 14px → 20px
s → m | --space-s-m | 18px → 30px
m → l | --space-m-l | 27px → 40px
l → xl | --space-l-xl | 36px → 60px
xl → 2xl | --space-xl-2xl | 54px → 80px
2xl → 3xl | --space-2xl-3xl | 72px → 120px

|| Space Value Pairs - Custom Steps

We have also added a custom space value pair for additional control.

s → 3xl | --space-s-3xl | 18px → 120px