HTML5 Boilerplate homepage | Documentation table of contents
The HTML5 Boilerplate starting CSS includes:
This starting CSS does not rely on the presence of conditional classnames, conditional style sheets, or Modernizr. It is ready to use whatever your development preferences happen to be.
Normalize.css is a modern, HTML5-ready alternative to CSS resets. It contains extensive inline documentation. Please refer to the Normalize.css project for more information.
This project includes a handful of base styles that build upon Normalize.css. These include:
text-shadow
during text highlighting.You are free to modify or add to these base styles as your project requires.
.ir
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.
.hidden
Add the .hidden
class to any elements that you want to hide from all
presentations, including screen readers. It could be an element that will be
populated later with JavaScript or an element you will hide with JavaScript. Do
not use this for SEO keyword stuffing. That is just not cool.
.visuallyhidden
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.
.invisible
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.
.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 Boilerplate currently uses the micro
clearfix.
The boilerplate makes it easy to get started with a "Mobile First" and Responsive Web Design approach to development. But it's worth remembering that there are no silver bullets.
We include a placeholder Media Queries to build up your mobile styles for wider viewports and high-resolution displays. It's recommended that you adapt these Media Queries based on the content of your site rather than mirroring the fixed dimensions of specific devices.
If you do not want to take a "Mobile First" approach, you can simply edit or
remove these placeholder Media Queries. One possibility would be to work from
wide viewports down and use max-width
MQs instead, e.g., @media only screen and (max-width: 480px)
.
Take a look into the Mobile Boilerplate for features that are useful when developing mobile wep apps.
page-break-inside: avoid;
to prevent an image and table row from
being split into two different pages, so use the same page-break-inside: avoid;
for that as well.page-break-after: avoid;
.cm
.orphans: 3
and widows: 3
you define the minimal
number of words that every line should contain.