From d590b0efe9a7fbc4b8b7fd46683dfb989c2c26ef Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Mon, 6 Aug 2012 14:09:40 +0100 Subject: [PATCH] Separate normalize.css from main.css Benefits of disentangling normalize.css from the rest of the project's CSS: * Easier to track normalize.css version. * Easier to update normalize.css. * Easier to remove normalize.css if the user wants. * Clearer distinction between normalizing CSS and the additions that HTML5 Boilerplate provides. Drawback is the additional HTTP request incurred from the extra stylesheet referenced in the HTML. However, we already do something similar for the JS, and anyone serious about performance is going to employ a build process to concatenate and minify CSS/JS. Ref gh-1132 Ref gh-1140 --- CHANGELOG.md | 5 +- css/main.css | 401 ++++--------------------------------- css/normalize.css | 500 ++++++++++++++++++++++++++++++++++++++++++++++ doc/html.md | 4 +- index.html | 3 +- 5 files changed, 542 insertions(+), 371 deletions(-) create mode 100644 css/normalize.css diff --git a/CHANGELOG.md b/CHANGELOG.md index 85d5dd07e1..8aa588a50a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,11 +2,12 @@ * Add bundled docs (#1154). * Add MIT license (#1139). -* Code format and consistency changes (#1112). +* Separate normalize.css from the rest of the CSS (#1160). * Improve `console.log` protection (#1107). * Replace hot pink text selection color with a neutral color. +* Change image replacement technique. +* Code format and consistency changes (#1112). * Rename CSS file and rename JS files and subdirectories. -* Update image replacement technique. * Update to Modernizr 2.6.1 (#1086). * Remove uncompressed jQuery (#1153). * Remove superfluous inline comments (#1150). diff --git a/css/main.css b/css/main.css index a6a389219f..7ae155b38c 100644 --- a/css/main.css +++ b/css/main.css @@ -4,97 +4,25 @@ * What follows is the result of much research on cross-browser styling. * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, * Kroc Camen, and the H5BP dev community and team. - * - * Detailed information about this CSS: h5bp.com/css */ - -/* ========================================================================== - HTML5 display definitions - ========================================================================== */ - -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -nav, -section, -summary { - display: block; -} - -audio, -canvas, -video { - display: inline-block; - *display: inline; - *zoom: 1; -} - -audio:not([controls]) { - display: none; -} - -[hidden] { - display: none; -} - - /* ========================================================================== - Base + Base styles: opinionated defaults ========================================================================== */ -/* - * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units - * 2. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g - */ - -html { - font-size: 100%; - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; -} - html, button, input, select, textarea { - font-family: sans-serif; color: #222; } body { - margin: 0; font-size: 1em; line-height: 1.4; } -/* - * Remove text-shadow in selection highlight: h5bp.com/i - * These selection declarations have to be separate. - * Customize the background color to match your design. - */ - -::-moz-selection { - background: #b3d4fc; - text-shadow: none; -} - -::selection { - background: #b3d4fc; - text-shadow: none; -} - - -/* ========================================================================== - Links - ========================================================================== */ - a { color: #00e; } @@ -107,40 +35,25 @@ a:hover { color: #06e; } -a:focus { - outline: thin dotted; -} - /* - * Improve readability when focused and hovered in all browsers: h5bp.com/h + * Remove text-shadow in selection highlight: h5bp.com/i + * These selection declarations have to be separate. + * Customize the background color to match your design. */ -a:hover, -a:active { - outline: 0; -} - - -/* ========================================================================== - Typography - ========================================================================== */ - -abbr[title] { - border-bottom: 1px dotted; -} - -b, -strong { - font-weight: bold; +::-moz-selection { + background: #b3d4fc; + text-shadow: none; } -blockquote { - margin: 1em 40px; +::selection { + background: #b3d4fc; + text-shadow: none; } -dfn { - font-style: italic; -} +/* + * A better looking default horizontal rule + */ hr { display: block; @@ -151,141 +64,18 @@ hr { padding: 0; } -ins { - background: #ff9; - color: #000; - text-decoration: none; -} - -mark { - background: #ff0; - color: #000; - font-style: italic; - font-weight: bold; -} - -/* - * Redeclare monospace font family: h5bp.com/j - */ - -pre, -code, -kbd, -samp { - font-family: monospace, serif; - _font-family: 'courier new', monospace; - font-size: 1em; -} - -/* - * Improve readability of pre-formatted text - */ - -pre { - white-space: pre; - white-space: pre-wrap; - word-wrap: break-word; -} - -q { - quotes: none; -} - -q:before, -q:after { - content: ""; - content: none; -} - -small { - font-size: 85%; -} - /* - * Position subscript and superscript content without affecting line-height: h5bp.com/k - */ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sup { - top: -0.5em; -} - -sub { - bottom: -0.25em; -} - - -/* ========================================================================== - Lists - ========================================================================== */ - -ul, -ol { - margin: 1em 0; - padding: 0 0 0 40px; -} - -dd { - margin: 0 0 0 40px; -} - -nav ul, -nav ol { - list-style: none; - list-style-image: none; - margin: 0; - padding: 0; -} - - -/* ========================================================================== - Embedded content - ========================================================================== */ - -/* - * 1. Improve image quality when scaled in IE7: h5bp.com/d - * 2. Remove the gap between images and borders on image containers: h5bp.com/i/440 + * Remove the gap between images and the bottom of their containers: h5bp.com/i/440 */ img { - border: 0; vertical-align: middle; - -ms-interpolation-mode: bicubic; } /* - * Correct overflow not hidden in IE9 + * Remove default fieldset styles. */ -svg:not(:root) { - overflow: hidden; -} - - -/* ========================================================================== - Figures - ========================================================================== */ - -figure { - margin: 0; -} - - -/* ========================================================================== - Forms - ========================================================================== */ - -form { - margin: 0; -} - fieldset { border: 0; margin: 0; @@ -293,136 +83,15 @@ fieldset { } /* - * Indicate that 'label' will shift focus to the associated form element - */ - -label { - cursor: pointer; -} - -/* - * 1. Correct color not inheriting in IE6/7/8/9 - * 2. Correct alignment displayed oddly in IE6/7 - */ - -legend { - border: 0; - padding: 0; - white-space: normal; - *margin-left: -7px; -} - -/* - * 1. Correct font-size not inheriting in all browsers - * 2. Remove margins in FF3/4 S5 Chrome - * 3. Define consistent vertical alignment display in all browsers - */ - -button, -input, -select, -textarea { - font-size: 100%; - margin: 0; - vertical-align: baseline; - *vertical-align: middle; -} - -/* - * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet) - */ - -button, -input { - line-height: normal; -} - -/* - * 1. Display hand cursor for clickable form elements - * 2. Allow styling of clickable form elements in iOS - * 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6) - */ - -button, -input[type="button"], -input[type="reset"], -input[type="submit"] { - cursor: pointer; - -webkit-appearance: button; - *overflow: visible; -} - -/* - * Re-set default cursor for disabled elements - */ - -button[disabled], -input[disabled] { - cursor: default; -} - -/* - * Consistent box sizing and appearance - */ - -input[type="checkbox"], -input[type="radio"] { - box-sizing: border-box; - padding: 0; - *width: 13px; - *height: 13px; -} - -input[type="search"] { - -webkit-appearance: textfield; - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; - box-sizing: content-box; -} - -input[type="search"]::-webkit-search-decoration, -input[type="search"]::-webkit-search-cancel-button { - -webkit-appearance: none; -} - -/* - * Remove inner padding and border in FF3/4: h5bp.com/l - */ - -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; -} - -/* - * 1. Remove default vertical scrollbar in IE6/7/8/9 - * 2. Allow only vertical resizing + * Allow only vertical resizing of textareas. */ textarea { - overflow: auto; - vertical-align: top; resize: vertical; } - -/* ========================================================================== - Tables - ========================================================================== */ - -table { - border-collapse: collapse; - border-spacing: 0; -} - -td { - vertical-align: top; -} - - /* ========================================================================== - Chrome Frame Prompt + Chrome Frame prompt ========================================================================== */ .chromeframe { @@ -432,10 +101,8 @@ td { padding: 0.2em 0; } - /* ========================================================================== - Primary styles. - Author: + Author's custom styles ========================================================================== */ @@ -453,21 +120,9 @@ td { -/* ========================================================================== - EXAMPLE Media Query for Responsive Design. - This example overrides the primary ('mobile first') styles - Modify as content requires. - ========================================================================== */ - -@media only screen and (min-width: 35em) { - /* Style adjustments for viewports that meet the condition */ -} - - /* ========================================================================== - Helper classes. - Please define your styles before this section. + Helper classes ========================================================================== */ /* @@ -529,8 +184,9 @@ td { visibility: hidden; } -/* - * Contain floats: h5bp.com/q +/** + * Clearfix helper + * Used to contain floats: h5bp.com/q */ .clearfix:before, @@ -543,11 +199,24 @@ td { clear: both; } +/* + * For IE 6/7 only + * Include this rule to trigger hasLayout and contain floats. + */ + .clearfix { *zoom: 1; } +/* ========================================================================== + EXAMPLE Media Queries for Responsive Design. + Theses examples override the primary ('mobile first') styles. + Modify as content requires. + ========================================================================== */ +@media only screen and (min-width: 35em) { + /* Style adjustments for viewports that meet the condition */ +} /* ========================================================================== Print styles. diff --git a/css/normalize.css b/css/normalize.css new file mode 100644 index 0000000000..f5df87f8f8 --- /dev/null +++ b/css/normalize.css @@ -0,0 +1,500 @@ +/*! normalize.css 2012-08-07T21:27 UTC | MIT License | git.io/normalize */ + +/* ========================================================================== + HTML5 display definitions + ========================================================================== */ + +/* + * Corrects `block` display not defined in IE6/7/8/9 & FF3. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +nav, +section, +summary { + display: block; +} + +/* + * Corrects `inline-block` display not defined in IE6/7/8/9 & FF3. + */ + +audio, +canvas, +video { + display: inline-block; + *display: inline; + *zoom: 1; +} + +/* + * Prevents modern browsers from displaying `audio` without controls. + * Remove excess height in iOS5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/* + * Addresses styling for `hidden` attribute not present in IE7/8/9, FF3, S4. + * Known issue: no IE6 support. + */ + +[hidden] { + display: none; +} + +/* ========================================================================== + Base + ========================================================================== */ + +/* + * 1. Corrects text resizing oddly in IE6/7 when body `font-size` is set using + * `em` units. + * 2. Prevents iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + font-size: 100%; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + -ms-text-size-adjust: 100%; /* 2 */ +} + +/* + * Addresses `font-family` inconsistency between `textarea` and other form + * elements. + */ + +html, +button, +input, +select, +textarea { + font-family: sans-serif; +} + +/* + * Addresses margins handled incorrectly in IE6/7. + */ + +body { + margin: 0; +} + +/* ========================================================================== + Links + ========================================================================== */ + +/* + * Addresses `outline` inconsistency between Chrome and other browsers. + */ + +a:focus { + outline: thin dotted; +} + +/* + * Improves readability when focused and also mouse hovered in all browsers. + * people.opera.com/patrickl/experiments/keyboard/test + */ + +a:active, +a:hover { + outline: 0; +} + +/* ========================================================================== + Typography + ========================================================================== */ + +/* + * Addresses font sizes and margins set differently in IE6/7. + * Addresses font sizes within `section` and `article` in FF4+, Chrome, S5. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +h2 { + font-size: 1.5em; + margin: 0.83em 0; +} + +h3 { + font-size: 1.17em; + margin: 1em 0; +} + +h4 { + font-size: 1em; + margin: 1.33em 0; +} + +h5 { + font-size: 0.83em; + margin: 1.67em 0; +} + +h6 { + font-size: 0.75em; + margin: 2.33em 0; +} + +/* + * Addresses styling not present in IE7/8/9, S5, Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/* + * Addresses style set to `bolder` in FF3+, S4/5, Chrome. + */ + +b, +strong { + font-weight: bold; +} + +blockquote { + margin: 1em 40px; +} + +/* + * Addresses styling not present in S5, Chrome. + */ + +dfn { + font-style: italic; +} + +/* + * Addresses styling not present in IE6/7/8/9. + */ + +mark { + background: #ff0; + color: #000; +} + +/* + * Addresses margins set differently in IE6/7. + */ + +p, +pre { + margin: 1em 0; +} + +/* + * Corrects font family set oddly in IE6, S4/5, Chrome. + * en.wikipedia.org/wiki/User:Davidgothberg/Test59 + */ + +code, +kbd, +pre, +samp { + font-family: monospace, serif; + _font-family: 'courier new', monospace; + font-size: 1em; +} + +/* + * Improves readability of pre-formatted text in all browsers. + */ + +pre { + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; +} + +/* + * Addresses CSS quotes not supported in IE6/7. + */ + +q { + quotes: none; +} + +/* + * Addresses `quotes` property not supported in S4. + */ + +q:before, +q:after { + content: ''; + content: none; +} + +small { + font-size: 75%; +} + +/* + * Prevents `sub` and `sup` affecting `line-height` in all browsers. + * gist.github.com/413930 + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* ========================================================================== + Lists + ========================================================================== */ + +/* + * Addresses margins set differently in IE6/7. + */ + +dl, +menu, +ol, +ul { + margin: 1em 0; +} + +dd { + margin: 0 0 0 40px; +} + +/* + * Addresses paddings set differently in IE6/7. + */ + +menu, +ol, +ul { + padding: 0 0 0 40px; +} + +/* + * Corrects list images handled incorrectly in IE7. + */ + +nav ul, +nav ol { + list-style: none; + list-style-image: none; +} + +/* ========================================================================== + Embedded content + ========================================================================== */ + +/* + * 1. Removes border when inside `a` element in IE6/7/8/9, FF3. + * 2. Improves image quality when scaled in IE7. + * code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ + */ + +img { + border: 0; /* 1 */ + -ms-interpolation-mode: bicubic; /* 2 */ +} + +/* + * Corrects overflow displayed oddly in IE9. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* ========================================================================== + Figures + ========================================================================== */ + +/* + * Addresses margin not present in IE6/7/8/9, S5, O11. + */ + +figure { + margin: 0; +} + +/* ========================================================================== + Forms + ========================================================================== */ + +/* + * Corrects margin displayed oddly in IE6/7. + */ + +form { + margin: 0; +} + +/* + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/* + * 1. Corrects color not being inherited in IE6/7/8/9. + * 2. Corrects text not wrapping in FF3. + * 3. Corrects alignment displayed oddly in IE6/7. + */ + +legend { + border: 0; /* 1 */ + padding: 0; + white-space: normal; /* 2 */ + *margin-left: -7px; /* 3 */ +} + +/* + * 1. Corrects font size not being inherited in all browsers. + * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome. + * 3. Improves appearance and consistency in all browsers. + */ + +button, +input, +select, +textarea { + font-size: 100%; /* 1 */ + margin: 0; /* 2 */ + vertical-align: baseline; /* 3 */ + *vertical-align: middle; /* 3 */ +} + +/* + * Addresses FF3/4 setting `line-height` on `input` using `!important` in the + * UA stylesheet. + */ + +button, +input { + line-height: normal; +} + +/* + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Corrects inability to style clickable `input` types in iOS. + * 3. Improves usability and consistency of cursor style between image-type + * `input` and others. + * 4. Removes inner spacing in IE7 without affecting normal text inputs. + * Known issue: inner spacing remains in IE6. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ + *overflow: visible; /* 4 */ +} + +/* + * Re-set default cursor for disabled elements. + */ + +button[disabled], +input[disabled] { + cursor: default; +} + +/* + * 1. Addresses box sizing set to content-box in IE8/9. + * 2. Removes excess padding in IE8/9. + * 3. Removes excess padding in IE7. + * Known issue: excess padding remains in IE6. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ + *height: 13px; /* 3 */ + *width: 13px; /* 3 */ +} + +/* + * 1. Addresses `appearance` set to `searchfield` in S5, Chrome. + * 2. Addresses `box-sizing` set to `border-box` in S5, Chrome (include `-moz` + * to future-proof). + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; +} + +/* + * Removes inner padding and search cancel button in S5, Chrome on OS X. + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* + * Removes inner padding and border in FF3+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/* + * 1. Removes default vertical scrollbar in IE6/7/8/9. + * 2. Improves readability and alignment in all browsers. + */ + +textarea { + overflow: auto; /* 1 */ + vertical-align: top; /* 2 */ +} + +/* ========================================================================== + Tables + ========================================================================== */ + +/* + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/doc/html.md b/doc/html.md index 4d73ca59a8..378141dd97 100644 --- a/doc/html.md +++ b/doc/html.md @@ -101,8 +101,8 @@ The shortcut icons should be put in the root directory of your site. HTML5 Boilerplate comes with a default set of icons (include favicon and Apple Touch Icons) that you can use as a baseline to create your own. -If your site is in a sub-directory, make sure you include `link` tags in the -HTML source so that the icons can render. +If your site or icons are in a sub-directory, you will need to reference the +icons using `link` elements placed in the HTML `head` of your document. For a comprehensive overview, please read [Everything you always wanted to know about touch icons](http://mathiasbynens.be/notes/touch-icons) by Mathias diff --git a/index.html b/index.html index 5923f29eb5..279797c0b6 100644 --- a/index.html +++ b/index.html @@ -10,8 +10,9 @@ - + +