HTML5 Boilerplate homepage | Documentation
table of contents


HTML5 Boilerplate's CSS includes:

This starting CSS does not rely on the presence of
conditional class names,
conditional style sheets,
or Modernizr, and it is ready to use no matter what
your development preferences happen to be.


In order to make browsers render all elements more consistently and in line
with modern standards, we include
Normalize.css — a modern, HTML5-ready
alternative to CSS resets.

As opposed to CSS resets, Normalize.css:

For more information about Normalize.css, please refer to its project
, as well as this
blog post.

Useful defaults

Several base styles are included that build upon Normalize.css. These

You are free and even encouraged to modify or add to these base styles as your
project requires.

Common helpers

Along with the base styles, we also provide some commonly used helper classes.


The hidden class can be added to any element that you want to hide visually
and from screen readers. It could be an element that will be populated and
displayed later, or an element you will hide with JavaScript.


The visuallyhidden class can be added to any element that you want to hide
visually, while still have its content accessible to screen readers.

See also:


The invisible class can be added to any element that you want to hide
visually and from screen readers, but without affecting the layout.

As opposed to the hidden class that effectively removes the element from the
layout, the invisible class will simply make the element invisible while
keeping it in the flow and not affecting the positioning of the surrounding

N.B. Try to stay away from, and don't use the classes specified above for
keyword stuffing as you will
harm your site's ranking!


The clearfix class can be added to any element to ensure that it always fully
contains its floated children.

Over the years there have been many variants of the clearfix hack, but currently,
we use the micro clearfix.

Media Queries

HTML5 Boilerplate makes it easy for you to get started with a
mobile first and responsive web
approach to
development. But it's worth remembering that there are no silver

We include placeholder media queries to help you 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 the 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 media queries instead (e.g.:
@media only screen and (max-width: 480px)).

For more features that can help you in your mobile web development, take a look
into our Mobile Boilerplate.

Print styles

Lastly, we provide some useful print styles that will optimize the printing
process, as well as make the printed pages easier to read.

At printing time, these styles will:

The print styles are included along with the other css to avoid the
additional HTTP request
Also, they should always be included last, so that the other styles can be