{"id":52394,"date":"2016-11-29T19:30:40","date_gmt":"2016-11-29T19:30:40","guid":{"rendered":"https:\/\/wordpress.org\/plugins-wp\/cxx-margin-and-padding-utility\/"},"modified":"2017-05-26T11:06:01","modified_gmt":"2017-05-26T11:06:01","slug":"cxx-margin-and-padding-utility","status":"publish","type":"plugin","link":"https:\/\/tah.wordpress.org\/plugins\/cxx-margin-and-padding-utility\/","author":13022723,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"2.0.1","stable_tag":"2.0.1","tested":"4.7.33","requires":"3.0.1","requires_php":"","requires_plugins":"","header_name":"CSS Margins and Padding util","header_author":"Jakob op den Brouw","header_description":"","assets_banners_color":"","last_updated":"2017-05-26 11:06:01","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"","header_author_uri":"http:\/\/connexxions.me","rating":0,"author_block_rating":0,"active_installs":70,"downloads":3898,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","changelog","faq"],"tags":[],"upgrade_notice":{"2.0.0":"<ul>\n<li><p>Addition of child- and sub- selectors for &gt; * and * respectively<\/p><\/li>\n<li><p>first- and last- are only applied to direct children ( &gt; :first-child or &gt; :last-child )<\/p><\/li>\n<\/ul>","1.1":"<ul>\n<li><p>Addition of :first-child and :last-child selectors<\/p><\/li>\n<li><p>Addition of responsive classes<\/p><\/li>\n<\/ul>"},"ratings":{"1":0,"2":0,"3":0,"4":0,"5":0},"assets_icons":[],"assets_banners":[],"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.2.1","1.2.2","1.2.3","2.0.0","2.0.1"],"block_files":[],"assets_screenshots":[],"screenshots":[],"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[127221,356,11938,33345,2474],"plugin_category":[59],"plugin_contributors":[],"plugin_business_model":[],"class_list":["post-52394","plugin","type-plugin","status-publish","hentry","plugin_tags-boxshadow","plugin_tags-css","plugin_tags-margin","plugin_tags-padding","plugin_tags-utility","plugin_category-utilities-and-tools","plugin_committers-jakobodb"],"banners":[],"icons":{"svg":false,"icon":"https:\/\/s.w.org\/plugins\/geopattern-icon\/cxx-margin-and-padding-utility.svg","icon_2x":false,"generated":true},"screenshots":[],"raw_content":"<!--section=description-->\n<p>This utility plugin adds a series of css classes that allow easy addition of set padding and margin to any element.<\/p>\n\n<p>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)]<\/p>\n\n<p>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%.<\/p>\n\n<p><em>Examples of Basic Classes:<\/em><\/p>\n\n<ul>\n<li>man &gt; margin all none = margin: 0px;<\/li>\n<li>prl &gt; padding right large = padding-right: 2em;<\/li>\n<li>mvp5 &gt; margin vertical 5% = margin: 5% 0;<\/li>\n<\/ul>\n\n<p><strong>Additional utility classes - First \/ Last child, Child \/ Sub<\/strong><\/p>\n\n<p>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.<\/p>\n\n<p><em>Examples of Child Classes<\/em><\/p>\n\n<ul>\n<li>last-mhxl &gt; last-child margin horizontal extra large = last-mhxl :last-child { margin: 0 4em; }<\/li>\n<li>last-pbn &gt; last-child padding bottom none = last-pbn :last-child { padding-bottom: 0; }<\/li>\n<li>first-mtm &gt; first-child margin top medium = first-mtm :first-child { margin-top: 2em; }<\/li>\n<li>child-mal &gt; child margin all large = child-mal &gt; * { margin: 4em; }<\/li>\n<li>sub-php5 &gt; sub elements padding horizontal 5 percent = sub-php5 * { padding: 0 5%; }<\/li>\n<\/ul>\n\n<p><strong>Additional utility classes - Responsive margin \/ padding<\/strong><\/p>\n\n<p>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.<\/p>\n\n<p><em>Examples of Responsive Classes<\/em><\/p>\n\n<ul>\n<li>mrm-lg &gt; margin right medium, large screen = (max-width: 1199px) and (min-width: 980px) margin-right: 2em;<\/li>\n<li>pas-xs &gt; padding all small, xsmall screen = (max-width: 480px) padding: 0.5em;<\/li>\n<li>mhp15-md &gt; margin horizontal 15%, medium screen = (max-width: 979px) and (min-width: 768px) margin-left: 15%; margin-right: 15%;<\/li>\n<\/ul>\n\n<p><strong>Full Table of Options<\/strong><\/p>\n\n<p>[margin \/ padding]\nm = margin\np = padding<\/p>\n\n<p>[location]\na = all\nt = top\nr = right\nb = bottom\nl = left\nv = vertical (top + bottom)\nh = horizontal (left + right)<\/p>\n\n<p>[amount]\ns = small (0.5em)\nm = medium (1.0em)\nl = large (2.0em)\nxl = extra large (4.0em)\np5 = 5 percent (5.0%)\np7-5 = 7.5 percent (7.5%)\np10 = 10 percent (10.0%)\np12-5 = 12.5 percent (12.5%)\np15 = 15 percent (15.0%)<\/p>\n\n<p>[first \/ last] (prefix)\nfirst- = &gt; :first-child\nlast- = &gt; :last-child<\/p>\n\n<p>[child \/ sub] (prefix)\nchild- = &gt; *\nsub- = *<\/p>\n\n<p>[screen-size] (suffix)\n-xs = max-width: 480px\n-sm = max-width: 767px and min-width: 481px\n-md = max-width: 979px and min-width: 768px\n-lg = max-width: 1199px and min-width: 980px\n-xl = min-width: 1200px<\/p>\n\n<p><strong>Additional utility classes - Boxshadow<\/strong><\/p>\n\n<p>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].<\/p>\n\n<p><em>Examples of Boxshadow<\/em><\/p>\n\n<ul>\n<li>shadowout-nm-medium &gt; no direction, medium blur, medium opacity = box-shadow: 0 0 .15em 0 rgba(0,0,0,0.27);<\/li>\n<li>shadowout-brm-dark &gt; bottom-right direction, medium blur, dark opacity = box-shadow: .15em .15em .3em 0 rgba(0,0,0,0.54);<\/li>\n<\/ul>\n\n<p><em>Options for Boxshadow utility<\/em><\/p>\n\n<p>[direction]\nall directions shift the shadow by .15em\nn = none\nt = top\nb = bottom\nl = left\nr = right\ntl = top-left\ntr = top-right\nbl = bottom-left\nbr = bottom-right<\/p>\n\n<p>[blur]\ns = small (.15em)\nm = medium (.3em)\nl = large (.6em)<\/p>\n\n<p>[shadow opacity]\n-light = light (0.135 opacity)\n-medium = medium (0.27 opacity)\n-dark = dark (0.54 opacity)<\/p>\n\n<!--section=installation-->\n<p>Installation:<\/p>\n\n<ol>\n<li>Upload the plugin files to the <code>\/wp-content\/plugins\/<\/code> directory, or install the plugin through the WordPress plugins screen directly.<\/li>\n<li>Activate the plugin through the 'Plugins' screen in WordPress.<\/li>\n<li>Use the classes (examples given above) to easily and quickly add padding and margin to any element.<\/li>\n<\/ol>\n\n<!--section=changelog-->\n<h4>2.0.1<\/h4>\n\n<ul>\n<li>Fixed: Bug with responsive utility; xs and xl not working due to syntax error.<\/li>\n<\/ul>\n\n<h4>2.0.0<\/h4>\n\n<ul>\n<li><p>Extensive use of scss to clean up css files and compile down to one css include for all margin and padding utils<\/p><\/li>\n<li><p>Addition of child- and sub- selectors for margin and padding util<\/p><\/li>\n<li><p>Bugfix: changing implementation of first- and last- to only affect immediate descendants<\/p><\/li>\n<\/ul>\n\n<h4>1.2.2<\/h4>\n\n<ul>\n<li><p>Updating readme with further instructions and guides<\/p><\/li>\n<li><p>Fixing override issue with responsive margin and padding<\/p><\/li>\n<\/ul>\n\n<h4>1.2.1<\/h4>\n\n<ul>\n<li>Cleaning up of code and files<\/li>\n<\/ul>\n\n<h4>1.2<\/h4>\n\n<ul>\n<li><p>Use of SCSS to generate the necessary CSS files<\/p><\/li>\n<li><p>Addition of flexbox util<\/p><\/li>\n<\/ul>\n\n<h4>1.1<\/h4>\n\n<ul>\n<li><p>Addition of :first-child and :last-child selectors<\/p><\/li>\n<li><p>Addition of responsive classes<\/p><\/li>\n<li><p>Extra boxshadow util<\/p><\/li>\n<\/ul>\n\n<h4>1.0<\/h4>\n\n<ul>\n<li>Basic Classes<\/li>\n<\/ul>\n\n<!--section=faq-->\n<dl>\n<dt>Installation Instructions<\/dt>\n<dd><p>Installation:<\/p>\n\n<ol>\n<li>Upload the plugin files to the <code>\/wp-content\/plugins\/<\/code> directory, or install the plugin through the WordPress plugins screen directly.<\/li>\n<li>Activate the plugin through the 'Plugins' screen in WordPress.<\/li>\n<li>Use the classes (examples given above) to easily and quickly add padding and margin to any element.<\/li>\n<\/ol><\/dd>\n\n<\/dl>","raw_excerpt":"Utility for adding css classes for Margin and Padding e.g. .man for 0 margin on all sides, .ptm for 1em padding-top.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/tah.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/52394","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tah.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/tah.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/tah.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=52394"}],"author":[{"embeddable":true,"href":"https:\/\/tah.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/jakobodb"}],"wp:attachment":[{"href":"https:\/\/tah.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=52394"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/tah.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=52394"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/tah.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=52394"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/tah.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=52394"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/tah.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=52394"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/tah.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=52394"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}