From 4b091efc4f917109c88c56c50a80981e96aefcc4 Mon Sep 17 00:00:00 2001 From: Brenna O'Brien Date: Thu, 6 Dec 2012 16:58:10 -0500 Subject: [PATCH 1/7] inital sass file conversion, changed all comments to non-compiled --- normalize.css => normalize.scss | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename normalize.css => normalize.scss (100%) diff --git a/normalize.css b/normalize.scss similarity index 100% rename from normalize.css rename to normalize.scss From f32b1ffac50ec9f8f42be209f216020b34be152b Mon Sep 17 00:00:00 2001 From: Brenna O'Brien Date: Thu, 6 Dec 2012 16:59:11 -0500 Subject: [PATCH 2/7] adding sass file --- normalize.scss | 297 +++++++++++++++++++++++-------------------------- 1 file changed, 139 insertions(+), 158 deletions(-) diff --git a/normalize.scss b/normalize.scss index 57b5d2679..ce88d45ca 100644 --- a/normalize.scss +++ b/normalize.scss @@ -1,12 +1,25 @@ -/*! normalize.css v2.0.1 | MIT License | git.io/normalize */ +// normalize.css v2.0.1 | MIT License | git.io/normalize +// ========================================================================== +// lovingly Sass-ified by Brenna (http://github.com/brenna) -/* ========================================================================== - HTML5 display definitions - ========================================================================== */ -/* - * Corrects `block` display not defined in IE 8/9. - */ +// ========================================================================== +// VARIABLES +// ========================================================================== +// customize your normalize defaults here: + + +// ========================================================================== +// STOP CHANGING THINGS NOW! +// ========================================================================== +// Lucky you, you're done. The rest is automagic. + + +// ========================================================================== +// HTML5 display definitions +// ========================================================================== + +// Corrects `block` display not defined in IE 8/9. article, aside, @@ -22,9 +35,8 @@ summary { display: block; } -/* - * Corrects `inline-block` display not defined in IE 8/9. - */ + +// Corrects `inline-block` display not defined in IE 8/9. audio, canvas, @@ -32,110 +44,99 @@ video { display: inline-block; } -/* - * Prevents modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. - */ + +// Prevents modern browsers from displaying `audio` without controls. +// Remove excess height in iOS 5 devices. audio:not([controls]) { display: none; height: 0; } -/* - * Addresses styling for `hidden` attribute not present in IE 8/9. - */ + +// Addresses styling for `hidden` attribute not present in IE 8/9. [hidden] { display: none; } -/* ========================================================================== - Base - ========================================================================== */ +// ========================================================================== +// Base +// ========================================================================== -/* - * 1. Sets default font family to sans-serif. - * 2. Prevents iOS text size adjust after orientation change, without disabling - * user zoom. - */ + +// 1. Sets default font family to sans-serif. +// 2. Prevents iOS text size adjust after orientation change, without disabling +// user zoom. html { - font-family: sans-serif; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ - -ms-text-size-adjust: 100%; /* 2 */ + font-family: sans-serif; // 1 + -webkit-text-size-adjust: 100%; // 2 + -ms-text-size-adjust: 100%; // 2 } -/* - * Removes default margin. - */ + +// Removes default margin. body { margin: 0; } -/* ========================================================================== - Links - ========================================================================== */ +// ========================================================================== +// Links +// ========================================================================== -/* - * Addresses `outline` inconsistency between Chrome and other browsers. - */ + +// Addresses `outline` inconsistency between Chrome and other browsers. a:focus { outline: thin dotted; } -/* - * Improves readability when focused and also mouse hovered in all browsers. - */ + +// Improves readability when focused and also mouse hovered in all browsers. a:active, a:hover { outline: 0; } -/* ========================================================================== - Typography - ========================================================================== */ +// ========================================================================== +// Typography +// ========================================================================== + -/* - * Addresses `h1` font sizes within `section` and `article` in Firefox 4+, - * Safari 5, and Chrome. - */ +// Addresses `h1` font sizes within `section` and `article` in Firefox 4+, +// Safari 5, and Chrome. h1 { font-size: 2em; } -/* - * Addresses styling not present in IE 8/9, Safari 5, and Chrome. - */ + +// Addresses styling not present in IE 8/9, Safari 5, and Chrome. abbr[title] { border-bottom: 1px dotted; } -/* - * Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome. - */ + +// Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome. b, strong { font-weight: bold; } -/* - * Addresses styling not present in Safari 5 and Chrome. - */ + +// Addresses styling not present in Safari 5 and Chrome. dfn { font-style: italic; } -/* - * Addresses styling not present in IE 8/9. - */ + +// Addresses styling not present in IE 8/9. mark { background: #ff0; @@ -143,9 +144,8 @@ mark { } -/* - * Corrects font family set oddly in Safari 5 and Chrome. - */ + +// Corrects font family set oddly in Safari 5 and Chrome. code, kbd, @@ -155,9 +155,8 @@ samp { font-size: 1em; } -/* - * Improves readability of pre-formatted text in all browsers. - */ + +// Improves readability of pre-formatted text in all browsers. pre { white-space: pre; @@ -165,25 +164,22 @@ pre { word-wrap: break-word; } -/* - * Sets consistent quote types. - */ + +// Sets consistent quote types. q { quotes: "\201C" "\201D" "\2018" "\2019"; } -/* - * Addresses inconsistent and variable font size in all browsers. - */ + +// Addresses inconsistent and variable font size in all browsers. small { font-size: 80%; } -/* - * Prevents `sub` and `sup` affecting `line-height` in all browsers. - */ + +// Prevents `sub` and `sup` affecting `line-height` in all browsers. sub, sup { @@ -201,45 +197,41 @@ sub { bottom: -0.25em; } -/* ========================================================================== - Embedded content - ========================================================================== */ +// ========================================================================== +// Embedded content +// ========================================================================== -/* - * Removes border when inside `a` element in IE 8/9. - */ + +// Removes border when inside `a` element in IE 8/9. img { border: 0; } -/* - * Corrects overflow displayed oddly in IE 9. - */ + +// Corrects overflow displayed oddly in IE 9. svg:not(:root) { overflow: hidden; } -/* ========================================================================== - Figures - ========================================================================== */ +// ========================================================================== +// Figures +// ========================================================================== -/* - * Addresses margin not present in IE 8/9 and Safari 5. - */ + +// Addresses margin not present in IE 8/9 and Safari 5. figure { margin: 0; } -/* ========================================================================== - Forms - ========================================================================== */ +// ========================================================================== +// Forms +// ========================================================================== + -/* - * Define consistent border, margin, and padding. - */ +// Define consistent border, margin, and padding. fieldset { border: 1px solid #c0c0c0; @@ -247,103 +239,94 @@ fieldset { padding: 0.35em 0.625em 0.75em; } -/* - * 1. Corrects color not being inherited in IE 8/9. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. - */ + +// 1. Corrects color not being inherited in IE 8/9. +// 2. Remove padding so people aren't caught out if they zero out fieldsets. legend { - border: 0; /* 1 */ - padding: 0; /* 2 */ + border: 0; // 1 + padding: 0; // 2 } -/* - * 1. Corrects font family not being inherited in all browsers. - * 2. Corrects font size not being inherited in all browsers. - * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome - */ + +// 1. Corrects font family not being inherited in all browsers. +// 2. Corrects font size not being inherited in all browsers. +// 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome button, input, select, textarea { - font-family: inherit; /* 1 */ - font-size: 100%; /* 2 */ - margin: 0; /* 3 */ + font-family: inherit; // 1 + font-size: 100%; // 2 + margin: 0; // 3 } -/* - * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in - * the UA stylesheet. - */ + +// Addresses Firefox 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. - */ + +// 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. button, -html input[type="button"], /* 1 */ +html input[type="button"], // 1 input[type="reset"], input[type="submit"] { - -webkit-appearance: button; /* 2 */ - cursor: pointer; /* 3 */ + -webkit-appearance: button; // 2 + cursor: pointer; // 3 } -/* - * Re-set default cursor for disabled elements. - */ + +// Re-set default cursor for disabled elements. button[disabled], input[disabled] { cursor: default; } -/* - * 1. Addresses box sizing set to `content-box` in IE 8/9. - * 2. Removes excess padding in IE 8/9. - */ + +// 1. Addresses box sizing set to `content-box` in IE 8/9. +// 2. Removes excess padding in IE 8/9. input[type="checkbox"], input[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ + box-sizing: border-box; // 1 + padding: 0; // 2 } -/* - * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome. - * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome - * (include `-moz` to future-proof). - */ + +// 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome. +// 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome +// (include `-moz` to future-proof). input[type="search"] { - -webkit-appearance: textfield; /* 1 */ + -webkit-appearance: textfield; // 1 -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; /* 2 */ + -webkit-box-sizing: content-box; // 2 box-sizing: content-box; } -/* - * Removes inner padding and search cancel button in Safari 5 and Chrome - * on OS X. - */ + +// Removes inner padding and search cancel button in Safari 5 and 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 Firefox 4+. - */ + +// Removes inner padding and border in Firefox 4+. button::-moz-focus-inner, input::-moz-focus-inner { @@ -351,23 +334,21 @@ input::-moz-focus-inner { padding: 0; } -/* - * 1. Removes default vertical scrollbar in IE 8/9. - * 2. Improves readability and alignment in all browsers. - */ + +// 1. Removes default vertical scrollbar in IE 8/9. +// 2. Improves readability and alignment in all browsers. textarea { - overflow: auto; /* 1 */ - vertical-align: top; /* 2 */ + overflow: auto; // 1 + vertical-align: top; // 2 } -/* ========================================================================== - Tables - ========================================================================== */ +// ========================================================================== +// Tables +// ========================================================================== + -/* - * Remove most spacing between table cells. - */ +// Remove most spacing between table cells. table { border-collapse: collapse; From 6b97320f5433817fddac5a1f38c0e63412dbcf57 Mon Sep 17 00:00:00 2001 From: Brenna O'Brien Date: Mon, 10 Dec 2012 16:48:13 -0500 Subject: [PATCH 3/7] converted size and colour declarations to Sass variables --- normalize.scss | 41 +++++++++++++++++++++++++++++------------ 1 file changed, 29 insertions(+), 12 deletions(-) diff --git a/normalize.scss b/normalize.scss index ce88d45ca..c6a166d9a 100644 --- a/normalize.scss +++ b/normalize.scss @@ -8,6 +8,23 @@ // ========================================================================== // customize your normalize defaults here: +$h1Size: 2em; +$preSize: 1em; //also applies to code, kbd, & samp elements +$smallSize: 80%; + +$subSupSize: 75%; +$subOffset: -0.5em; +$supOffset: -0.25em; + +$focusOutline: thin dotted; + +$markColor: #000; +$markBgColor: #ff0; + +$fieldsetBorder: 1px solid #c0c0c0; +$fieldsetMargin: 0 2px; +$fieldsetPadding: 0.35em 0.625em 0.75em; + // ========================================================================== // STOP CHANGING THINGS NOW! @@ -90,7 +107,7 @@ body { // Addresses `outline` inconsistency between Chrome and other browsers. a:focus { - outline: thin dotted; + outline: $focusOutline; } @@ -110,7 +127,7 @@ a:hover { // Safari 5, and Chrome. h1 { - font-size: 2em; + font-size: $h1Size; } @@ -139,8 +156,8 @@ dfn { // Addresses styling not present in IE 8/9. mark { - background: #ff0; - color: #000; + background: $markBgColor; + color: $markColor; } @@ -152,7 +169,7 @@ kbd, pre, samp { font-family: monospace, serif; - font-size: 1em; + font-size: $preSize; } @@ -175,7 +192,7 @@ q { // Addresses inconsistent and variable font size in all browsers. small { - font-size: 80%; + font-size: $smallSize; } @@ -183,18 +200,18 @@ small { sub, sup { - font-size: 75%; + font-size: $subSupSize; line-height: 0; position: relative; vertical-align: baseline; } sup { - top: -0.5em; + top: $supOffset; } sub { - bottom: -0.25em; + bottom: $subOffset; } // ========================================================================== @@ -234,9 +251,9 @@ figure { // Define consistent border, margin, and padding. fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; + border: $fieldsetBorder; + margin: $fieldsetMargin; + padding: $fieldsetPadding; } From 60c73d1e65a377759e2b5a6cf548bf4a30965a57 Mon Sep 17 00:00:00 2001 From: Brenna O'Brien Date: Wed, 6 Feb 2013 17:07:20 -0500 Subject: [PATCH 4/7] updated readme, added var for bold font weight --- README.md | 39 ++++++++++++--------------------------- normalize.scss | 4 +++- 2 files changed, 15 insertions(+), 28 deletions(-) diff --git a/README.md b/README.md index 82f9f5d63..e3d3d5151 100644 --- a/README.md +++ b/README.md @@ -1,42 +1,27 @@ -# normalize.css v2.0.1 +# normalize.css v2.0.1 - Sassified! -Normalize.css is a customisable CSS file that makes browsers render all -elements more consistently and in line with modern standards. We researched the -differences between default browser styles in order to precisely target only -the styles that need normalizing. +A Sass version of normalize.css. -[Check out the demo](http://necolas.github.com/normalize.css/2.0.1/test.html) +## Why did I make this? -## What does it do? +Normalize.css is my go to browser baseline (instead of a traditional kill everything reset), but I also like writing all my css with Sass. I often found myself overwriting normalize settings in other scss files, or having to modify the normalize file without having access to my usual Sass variables. That defeated the purpose of using Sass to help organize and reduce the size of my stylsheets. So I converted several baseline values that you might want to customize into Sass variables. -* Preserves useful defaults, unlike many CSS resets. -* Normalizes styles for a wide range of elements. -* Corrects bugs and common browser inconsistencies. -* Improves usability with subtle improvements. -* Explains what code does using detailed comments. +## Usage -## How to use it +@import normalize.sccs as you see fit in your Sass project, though you'll typically do that at the beginning. If you're happy with normalize's defaults, you're done! If you'd like to customize, simply change the variable values found at the beginning of normalize.scss. If you've -Normalize.css is intended to be used as an alternative to CSS resets. +## Browser Support -It's suggested that you read the `normalize.css` file and consider customising -it to meet your needs. Alternatively, include the file in your project and -override the defaults later in your CSS. - -## Browser support +Same as normalize.css: +* Browser support * Google Chrome * Mozilla Firefox 4+ * Apple Safari 5+ * Opera 12+ * Internet Explorer 8+ -## Contribute - -Please read my [issue -guidelines](https://github.com/necolas/issue-guidelines). - -## Acknowledgements +## Futher Details -Normalize.css is a project by [Nicolas Gallagher](http://github.com/necolas) -and [Jonathan Neal](http://github.com/jonathantneal). +Check out the original [normalize.css documentation](https://github.com/necolas/normalize.css/ +) for more details on how it works. diff --git a/normalize.scss b/normalize.scss index c6a166d9a..f96e0a587 100644 --- a/normalize.scss +++ b/normalize.scss @@ -25,6 +25,8 @@ $fieldsetBorder: 1px solid #c0c0c0; $fieldsetMargin: 0 2px; $fieldsetPadding: 0.35em 0.625em 0.75em; +$strongWeight: 500; //with some webfonts, "bold" is too bold! + // ========================================================================== // STOP CHANGING THINGS NOW! @@ -142,7 +144,7 @@ abbr[title] { b, strong { - font-weight: bold; + font-weight: $strongWeight; } From 1fb5205fc9cecba44ea6ebc28ff00302b027b606 Mon Sep 17 00:00:00 2001 From: Brenna O'Brien Date: Wed, 20 Feb 2013 14:07:38 -0500 Subject: [PATCH 5/7] Update README.md --- README.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index e3d3d5151..2e40b6641 100644 --- a/README.md +++ b/README.md @@ -4,17 +4,16 @@ A Sass version of normalize.css. ## Why did I make this? -Normalize.css is my go to browser baseline (instead of a traditional kill everything reset), but I also like writing all my css with Sass. I often found myself overwriting normalize settings in other scss files, or having to modify the normalize file without having access to my usual Sass variables. That defeated the purpose of using Sass to help organize and reduce the size of my stylsheets. So I converted several baseline values that you might want to customize into Sass variables. +Normalize.css is my go to browser baseline (instead of a traditional kill everything reset), but I also like writing all my css with Sass. I often found myself overwriting normalize settings in other scss files, or having to modify the normalize file without having access to my usual Sass variables. That defeated the purpose of using Sass to help organize and reduce the size of my stylsheets. So I converted most of nomalize's baseline values into Sass variables for easy editing and re-use. ## Usage -@import normalize.sccs as you see fit in your Sass project, though you'll typically do that at the beginning. If you're happy with normalize's defaults, you're done! If you'd like to customize, simply change the variable values found at the beginning of normalize.scss. If you've +`@import` _normalize.sccs as you see fit in your Sass project, though you'll typically do that at the beginning. If you're happy with normalize's defaults, you're done! If you'd like to customize, simply change the variable values found at the beginning of normalize.scss. If you've ## Browser Support Same as normalize.css: -* Browser support * Google Chrome * Mozilla Firefox 4+ * Apple Safari 5+ From 0a21e5849c3d2c45643bc1e666a7bc500a6589f8 Mon Sep 17 00:00:00 2001 From: Brenna O'Brien Date: Wed, 20 Feb 2013 14:13:19 -0500 Subject: [PATCH 6/7] removed old normalize.css file and renamed normalize.scss as Sass partial --- CHANGELOG.md | 29 --- LICENSE.md | 19 -- normalize.scss => _normalize.scss | 0 component.json | 15 -- test.html | 350 ------------------------------ 5 files changed, 413 deletions(-) delete mode 100644 CHANGELOG.md delete mode 100644 LICENSE.md rename normalize.scss => _normalize.scss (100%) delete mode 100644 component.json delete mode 100644 test.html diff --git a/CHANGELOG.md b/CHANGELOG.md deleted file mode 100644 index e8a6349a0..000000000 --- a/CHANGELOG.md +++ /dev/null @@ -1,29 +0,0 @@ -== 2.0.1 (August 20, 2012) - -* Remove stray IE 6/7 `inline-block` hack from HTML5 display settings. - -== 2.0.0 (August 19, 2012) - -* Remove legacy browser form normalizations. -* Remove all list normalizations. -* Add `quotes` normalizations. -* Remove all heading normalizations except `h1` font size. -* Form elements automatically inherit `font-family` from ancestor. -* Drop support for IE 6/7, Firefox < 4, and Safari < 5. - -== 1.0.1 (August 19, 2012) - -* Adjust `small` font size normalization. - -== 1.0.0 (August 14, 2012) - -(Only the notable changes since public release) - -* Add MIT License. -* Hide `audio` elements without controls in iOS 5 (#69). -* Normalize heading margins and font size. -* Move font-family normalization from `body` to `html` (#62). -* Remove scrollbar normalization (#64 #65). -* Remove excess padding from checkbox and radio inputs in IE 7 (#42). -* Add IE9 correction for SVG overflow (#16). -* Add fix for legend not inheriting color in IE 6/7/8/9. diff --git a/LICENSE.md b/LICENSE.md deleted file mode 100644 index c6bcc9bf2..000000000 --- a/LICENSE.md +++ /dev/null @@ -1,19 +0,0 @@ -Copyright (c) Nicolas Gallagher and Jonathan Neal - -Permission is hereby granted, free of charge, to any person obtaining a copy of -this software and associated documentation files (the "Software"), to deal in -the Software without restriction, including without limitation the rights to -use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies -of the Software, and to permit persons to whom the Software is furnished to do -so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. diff --git a/normalize.scss b/_normalize.scss similarity index 100% rename from normalize.scss rename to _normalize.scss diff --git a/component.json b/component.json deleted file mode 100644 index 393f61ee0..000000000 --- a/component.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "name": "normalize-css", - "version": "2.0.1", - "author": "Nicolas Gallagher", - "homepage": "http://necolas.github.com/normalize.css/", - "styles": ["normalize.css"], - "repository": { - "type": "git", - "url": "https://github.com/necolas/normalize.css.git" - }, - "licenses": [{ - "type": "MIT", - "url": "http://opensource.org/licenses/MIT" - }] -} diff --git a/test.html b/test.html deleted file mode 100644 index 750e5470d..000000000 --- a/test.html +++ /dev/null @@ -1,350 +0,0 @@ - - - - - - Normalize CSS - - - - - -

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

- -

Heading 1 (in section)

Heading 2 (in section)

Heading 3 (in section)

Heading 4 (in section)

Heading 5 (in section)

Heading 6 (in section)

- -

Heading 1 (in article)

Heading 2 (in article)

Heading 3 (in article)

Heading 4 (in article)

Heading 5 (in article)

Heading 6 (in article)

- -

Heading 1 (in hgroup)

Heading 2 (in hgroup)

- - -

- -

Text-level semantics

- - - -

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.

- -

Address: somewhere, world

- -

- The a element example
- The abbr element and abbr element with title examples
- The b element example
- The cite element example
- The code element example
- The ~~del element~~ example
- The dfn element and dfn element with title examples
- The em element example
- The i element example
- The img element example
- The ins element example
- The kbd element example
- The mark element example
- The q element inside a q element example
- The ~~s element~~ example
- The samp element example
- The small element example
- The span element example
- The strong element example
- The _{sub element} example
- The ^{sup element} example
- The u element example
- The var element example -

- -

Embedded content

- -

audio

- -

img

- -

svg

- - - -

video

- -

Interactive content

- -

details / summary

More info

Additional information

Point 1
Point 2

- -

Grouping content

- -

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.

- -

pre

- -

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et me.

- -

<html>
-    <head>
-    </head>
-    <body>
-        <div class="main"> <div>
-    </body>
-</html>

- -

blockquote

- -

-
Some sort of famous witty quote marked up with a <blockquote> and a child <p> element.
-

- -

Even better philosophical quote marked up with just a <blockquote> element.

- -

ordered list

- -

list item 1
list item 1 -
1. list item 2
2. list item 2 -
  1. list item 3
  2. list item 3
  -
3. list item 2
4. list item 2
-
list item 1
list item 1

- -

unordered list

- -

list item 1
list item 1 -
- list item 2
- list item 2 -
  - list item 3
  - list item 3
  -
- list item 2
- list item 2
-
list item 1
list item 1

- -

description list

- -

Description name: Description value
Description name: Description value; Description value
Description name
Description name: Description value

- -

figure

- -

- -

Tabular data

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Jimi Hendrix - albums
Album	Year	Price
Album	Year	Price
Are You Experienced	1967	$10.00
Axis: Bold as Love	1967	$12.00
Electric Ladyland	1968	$10.00
Band of Gypsys	1970	$12.00

- -

Forms

- -

- Inputs as descendents of labels (form legend). This doubles up as a long legend that can test word wrapping. -

Text input

Email input

Search input

Tel input

URL input

Password input

File input

- -

Radio input

Checkbox input

Radio input

Checkbox input

- -

Select field

Textarea Textarea text

- -

- Inputs as siblings of labels -

Color input

Number input

Range input

Date input

Month input

Week input

Datetime input

Datetime-local input

- -

Radio input

Checkbox input

Radio input

Checkbox input

- -

Select field

Textarea Textarea text

- -

- Clickable inputs and buttons -

- - -

- -

- box-sizing tests -

- -

- - - From 1f9c8613f9e63c3263eeed01181e0762eaa0a54c Mon Sep 17 00:00:00 2001 From: Brenna Date: Sat, 27 Dec 2014 21:26:55 -0500 Subject: [PATCH 7/7] update to v3 of normalize --- .gitignore | 7 + README.md | 44 ++++-- _normalize.scss | 391 +++++++++++++++++++++++++----------------------- 3 files changed, 245 insertions(+), 197 deletions(-) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..4dd114fa2 --- /dev/null +++ b/.gitignore @@ -0,0 +1,7 @@ +normalize.css +CONTRIBUTING.md +package.json +test.html +component.json +CHANGELOG.md +bower.json \ No newline at end of file diff --git a/README.md b/README.md index 2e40b6641..f5c97990a 100644 --- a/README.md +++ b/README.md @@ -1,26 +1,48 @@ -# normalize.css v2.0.1 - Sassified! -A Sass version of normalize.css. +# normalize.scss v3 -## Why did I make this? +A Sass version of normalize.css with customizable variables. -Normalize.css is my go to browser baseline (instead of a traditional kill everything reset), but I also like writing all my css with Sass. I often found myself overwriting normalize settings in other scss files, or having to modify the normalize file without having access to my usual Sass variables. That defeated the purpose of using Sass to help organize and reduce the size of my stylsheets. So I converted most of nomalize's baseline values into Sass variables for easy editing and re-use. +# About normalize.css + +Normalize.css is a customisable CSS file that makes browsers render all +elements more consistently and in line with modern standards. + +The project relies on researching the differences between default browser +styles in order to precisely target only the styles that need or benefit from +normalizing. + +[View the test file](http://necolas.github.io/normalize.css/latest/test.html) ## Usage -`@import` _normalize.sccs as you see fit in your Sass project, though you'll typically do that at the beginning. If you're happy with normalize's defaults, you're done! If you'd like to customize, simply change the variable values found at the beginning of normalize.scss. If you've +Place `_normalize.sccs` in your styles directory and import at the top of your main +.scss style sheet: + +``` +@import normalize; +``` + +##Customization + +Customize your baseline styles by changing the variable values found at the beginning of `_normalize.scss`. ## Browser Support -Same as normalize.css: +Same as the current version (v3) of normalize.css: -* Google Chrome -* Mozilla Firefox 4+ -* Apple Safari 5+ -* Opera 12+ +* Google Chrome (latest) +* Mozilla Firefox (latest) +* Mozilla Firefox 4 +* Opera (latest) +* Apple Safari 6+ * Internet Explorer 8+ -## Futher Details + +## Further Details Check out the original [normalize.css documentation](https://github.com/necolas/normalize.css/ ) for more details on how it works. + +## Why did I make this? +Normalize.css is my go to browser baseline (instead of a traditional kill everything reset), but I also like writing all my css with Sass. I often found myself overwriting normalize settings in other scss files, or having to modify the normalize file without having access to my usual Sass variables. That defeated the purpose of using Sass to help organize and reduce the size of my stylsheets. So I converted most of nomalize's baseline values into Sass variables for easy editing and re-use. diff --git a/_normalize.scss b/_normalize.scss index f96e0a587..55df7776c 100644 --- a/_normalize.scss +++ b/_normalize.scss @@ -1,44 +1,67 @@ -// normalize.css v2.0.1 | MIT License | git.io/normalize +/*! normalize.css v3.0.2 | MIT License | git.io/normalize */ // ========================================================================== -// lovingly Sass-ified by Brenna (http://github.com/brenna) - +// lovingly Sass-ified by Brenna (http://github.com/brenna/normalize.scss) // ========================================================================== // VARIABLES // ========================================================================== // customize your normalize defaults here: +$fontFamily: 'sans-serif'; +$strongWeight: 500; //with some webfonts, "bold" is too bold! + $h1Size: 2em; +$h1Margin: 0.67em 0; + + $preSize: 1em; //also applies to code, kbd, & samp elements + $smallSize: 80%; $subSupSize: 75%; $subOffset: -0.5em; $supOffset: -0.25em; -$focusOutline: thin dotted; - -$markColor: #000; -$markBgColor: #ff0; +$figureMargin: 1em 40px; $fieldsetBorder: 1px solid #c0c0c0; $fieldsetMargin: 0 2px; $fieldsetPadding: 0.35em 0.625em 0.75em; -$strongWeight: 500; //with some webfonts, "bold" is too bold! +$markColor: #000; +$markBgColor: #ff0; // ========================================================================== -// STOP CHANGING THINGS NOW! +// STOP CHANGING THINGS NOW! // ========================================================================== // Lucky you, you're done. The rest is automagic. +// 1. Sets default font family to sans-serif. +// 2. Prevents iOS text size adjust after orientation change, without disabling +// user zoom. + +html { + font-family: $fontFamily; //1 + -ms-text-size-adjust: 100%; // 2 + -webkit-text-size-adjust: 100%; // 2 +} + +// Remove default margin. + +body { + margin: 0; +} + -// ========================================================================== // HTML5 display definitions // ========================================================================== -// Corrects `block` display not defined in IE 8/9. +// Correct `block` display not defined for any HTML5 element in IE 8/9. +// Correct `block` display not defined for `details` or `summary` in IE 10/11 +// and Firefox. +// Correct `block` display not defined for `main` in IE 11. + article, aside, @@ -48,328 +71,324 @@ figure, footer, header, hgroup, +main, +menu, nav, section, summary { - display: block; + display: block; } - -// Corrects `inline-block` display not defined in IE 8/9. +// 1. Correct `inline-block` display not defined in IE 8/9. +// 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. audio, canvas, +progress, video { - display: inline-block; + display: inline-block; //1 + vertical-align: baseline; //2 } - -// Prevents modern browsers from displaying `audio` without controls. +// Prevent modern browsers from displaying `audio` without controls. // Remove excess height in iOS 5 devices. audio:not([controls]) { - display: none; - height: 0; -} - - -// Addresses styling for `hidden` attribute not present in IE 8/9. - -[hidden] { - display: none; -} - -// ========================================================================== -// Base -// ========================================================================== - - -// 1. Sets default font family to sans-serif. -// 2. Prevents iOS text size adjust after orientation change, without disabling -// user zoom. - -html { - font-family: sans-serif; // 1 - -webkit-text-size-adjust: 100%; // 2 - -ms-text-size-adjust: 100%; // 2 + display: none; + height: 0; } +// Address `[hidden]` styling not present in IE 8/9/10. +// Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. -// Removes default margin. - -body { - margin: 0; +[hidden], +template { + display: none; } -// ========================================================================== -// Links +// Links // ========================================================================== +// Remove the gray background color from active links in IE 10. -// Addresses `outline` inconsistency between Chrome and other browsers. - -a:focus { - outline: $focusOutline; +a { + background-color: transparent; } - -// Improves readability when focused and also mouse hovered in all browsers. +// Improve readability when focused and also mouse hovered in all browsers. a:active, a:hover { - outline: 0; + outline: 0; } +// Text-level semantics // ========================================================================== -// Typography -// ========================================================================== - - -// Addresses `h1` font sizes within `section` and `article` in Firefox 4+, -// Safari 5, and Chrome. - -h1 { - font-size: $h1Size; -} - -// Addresses styling not present in IE 8/9, Safari 5, and Chrome. +// Address styling not present in IE 8/9/10/11, Safari, and Chrome. abbr[title] { - border-bottom: 1px dotted; + border-bottom: 1px dotted; } - -// Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome. +// Address style set to `bolder` in Firefox 4+, Safari, and Chrome. b, strong { - font-weight: $strongWeight; + font-weight: $strongWeight; } - -// Addresses styling not present in Safari 5 and Chrome. +// Address styling not present in Safari and Chrome. dfn { - font-style: italic; -} - - -// Addresses styling not present in IE 8/9. - -mark { - background: $markBgColor; - color: $markColor; -} - - - -// Corrects font family set oddly in Safari 5 and Chrome. - -code, -kbd, -pre, -samp { - font-family: monospace, serif; - font-size: $preSize; + font-style: italic; } +// Address variable `h1` font-size and margin within `section` and `article` +// contexts in Firefox 4+, Safari, and Chrome. -// Improves readability of pre-formatted text in all browsers. - -pre { - white-space: pre; - white-space: pre-wrap; - word-wrap: break-word; +h1 { + font-size: $h1Size; + margin: $h1Margin; } +// Address styling not present in IE 8/9. -// Sets consistent quote types. - -q { - quotes: "\201C" "\201D" "\2018" "\2019"; +mark { + background: $markBgColor; + color: $markColor; } - -// Addresses inconsistent and variable font size in all browsers. +// Address inconsistent and variable font size in all browsers. small { - font-size: $smallSize; + font-size: $smallSize; } +// Prevent `sub` and `sup` affecting `line-height` in all browsers. -// Prevents `sub` and `sup` affecting `line-height` in all browsers. sub, sup { - font-size: $subSupSize; - line-height: 0; - position: relative; - vertical-align: baseline; + font-size: $subSupSize; + line-height: 0; + position: relative; + vertical-align: baseline; } sup { - top: $supOffset; + top: $supOffset; } sub { - bottom: $subOffset; + bottom: $subOffset; } -// ========================================================================== // Embedded content // ========================================================================== - -// Removes border when inside `a` element in IE 8/9. +// Remove border when inside `a` element in IE 8/9/10. img { - border: 0; + border: 0; } - -// Corrects overflow displayed oddly in IE 9. +// Correct overflow not hidden in IE 9/10/11. svg:not(:root) { - overflow: hidden; + overflow: hidden; } -// ========================================================================== -// Figures +// Grouping content // ========================================================================== +// Address margin not present in IE 8/9 and Safari. -// Addresses margin not present in IE 8/9 and Safari 5. figure { - margin: 0; + margin: $figureMargin; } -// ========================================================================== -// Forms -// ========================================================================== +// Address differences between Firefox and other browsers. +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} -// Define consistent border, margin, and padding. +// Contain overflow in all browsers. -fieldset { - border: $fieldsetBorder; - margin: $fieldsetMargin; - padding: $fieldsetPadding; +pre { + overflow: auto; } +// Address odd `em`-unit font size rendering in all browsers. -// 1. Corrects color not being inherited in IE 8/9. -// 2. Remove padding so people aren't caught out if they zero out fieldsets. - -legend { - border: 0; // 1 - padding: 0; // 2 +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: $preSize; } +// Forms +// ========================================================================== + +// Known limitation: by default, Chrome and Safari on OS X allow very limited +// styling of `select`, unless a `border` property is set. -// 1. Corrects font family not being inherited in all browsers. -// 2. Corrects font size not being inherited in all browsers. -// 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome +// 1. Correct color not being inherited. +// Known issue: affects color of disabled elements. +// 2. Correct font properties not being inherited. +// 3. Address margins set differently in Firefox 4+, Safari, and Chrome. button, input, +optgroup, select, textarea { - font-family: inherit; // 1 - font-size: 100%; // 2 - margin: 0; // 3 + color: inherit; //1 + font: inherit; //2 + margin: 0; //3 } +// Address `overflow` set to `hidden` in IE 8/9/10/11. -// Addresses Firefox 4+ setting `line-height` on `input` using `!important` in -// the UA stylesheet. +button { + overflow: visible; +} + +// Address inconsistent `text-transform` inheritance for `button` and `select`. +// All other form control elements do not inherit `text-transform` values. +// Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. +// Correct `select` style inheritance in Firefox. button, -input { - line-height: normal; +select { + text-transform: none; } - // 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 +// 2. Correct inability to style clickable `input` types in iOS. +// 3. Improve usability and consistency of cursor style between image-type // `input` and others. button, -html input[type="button"], // 1 +html input[type="button"], //1 input[type="reset"], input[type="submit"] { - -webkit-appearance: button; // 2 - cursor: pointer; // 3 + -webkit-appearance: button; //2 + cursor: pointer; //3 } - // Re-set default cursor for disabled elements. button[disabled], -input[disabled] { - cursor: default; +html input[disabled] { + cursor: default; } +// Remove inner padding and border in Firefox 4+. + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +// Address Firefox 4+ setting `line-height` on `input` using `!important` in +// the UA stylesheet. + +input { + line-height: normal; +} + +// It's recommended that you don't attempt to style these elements. +// Firefox's implementation doesn't respect box-sizing, padding, or width. + +// 1. Address box sizing set to `content-box` in IE 8/9/10. +// 2. Remove excess padding in IE 8/9/10. -// 1. Addresses box sizing set to `content-box` in IE 8/9. -// 2. Removes excess padding in IE 8/9. input[type="checkbox"], input[type="radio"] { - box-sizing: border-box; // 1 - padding: 0; // 2 + box-sizing: border-box; //1 + padding: 0; //2 } +// Fix the cursor style for Chrome's increment/decrement buttons. For certain +// `font-size` values of the `input`, it causes the cursor style of the +// decrement button to change from `default` to `text`. -// 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome. -// 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +// 1. Address `appearance` set to `searchfield` in Safari and Chrome. +// 2. Address `box-sizing` set to `border-box` in Safari and 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; + -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 Safari 5 and Chrome -// on OS X. +// Remove inner padding and search cancel button in Safari and Chrome on OS X. +// Safari (but not Chrome) clips the cancel button when the search input has +// padding (and `textfield` appearance). input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; + -webkit-appearance: none; } +// Define consistent border, margin, and padding. -// Removes inner padding and border in Firefox 4+. - -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; +fieldset { + border: $fieldsetBorder; + margin: $fieldsetMargin; + padding: $fieldsetPadding; } -// 1. Removes default vertical scrollbar in IE 8/9. -// 2. Improves readability and alignment in all browsers. +// 1. Correct `color` not being inherited in IE 8/9/10/11. +// 2. Remove padding so people aren't caught out if they zero out fieldsets. + +legend { + border: 0; //1 + padding: 0; //2 +} + +// Remove default vertical scrollbar in IE 8/9/10/11. textarea { - overflow: auto; // 1 - vertical-align: top; // 2 + overflow: auto; } -// ========================================================================== -// Tables -// ========================================================================== +// Don't inherit the `font-weight` (applied by a rule above). +// NOTE: the default cannot safely be changed in Chrome and Safari on OS X. + +optgroup { + font-weight: bold; +} +/* Tables + ========================================================================== */ // Remove most spacing between table cells. table { - border-collapse: collapse; - border-spacing: 0; + border-collapse: collapse; + border-spacing: 0; } + +td, +th { + padding: 0; +} \ No newline at end of file