A repository for the development of the HTML5 Boilerplate CSS file,
Historically, the file shipped with HTML5 Boilerplate was called
main.css, hence the name of this project. It's since been renamed to
style.css. Just in case you were confused.
This project includes both the whole
main.css file as well as component files used to generate
main.css. This way you can either pull in the whole file, as we do in HTML5 Boilerplate (renaming it to
style.css) or you can pull in the individual files as needed.
Choose one of the following options:
- Download as part of the latest stable release of HTML5 Boilerplate from html5boilerplate.com.
- Clone the git repo —
git clone https://github.com/h5bp/main.css.git- and checkout the tagged release you'd like to use.
- Install with npm:
npm install main.cssand pull in what you need from the resulting
- Install with yarn:
yarn add main.cssand pull in what you need from the resulting
The project contains the following files, which combine to create the different sections of
Several base styles are included. These styles:
- provide basic typography settings that improve text readability
- protect against unwanted
text-shadowduring text highlighting
- tweak the default alignment of some elements (e.g.:
Along with the base styles, we also provide some commonly used helper classes.
visually-hidden class can be added to any element that you want to hide visually, while still have its content accessible to screen readers.
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 content.
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.
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)).
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:
strip all background colors, change the font color to black, and remove the
text-shadow— done in order to help save printer ink and speed up the printing process
underline and expand links to include the URL — done in order to allow users to know where to refer to
(exceptions to this are: the links that are fragment identifiers, or use the
expand abbreviations to include the full description — done in order to allow users to know what the abbreviations stands for
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 overwritten.
We use the following browserlist configuration:
" browserslist": [ "> 0.5%", "last 2 versions", "Firefox ESR", "not dead", "IE 11" ],
The code is available under the MIT license.