CSS Helpers - Styles to put at the end of your stylesheet that accomplish common tasks

helpers.css

/*****************************************    
      Required: Do Not Modify
******************************************/

/**   
 * Clearfix Helpers 0.5.0
 * by Chris J. Lee
 * 
 * These are primarily tools to reduce 
 * the amount of style rewriting. These
 * are some classes that i've built
 * repeatedly over the years. 
 * 
 * Each of the following classes are 
 * declared after to override existing styles. 
 * 
 * Classes:
 * .clearfix, .section, .sxn, .colgroup, .bfr, .bfl, .page
 * 
 * .bfl, .bfr - Both classes used to fix the whole
 *    issue of zero px heights commonly caused by floats.
 *    They're abbreviations for block float left/right. These are used by floated divs 
 * 
 *  - Doesn't have any float but forces browser 
 * to give it a height
 * 
 * .section, .sxn (shortcut) - are used to ensure that a whole div 
 *    that contain blocks maintains a height. 
 * 
 */ 
.clearfix:after, .sxn:after, .section:after :after, .colgroup:after, 
.bfr:after, .bfl:after, .widget:after, .page:after{content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0}
.clearfix, .sxn, , .section, .colgroup, .widget, .page, .sxn, .bfr, .bfl {display:inline-block}
html[xmlns] .clearfix, html[xmlns] .section, html[xmlns] .sxn, html[xmlns] , html[xmlns] .bfr, html[xmlns] .bfl, html[xmlns] .colgroup, html[xmlns] .widget, html[xmlns] .page {display:block}
* html .clearfix, * html .bfl, * html .bfr, * html .section, * html .sxn, * html .colgroup,  * html .widget, * html .page{height:1%}

/**   Clearfloat Fix    */
.clearfloat { clear:both; height:0; font-size: 1px; line-height: 0px; } 
.cancelfloatempty {clear:both; font-size:1px; margin:0; padding:0}

/**   Float Classes   */
.col, .cg, .fl, .bfl { float: left !important; } 
.bfr, .fr { float:right !important; } 
.fn, .sxn { float:none; }

/**   Image Fixes for IE6   */
.f0, .imgfix { font-size: 0; line-height: 0px;  } 
.pw, .inset { margin-left: auto; margin-right: auto;}

/**   Show / Hide  / Stage  */
.hide {display: none; } .db,.show { display: block; }
.hide-text, .hidetext, .stage { position: absolute; left: -999em;  }
.show-text { position: static; left: auto; }

div.menu { width: 100%; }
  div.menu ul { list-style: none; }
    div.menu ul li { list-style: none; float: none; margin: 0; padding:0.5em 0.2em;}
    
/** jQuery Tabs Dependant Styles  */
.ui-tabs .ui-tabs-hide { position: absolute; left: -999em; }

/**   Font Sizes    */
.fs-xxs   { font-size: 8px !important;  line-height: 120% !important; } .fs-xs  { font-size: 10px !important;  line-height: 120% !important; }
.fs-s   { font-size: 12px !important; line-height: 120% !important; } .fs-m   { font-size: 14px !important; line-height: 130% !important; }
.fs-l   { font-size: 16px !important; line-height: 140% !important; } .fs-xl  { font-size: 18px !important; line-height: 143% !important; }
.fs-xxl { font-size: 20px !important; line-height: 145% !important; } .fs-xxxl { font-size: 24px !important; line-height: 150% !important; } 

/**   Line-Height   */
.lh-1e { line-height: 1em !important; } .lh-1e1 { line-height: 1.1em !important; } .lh-1e2 { line-height: 1.2em !important; } 
.lh-1e3 { line-height: 1.3em !important; } .lh-1e4 { line-height: 1.4em !important; } .lh-1e5 { line-height: 1.5em !important; }
.lh-1e6 { line-height: 1.6em !important; } .lh-1e7 { line-height: 1.7em !important; } .lh-1e8 { line-height: 1.8em !important; }
.lh-2e { line-height: 2em !important; } .lh-2e1 { line-height: 2.1em !important; } .lh-2e5 { line-height: 2.5em !important; }

.lh-100p { line-height: 100% } .lh-120p { line-height: 120% } .lh-130p { line-height: 130% } .lh-140p { line-height: 140% }
.lh-150p { line-height: 150% } .lh-160p { line-height: 160% } .lh-180p { line-height: 180% } .lh-200p { line-height: 200% }

/*=   Text-Transform    */
.tt-none,.tt-n { text-transform: none; } 
.TT-NONE,.TT-N { text-transform: none !important; } 
.tt-c, .tt-capitalize { text-transform: capitalize;}
.TT-C, .TT-CAPITALIZE { text-transform: capitalize !important;}

/*=   Colors    */
.color-white { color: #fff; }
.color-blue { color:#273894; }

/* Won't Validate*/
div.box-gray, 
a.box-gray  { border: 1px solid #ccc;  -webkit-radius: 3px; -moz-border-radius: 3px; -khtml-border-radius:3px; border-radius: 3px; padding: 10px; } 

/**   List Styles: Remove list styles  */
ul.ls-n, ul.ls-n li  { list-style-type: none;}

Very Helpful Broooo When you want do typography.css (atoms) in Atomic Design