Helper classes from HTML5 Boilerplate

Classes below help you create a better user experience for both users of browsers and screen readers. Oh, and there's also a clearfix!

All the classes comes from HTML5 Boilerplate (-> http://html5boilerplate.com). Here though, they're changed so that they can be easily used in The LESS Way. They're called "non-semantic" in H5B, but here they become semantic if used well. (Actually they can't be used in any way than good in 3L.) (Actually II they can be semantic in H5B as well, but it's a bit pain to do that.)

Usage: Just put them in your classes, id's or elements.

###Example .YOUR-AWESOME-CLASS-NAME { // some rules .clearfix; }

---

###Code // For image replacement. .ir () {display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr;line-height: 0; br {display: none;}}

// Hide from both screenreaders and browsers: h5bp.com/u
.hidden () {display: none !important; visibility: hidden;}

// Hide only visually, but have it available for screenreaders: h5bp.com/v
.visuallyhidden () {border: 0;clip: rect(0 0 0 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;width: 1px;}

// Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p
// CAUTION! The .visuallyhidden class is included! If you want your object be both
// .visuallyhidden and .focusabe use only .focusable class.
.focusable () {.visuallyhidden;&:active,&:focus{clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto;}}

// Hide visually and from screenreaders, but maintain layout.
.invisible () {visibility: hidden;}

// Contain floats: h5bp.com/q
.clearfix () {*zoom:1;&:before,&:after{content:"";display:table;}&:after{clear:both;}}