DAHLIA Pattern Library

Spacing 

<h3>Padding</h3>

<div class="demo-padding_container padding--half">
    <div class="demo-padding_box padding--half">.padding--half</div>
</div>
<div class="demo-padding_container padding-top--half">
    <div class="demo-padding_box padding--half">.padding-top--half</div>
</div>
<div class="demo-padding_container padding-right--half">
    <div class="demo-padding_box padding--half">.padding-right--half</div>
</div>
<div class="demo-padding_container padding-bottom--half">
    <div class="demo-padding_box padding--half">.padding-bottom--half</div>
</div>
<div class="demo-padding_container padding-left--half">
    <div class="demo-padding_box padding--half">.padding-left--half</div>
</div>
<div class="demo-padding_container padding">
    <div class="demo-padding_box padding--half">.padding</div>
</div>
<div class="demo-padding_container padding-top">
    <div class="demo-padding_box padding--half">.padding-top</div>
</div>
<div class="demo-padding_container padding-right">
    <div class="demo-padding_box padding--half">.padding-right</div>
</div>
<div class="demo-padding_container padding-bottom">
    <div class="demo-padding_box padding--half">.padding-bottom</div>
</div>
<div class="demo-padding_container padding-left">
    <div class="demo-padding_box padding--half">.padding-left</div>
</div>
<div class="demo-padding_container padding--3halves">
    <div class="demo-padding_box padding--half">.padding--3halves</div>
</div>
<div class="demo-padding_container padding-top--3halves">
    <div class="demo-padding_box padding--half">.padding-top--3halves</div>
</div>
<div class="demo-padding_container padding-right--3halves">
    <div class="demo-padding_box padding--half">.padding-right--3halves</div>
</div>
<div class="demo-padding_container padding-bottom--3halves">
    <div class="demo-padding_box padding--half">.padding-bottom--3halves</div>
</div>
<div class="demo-padding_container padding-left--3halves">
    <div class="demo-padding_box padding--half">.padding-left--3halves</div>
</div>
<div class="demo-padding_container padding--2x">
    <div class="demo-padding_box padding--half">.padding--2x</div>
</div>
<div class="demo-padding_container padding-top--2x">
    <div class="demo-padding_box padding--half">.padding-top--2x</div>
</div>
<div class="demo-padding_container padding-right--2x">
    <div class="demo-padding_box padding--half">.padding-right--2x</div>
</div>
<div class="demo-padding_container padding-bottom--2x">
    <div class="demo-padding_box padding--half">.padding-bottom--2x</div>
</div>
<div class="demo-padding_container padding-left--2x">
    <div class="demo-padding_box padding--half">.padding-left--2x</div>
</div>

<h3>Margin</h3>

<div class="demo-margin_container">
    <div class="demo-margin_box margin--half padding--half">.margin--half</div>
</div>
<div class="demo-margin_container">
    <div class="demo-margin_box margin-top--half padding--half">.margin-top--half</div>
</div>
<div class="demo-margin_container">
    <div class="demo-margin_box margin-right--half padding--half">.margin-right--half</div>
</div>
<div class="demo-margin_container">
    <div class="demo-margin_box margin-bottom--half padding--half">.margin-bottom--half</div>
</div>
<div class="demo-margin_container">
    <div class="demo-margin_box margin-left--half padding--half">.margin-left--half</div>
</div>
<div class="demo-margin_container">
    <div class="demo-margin_box margin-top padding--half">.margin-top</div>
</div>
<div class="demo-margin_container">
    <div class="demo-margin_box margin-right padding--half">.margin-right</div>
</div>
<div class="demo-margin_container">
    <div class="demo-margin_box margin-bottom padding--half">.margin-bottom</div>
</div>
<div class="demo-margin_container">
    <div class="demo-margin_box margin-left padding--half">.margin-left</div>
</div>
<div class="demo-margin_container">
    <div class="demo-margin_box margin--3halves padding--half">.margin--3halves</div>
</div>
<div class="demo-margin_container">
    <div class="demo-margin_box margin-top--3halves padding--half">.margin-top--3halves</div>
</div>
<div class="demo-margin_container">
    <div class="demo-margin_box margin-right--3halves padding--half">.margin-right--3halves</div>
</div>
<div class="demo-margin_container">
    <div class="demo-margin_box margin-bottom--3halves padding--half">.margin-bottom--3halves</div>
</div>
<div class="demo-margin_container">
    <div class="demo-margin_box margin-left--3halves padding--half">.margin-left--3halves</div>
</div>
<div class="demo-margin_container">
    <div class="demo-margin_box margin--2x padding--half">.margin--2x</div>
</div>
<div class="demo-margin_container">
    <div class="demo-margin_box margin-top--2x padding--half">.margin-top--2x</div>
</div>
<div class="demo-margin_container">
    <div class="demo-margin_box margin-right--2x padding--half">.margin-right--2x</div>
</div>
<div class="demo-margin_container">
    <div class="demo-margin_box margin-bottom--2x padding--half">.margin-bottom--2x</div>
</div>
<div class="demo-margin_container">
    <div class="demo-margin_box margin-left--2x padding--half">.margin-left--2x</div>
</div>
 
<h3>Padding</h3>

{{#each utilities.padding}}
  <div class="demo-padding_container {{this}}">
    <div class="demo-padding_box padding--half">.{{this}}</div>
  </div>
{{/each}}

<h3>Margin</h3>

{{#each utilities.margin}}
  <div class="demo-margin_container">
    <div class="demo-margin_box {{this}} padding--half">.{{this}}</div>
  </div>
{{/each}}
 
{
  "utilities": {
    "padding": [
      "padding--half",
      "padding-top--half",
      "padding-right--half",
      "padding-bottom--half",
      "padding-left--half",
      "padding",
      "padding-top",
      "padding-right",
      "padding-bottom",
      "padding-left",
      "padding--3halves",
      "padding-top--3halves",
      "padding-right--3halves",
      "padding-bottom--3halves",
      "padding-left--3halves",
      "padding--2x",
      "padding-top--2x",
      "padding-right--2x",
      "padding-bottom--2x",
      "padding-left--2x"
    ],
    "margin": [
      "margin--half",
      "margin-top--half",
      "margin-right--half",
      "margin-bottom--half",
      "margin-left--half",
      "margin-top",
      "margin-right",
      "margin-bottom",
      "margin-left",
      "margin--3halves",
      "margin-top--3halves",
      "margin-right--3halves",
      "margin-bottom--3halves",
      "margin-left--3halves",
      "margin--2x",
      "margin-top--2x",
      "margin-right--2x",
      "margin-bottom--2x",
      "margin-left--2x"
    ],
    "border-radius": [
      "radius",
      "radius-bottom"
    ],
    "border": [
      "border-bottom",
      "border-top",
      "border-left",
      "border-right",
      "border-bottom--primary",
      "border-top--primary",
      "border-left--primary",
      "border-right--primary",
      "no-border"
    ],
    "abs-position": [
      "a-top-right",
      "a-top-left",
      "a-bottom-right",
      "a-center"
    ]
  }
}

Add a class to an element for global padding/margin (all directions), or padding/margin in any one direction. Units of padding are based on 1rem | 16px units.