CSS Margin & Padding Utility

Screenshots

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: 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] 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 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] 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)