Search Over 30,000 FREE Plugins from the Official WordPress Plugin Directory Repository

CSS Margin & Padding Utility

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:

  • 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

To add selective classes for adding margin / padding to the first / last child of the required element, simply add 'last-' or 'first-' to 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;

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 letter] a = all t = top r = right b = bottom l = left v = vertical (top + bottom) h = horizontal (left + right)

[amount letter] 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] first- = :first-child last- = :last-child

[screen-size] -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)

Author Jakob op den Brouw
Profile
Contributors JakobopdenBrouw
Tags boxshadow, CSS, css classes, margin, padding, utility

Installation:

  1. Upload the plugin files to the /wp-content/plugins/ directory, or install the plugin through the WordPress plugins screen directly.

  2. Activate the plugin through the 'Plugins' screen in WordPress.

  3. Use the classes (examples given above) to easily and quickly add padding and margin to any element.

1.2.2

  • Updating readme with further instructions and guides

  • Fixing override issue with responsive margin and padding

1.2.1

  • Cleaning up of code and files

1.2

  • Use of SCSS to generate the necessary CSS files

  • Addition of flexbox util

1.1

  • Addition of :first-child and :last-child selectors

  • Addition of responsive classes

  • Extra boxshadow util

1.0

  • Basic Classes
Share  
Download
Version 1.2.2

Requires WordPress version: 3.0.1 or higher

Compatible up to: 4.6.3

Last Updated 15 Dec 2016

Date Added: 29 Nov 2016

Evaluation
star1
star2
star3
star4
star5

0 stars
0 ratings
296 downloads

Compatibility

Not Enough Data

Reports:
Works: 0
Broken: 0