# 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>

← Layout Display →