HTML5 Boilerplate Cheat Sheet

A Programming › HTML cheat sheet in English by Weizu

Reminder of best practices for optimal use of the easiest HTML / CSS frameworks.

16,655 views 3,288 downloads 31 Aug 2015 History
4.9 avg · 1 rating

Common helpers

.ir
Add the .ir class to any element you are applying image-­rep­lac­ement to.
When replacing an elemen­t's content with an image, make sure to also set a specific backgr­oun­d-i­mage: url(pa­tht­oim­age.png);, width, and height so that your replac­ement image appears.
.hidden
Add the .hidden class to any elements that you want to hide from all presen­tat­ions, including screen readers.
It could be an element that will be populated later with JavaScript or an element you will hide with JavaSc­ript. Do not use this for SEO keyword stuffing. That is just not cool.
.visua­lly­hidden
Add the .visua­lly­hidden class to hide text from browsers but make it available for screen readers.
You can use this to hide text that is specific to screen readers but that other users should not see. About invisible content, Hiding content for access­ibi­lity, HTML5 Boiler­plate issue/­res­earch.
.invisible
Add the .invisible class to any element you want to hide without affecting layout.
When you use display: none an element is effect­ively removed from the layout. But in some cases you want the element to simply be invisible while remaining in the flow and not affecting the positi­oning of surrou­nding content.
.clearfix
Adding .clearfix to an element will ensure that it always fully contains its floated children.
There have been many variants of the clearfix hack over the years, and there are other hacks that can also help you to contain floated children, but the HTML5 Boiler­plate currently uses the micro clearfix.
These classes are pre-wr­itten in the boiler­plate and just waiting to be used.

Badges

Nice Cheat Sheet Good Cheat Sheet Downloaded from Unusual Locations × 1

Comments

No comments yet.

Cheatography n. The art of mapping complex subjects into clear, instantly navigable reference guides.