Spacing


All spacing is done using an 8px scale. Starting with n-half at 4px and going to n-16 at 128px.


Margins

Margin utilities are prefixed with m- and can be used to push other elements away from any side.

Use the convention m-size or m-side-size, e.g .m-1 or .m-bottom-1. You can also use axis shortcuts: .m-x-1 for margin on the x axis only, or .m-y-1 for margin on the y axis only.

.m-half
.m-1
.m-2
.m-3
.m-4
.m-5
.m-6
.m-7
.m-8
.m-9
.m-10
.m-11
.m-12
.m-13
.m-14
.m-15
.m-16
<div class="m-half">.m-half</div>
<div class="m-1">.m-1</div>
<div class="m-2">.m-2</div>
<div class="m-3">.m-3</div>
<div class="m-4">.m-4</div>
<div class="m-5">.m-5</div>
<div class="m-6">.m-6</div>
<div class="m-7">.m-7</div>
<div class="m-8">.m-8</div>
<div class="m-9">.m-9</div>
<div class="m-10">.m-10</div>
<div class="m-11">.m-11</div>
<div class="m-12">.m-12</div>
<div class="m-13">.m-13</div>
<div class="m-14">.m-14</div>
<div class="m-15">.m-15</div>
<div class="m-16">.m-16</div>

Padding

Padding utilities are prefixed with p- and can be used to add space inside an element on any side.

Use the convention p-size or m-side-size, e.g .p-1 or .p-bottom-1. You can also use axis shortcuts: .p-x-1 for padding on the x axis only, or .p-y-1 for padding on the y axis only.

.p-half
.p-1
.p-2
.p-3
.p-4
.p-5
.p-6
.p-7
.p-8
.p-9
.p-10
.p-11
.p-12
.p-13
.p-14
.p-15
.p-16
<div class="p-half">.p-half</div>
<div class="p-1">.p-1</div>
<div class="p-2">.p-2</div>
<div class="p-3">.p-3</div>
<div class="p-4">.p-4</div>
<div class="p-5">.p-5</div>
<div class="p-6">.p-6</div>
<div class="p-7">.p-7</div>
<div class="p-8">.p-8</div>
<div class="p-9">.p-9</div>
<div class="p-10">.p-10</div>
<div class="p-11">.p-11</div>
<div class="p-12">.p-12</div>
<div class="p-13">.p-13</div>
<div class="p-14">.p-14</div>
<div class="p-15">.p-15</div>
<div class="p-16">.p-16</div>

Responsive

All spacing classes are responsive and can use the __m and __l modifier classes, e.g p-top__m.