edits
[tools.git] / doc / css.md
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