Skip to content

Instantly share code, notes, and snippets.

@ricardozea
Last active December 13, 2015 18:19
Show Gist options
  • Save ricardozea/4954549 to your computer and use it in GitHub Desktop.
Save ricardozea/4954549 to your computer and use it in GitHub Desktop.
CSS: CSS Utility Rules
/*
CSS Utility Rules
Date = February 2013
By = Ricardo Zea
*/
.abs-right { position:absolute; right:0; }
.abs-left { position:absolute; left:0; }
.divider { border-bottom:#ccc 1px dotted; }
.dn, .nojs { display:none; }
.fl-lf { float:left !important; }
.fl-rg { float:right !important; }
.font-wn { font-weight:normal !important; }
.half { width:48% !important; }
.no-padding { padding:0 !important; }
.no-margin { margin:0 !important; }
.no-border { border:none !important; }
.no-float { float:none !important; }
.mt { margin-top:10px !important; }
.mt0 { margin-top:0 !important; }
.mb { margin-bottom:10px !important; }
.mb0 { margin-bottom:0 !important; }
.p0 { padding:0 !important; }
.padded { padding:3px 6px 3px 5px; border:transparent 1px solid; }
.small-txt { font-size:14px !important; font-style:italic !important; color:#999 !important; }
.txt-center { text-align:center !important; }
.v-divider { width:1px; height:100%; min-height:100px; position:absolute; left:50%; margin-left:-1px; border-right:#ccc 1px dotted; }
//Columns
@import "compass/css3/columns";
.two-col { @include columns(2 auto); @include column-gap(0); @include column-rule(1px dotted lighten(black, 80%)); }
//Image replacement - https://github.com/h5bp/html5-boilerplate/issues/1149
.ir { overflow:hidden; *text-indent:-999em; }
.ir:before { content:''; display:block; width:0; height:100%; }
//Old image replacement method - http://nicolasgallagher.com/another-css-image-replacement-technique/
//.ir { font: 0/0 a; text-shadow: none; color: transparent; }
//Increase the clickable area of inline links - http://joshnh.com/2012/09/06/increasing-the-clickable-area-of-inline-links/
a { padding:.5em; margin:-.5em; position:relative; }
//Fix the extra wide buttons in IE
button { width:auto; overflow:visible; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment