WordPress.org
Get WordPress

Plugin Directory

Changeset 1651472


Ignore:
Timestamp:
05/05/2017 08:22:19 AM (9 years ago)
Author:
Jakobodb
Message:

Addition of new selectors and use of scss. Update to 2.0.0

Location:
cxx-margin-and-padding-utility/tags/2.0.0
Files:
13 added
3 edited
2 copied

Legend:

Unmodified
Added
Removed

  • cxx-margin-and-padding-utility/tags/2.0.0/css-margin-padding-util.php

    r1555520 r1651472  
    11<?php
    2 
    32/*
    4 
    53Plugin Name: CSS Margins and Padding util
    6 
    74Description: Utility for adding css classes for Margin and Padding e.g. .man for 0 margin on all sides, .ptm for 1em padding-top.
    8 
    9 Version: 1.2.2
    10 
     5Version: 2.0.0
    116Author: Jakob op den Brouw
    12 
    137Author URI: http://connexxions.me
    14 
    158*/
    169
    17 
     10/**
     11 * Register with hook 'wp_enqueue_scripts', which can be used for front end CSS and JavaScript
     12 */
     13add_action( 'wp_enqueue_scripts', 'cxx_margins_padding_util', 99 );
    1814
    1915/**
    20 
    21  * Register with hook 'wp_enqueue_scripts', which can be used for front end CSS and JavaScript
    22 
     16 * Enqueue all the util css
    2317 */
    24 
    25 add_action( 'wp_enqueue_scripts', 'cxx_margins_padding_util', 99 );
    26 
    27 
    28 
    29 /**
    30 
    31  * Enqueue all the util css
    32 
    33  */
    34 
    3518function cxx_margins_padding_util() {
    36 
    3719    // Respects SSL, css-margin-padding-util.css is relative to the current file
    38 
    39     wp_register_style( 'cxx-margin-padding-util', plugins_url('/css/css-margin-padding-util-scss.css', __FILE__) );
    40 
    41     wp_register_style( 'cxx-margin-padding-last-util', plugins_url('/css/css-margin-padding-last-util.css', __FILE__) );
    42 
    43     wp_register_style( 'cxx-margin-padding-first-util', plugins_url('/css/css-margin-padding-first-util.css', __FILE__) );
    44 
    45     wp_register_style( 'cxx-margin-padding-responsive-util', plugins_url('/css/css-margin-padding-responsive-util.css', __FILE__) );
    46 
     20    wp_register_style( 'cxx-margin-padding-v2', plugins_url('/css-margin-padding-v2.css', __FILE__) );
    4721    wp_register_style( 'cxx-boxshadow-util', plugins_url('/css/css-boxshadow-util.css', __FILE__) );
     22    wp_register_style( 'cxx-flexbox-util', plugins_url('/css/css-flexbox-util.css', __FILE__) );
    4823   
    49     wp_register_style( 'cxx-flexbox-util', plugins_url('/css/css-flexbox-util.css', __FILE__) );
    50 
    51 
    52    
    53 
    54     wp_enqueue_style( 'cxx-margin-padding-util' );
    55 
    56     wp_enqueue_style( 'cxx-margin-padding-last-util' );
    57 
    58     wp_enqueue_style( 'cxx-margin-padding-first-util' );
    59 
    60     wp_enqueue_style( 'cxx-margin-padding-responsive-util' );
    61 
     24    wp_enqueue_style( 'cxx-margin-padding-v2' );
    6225    wp_enqueue_style( 'cxx-boxshadow-util' );
    63    
    6426    wp_enqueue_style( 'cxx-flexbox-util' );
    65 
    6627}

  • cxx-margin-and-padding-utility/tags/2.0.0/readme.txt

    r1555525 r1651472  
    11=== CSS Margin & Padding Utility ===
    2 
    32Contributors: Jakob op den Brouw
    4 
    53Tags: css, margin, padding, boxshadow, utility, css classes
    6 
    74Requires at least: 3.0.1
    8 
    9 Tested up to: 4.6.1
    10 
    11 Stable tag: 1.2.2
    12 
     5Tested up to: 4.7.4
     6Stable tag: 2.0.0
    137License: GPLv2 or later
    14 
    158License URI: http://www.gnu.org/licenses/gpl-2.0.html
    16 
    17 
    189
    1910Utility for adding css classes for Margin and Padding e.g. .man for 0 margin on all sides, .ptm for 1em padding-top.
    2011
    21 
    22 
    2312== Description ==
    24 
    25 
    2613
    2714This utility plugin adds a series of css classes that allow easy addition of set padding and margin to any element.
    2815
    29 
    30 
    3116For 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)]
    3217
    33 
    34 
    3518Also 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%.
    36 
    37 
    3819
    3920*Examples of Basic Classes:*
    … …  
    4324* mvp5 > margin vertical 5% = margin: 5% 0;
    4425
     26**Additional utility classes - First / Last child, Child / Sub**
    4527
    46 
    47 **Additional utility classes - First / Last child**
    48 
    49 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.
    50 
    51 
     28To 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.
    5229
    5330*Examples of Child Classes*
    5431
    55 * last-mhxl > last-child margin horizontal extra large = last-mhxl :last-child margin: 0 4em;
    56 * last-pbn > last-child padding bottom none = last-pbn :last-child padding-bottom: 0;
    57 * first-mtm > first-child margin top medium = first-mtm :first-child margin-top: 2em;
    58 
    59 
     32* last-mhxl > last-child margin horizontal extra large = last-mhxl :last-child { margin: 0 4em; }
     33* last-pbn > last-child padding bottom none = last-pbn :last-child { padding-bottom: 0; }
     34* first-mtm > first-child margin top medium = first-mtm :first-child { margin-top: 2em; }
     35* child-mal > child margin all large = child-mal > * { margin: 4em; }
     36* sub-php5 > sub elements padding horizontal 5 percent = sub-php5 * { padding: 0 5%; }
    6037
    6138**Additional utility classes - Responsive margin / padding**
    6239
    6340You 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.
    64 
    65 
    6641
    6742*Examples of Responsive Classes*
    … …  
    7146* mhp15-md > margin horizontal 15%, medium screen = (max-width: 979px) and (min-width: 768px) margin-left: 15%; margin-right: 15%;
    7247
    73 
    74 
    7548**Full Table of Options**
    7649
    … …  
    7952p = padding
    8053
    81 [location letter]
     54[location]
    8255a = all
    8356t = top
    … …  
    8861h = horizontal (left + right)
    8962
    90 [amount letter]
     63[amount]
    9164s = small (0.5em)
    9265m = medium (1.0em)
    … …  
    9972p15 = 15 percent (15.0%)
    10073
    101 [first / last]
    102 first- = :first-child
    103 last- = :last-child
     74[first / last] (prefix)
     75first- = > :first-child
     76last- = > :last-child
    10477
    105 [screen-size]
     78[child / sub] (prefix)
     79child- = > *
     80sub- = *
     81
     82[screen-size] (suffix)
    10683-xs = max-width: 480px
    10784-sm = max-width: 767px and min-width: 481px
    … …  
    11087-xl = min-width: 1200px
    11188
    112 
    113 
    11489**Additional utility classes - Boxshadow**
    11590
    11691Using 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].
    117 
    118 
    11992
    12093*Examples of Boxshadow*
    … …  
    12295* shadowout-nm-medium > no direction, medium blur, medium opacity = box-shadow: 0 0 .15em 0 rgba(0,0,0,0.27);
    12396* shadowout-brm-dark > bottom-right direction, medium blur, dark opacity = box-shadow: .15em .15em .3em 0 rgba(0,0,0,0.54);
    124 
    125 
    12697
    12798*Options for Boxshadow utility*
    … …  
    149120-dark = dark (0.54 opacity)
    150121
    151 
    152 
    153122== Installation ==
    154 
    155 
    156123
    157124Installation:
    158125
    159 
    160 
    1611261. Upload the plugin files to the `/wp-content/plugins/` directory, or install the plugin through the WordPress plugins screen directly.
    162 
    1631272. Activate the plugin through the 'Plugins' screen in WordPress.
    164 
    1651283. Use the classes (examples given above) to easily and quickly add padding and margin to any element.
    166129
     130== Changelog ==
    167131
     132= 2.0.0 =
    168133
    169 == Changelog ==
     134* Extensive use of scss to clean up css files and compile down to one css include for all margin and padding utils
     135
     136* Addition of child- and sub- selectors for margin and padding util
     137
     138* Bugfix: changing implementation of first- and last- to only affect immediate descendants
    170139
    171140= 1.2.2 =
    … …  
    206175== Upgrade Notice ==
    207176
     177= 2.0.0 =
     178
     179* Addition of child- and sub- selectors for > * and * respectively
     180
     181* first- and last- are only applied to direct children ( > :first-child or > :last-child )
     182
    208183= 1.1 =
    209184

  • cxx-margin-and-padding-utility/tags/2.0.0/scss/css-margin-padding-util-scss.scss

    r1542886 r1651472  
    1818    (p,     padding);
    1919
    20 $direction-list: 
     20$direction-list:
    2121    (a,     all),
    2222    (v,     vertical),
Note: See TracChangeset for help on using the changeset viewer.