About this plugin
This utility plugin adds a series of css classes that allow easy addition of set padding and margin to any element.
5em, 1em, 2em, 4em)]
g. 5% or p15 for 15%.
Examples of Basic Classes:
- man > margin all none = margin: 0px;
- prl > padding right large = padding-right: 2em;
- mvp5 > margin vertical 5% = margin: 5% 0;
Additional utility classes – First / Last child, Child / Sub
To add selective classes for adding margin / padding to the first / last child, any child, or any sub-element of the required element, simply add ‘last-‘, ‘first-‘, ‘child-‘, or ‘sub-‘ to the beginning of the basic classes.
Examples of Child Classes
- last-mhxl > last-child margin horizontal extra large = last-mhxl:last-child { margin: 0 4em; }
- last-pbn > last-child padding bottom none = last-pbn:last-child { padding-bottom: 0; }
- first-mtm > first-child margin top medium = first-mtm:first-child { margin-top: 2em; }
- child-mal > child margin all large = child-mal > * { margin: 4em; }
- sub-php5 > sub elements padding horizontal 5 percent = sub-php5 * { padding: 0 5%; }
Additional utility classes – Responsive margin / padding
You can also apply the margin / padding required to certain screen widths, ranging from xl (min: 1200px) to xs (max: 480px). To use these responsive classes, add -[screen-size] to the end of the basic classes.
Examples of Responsive Classes
- mrm-lg > margin right medium, large screen = (max-width: 1199px) and (min-width: 980px) margin-right: 2em;
- pas-xs > padding all small, xsmall screen = (max-width: 480px) padding: 0.5em;
- mhp15-md > margin horizontal 15%, medium screen = (max-width: 979px) and (min-width: 768px) margin-left: 15%; margin-right: 15%;
Full Table of Options
[margin / padding]
m = margin
p = padding
[location]
a = all
t = top
r = right
b = bottom
l = left
v = vertical (top + bottom)
h = horizontal (left + right)
[amount]
5em)
0em)
0em)
0em)
0%)
5%)
0%)
5%)
0%)
[first / last] (prefix)
first- = >:first-child
last- = >:last-child
[child / sub] (prefix)
child- = > *
sub- = *
[screen-size] (suffix)
-xs = max-width: 480px
-sm = max-width: 767px and min-width: 481px
-md = max-width: 979px and min-width: 768px
-lg = max-width: 1199px and min-width: 980px
-xl = min-width: 1200px
Additional utility classes – Boxshadow
Using the boxshadow utility classes, you can quickly add a boxshadow to divs and other elements. The format of the utility classes is as follows: shadowout-[direction][blur]-[shadow opacity].
Examples of Boxshadow
- shadowout-nm-medium > no direction, medium blur, medium opacity = box-shadow: 0 0.15em 0 rgba(0,0,0,0.27);
- shadowout-brm-dark > bottom-right direction, medium blur, dark opacity = box-shadow:.15em.15em.3em 0 rgba(0,0,0,0.54);
Options for Boxshadow utility
[direction]
15em
n = none
t = top
b = bottom
l = left
r = right
tl = top-left
tr = top-right
bl = bottom-left
br = bottom-right
[blur]
15em)
3em)
6em)
[shadow opacity]
135 opacity)
27 opacity)
54 opacity)