Eric Meyers css reset v2.0

twalpole · Feb 21, 2011 · 802bc71 · 802bc71
1 parent f1587b6
commit 802bc71
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 28 deletions.
diff --git a/doc-src/content/CHANGELOG.markdown b/doc-src/content/CHANGELOG.markdown
@@ -26,6 +26,7 @@ The Documentation for the [latest preview release](http://beta.compass-style.org
   custom actions when they occur. For instance, you might want to notify
   Growl when a stylesheet compilation error occurs.
 * A new mixin `reset-float` is available in the [float module](/reference/compass/utilities/general/float/#mixin-reset-float) that makes it easier to reset the floats introduced from that module.
+* Reset mixins have been updated based on [Eric Meyer's CSS Reset v2.0](http://meyerweb.com/eric/tools/css/reset/index.html). HTML5 support is included by default.
 
 0.11.beta.2 (02/01/2011)
 ------------------------

diff --git a/frameworks/compass/stylesheets/compass/reset/_utilities.scss b/frameworks/compass/stylesheets/compass/reset/_utilities.scss
@@ -1,17 +1,21 @@
-// Based on [Eric Meyer's reset](http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/)
+// Based on [Eric Meyer's reset 2.0](http://meyerweb.com/eric/tools/css/reset/index.html)
 // Global reset rules.
 // For more specific resets, use the reset mixins provided below
-//
-// *Please Note*: tables still need `cellspacing="0"` in the markup.
+
 @mixin global-reset {
   html, body, div, span, applet, object, iframe,
   h1, h2, h3, h4, h5, h6, p, blockquote, pre,
   a, abbr, acronym, address, big, cite, code,
-  del, dfn, em, font, img, ins, kbd, q, s, samp,
+  del, dfn, em, img, ins, kbd, q, s, samp,
   small, strike, strong, sub, sup, tt, var,
+  b, u, i, center,
   dl, dt, dd, ol, ul, li,
   fieldset, form, label, legend,
-  table, caption, tbody, tfoot, thead, tr, th, td {
+  table, caption, tbody, tfoot, thead, tr, th, td,
+  article, aside, canvas, details, embed, 
+  figure, figcaption, footer, header, hgroup, 
+  menu, nav, output, ruby, section, summary,
+  time, mark, audio, video {
     @include reset-box-model;
     @include reset-font; }
   body {
@@ -25,17 +29,26 @@
   q, blockquote {
     @include reset-quotation; }
   a img {
-    @include reset-image-anchor-border; } }
+    @include reset-image-anchor-border; }
+  @include reset-html5; }
 
 // Reset all elements within some selector scope. To reset the selector itself,
 // mixin the appropriate reset mixin for that element type as well. This could be
 // useful if you want to style a part of your page in a dramatically different way.
-//
-// *Please Note*: tables still need `cellspacing="0"` in the markup.
 @mixin nested-reset {
-  div, span, object, iframe, h1, h2, h3, h4, h5, h6, p,
-  pre, a, abbr, acronym, address, code, del, dfn, em, img,
-  dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, tr {
+  div, span, applet, object, iframe,
+  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+  a, abbr, acronym, address, big, cite, code,
+  del, dfn, em, img, ins, kbd, q, s, samp,
+  small, strike, strong, sub, sup, tt, var,
+  b, u, i, center,
+  dl, dt, dd, ol, ul, li,
+  fieldset, form, label, legend,
+  table, caption, tbody, tfoot, thead, tr, th, td,
+  article, aside, canvas, details, embed, 
+  figure, figcaption, footer, header, hgroup, 
+  menu, nav, output, ruby, section, summary,
+  time, mark, audio, video {
     @include reset-box-model;
     @include reset-font; }
   table {
@@ -51,16 +64,12 @@
 @mixin reset-box-model {
   margin: 0;
   padding: 0;
-  border: 0;
-  outline: 0; }
+  border: 0; }
 
 // Reset the font and vertical alignment.
 @mixin reset-font {
-  font: {
-    weight: inherit;
-    style: inherit;
-    size: 100%;
-    family: inherit; };
+  font-size: 100%;
+  font: inherit;
   vertical-align: baseline; }
 
 // Resets the outline when focus.
@@ -70,19 +79,16 @@
 
 // Reset a body element.
 @mixin reset-body {
-  line-height: 1;
-  color: black;
-  background: white; }
+  line-height: 1; }
 
 // Reset the list style of an element.
 @mixin reset-list-style {
   list-style: none; }
 
 // Reset a table
 @mixin reset-table {
-  border-collapse: separate;
-  border-spacing: 0;
-  vertical-align: middle; }
+  border-collapse: collapse;
+  border-spacing: 0; }
 
 // Reset a table cell (`th`, `td`)
 @mixin reset-table-cell {
@@ -92,9 +98,10 @@
 
 // Reset a quotation (`q`, `blockquote`)
 @mixin reset-quotation {
-  quotes: "" "";
+  quotes: none;
   &:before, &:after {
-    content: ""; } }
+    content: ""; 
+    content: none; } }
 
 // Resets the border.
 @mixin reset-image-anchor-border {
@@ -105,8 +112,8 @@
 // so they are rendered correctly in browsers that don't recognize them
 // and reset in browsers that have default styles for them.
 @mixin reset-html5 {
-  article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
-    @include reset-box-model;
+  article, aside, details, figcaption, figure, 
+  footer, header, hgroup, menu, nav, section {
     display: block; } }
 
 // Resets the display of inline and block elements to their default display