Margin/padding adding/removing utility module

[mhulse]

Need some sort of breakpoint utility classes for margin/padding add/remove CSS.

Here's some OLD CSS I wrote back before "responsive" was cool. The margin/padding CSS in this code could help to inspire (at least, it's an example of fixed-width classes to accomplish same thing).

/*
** 
**             File: layout.css
**          Created: 04/27/08
**         Modified: 01/25/09
**          Creator: Micky Hulse
**           Author: Micky Hulse
** 
*/

    /*----------( PRIMARY LAYOUT/STRUCTURE: )---------*/

        /*
        ** 
        ** The Register-Guard v3.5 Grid:
        **      http://assets.registerguard.com/v3.5/docs/grids.html
        ** 
        */

        /*
        ** 
        ** Browser support charts for multiple classes applied to one element:
        **      http://www.pixelsurge.com/experiment/multiplestyles.htm
        ** 
        */

        /* Master container: */
        .c1010 { width: 1010px; }

        /* Base width: */
        .c990 { width: 990px; }

        /* 990->630/350_base: */
            .c630 { width: 630px; }
            .c502 { width: 502px; }
            .c470 { width: 470px; }
            .c374 { width: 374px; }
            .c350 { width: 350px; }
            .c310 { width: 310px; }
            .c246 { width: 246px; }
            .c230 { width: 230px; }
            .c182 { width: 182px; }
            .c170 { width: 170px; }
            .c150 { width: 150px; }
            .c118 { width: 118px; }
            .c110 { width: 110px; }

        /* 990->650/330_base: */
            .c650 { width: 650px; }
            .c518 { width: 518px; }
            .c485 { width: 485px; }
            .c386 { width: 386px; }
            .c330 { width: 330px; }
            .c320 { width: 320px; }
            .c254 { width: 254px; }
            .c210 { width: 210px; }
            .c166 { width: 166px; }
            .c160 { width: 160px; }
            .c155 { width: 155px; }
            .c122 { width: 122px; }
            .c100 { width: 100px; }

        /* 990->680/300_base: */
            .c680 { width: 680px; }
            .c542 { width: 542px; }
            .c450 { width: 450px; }
            .c404 { width: 404px; }
            .c335 { width: 335px; }
            .c300 { width: 300px; }
            .c266 { width: 266px; }
            .c220 { width: 220px; }
            .c197 { width: 197px; }
            .c174 { width: 174px; }
            .c145 { width: 145px; }
            .c128 { width: 128px; }

        /* 990_split: */
            .c865 { width: 865px; }
            .c740 { width: 740px; }
            .c615 { width: 615px; }
            .c490 { width: 490px; }
            .c365 { width: 365px; }
            .c240 { width: 240px; }
            .c165 { width: 165px; }
            .c140 { width: 140px; }
            .c115 { width: 115px; }

        /*
        ** 
        ** For fluid, evenly split, columns.
        ** Just float left/right and you're good.
        ** 
        */

        .c49p { width: 49%; }
        .c48p { width: 48%; }
        .c47p { width: 47%; }
        .c46p { width: 46%; }
        .c45p { width: 45%; }

        /* Flexible inner-column layouts (add more as needed): */

            /* Fluid on right: */
                .f_ml300 { margin-left: 300px; }
                .f_ml160 { margin-left: 160px; }
                .f_ml140 { margin-left: 140px; }
                .f_ml135 { margin-left: 135px; }
                .f_ml110 { margin-left: 110px; }
                .f_ml85 { margin-left: 85px; }
                .f_ml70 { margin-left: 70px; }
                .f_ml60 { margin-left: 60px; }

                /* Fix IE: */
                    * html .f_ml300,
                    * html .f_ml160,
                    * html .f_ml140,
                    * html .f_ml135,
                    * html .f_ml110,
                    * html .f_ml85,
                    * html .f_ml70,
                    * html .f_ml60 {
                        height: 1%;
                        margin: 0;
                    }

            /* Fluid on left: */
                .f_mr300 { margin-right: 300px; }
                .f_mr160 { margin-right: 160px; }
                .f_mr140 { margin-right: 140px; }
                .f_mr135 { margin-right: 135px; }
                .f_mr110 { margin-right: 110px; }
                .f_mr85 { margin-right: 85px; }
                .f_mr70 { margin-right: 70px; }
                .f_mr60 { margin-right: 60px; }

                /* Fix IE: */
                    * html .f_mr300,
                    * html .f_mr160,
                    * html .f_mr140,
                    * html .f_mr135,
                    * html .f_mr110,
                    * html .f_mr85,
                    * html .f_mr70,
                    * html .f_mr60 {
                        height: 1%;
                        margin: 0;
                    }

            /* Static widths (10px less than fluid margins for gutter -- don't forget to float!): */
                /* Note: If you decide to float right, use below class with "r". If you float left, use below class with "l". */
                .f_c290r,
                .f_c290l { width: 290px; }
                .f_c150r,
                .f_c150l { width: 150px; }
                .f_c130r,
                .f_c130l { width: 130px; }
                .f_c125r,
                .f_c125l { width: 125px; }
                .f_c100r,
                .f_c100l { width: 100px; }
                .f_c75r,
                .f_c75l { width: 75px; }
                .f_c60r,
                .f_c60l { width: 60px; }
                .f_c50r,
                .f_c50l { width: 50px; }

                /* Fix IE: */
                    /* Right-margin: */
                    * html .f_c290r,
                    * html .f_c150r,
                    * html .f_c130r,
                    * html .f_c125r,
                    * html .f_c100r,
                    * html .f_c75r,
                    * html .f_c60r,
                    * html .f_c50r { margin-left: 7px; }
                    /* Left-margin: */
                    * html .f_c290l,
                    * html .f_c150l,
                    * html .f_c130l,
                    * html .f_c125l,
                    * html .f_c100l,
                    * html .f_c75l,
                    * html .f_c60l,
                    * html .f_c50l { margin-right: 7px; }

    /*----------( UTILITY: )---------*/

        /*
        ** Floats:
        */

            /*
            ** All versions of InternetExplorer suffer from the DoubleMarginBug.
            ** Floats magically acquire excess margin, or their internal elements do.
            ** The fix is remarkably simple: apply the rule  display: inline to the floated element.
            ** This has no meaning to other browsers, since floating an element automatically forces its display value to be "block".
            **      Ref: "Bugs" <http://css-discuss.incutio.com/?page=FloatedBlock>
            */

            /* Left floats: */
            .fl {
                float: left;
                display: inline;
            }

            /* Right floats: */
            .fr {
                float: right;
                display: inline;
            }

        /*
        ** Positioning:
        */

        /* Absolute: */
        .pa { position: absolute; }

        /* Relative: */
        .pr { position: relative; }

        /* Static: */
        .ps { position: static; }

        /* Utility margin-giving classes: */
            /* TOP: */
                .mt05 { margin-top: 5px; }
                .mt10 { margin-top: 10px; }
                .mt15 { margin-top: 15px; }
                .mt20 { margin-top: 20px; }
            /* RIGHT: */
                .mr05 { margin-right: 5px; }
                .mr10 { margin-right: 10px; }
                .mr15 { margin-right: 15px; }
                .mr20 { margin-right: 20px; }
            /* BOTTOM: */
                .mb05 { margin-bottom: 5px; }
                .mb10 { margin-bottom: 10px; }
                .mb15 { margin-bottom: 15px; }
                .mb20 { margin-bottom: 20px; }
            /* LEFT: */
                .ml05 { margin-left: 5px; }
                .ml10 { margin-left: 10px; }
                .ml15 { margin-left: 15px; }
                .ml20 { margin-left: 20px; }
            /* RIGHT/LEFT: */
                .mrl05 { margin: 0 5px; }
                .mrl10 { margin: 0 10px; }
                .mrl15 { margin: 0 15px; }
                .mrl20 { margin: 0 20px; }
            /* TOP/BOTTOM: */
                .mtb05 { margin: 5px 0; }
                .mtb10 { margin: 10px 0; }
                .mtb15 { margin: 15px 0; }
                .mtb20 { margin: 20px 0; }
            /* TOP/RIGHT/BOTTOM/LEFT: */
                .mtrbl05 { margin: 5px; }
                .mtrbl10 { margin: 10px; }
                .mtrbl15 { margin: 15px; }
                .mtrbl20 { margin: 20px; }
            /* AUTO: */
                .am {
                    margin-right: auto;
                    margin-left: auto;
                }

        /* Remove margins: */
            /* TOP: */
                .nomt { margin-top: 0 !important; }
            /* RIGHT: */
                .nomr { margin-right: 0 !important; }
            /* BOTTOM: */
                .nomb { margin-bottom: 0 !important; }
            /* LEFT: */
                .noml { margin-left: 0 !important; }
            /* RIGHT/LEFT: */
                .nomrl { margin-right: 0 !important; }
                .nomrl { margin-left: 0 !important; }
            /* TOP/BOTTOM: */
                .nomtb { margin-top: 0 !important; }
                .nomtb { margin-bottom: 0 !important; }
            /* TOP/RIGHT/BOTTOM/LEFT: */
                .nm { margin: 0 !important; }

        /* Utility padding-giving classes: */
            /* TOP: */
                .pt05 { padding-top: 5px; }
                .pt10 { padding-top: 10px; }
                .pt15 { padding-top: 15px; }
                .pt20 { padding-top: 20px; }
            /* RIGHT: */
                .pr05 { padding-right: 5px; }
                .pr10 { padding-right: 10px; }
                .pr15 { padding-right: 15px; }
                .pr20 { padding-right: 20px; }
            /* BOTTOM: */
                .pb05 { padding-bottom: 5px; }
                .pb10 { padding-bottom: 10px; }
                .pb15 { padding-bottom: 15px; }
                .pb20 { padding-bottom: 20px; }
            /* LEFT: */
                .pl05 { padding-left: 5px; }
                .pl10 { padding-left: 10px; }
                .pl15 { padding-left: 15px; }
                .pl20 { padding-left: 20px; }
            /* RIGHT/LEFT: */
                .prl05 { padding: 0 5px; }
                .prl10 { padding: 0 10px; }
                .prl15 { padding: 0 15px; }
                .prl20 { padding: 0 20px; }
            /* TOP/BOTTOM: */
                .ptb05 { padding: 0 5px; }
                .ptb10 { padding: 0 10px; }
                .ptb15 { padding: 0 15px; }
                .ptb20 { padding: 0 20px; }
            /* TOP/RIGHT/BOTTOM/LEFT: */
                .ptrbl05 { padding: 5px; }
                .ptrbl10 { padding: 10px; }
                .ptrbl15 { padding: 15px; }
                .ptrbl20 { padding: 20px; }

        /* Remove padding: */
            /* TOP: */
                .nopt { padding-top: 0 !important; }
            /* RIGHT: */
                .nopr { padding-right: 0 !important; }
            /* BOTTOM: */
                .nopb { padding-bottom: 0 !important; }
            /* LEFT: */
                .nopl { padding-left: 0 !important; }
            /* RIGHT/LEFT: */
                .noprl { padding-right: 0 !important; }
                .noprl { padding-left: 0 !important; }
            /* TOP/BOTTOM: */
                .noptb { padding-top: 0 !important; }
                .noptb { padding-bottom: 0 !important; }
            /* TOP/RIGHT/BOTTOM/LEFT: */
                .np { padding: 0 !important; }

        /* Hide certain elements for browsers without CSS: */
        .hide, hr { display: none !important; }
        /* Hiding of elements for assistive devices (screen readers etc): */
        .off {
            position: absolute;
            left: -999em;
            top: -999em;
        }

    /*----------( CLEARING: )---------*/

        /* Specify clears: */
        .clear:after {
            height: 0;
            display: block;
            clear: both;
            content: '.';
            visibility: hidden;
        } /* Clears non-IE. */
        /* SEE ie-all.css for IE-specific css. */

        /* Clearing div (oldschool): */
        div.clearer {
            font-size: 0 !important;    /* Set the font-size to 0 so it isn't visible */
            line-height: 0 !important;  /* Set the line-height to 0 so it isn't visible */
            border: 0 !important;       /* Remove all borders that would make it visible */
            margin: 0 !important;       /* Remove all margins that would make it visible */
            padding: 0 !important;      /* Remove all padding that would make it visible */
            height: 0.1px !important;   /* Mozilla/Firefox require the clearer height to not be 0, but rounding makes it 0 */
            float: none !important;     /* Remove any inherited floats */
            display: block !important;  /* Make sure our element is a block-level element */
            clear: both !important;     /* Make sure it clears on both sides */
        }

[psullivan6]

Not sure if this helps, but here's some breakpoint-specific margin CSS from raptor Still needs a review once the whole kit is done, but works pretty well for super quick development