# Spacing

A custom spacing scale, with padding and margin utility classes.

Basic spacing units are defined in /styles/settings/spacing.scss. These units are based on a base of 12px.

$spacer: 12px;        // base spacing unit
$spacers: (
  0: 0,               // 0
  1: $spacer * 0.5,   // 6px
  2: $spacer,         // 12px
  3: $spacer * 2,     // 24px
  4: $spacer * 3,     // 36px
  5: $spacer * 4,     // 48px
  6: $spacer * 5      // 60px
);

# Units

Step Size Helper
0 0 space(0)
1 6px space(1)
2 12px space(2)
3 24px space(3)
4 36px space(4)
5 48px space(5)
6 60px space(6)

From this, we create (Tachyon/Tailwind-inspired) padding and margin classes, which may be applied to any element to easily add a prescribed amount (ie. defined and derived from our settings) of space around an element.

# Padding

Class Properties
.pa-0 padding: 0;
.pa-1 padding: 6px;
.pa-2 padding: 12px;
.pa-3 padding: 24px;
.pa-4 padding: 36px;
.pa-5 padding: 48px;
.pa-6 padding: 60px;
.py-1 padding-top: 6px;
padding-bottom: 6px;
.py-2 padding-top: 12px;
padding-bottom: 12px;
.py-3 padding-top: 24px;
padding-bottom: 24px;
.py-4 padding-top: 36px;
padding-bottom: 36px;
.py-5 padding-top: 48px;
padding-bottom: 48px;
.py-6 padding-top: 60px;
padding-bottom: 60px;
.px-0 padding-right: 0;
padding-left: 0;
.px-1 padding-right: 6px;
padding-left: 6px;
.px-2 padding-right: 12px;
padding-left: 12px;
.px-3 padding-right: 24px;
padding-left: 24px;
.px-4 padding-right: 36px;
padding-left: 36px;
.px-5 padding-right: 48px;
padding-left: 48px;
.px-6 padding-right: 60px;
padding-left: 60px;
.pt-0 padding-top: 0;
.pt-1 padding-top: 6px;
.pt-2 padding-top: 12px;
.pt-3 padding-top: 24px;
.pt-4 padding-top: 36px;
.pt-5 padding-top: 48px;
.pt-6 padding-top: 60px;
.pr-0 padding-right: 0;
.pr-1 padding-right: 6px;
.pr-2 padding-right: 12px;
.pr-3 padding-right: 24px;
.pr-4 padding-right: 36px;
.pr-5 padding-right: 48px;
.pr-6 padding-right: 60px;
.pb-0 padding-bottom: 0;
.pb-1 padding-bottom: 6px;
.pb-2 padding-bottom: 12px;
.pb-3 padding-bottom: 24px;
.pb-4 padding-bottom: 36px;
.pb-5 padding-bottom: 48px;
.pb-6 padding-bottom: 60px;
.pl-0 padding-left: 0;
.pl-1 padding-left: 6px;
.pl-2 padding-left: 12px;
.pl-3 padding-left: 24px;
.pl-4 padding-left: 36px;
.pl-5 padding-left: 48px;
.pl-6 padding-left: 60px;

# Usage

Control the padding on an element using a p{a|x|y|t|r|b|l}-{size} class.

Modifiers

  a = all
  x = x-axis (left, right)
  y = y-axis (top, bottom)
  t = top
  r = right
  b = bottom
  l = left

EXAMPLE

.pa-3
.pt-5
.py-4
.px-2
<div class="bg-light-grey pa-3"><span class="...">.pa-3</span></div>
<div class="bg-light-grey pt-5"><span class="...">.pt-5</span></div>
<div class="bg-light-grey py-4"><span class="...">.py-4</span></div>
<div class="bg-light-grey px-2"><span class="...">.px-2</span></div>

# Margin

Class Properties
.ma-0 margin: 0;
.ma-1 margin: 6px;
.ma-2 margin: 12px;
.ma-3 margin: 24px;
.ma-4 margin: 36px;
.ma-5 margin: 48px;
.ma-6 margin: 60px;
.my-1 margin-top: 6px;
margin-bottom: 6px;
.my-2 margin-top: 12px;
margin-bottom: 12px;
.my-3 margin-top: 24px;
margin-bottom: 24px;
.my-4 margin-top: 36px;
margin-bottom: 36px;
.my-5 margin-top: 48px;
margin-bottom: 48px;
.my-6 margin-top: 60px;
margin-bottom: 60px;
.mx-0 margin-right: 0;
margin-left: 0;
.mx-1 margin-right: 6px;
margin-left: 6px;
.mx-2 margin-right: 12px;
margin-left: 12px;
.mx-3 margin-right: 24px;
margin-left: 24px;
.mx-4 margin-right: 36px;
margin-left: 36px;
.mx-5 margin-right: 48px;
margin-left: 48px;
.mx-6 margin-right: 60px;
margin-left: 60px;
.mt-0 margin-top: 0;
.mt-1 margin-top: 6px;
.mt-2 margin-top: 12px;
.mt-3 margin-top: 24px;
.mt-4 margin-top: 36px;
.mt-5 margin-top: 48px;
.mt-6 margin-top: 60px;
.mr-0 margin-right: 0;
.mr-1 margin-right: 6px;
.mr-2 margin-right: 12px;
.mr-3 margin-right: 24px;
.mr-4 margin-right: 36px;
.mr-5 margin-right: 48px;
.mr-6 margin-right: 60px;
.mb-0 margin-bottom: 0;
.mb-1 margin-bottom: 6px;
.mb-2 margin-bottom: 12px;
.mb-3 margin-bottom: 24px;
.mb-4 margin-bottom: 36px;
.mb-5 margin-bottom: 48px;
.mb-6 margin-bottom: 60px;
.ml-0 margin-left: 0;
.ml-1 margin-left: 6px;
.ml-2 margin-left: 12px;
.ml-3 margin-left: 24px;
.ml-4 margin-left: 36px;
.ml-5 margin-left: 48px;
.ml-6 margin-left: 60px;

# Usage

Control the margin on an element using a m{a|x|y|t|r|b|l}-{size} class.

EXAMPLE

.ma-4
.ml-5
.my-4
.mr-2
<div class="bg-light-grey"><span class="ma-4 ...">.ma-4</span></div>
<div class="bg-light-grey"><span class="ml-5 ...">.ml-5</span></div>
<div class="bg-light-grey"><span class="my-4 ...">.my-4</span></div>
<div class="bg-light-grey"><span class="mr-2 ...">.mr-2</span></div>