Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Major: Now using css normalization instead of css reset + building up…

… default styles

We're pulling in http://github.com/necolas/normalize.css/ developed by Nicolas Gallagher along with Jonathan Neal.

normalize.css retains useful browser defaults and includes several common fixes to improve cross-browser (desktop and mobile) styling consistency.

Lots of research has gone into normalize, verifying what are the default user agent styles provided by each browser. We can very specifically change only the ones we need to instead of the bulldozer approach.

Why this is great news:

* Who likes being so damn redudant and declaring: em, i { font-style: italic; }
* By using normalization instead of a reset + building up default styles, we use less styles and save bytes
* Less noise in your dev tools: when debugging, you don't have to trawl through every reset selector to reach the actual style that is causing the issue.
* More details here: http://necolas.github.com/normalize.css/

We're really happy to get user feedback on this, as we think style normalization is a better direction than resetting; and want to make sure you do too. :) Leave a comment here or in the Google Group: http://h5bp.com/group

Fixes #412
Fixes #500
Fixes #534
Closes #456

Links #566
  • Loading branch information...
commit ddaf66a515c09f835603f95fe723d7da691324e6 1 parent e9f342b
Nicolas Gallagher necolas authored

Showing 1 changed file with 168 additions and 139 deletions. Show diff stats Hide diff stats

  1. +168 139 css/style.css
307 css/style.css
... ... @@ -1,171 +1,191 @@
1   -/**
  1 +/*
2 2 * HTML5 ✰ Boilerplate
3 3 *
4   - * style.css contains a reset, font normalization and some base styles.
5   - *
6   - * Credit is left where credit is due.
7   - * Much inspiration was taken from these projects:
8   - * - yui.yahooapis.com/2.8.1/build/base/base.css
9   - * - camendesign.com/design/
10   - * - praegnanz.de/weblog/htmlcssjs-kickstart
  4 + * What follows is the result of much research on cross-browser styling.
  5 + * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
  6 + * Kroc Camen, and the H5BP dev community and team.
11 7 */
12 8
13 9
14   -/**
15   - * html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
16   - * v1.6.1 2010-09-17 | Authors: Eric Meyer & Richard Clark
17   - * html5doctor.com/html-5-reset-stylesheet/
  10 +/* =============================================================================
  11 + HTML5 element display
  12 + ========================================================================== */
  13 +
  14 +article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
  15 +audio[controls], canvas, video { display: inline-block; *display: inline; *zoom: 1; }
  16 +
  17 +
  18 +/* =============================================================================
  19 + Base
  20 + ========================================================================== */
  21 +
  22 +/*
  23 + * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
  24 + * http://clagnut.com/blog/348/#c790
  25 + * 2. Force vertical scrollbar in non-IE
  26 + * 3. Remove Android and iOS tap highlight color to prevent entire container being highlighted
  27 + * www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/
  28 + * 4. Prevent iOS text size adjust on device orientation change, without disabling user zoom
  29 + * www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
18 30 */
19 31
20   -html, body, body div, span, object, iframe,
21   -h1, h2, h3, h4, h5, h6, p, blockquote, pre,
22   -abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
23   -small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
24   -fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
25   -article, aside, canvas, details, figcaption, figure,
26   -footer, header, hgroup, menu, nav, section, summary,
27   -time, mark, audio, video {
28   - margin: 0;
29   - padding: 0;
30   - border: 0;
31   - font-size: 100%;
32   - vertical-align: baseline;
33   -}
  32 +html { font-size: 100%; overflow-y: scroll; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
34 33
35   -article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
36   - display: block;
37   -}
  34 +body { margin: 0; font-size: 13px; line-height: 1.231; }
38 35
39   -blockquote, q { quotes: none; }
  36 +body, button, input, select, textarea { font-family: sans-serif; color: #222; }
40 37
41   -blockquote:before, blockquote:after,
42   -q:before, q:after { content: ""; content: none; }
  38 +/*
  39 + * Improve image quality when scaled in IE7
  40 + * code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
  41 + */
  42 +
  43 +img { border: 0; -ms-interpolation-mode: bicubic; }
43 44
44   -ins { background-color: #ff9; color: #000; text-decoration: none; }
  45 +/*
  46 + * These selection declarations have to be separate
  47 + * No text-shadow: twitter.com/miketaylr/status/12228805301
  48 + * Also: hot pink!
  49 + */
45 50
46   -mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
  51 +::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
  52 +::selection { background: #fe57a1; color: #fff; text-shadow: none; }
47 53
48   -del { text-decoration: line-through; }
49 54
50   -abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
  55 +/* =============================================================================
  56 + Links
  57 + ========================================================================== */
51 58
52   -table { border-collapse: collapse; border-spacing: 0; }
  59 +a { color: #00e; }
  60 +a:visited { color: #551a8b; }
  61 +a:focus { outline: thin dotted; }
53 62
54   -hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
  63 +/* Improve readability when focused and hovered in all browsers: people.opera.com/patrickl/experiments/keyboard/test */
  64 +a:hover, a:active { outline: 0; }
55 65
56 66
57   -/**
58   - * Font normalization inspired by YUI Library's fonts.css: developer.yahoo.com/yui/
59   - */
  67 +/* =============================================================================
  68 + Typography
  69 + ========================================================================== */
60 70
61   -body { font: 13px/1.231 sans-serif; *font-size: small; } /* Hack retained to preserve specificity */
  71 +abbr[title] { border-bottom: 1px dotted; }
62 72
63   -/* Normalize monospace sizing:
64   - en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */
65   -pre, code, kbd, samp { font-family: monospace, sans-serif; }
  73 +b, strong { font-weight: bold; }
66 74
  75 +blockquote { margin: 1em 40px; }
67 76
68   -/**
69   - * Minimal base styles.
70   - */
  77 +dfn { font-style: italic; }
71 78
72   -/* 1) Always force a scrollbar in non-IE
73   - 2) Remove iOS text size adjust without disabling user zoom: www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */
74   -html { overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
75   -
  79 +hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
76 80
  81 +ins { background: #ff9; color: #000; text-decoration: none; }
77 82
78   -/* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */
79   -a:hover, a:active { outline: 0; }
  83 +mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
80 84
81   -a, a:active, a:visited { color: #607890; }
82   -a:hover { color: #036; }
  85 +/* Redeclare monospace font family: en.wikipedia.org/wiki/User:Davidgothberg/Test59 */
  86 +pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
83 87
84   -ul, ol { margin-left: 2em; }
85   -ol { list-style-type: decimal; }
  88 +/* Improve readability of pre-formatted text in all browsers */
  89 +pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
86 90
87   -/* Remove margins for navigation lists */
88   -nav ul, nav li { margin: 0; list-style:none; list-style-image: none; }
  91 +q { quotes: none; }
  92 +q:before, q:after { content: ""; content: none; }
89 93
90 94 small { font-size: 85%; }
91   -b, strong, th { font-weight: bold; }
92   -
93   -td { vertical-align: top; }
94 95
95   -/* Set sub, sup without affecting line-height: gist.github.com/413930 */
96   -sub, sup { font-size: 75%; line-height: 0; position: relative; }
  96 +/* Position subscript and superscript content without affecting line-height: gist.github.com/413930 */
  97 +sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
97 98 sup { top: -0.5em; }
98 99 sub { bottom: -0.25em; }
99 100
100   -pre {
101   - /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */
102   - white-space: pre; white-space: pre-wrap; word-wrap: break-word;
103   - padding: 15px;
104   -}
105 101
106   -.ie6 legend, .ie7 legend { margin-left: -7px; }
  102 +/* =============================================================================
  103 + Lists
  104 + ========================================================================== */
107 105
108   -/* 1) Make inputs and buttons play nice in IE: www.viget.com/inspire/styling-the-button-element-in-internet-explorer/
109   - 2) WebKit browsers add a 2px margin outside the chrome of form elements.
110   - Firefox adds a 1px margin above and below textareas
111   - 3) Set font-size to match <body>'s, and font-family to sans-serif
112   - 4) Align to baseline */
113   -button, input, select, textarea { width: auto; overflow: visible; margin: 0; font-size: 100%; font-family: sans-serif; vertical-align: baseline; }
  106 +ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
  107 +dd { margin: 0 0 0 40px; }
  108 +nav ul, nav ol { list-style: none; margin: 0; padding: 0; }
114 109
115   -/* 1) Remove default scrollbar in IE: www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/
116   - 2) Align to text-top */
117   -textarea { overflow: auto; vertical-align:text-top; }
118 110
119   -/* Hand cursor on clickable input elements */
120   -label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }
  111 +/* =============================================================================
  112 + Figures
  113 + ========================================================================== */
121 114
122   -/* Remove extra padding and inner border in Firefox */
123   -input::-moz-focus-inner,
124   -button::-moz-focus-inner { border: 0; padding: 0; }
  115 +figure { margin: 0; }
125 116
126   -/* Colors for form validity */
127   -input:valid, textarea:valid { }
128   -input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0 0 5px red; -webkit-box-shadow: 0 0 5px red; box-shadow: 0 0 5px red; }
129   -.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; }
130 117
131   -/* Bicubic resizing for non-native sized IMG:
132   - code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
133   -.ie7 img { -ms-interpolation-mode: bicubic; }
  118 +/* =============================================================================
  119 + Forms
  120 + ========================================================================== */
134 121
  122 +form { margin: 0; }
  123 +fieldset { border: 0; margin: 0; padding: 0; }
135 124
136   -/**
137   - * You might tweak these..
  125 +/*
  126 + * 1. Correct color not inheriting in IE6/7/8/9
  127 + * 2. Correct alignment displayed oddly in IE6/7
138 128 */
139 129
140   -body, select, input, textarea {
141   - /* #444 looks better than black: twitter.com/H_FJ/statuses/11800719859 */
142   - color: #444;
143   - /* Set your base font here, to apply evenly */
144   - /* font-family: Georgia, serif; */
145   -}
  130 +legend { border: 0; *margin-left: -7px; padding: 0; }
146 131
147   -/* These selection declarations have to be separate
148   - No text-shadow: twitter.com/miketaylr/status/12228805301
149   - Also: hot pink! */
150   -::-moz-selection { background: #fe57a1; color:#fff; text-shadow: none; }
151   -::selection { background:#fe57a1; color:#fff; text-shadow: none; }
152   -a:link { -webkit-tap-highlight-color: #FF5E99; } /* j.mp/webkit-tap-highlight-color */
  132 +/*
  133 + * 1. Correct font-size not inheriting in all browsers
  134 + * 2. Remove margins in FF3/4 S5 Chrome
  135 + * 3. Define consistent vertical alignment display in all browsers
  136 + */
153 137
  138 +button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
154 139
155   -/**
156   - * Primary styles
157   - *
158   - * Author:
  140 +/*
  141 + * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
  142 + * 2. Correct inner spacing displayed oddly in IE6/7
159 143 */
160 144
  145 +button, input { line-height: normal; *overflow: visible; }
161 146
  147 +/*
  148 + * 1. Display hand cursor for clickable form elements
  149 + * 2. Allow styling of clickable form elements in iOS
  150 + */
162 151
  152 +button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
163 153
  154 +/*
  155 + * Consistent box sizing and appearance
  156 + */
164 157
  158 +input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
165 159
  160 +input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
  161 +input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
166 162
  163 +/*
  164 + * Remove inner padding and border in FF3/4
  165 + * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
  166 + */
167 167
  168 +button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
168 169
  170 +/* Remove default vertical scrollbar in IE6/7/8/9 */
  171 +textarea { overflow: auto; vertical-align: top; }
  172 +
  173 +/* Colors for form validity */
  174 +input:valid, textarea:valid { }
  175 +input:invalid, textarea:invalid { background-color: #f0dddd; }
  176 +
  177 +
  178 +/* =============================================================================
  179 + Tables
  180 + ========================================================================== */
  181 +
  182 +table { border-collapse: collapse; border-spacing: 0; }
  183 +
  184 +
  185 +/* =============================================================================
  186 + Primary styles
  187 + Author:
  188 + ========================================================================== */
169 189
170 190
171 191
@@ -173,9 +193,19 @@ a:link { -webkit-tap-highlight-color: #FF5E99; } /* j.mp/webkit-tap-highlight-co
173 193
174 194
175 195
176   -/**
177   - * Non-semantic helper classes: please define your styles before this section.
178   - */
  196 +
  197 +
  198 +
  199 +
  200 +
  201 +
  202 +
  203 +
  204 +
  205 +/* =============================================================================
  206 + Non-semantic helper classes
  207 + Please define your styles before this section.
  208 + ========================================================================== */
179 209
180 210 /* For image replacement */
181 211 .ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
@@ -188,25 +218,25 @@ a:link { -webkit-tap-highlight-color: #FF5E99; } /* j.mp/webkit-tap-highlight-co
188 218 /* Hide only visually, but have it available for screenreaders: by Jon Neal.
189 219 www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden */
190 220 .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
  221 +
191 222 /* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */
192   -.visuallyhidden.focusable:active,
193   -.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
  223 +.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
194 224
195 225 /* Hide visually and from screenreaders, but maintain layout */
196 226 .invisible { visibility: hidden; }
197 227
198   -/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements in most situations.
199   - nicolasgallagher.com/micro-clearfix-hack/ */
  228 +/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */
200 229 .clearfix:before, .clearfix:after { content: ""; display: table; }
201 230 .clearfix:after { clear: both; }
202 231 .clearfix { zoom: 1; }
203 232
204 233
205 234
206   -/**
207   - * Placeholder media queries for responsive design. Modify as design requires.
208   - * These follow after, and will override, the primary ('mobile first') styles
209   - */
  235 +/* =============================================================================
  236 + PLACEHOLDER Media Queries for Responsive Design.
  237 + These override the primary ('mobile first') styles
  238 + Modify as content requires.
  239 + ========================================================================== */
210 240
211 241 @media only screen and (min-width: 480px) {
212 242 /* Style adjustments for viewports 480px and over go here */
@@ -220,23 +250,22 @@ a:link { -webkit-tap-highlight-color: #FF5E99; } /* j.mp/webkit-tap-highlight-co
220 250
221 251
222 252
223   -/**
224   - * Print styles.
225   - *
226   - * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
227   - */
  253 +/* =============================================================================
  254 + Print styles.
  255 + Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
  256 + ========================================================================== */
  257 +
228 258 @media print {
229   - * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
230   - -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */
231   - a, a:visited { color: #444 !important; text-decoration: underline; }
232   - a[href]:after { content: " (" attr(href) ")"; }
233   - abbr[title]:after { content: " (" attr(title) ")"; }
234   - .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
235   - pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
236   - thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
237   - tr, img { page-break-inside: avoid; }
238   - img { max-width: 100% !important; }
239   - @page { margin: 0.5cm; }
240   - p, h2, h3 { orphans: 3; widows: 3; }
241   - h2, h3 { page-break-after: avoid; }
  259 + * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */
  260 + a, a:visited { color: #444 !important; text-decoration: underline; }
  261 + a[href]:after { content: " (" attr(href) ")"; }
  262 + abbr[title]:after { content: " (" attr(title) ")"; }
  263 + .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
  264 + pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  265 + thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
  266 + tr, img { page-break-inside: avoid; }
  267 + img { max-width: 100% !important; }
  268 + @page { margin: 0.5cm; }
  269 + p, h2, h3 { orphans: 3; widows: 3; }
  270 + h2, h3{ page-break-after: avoid; }
242 271 }

0 comments on commit ddaf66a

Please sign in to comment.
Something went wrong with that request. Please try again.