Padding: Requirements

---

Padding: Variables

Add or subtract margin sizes (px). Add or subtract padding sizes (px).

/* --------------- Padding Variables --------------- */

/* Paddings - Add or subtract padding sizes (px). */
$padding-sizes:(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 12, 15, 18, 21, 24, 27, 30, 33, 36, 45, 50, 54, 63, 72);

/* --------------- /Padding Variables --------------- */

---

Padding: Class Prefix Options (Required)

The Padding Class Prefix can be written in different ways depending on your desired specificity.

Minimal	.p
Strict	.padding

Padding: Class Breakpoint Extensions (Required)

The following breakpoint extension can be customized and extended in the variable-settings.scss file.

Ext	Def	Breakpoint	Device
-tn	tiny	0px	Small Phone
-xs	extra-small	480px	Phone
-sm	small	640px	Small Tablet
-md	medium	768px	Tablet
-lg	large	992px	Laptop
-xl	extra-large	1200px	Desktop
-pr	print	Printed Page	All Devices

Padding: Class Placement Extensions (Required)

The following placement extension allows for every possible combination.

Ext	placement
-t	top
-r	right
-b	bottom
-l	left
-tr	top & right
-tb	top & bottom
-v	(vertical) top & bottom
-tl	top & left
-rb	right & bottom
-rl	right & left
-h	(horizontal) right & left
-bl	bottom & left
-trb	top, right & bottom
-trl	top, right & left
-tbl	top, bottom & left
-rbl	right, bottom & left
-trbl	top, right, bottom & left
	top, right, bottom & left

Padding Size: Value Extentsions (Required)

The following Padding values are provided as they are the most commonly used. Display values can be altered in the variable-settings.scss file. Be careful. Float values are tied to breakpoints. Your css can get rather large.

Padding: Example Code

<!-- Minimal: Right and left paddings are 9px and 18px if the screeen is 768px wide. -->
<div class="p-tn-rl-9 p-tn-rl-18">Display</div>

<!-- Strict: Right and left paddings are 9px and 18px if the screeen is 768px wide. -->
<div class="padding-tn-rl-9 padding-tn-rl-18">Display</div>