A repository for the development of the HTML5 Boilerplate CSS file, style.css
.
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:
git clone https://github.com/h5bp/main.css.git
- and checkout the
tagged release
you'd like to use.npm install main.css
and pull in what you need from the resulting node_modules/main.css/dist
folderyarn add main.css
and pull in what you need from the resulting node_modules/main.css/dist
folderThe project contains the following files, which combine to create the different sections of main.css.
Several base styles are included. These styles:
text-shadow
during text highlightingimg
, video
,
fieldset
, textarea
)Along with the base styles, we also provide some commonly used helper classes.
.hidden
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.
.visually-hidden
The 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
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
content.
.clearfix
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.
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:
text-shadow
— done in order to help save printer ink and speed up the
printing processjavascript:
pseudo protocol)provide instructions on how browsers should break the content into pages and on orphans/widows, namely, we instruct supporting browsers that they should:
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 default browserslist configuration which translates to this full list of browsers.
Anyone is welcome to contribute, however, if you decide to get involved, please take a moment to review the guidelines:
The code is available under the MIT license.