|
[HTML5 Boilerplate homepage](http://html5boilerplate.com) | [Documentation |
|
table of contents](README.md) |
|
|
|
# The CSS |
|
|
|
The HTML5 Boilerplate starting CSS includes: |
|
|
|
* [Normalize.css](https://github.com/necolas/normalize.css). |
|
* Useful HTML5 Boilerplate defaults. |
|
* Common helpers. |
|
* Placeholder media queries. |
|
* Print styles. |
|
|
|
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 |
|
|
|
Normalize.css is a modern, HTML5-ready alternative to CSS resets. It contains |
|
extensive inline documentation. Please refer to the [Normalize.css |
|
project](http://necolas.github.com/normalize.css/) for more information. |
|
|
|
|
|
## HTML5 Boilerplate defaults |
|
|
|
This project includes a handful of base styles that build upon Normalize.css. |
|
These include: |
|
|
|
* Basic typography settings to provide improved text readability by default. |
|
* Protection against unwanted `text-shadow` during text highlighting. |
|
* Tweaks to default image alignment, fieldsets, and textareas. |
|
* A pretty Chrome Frame prompt. |
|
|
|
You are free to modify or add to these base styles as your project requires. |
|
|
|
|
|
## Common helpers |
|
|
|
#### `.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](http://www.webaim.org/techniques/css/invisiblecontent/), [Hiding |
|
content for |
|
accessibility](http://snook.ca/archives/html_and_css/hiding-content-for-accessibility), |
|
[HTML5 Boilerplate |
|
issue/research](https://github.com/h5bp/html5-boilerplate/issues/194/). |
|
|
|
#### `.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](http://nicolasgallagher.com/micro-clearfix-hack/). |
|
|
|
|
|
## Media Queries |
|
|
|
The boilerplate makes it easy to get started with a "Mobile First" and |
|
[Responsive Web |
|
Design](http://www.alistapart.com/articles/responsive-web-design/) approach to |
|
development. But it's worth remembering that there are [no silver |
|
bullets](http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/). |
|
|
|
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](https://github.com/h5bp/mobile-boilerplate) for features that are |
|
useful when developing mobile wep apps. |
|
|
|
|
|
## Print styles |
|
|
|
* Print styles are inlined to [reduce the number of page |
|
requests](http://www.phpied.com/delay-loading-your-print-css/). |
|
* We strip all background colors and change the font color to dark gray and |
|
remove text-shadow. This is meant to help save printer ink. |
|
* Anchors do not need colors to indicate they are linked. They are underlined |
|
to indicate so. |
|
* Anchors and Abbreviations are expanded to indicate where users reading the |
|
printed page can refer to. |
|
* But we do not want to show link text for image replaced elements (given that |
|
they are primarily images). |
|
|
|
### Paged media styles |
|
|
|
* Paged media is supported only in a [few |
|
browsers](http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29#Grammar_and_rules). |
|
* Paged media support means browsers would know how to interpret instructions |
|
on breaking content into pages and on orphans/widows. |
|
* We use `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. |
|
* Headings should always appear with the text they are titles for. So, we |
|
ensure headings never appear in a different page than the text they describe |
|
by using `page-break-after: avoid;`. |
|
* We also apply a default margin for the page specified in `cm`. |
|
* We do not want [orphans and |
|
widows](http://en.wikipedia.org/wiki/Widows_and_orphans) to appear on pages |
|
you print. So, by defining `orphans: 3` and `widows: 3` you define the minimal |
|
number of words that every line should contain. |
|
|