Flexible Framework: Margin


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.

Ext Size
-auto auto
-1 1px
-2 2px
-3 4px
-4 4px
-5 5px
-6 6px
-7 7px
-8 8px
-9 9px
-12 12px
-15 15px
Ext Size
-18 18px
-21 21px
-24 24px
-27 27px
-30 30px
-33 36px
-45 45px
-50 50px
-54 54px
-63 63px
-72 72px

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>