diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..40b7eda78 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +/nbproject/ diff --git a/CHANGELOG.md b/CHANGELOG.md index e8a6349a0..bb2c9d012 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,29 +1,4 @@ -== 2.0.1 (August 20, 2012) +== 0.1 (September 5, 2012) +* Modified Commenting Structure from original +* Condensed some rules for easier reference -* 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/README.md b/README.md index 82f9f5d63..b1dfd53ab 100644 --- a/README.md +++ b/README.md @@ -1,42 +1,27 @@ -# normalize.css v2.0.1 +# A starter boilerplate for new front-end projects -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. - -[Check out the demo](http://necolas.github.com/normalize.css/2.0.1/test.html) - -## What does it do? - -* 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. +I'm using this css file as a copy-paste for an initial _base.scss +file. These rules are to be used as a base, and modified to fit +a project's needs. -## How to use it +# Based upon normalize.css v2.0.1 +This is based up on normalize.css, but is meant for SASS use. +I have modified the commenting structure to be more succinct by +incorporating '//' comments. This also allows me to turn rules on and off +easily with '/*' comments. -Normalize.css is intended to be used as an alternative to CSS resets. +Now, I know that '//' comments aren't allowed in css files. That's ok +with me. I'm just using them to start a scss file anyway. But why not rename +the file to be a .scss file, you ask? Well, if @necolas updates his +normalize.css, I'd like to merge his changes. If I rename the file, +this will make things tougher to do with git. -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. +# About 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). +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. -## Acknowledgements +[Check out normalize](http://necolas.github.com/normalize.css) -Normalize.css is a project by [Nicolas Gallagher](http://github.com/necolas) -and [Jonathan Neal](http://github.com/jonathantneal). diff --git a/_base.scss b/_base.scss new file mode 100644 index 000000000..79e244f35 --- /dev/null +++ b/_base.scss @@ -0,0 +1,247 @@ +@import "_vars"; + +/* ========================================================================== + Based upon normalize.css + normalize.css v2.0.1 | MIT License | git.io/normalize + ========================================================================== */ + +/*TABLE OF CONTENTS + Backward ............General Backward Compatibility + Base.................Basic Elements + Links................Links + Headers..............H1 through H6, plus p's + TextElements.........Inline items like strong, em, sup, sub, etc + Tables...............Tables + Figures..............Figures + Forms................Forms and all their insanities + Code.................code and pre tags + Embedded.............Embedded content, like images, video, etc +*/ + +// #Backward //////////////////////////////////////////////////////////////////////////////// +// Corrects `block` display not defined in IE 8/9. +article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary {display: block; } + +// Corrects `inline-block` display not defined in IE 8/9. +audio, canvas, video {display: inline-block; } + +// 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. +[hidden] {display: none; } + + +// #Base //////////////////////////////////////////////////////////////////////////////// + +//Box Sizing +*, *:after, *:before { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +// 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 // +} + +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. +a:active, a:hover {outline: 0; } + + +// #Headers //////////////////////////////////////////////////////////////////////////////// + +h1 { + font-size: 2em; +} + + +// #TextElements ////////////////////////////////////////////////////////////////////////// + +// 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. +b, strong { + font-weight: bold; +} + +// Addresses styling not present in Safari 5 and Chrome. +/* dfn { + font-style: italic; +}/* */ + +// Addresses styling not present in IE 8/9. +/* mark { + background: #ff0; + color: #000; +}/* */ + +// Sets consistent quote types. +/*q { + quotes: "\201C" "\201D" "\2018" "\2019"; +}/* */ + +// Addresses inconsistent and variable font size in all browsers. +/*small { + font-size: 80%; +}/* */ + +// Prevents `sub` and `sup` affecting `line-height` in all browsers. +/*sub, sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +}/* */ + +/*sup { + top: -0.5em; +}/* */ + +/*sub { + bottom: -0.25em; +}/* */ + +// #Tables //////////////////////////////////////////////////////////////////////////////// + +// Remove most spacing between table cells. +/* table { + border-collapse: collapse; + border-spacing: 0; +}/* */ + +// #Figures //////////////////////////////////////////////////////////////////////////////// + +// Addresses margin not present in IE 8/9 and Safari 5. +/*figure { + margin: 0; +}/* */ + +// #Code ////////////////////////////////////////////////////////////////////////////////// +// Corrects font family set oddly in Safari 5 and Chrome. +/*code, kbd, pre, samp { + font-family: monospace, serif; + font-size: 1em; +}/* */ + + // Improves readability of pre-formatted text in all browsers. +/*pre { + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; +}/* */ + + +// #Embedded content //////////////////////////////////////////////////////////////////////// + +// Removes border when inside `a` element in IE 8/9. +img { + border: 0; +} + +// Corrects overflow displayed oddly in IE 9. +/*svg:not(:root) { + overflow: hidden; +}/* */ + + +// #Forms //////////////////////////////////////////////////////////////////////////////// + +// 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 IE 8/9. +// 2. Remove padding so people aren't caught out if they zero out fieldsets. +/* legend { + 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 +/*button, input, select, textarea { + 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. +/*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. +/*button, +html input[type="button"], //(1) +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; //(2) + cursor: pointer; //(3) +}/* */ + +// 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. +/*input[type="checkbox"], +input[type="radio"] { + 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). +/* 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 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+. +/*button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +}/* */ + +// 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 */ +//}/* */ + diff --git a/component.json b/component.json index 80fae5cb5..e5c07ef1c 100644 --- a/component.json +++ b/component.json @@ -1,11 +1,10 @@ { - "name": "normalize-css", - "version": "2.0.1", - "author": "Nicolas Gallagher", - "homepage": "http://necolas.github.com/normalize.css/", + "name": "normalize-base", + "version": "0.1", + "author": "Matthew Larson", "repository": { "type": "git", - "url": "https://github.com/necolas/normalize.css.git" + "url": "https://github.com/matthewmatician/normalize.css.git" }, "licenses": [{ "type": "MIT", diff --git a/normalize.css b/normalize.css deleted file mode 100644 index 57b5d2679..000000000 --- a/normalize.css +++ /dev/null @@ -1,375 +0,0 @@ -/*! normalize.css v2.0.1 | MIT License | git.io/normalize */ - -/* ========================================================================== - HTML5 display definitions - ========================================================================== */ - -/* - * Corrects `block` display not defined in IE 8/9. - */ - -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -nav, -section, -summary { - display: block; -} - -/* - * Corrects `inline-block` display not defined in IE 8/9. - */ - -audio, -canvas, -video { - display: inline-block; -} - -/* - * 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. - */ - -[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 */ -} - -/* - * Removes default margin. - */ - -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. - */ - -a:active, -a:hover { - outline: 0; -} - -/* ========================================================================== - Typography - ========================================================================== */ - -/* - * 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. - */ - -abbr[title] { - border-bottom: 1px dotted; -} - -/* - * 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. - */ - -dfn { - font-style: italic; -} - -/* - * Addresses styling not present in IE 8/9. - */ - -mark { - background: #ff0; - color: #000; -} - - -/* - * Corrects font family set oddly in Safari 5 and Chrome. - */ - -code, -kbd, -pre, -samp { - font-family: monospace, serif; - font-size: 1em; -} - -/* - * Improves readability of pre-formatted text in all browsers. - */ - -pre { - white-space: pre; - white-space: pre-wrap; - word-wrap: break-word; -} - -/* - * Sets consistent quote types. - */ - -q { - quotes: "\201C" "\201D" "\2018" "\2019"; -} - -/* - * Addresses inconsistent and variable font size in all browsers. - */ - -small { - font-size: 80%; -} - -/* - * Prevents `sub` and `sup` affecting `line-height` in all browsers. - */ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sup { - top: -0.5em; -} - -sub { - bottom: -0.25em; -} - -/* ========================================================================== - Embedded content - ========================================================================== */ - -/* - * Removes border when inside `a` element in IE 8/9. - */ - -img { - border: 0; -} - -/* - * Corrects overflow displayed oddly in IE 9. - */ - -svg:not(:root) { - overflow: hidden; -} - -/* ========================================================================== - Figures - ========================================================================== */ - -/* - * Addresses margin not present in IE 8/9 and Safari 5. - */ - -figure { - margin: 0; -} - -/* ========================================================================== - Forms - ========================================================================== */ - -/* - * 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 IE 8/9. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. - */ - -legend { - 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 - */ - -button, -input, -select, -textarea { - 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. - */ - -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. - */ - -button, -html input[type="button"], /* 1 */ -input[type="reset"], -input[type="submit"] { - -webkit-appearance: button; /* 2 */ - cursor: pointer; /* 3 */ -} - -/* - * 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. - */ - -input[type="checkbox"], -input[type="radio"] { - 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). - */ - -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 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+. - */ - -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; -} - -/* - * 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 */ -} - -/* ========================================================================== - Tables - ========================================================================== */ - -/* - * Remove most spacing between table cells. - */ - -table { - border-collapse: collapse; - border-spacing: 0; -} 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.

-

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

- -
- -

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

- -
    -
  1. list item 1
  2. -
  3. list item 1 -
      -
    1. list item 2
    2. -
    3. list item 2 -
        -
      1. list item 3
      2. -
      3. list item 3
      4. -
      -
    4. -
    5. list item 2
    6. -
    7. list item 2
    8. -
    -
  4. -
  5. list item 1
  6. -
  7. list item 1
  8. -
- -

unordered list

- - - -

description list

- -
-
Description name
-
Description value
-
Description name
-
Description value
-
Description value
-
Description name
-
Description name
-
Description value
-
- -

figure

- -
- -
Figcaption content
-
- -

Tabular data

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Jimi Hendrix - albums
AlbumYearPrice
AlbumYearPrice
Are You Experienced1967$10.00
Axis: Bold as Love1967$12.00
Electric Ladyland1968$10.00
Band of Gypsys1970$12.00
- -

Forms

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

-

-

-

-

-

-

- -

-

-

-

- -

-

-
- -
- Inputs as siblings of labels -

-

-

-

-

-

-

-

- -

-

-

-

- -

-

-
- -
- Clickable inputs and buttons -

-

-

-

-

- - -

-

-

-

-
- -
- box-sizing tests -
-
-
-
-
- -
-
-
-
-
-
-
-
- -
-
- -
-
- -
-
-
-
- -
-
-
-
-
- - -