README

Padding

Defines the space inside an element.

Abbreviations
Examples
Installation

Abbreviations

Abbr	Value
`p`	padding
`t`	top
`r`	right
`pb`	bottom
`pl`	left
`pv`	vertical, top & bottom
`ph`	horizontal, left & right
`0`	`$spacing-0` (0rem, 0px)
`1`	`$spacing-1` (0.25rem, 4px)
`2`	`$spacing-2` (0.5rem, 8px)
`3`	`$spacing-3` (0.75rem, 12px)
`4`	`$spacing-4` (1rem, 16px)
`5`	`$spacing-5` (1.5rem, 24px)
`6`	`$spacing-6` (2rem, 32px)
`7`	`$spacing-7` (2.5rem, 40px)

Examples

Uniform padding

<div class="p-0">Lorem ipsum</div>
<div class="p-1">Lorem ipsum</div>
<div class="p-2">Lorem ipsum</div>
<div class="p-3">Lorem ipsum</div>
<div class="p-4">Lorem ipsum</div>
<div class="p-5">Lorem ipsum</div>
<div class="p-6">Lorem ipsum</div>
<div class="p-7">Lorem ipsum</div>

// This will give a padding of x to all sides.

Directional padding

<div class="pt-4">Lorem ipsum</div>
// This will give a padding-top of 16px.

<div class="pr-3">Lorem ipsum</div>
// This will give a padding-right of 12px.

<div class="pb-5">Lorem ipsum</div>
// This will give a padding-bottom of 24px.

<div class="pl-7">Lorem ipsum</div>
// This will give a padding-left of 40px.

Responsive padding classes

To apply specific classes at set screen widths, use the following classes:

Abbr	Value
`ns`	`$breakpoint-ns` (min-width: 48rem)
`m`	`$breakpoint-m` (min-width: 48rem, max-width: 64rem)
`l`	`$breakpoint-l` (min-width: 64rem)

<div class="pl-7-l pl-5-ns pl-3">Lorem ipsum</div>

// This will give a padding-left of 40px on device widths over 64rem, 24px on devices with a width
of 48rem and finally 12px on devices with a width up to 48rem.

Installation

$ npm install @citizensadvice/padding

now import into your stylesheet...

@import '@citizensadvice/padding/index.scss';

You can make use of the unpkg service, try adding the link below to the head of your HTML file.

<link src="https://unpkg.com/@citizensadvice/padding@latest/build/padding.css" />

Usage no npm install needed!