_margin.scss
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 --------------- */
The Margin Class Prefix can be written in different ways depending on your desired specificity.
Minimal | .m |
---|---|
Strict | .margin |
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 | Printed Page | All Devices |
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 |
The following negative extension allows for every negative margins.
Ext | Effect |
---|---|
-neg | Makes the following size extention negative. |
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 |
Display
Display