Reminder of best practices for optimal use of the easiest HTML / CSS frameworks.
Add the .ir class to any element you are applying image-replacement to.
When replacing an element's content with an image, make sure to also set a specific background-image: url(pathtoimage.png);, width, and height so that your replacement image appears.
Add the .hidden class to any elements that you want to hide from all presentations, including screen readers.
Add the .visuallyhidden 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 accessibility, HTML5 Boilerplate issue/research.
Add the .invisible class to any element you want to hide without affecting layout.
When you use display: none an element is effectively 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 positioning of surrounding content.
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 Boilerplate currently uses the micro clearfix.
These classes are pre-written in the boilerplate and just waiting to be used.
Ressources for starting H5BP website.
Help Us Go Positive!
We offset our carbon usage with Ecologi. Click the link below to help us!