|
|
Maxious
|
1 |
[HTML5 Boilerplate homepage](http://html5boilerplate.com) | [Documentation |
|
|
|
2 |
table of contents](README.md) |
|
|
|
3 |
|
|
|
|
4 |
# The CSS |
|
|
|
5 |
|
|
|
|
6 |
The HTML5 Boilerplate starting CSS includes: |
|
|
|
7 |
|
|
|
|
8 |
* [Normalize.css](https://github.com/necolas/normalize.css). |
|
|
|
9 |
* Useful HTML5 Boilerplate defaults. |
|
|
|
10 |
* Common helpers. |
|
|
|
11 |
* Placeholder media queries. |
|
|
|
12 |
* Print styles. |
|
|
|
13 |
|
|
|
|
14 |
This starting CSS does not rely on the presence of conditional classnames, |
|
|
|
15 |
conditional style sheets, or Modernizr. It is ready to use whatever your |
|
|
|
16 |
development preferences happen to be. |
|
|
|
17 |
|
|
|
|
18 |
|
|
|
|
19 |
## Normalize.css |
|
|
|
20 |
|
|
|
|
21 |
Normalize.css is a modern, HTML5-ready alternative to CSS resets. It contains |
|
|
|
22 |
extensive inline documentation. Please refer to the [Normalize.css |
|
|
|
23 |
project](http://necolas.github.com/normalize.css/) for more information. |
|
|
|
24 |
|
|
|
|
25 |
|
|
|
|
26 |
## HTML5 Boilerplate defaults |
|
|
|
27 |
|
|
|
|
28 |
This project includes a handful of base styles that build upon Normalize.css. |
|
|
|
29 |
These include: |
|
|
|
30 |
|
|
|
|
31 |
* Basic typography settings to provide improved text readability by default. |
|
|
|
32 |
* Protection against unwanted `text-shadow` during text highlighting. |
|
|
|
33 |
* Tweaks to default image alignment, fieldsets, and textareas. |
|
|
|
34 |
* A pretty Chrome Frame prompt. |
|
|
|
35 |
|
|
|
|
36 |
You are free to modify or add to these base styles as your project requires. |
|
|
|
37 |
|
|
|
|
38 |
|
|
|
|
39 |
## Common helpers |
|
|
|
40 |
|
|
|
|
41 |
#### `.ir` |
|
|
|
42 |
|
|
|
|
43 |
Add the `.ir` class to any element you are applying image-replacement to. When |
|
|
|
44 |
replacing an element's content with an image, make sure to also set a specific |
|
|
|
45 |
`background-image: url(pathtoimage.png);`, `width`, and `height` so that your |
|
|
|
46 |
replacement image appears. |
|
|
|
47 |
|
|
|
|
48 |
#### `.hidden` |
|
|
|
49 |
|
|
|
|
50 |
Add the `.hidden` class to any elements that you want to hide from all |
|
|
|
51 |
presentations, including screen readers. It could be an element that will be |
|
|
|
52 |
populated later with JavaScript or an element you will hide with JavaScript. Do |
|
|
|
53 |
not use this for SEO keyword stuffing. That is just not cool. |
|
|
|
54 |
|
|
|
|
55 |
#### `.visuallyhidden` |
|
|
|
56 |
|
|
|
|
57 |
Add the `.visuallyhidden` class to hide text from browsers but make it |
|
|
|
58 |
available for screen readers. You can use this to hide text that is specific to |
|
|
|
59 |
screen readers but that other users should not see. [About invisible |
|
|
|
60 |
content](http://www.webaim.org/techniques/css/invisiblecontent/), [Hiding |
|
|
|
61 |
content for |
|
|
|
62 |
accessibility](http://snook.ca/archives/html_and_css/hiding-content-for-accessibility), |
|
|
|
63 |
[HTML5 Boilerplate |
|
|
|
64 |
issue/research](https://github.com/h5bp/html5-boilerplate/issues/194/). |
|
|
|
65 |
|
|
|
|
66 |
#### `.invisible` |
|
|
|
67 |
|
|
|
|
68 |
Add the `.invisible` class to any element you want to hide without affecting |
|
|
|
69 |
layout. When you use `display: none` an element is effectively removed from the |
|
|
|
70 |
layout. But in some cases you want the element to simply be invisible while |
|
|
|
71 |
remaining in the flow and not affecting the positioning of surrounding |
|
|
|
72 |
content. |
|
|
|
73 |
|
|
|
|
74 |
#### `.clearfix` |
|
|
|
75 |
|
|
|
|
76 |
Adding `.clearfix` to an element will ensure that it always fully contains its |
|
|
|
77 |
floated children. There have been many variants of the clearfix hack over the |
|
|
|
78 |
years, and there are other hacks that can also help you to contain floated |
|
|
|
79 |
children, but the HTML5 Boilerplate currently uses the [micro |
|
|
|
80 |
clearfix](http://nicolasgallagher.com/micro-clearfix-hack/). |
|
|
|
81 |
|
|
|
|
82 |
|
|
|
|
83 |
## Media Queries |
|
|
|
84 |
|
|
|
|
85 |
The boilerplate makes it easy to get started with a "Mobile First" and |
|
|
|
86 |
[Responsive Web |
|
|
|
87 |
Design](http://www.alistapart.com/articles/responsive-web-design/) approach to |
|
|
|
88 |
development. But it's worth remembering that there are [no silver |
|
|
|
89 |
bullets](http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/). |
|
|
|
90 |
|
|
|
|
91 |
We include a placeholder Media Queries to build up your mobile styles for wider |
|
|
|
92 |
viewports and high-resolution displays. It's recommended that you adapt these |
|
|
|
93 |
Media Queries based on the content of your site rather than mirroring the fixed |
|
|
|
94 |
dimensions of specific devices. |
|
|
|
95 |
|
|
|
|
96 |
If you do not want to take a "Mobile First" approach, you can simply edit or |
|
|
|
97 |
remove these placeholder Media Queries. One possibility would be to work from |
|
|
|
98 |
wide viewports down and use `max-width` MQs instead, e.g., `@media only screen |
|
|
|
99 |
and (max-width: 480px)`. |
|
|
|
100 |
|
|
|
|
101 |
Take a look into the [Mobile |
|
|
|
102 |
Boilerplate](https://github.com/h5bp/mobile-boilerplate) for features that are |
|
|
|
103 |
useful when developing mobile wep apps. |
|
|
|
104 |
|
|
|
|
105 |
|
|
|
|
106 |
## Print styles |
|
|
|
107 |
|
|
|
|
108 |
* Print styles are inlined to [reduce the number of page |
|
|
|
109 |
requests](http://www.phpied.com/delay-loading-your-print-css/). |
|
|
|
110 |
* We strip all background colors and change the font color to dark gray and |
|
|
|
111 |
remove text-shadow. This is meant to help save printer ink. |
|
|
|
112 |
* Anchors do not need colors to indicate they are linked. They are underlined |
|
|
|
113 |
to indicate so. |
|
|
|
114 |
* Anchors and Abbreviations are expanded to indicate where users reading the |
|
|
|
115 |
printed page can refer to. |
|
|
|
116 |
* But we do not want to show link text for image replaced elements (given that |
|
|
|
117 |
they are primarily images). |
|
|
|
118 |
|
|
|
|
119 |
### Paged media styles |
|
|
|
120 |
|
|
|
|
121 |
* Paged media is supported only in a [few |
|
|
|
122 |
browsers](http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29#Grammar_and_rules). |
|
|
|
123 |
* Paged media support means browsers would know how to interpret instructions |
|
|
|
124 |
on breaking content into pages and on orphans/widows. |
|
|
|
125 |
* We use `page-break-inside: avoid;` to prevent an image and table row from |
|
|
|
126 |
being split into two different pages, so use the same `page-break-inside: |
|
|
|
127 |
avoid;` for that as well. |
|
|
|
128 |
* Headings should always appear with the text they are titles for. So, we |
|
|
|
129 |
ensure headings never appear in a different page than the text they describe |
|
|
|
130 |
by using `page-break-after: avoid;`. |
|
|
|
131 |
* We also apply a default margin for the page specified in `cm`. |
|
|
|
132 |
* We do not want [orphans and |
|
|
|
133 |
widows](http://en.wikipedia.org/wiki/Widows_and_orphans) to appear on pages |
|
|
|
134 |
you print. So, by defining `orphans: 3` and `widows: 3` you define the minimal |
|
|
|
135 |
number of words that every line should contain. |
|
|
|
136 |
|