Spacing

<h2 class="h2 m-b300">Paddings</h2>

<div class="m-b600">
    <div class="m-b300">
        <div class="bg--g100 p-a000">.p-a000</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a100">.p-a100</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a200">.p-a200</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a300">.p-a300</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a400">.p-a400</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a500">.p-a500</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a600">.p-a600</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a700">.p-a700</div>
    </div>
</div>
<div class="m-b600">
    <div class="m-b300">
        <div class="bg--g100 p-h000">.p-h000</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-h100">.p-h100</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-h200">.p-h200</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-h300">.p-h300</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-h400">.p-h400</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-h500">.p-h500</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-h600">.p-h600</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-h700">.p-h700</div>
    </div>
</div>
<div class="m-b600">
    <div class="m-b300">
        <div class="bg--g100 p-v000">.p-v000</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-v100">.p-v100</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-v200">.p-v200</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-v300">.p-v300</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-v400">.p-v400</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-v500">.p-v500</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-v600">.p-v600</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-v700">.p-v700</div>
    </div>
</div>
<div class="m-b600">
    <div class="m-b300">
        <div class="bg--g100 p-t000">.p-t000</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-t100">.p-t100</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-t200">.p-t200</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-t300">.p-t300</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-t400">.p-t400</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-t500">.p-t500</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-t600">.p-t600</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-t700">.p-t700</div>
    </div>
</div>
<div class="m-b600">
    <div class="m-b300">
        <div class="bg--g100 p-b000">.p-b000</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-b100">.p-b100</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-b200">.p-b200</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-b300">.p-b300</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-b400">.p-b400</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-b500">.p-b500</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-b600">.p-b600</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-b700">.p-b700</div>
    </div>
</div>
<div class="m-b600">
    <div class="m-b300">
        <div class="bg--g100 p-l000">.p-l000</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-l100">.p-l100</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-l200">.p-l200</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-l300">.p-l300</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-l400">.p-l400</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-l500">.p-l500</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-l600">.p-l600</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-l700">.p-l700</div>
    </div>
</div>
<div class="m-b600">
    <div class="m-b300">
        <div class="bg--g100 p-r000">.p-r000</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-r100">.p-r100</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-r200">.p-r200</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-r300">.p-r300</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-r400">.p-r400</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-r500">.p-r500</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-r600">.p-r600</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-r700">.p-r700</div>
    </div>
</div>

<h2 class="h2 m-b300">Margins</h2>

<div class="m-b600">
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-a000">.m-a000</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-a100">.m-a100</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-a200">.m-a200</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-a300">.m-a300</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-a400">.m-a400</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-a500">.m-a500</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-a600">.m-a600</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-a700">.m-a700</div>
    </div>
</div>
<div class="m-b600">
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-h000">.m-h000</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-h100">.m-h100</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-h200">.m-h200</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-h300">.m-h300</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-h400">.m-h400</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-h500">.m-h500</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-h600">.m-h600</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-h700">.m-h700</div>
    </div>
</div>
<div class="m-b600">
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-v000">.m-v000</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-v100">.m-v100</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-v200">.m-v200</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-v300">.m-v300</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-v400">.m-v400</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-v500">.m-v500</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-v600">.m-v600</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-v700">.m-v700</div>
    </div>
</div>
<div class="m-b600">
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-t000">.m-t000</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-t100">.m-t100</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-t200">.m-t200</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-t300">.m-t300</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-t400">.m-t400</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-t500">.m-t500</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-t600">.m-t600</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-t700">.m-t700</div>
    </div>
</div>
<div class="m-b600">
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-b000">.m-b000</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-b100">.m-b100</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-b200">.m-b200</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-b300">.m-b300</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-b400">.m-b400</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-b500">.m-b500</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-b600">.m-b600</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-b700">.m-b700</div>
    </div>
</div>
<div class="m-b600">
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-l000">.m-l000</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-l100">.m-l100</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-l200">.m-l200</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-l300">.m-l300</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-l400">.m-l400</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-l500">.m-l500</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-l600">.m-l600</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-l700">.m-l700</div>
    </div>
</div>
<div class="m-b600">
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-r000">.m-r000</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-r100">.m-r100</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-r200">.m-r200</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-r300">.m-r300</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-r400">.m-r400</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-r500">.m-r500</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-r600">.m-r600</div>
    </div>
    <div class="m-b300">
        <div class="bg--g100 p-a300 m-r700">.m-r700</div>
    </div>
</div>

Spacing

Classes exist for margins and paddings. The structure of the class names is as follows:

.{p|m}-{DIRECTION}{VALUE}{OPTIONAL MODIFIER}
  • p for padding
  • m for margin
  • DIRECTION can be any of:
    • a for all sides
    • h for left/right sides
    • v for top/bottom sides
    • t for top
    • l for left
    • r for right
    • b for bottom

Some classes have a modifier. This allows for the limiting of padding at specific break points.