Utility for adding css classes for Margin and Padding e.g. .man for 0 margin on all sides, .ptm for 1em padding-top.
This utility plugin adds a series of css classes that allow easy addition of set padding and margin to any element.
For basic use, the classes follow the format of [margin / padding][location letter: all, top, right, bottom, left, vertical, horizontal][amount: none, small, medium, large, extra large (0.5em, 1em, 2em, 4em)]
Also in the basic classes are percentages, taking the place of the last letter in the format [p][percentage] e.g. p7-5 for 7.5% or p15 for 15%.
Examples of Basic Classes:
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
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
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]
s = small (0.5em)
m = medium (1.0em)
l = large (2.0em)
xl = extra large (4.0em)
p5 = 5 percent (5.0%)
p7-5 = 7.5 percent (7.5%)
p10 = 10 percent (10.0%)
p12-5 = 12.5 percent (12.5%)
p15 = 15 percent (15.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
Options for Boxshadow utility
[direction]
all directions shift the shadow by .15em
n = none
t = top
b = bottom
l = left
r = right
tl = top-left
tr = top-right
bl = bottom-left
br = bottom-right
[blur]
s = small (.15em)
m = medium (.3em)
l = large (.6em)
[shadow opacity]
-light = light (0.135 opacity)
-medium = medium (0.27 opacity)
-dark = dark (0.54 opacity)
Installation:
/wp-content/plugins/
directory, or install the plugin through the WordPress plugins screen directly.Installation:
/wp-content/plugins/
directory, or install the plugin through the WordPress plugins screen directly.Extensive use of scss to clean up css files and compile down to one css include for all margin and padding utils
Addition of child- and sub- selectors for margin and padding util
Bugfix: changing implementation of first- and last- to only affect immediate descendants
Updating readme with further instructions and guides
Fixing override issue with responsive margin and padding
Use of SCSS to generate the necessary CSS files
Addition of flexbox util
Addition of :first-child and :last-child selectors
Addition of responsive classes
Extra boxshadow util