Spacing

How It Works

• To apply the spacing on any element, the format will be: hpu-{property}{side}-{size}.
  • Where the property is one of:
  • m - for classes set to margin
  • p - for classes set to padding
  • Where the side is one of:
  • t - for classes set to margin-top or padding-top.
  • b - for classes set to margin-bottom or padding-bottom.
  • l - for classes set to margin-left or padding-left.
  • r - for classes set to margin-right or padding-right.
  • x - for classes set to both *-left and *-right.
  • y - for classes set to both *-top and *-bottom.
  • blank - for classes to set margin or padding on all 4 sides of the element (e.g. .hpu-m-* or .hpu-p-*).
  • Where the size is one of:
  • auto - sets margin classes to auto.
  • 0 - sets margin and padding to 0.
  • 1 - sets margin and padding to $spacer * .5.
  • 2 - sets margin and padding to $spacer.
  • 3 - sets margin and padding to $spacer * 1.75.
  • 4 - sets margin and padding to $spacer * 2.5.
  • 5 - sets margin and padding to $spacer * 3.
• $spacer by default is set to 1.2rem in _variables.scss file.
• Low-level spacing is also available with unit to explicitly set margin or padding.
• Responsive spacing can also be set.

Margin

Used to create space around elements, outside of any defined borders.

In the examples below, margin-top property is used: .hpu-mt-{0 - 5}

<div class="hpu-row hpu-border-gray no-gap">
    <div class="hpu-h5rem hpu-border-1st hpu-bg-2nd hpu-mt-0"></div>
    <div class="hpu-h5rem hpu-border-1st hpu-bg-2nd hpu-mt-1"></div>
    <div class="hpu-h5rem hpu-border-1st hpu-bg-2nd hpu-mt-2"></div>
    <div class="hpu-h5rem hpu-border-1st hpu-bg-2nd hpu-mt-3"></div>
    <div class="hpu-h5rem hpu-border-1st hpu-bg-2nd hpu-mt-4"></div>
    <div class="hpu-h5rem hpu-border-1st hpu-bg-2nd hpu-mt-5"></div>
</div>

Padding

Creates spaces between an element’s content and its border. Unlike margins, padding affects only the content inside the element

In the examples below, padding-top and padding-bottom properties are used, which is the y-axis: .hpu-py-{0 - 5}.

<div class="hpu-row hpu-border-gray no-gap">
    <div class="hpu-border-1st hpu-bg-2nd hpu-py-0"></div>
    <div class="hpu-border-1st hpu-bg-2nd hpu-py-1"></div>
    <div class="hpu-border-1st hpu-bg-2nd hpu-py-2"></div>
    <div class="hpu-border-1st hpu-bg-2nd hpu-py-3"></div>
    <div class="hpu-border-1st hpu-bg-2nd hpu-py-4"></div>
    <div class="hpu-border-1st hpu-bg-2nd hpu-py-5"></div>
</div>

Auto Margin

Auto margins can be used to center elements or distribute space within a container. They work on block-level elements with a defined width:

• .hpu-mr-auto - aligns the element to the left by pushing it away from the right
• .hpu-mx-auto - centers the element horizontally using equal left and right margins
• .hpu-ml-auto - aligns the element to the right by pushing it away from the left

In the example below, the set width for the content is .hpu-w7rem. Please refer to HPUCSS Dimensions for sizing usage guides.

<div class="hpu-py-2 hpu-border-gray">
    <div class="hpu-w7rem hpu-p-2 hpu-border-1st hpu-bg-2nd hpu-mr-auto"></div>
</div>

<div class="hpu-py-2 hpu-border-gray">
    <div class="hpu-w7rem hpu-p-2 hpu-border-1st hpu-bg-2nd hpu-mx-auto"></div>
</div>

<div class="hpu-py-2 hpu-border-gray">
    <div class="hpu-w7rem hpu-p-2 hpu-border-1st hpu-bg-2nd hpu-ml-auto"></div>
</div>

Low-level Utility Spacing Classes

So far, the examples above have predefined margin and padding values, which can sometimes result in too much or too little spacing for specific needs. This is where the low-level utility classes for margin and padding come in handy.

• The rule for applying low-level utility classes is similar to the previous one, but with a slight variation and the unit addition: .hpu-{property}{side}-{size}{unit}
• Where the size is one of:
  • 1 - 1000 - for setting the margin and padding value.
• Where the unit is one of:
  • px - for classes set to pixels unit.
  • rem - for classes set to rem unit.

In the examples below, px unit is used with .hpu-mt-{size}px (margin-top) classes, and rem unit is used with .hpu-py-{size}rem (padding-top and padding-bottom) classes.

<div class="hpu-row hpu-border-gray no-gap">
    <div class="hpu-h5rem hpu-border-1st hpu-bg-2nd hpu-mt-25px"></div>
    <div class="hpu-h5rem hpu-border-1st hpu-bg-2nd hpu-mt-50px"></div>
    <div class="hpu-h5rem hpu-border-1st hpu-bg-2nd hpu-mt-75px"></div>
    <div class="hpu-h5rem hpu-border-1st hpu-bg-2nd hpu-mt-100px"></div>
</div>

<div class="hpu-row hpu-border-gray no-gap">
    <div class="hpu-border-1st hpu-bg-2nd hpu-py-2rem"></div>
    <div class="hpu-border-1st hpu-bg-2nd hpu-py-4rem"></div>
    <div class="hpu-border-1st hpu-bg-2nd hpu-py-6rem"></div>
    <div class="hpu-border-1st hpu-bg-2nd hpu-py-8rem"></div>
</div>