Padding | hgrid

General Padding

The padding utilities have 5 and 10 pixels incrementations from 0 to 150 pixels. They use rem units, but their names reflect the pixel value they correspond to in a default hgrid setup. Applying .padding-60 to an element gives it 6rem of visually adjusted padding on all sides, which corresponds to 60px.

By «visually adjusted» we mean that hgrid adds a slightly reduced top and bottom padding in an attempt to compensate for line height and other that is often found around text content.

Utility Name	CSS Property
`.p-0` / `.padding-0`	padding: 0;
`.p-5` / `.padding-5`	padding: 0.4rem 0.5rem; /* visual adjustment top/bottom */
`.p-10` / `.padding-10`	padding: 0.8rem 1rem; /* visual adjustment top/bottom */
`.p-20` / `.padding-10`	padding: 1.6rem 2rem; /* visual adjustment top/bottom */
etc. ...
`.p-150` / `.padding-150`	padding: 12rem 15rem; /* visual adjustment top/bottom */

Code example:

<div class="bg-gray padding-60 max-content-max">
  <p class="bg-gray-dark border-gray-lighter border-dashed text-white">
    The ecommerce site had an average conversion rate of 2.1%.
  </p>
</div>

Result:

The ecommerce site had an average conversion rate of 2.1%.

Individual Padding

  <div class="bg-gray pt-20 pr-90 pb-100 pl-30 max-content-max">
  <p class="bg-gray-dark border-gray-lighter border-dashed">
    Starting small is always a great way to start with freelancing.
  </p>
</div>

Result:

Starting small is always a great way to start with freelancing.

Utility Name	CSS Property
`.pt-0` / `.padding-top-0`	padding-top: 0;
`.pt-5` / `.padding-top-5`	padding-top: 0.4rem; /* 1px visual adjustment */
`.pt-10` / `.padding-top-10`	padding-top: 1rem;
`.pt-20` / `.padding-top-20`	padding-top: 2rem;
etc. ...
`.pt-140` / `.padding-top-140`	padding-top: 14rem;
`.pt-150` / `.padding-top-150`	padding-top: 15rem;

These utility names are available by following the pattern above:

.pr-{*} / .padding-right-{*}
.pb-{*} / .padding-bottom-{*}
.pl-{*} / .padding-left-{*}

Values: 0, 5, 10, 20 ... up to 150.

Responsive Overrides

Let's revisit the example above and add a responsive modification. On screens smaller than tablets in landscape mode we want to remove the padding-top completely. We'll use the .tablet-landscape-pt-0 utility:

  <div class="bg-gray pt-50 pr-90 pb-80 pl-40 tablet-landscape-pt-0 max-content-max">
  <p class="bg-gray-dark border-gray-lighter border-dashed">
    Starting small is always a great way to start with freelancing.
  </p>
</div>

The result can now be seen by scaling your viewport down to 1024 pixels or less:

Starting small is always a great way to start with freelancing.

Use the override utilities along this pattern:

.desktop-large-p-5
.desktop-large-pt-5
.desktop-large-pr-5
.desktop-large-pb-5
.desktop-large-pl-5

.desktop-large-p-10
.desktop-large-pt-10
.desktop-large-pr-10
.desktop-large-pb-10
.desktop-large-pl-10

etc. ... incremented by 10

.phone-landscape-p-150
.phone-landscape-pt-150
.phone-landscape-pr-150
.phone-landscape-pb-150
.phone-landscape-pl-150

The default viewport laptop (<=1280px) is excluded from the screen names you can use to construct these overrides.

Your alternatives are: .desktop-large (>1680px), .desktop (>1280px), .tablet-landscape (<=1024px), .tablet-portrait (<=900px), .phone-landscape (<=768px) and .phone (<=600px).

Each group of overrides goes up to 150.