Margin: Requirements

---

Margin: Variables

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

/* --------------- Margin Variables --------------- */

/* Margins - Add or subtract margin sizes (px). */
$margin-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);

/* --------------- /Margin Variables --------------- */

---

Margin: Class Prefix Options (Required)

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

Minimal	.m
Strict	.margin

Margin: 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

Margin: 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

Margin Class: Negative Extentsion (Optional)

The following negative extension allows for every negative margins.

Ext	Effect
-neg	Makes the following size extention negative.

Margin Size: Value Extentsions (Required)

The following Margin 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.

Margin: Example Code

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

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