diff --git a/examples/blueprint_semantic/src/liquid.sass b/examples/blueprint_semantic/src/liquid.sass index 63bd34d253..04e500b9ad 100644 --- a/examples/blueprint_semantic/src/liquid.sass +++ b/examples/blueprint_semantic/src/liquid.sass @@ -53,7 +53,7 @@ body#sample :margin-top 0 :padding-top 0 em.caps - +reset + +reset-font +caps #nested-1 +column(7) @@ -64,7 +64,7 @@ body#sample +column(7, true) h3 em - +reset + +reset-font +alt #parting-thought +alt \ No newline at end of file diff --git a/examples/blueprint_semantic/src/screen.sass b/examples/blueprint_semantic/src/screen.sass index 9b1a9c91a5..8868f64462 100644 --- a/examples/blueprint_semantic/src/screen.sass +++ b/examples/blueprint_semantic/src/screen.sass @@ -54,7 +54,7 @@ body#sample :margin-top 0 :padding-top 0 em.caps - +reset + +reset-font +caps #nested-1 +column(7) @@ -65,7 +65,7 @@ body#sample +column(7, true) h3 em - +reset + +reset-font +alt #parting-thought +alt \ No newline at end of file diff --git a/frameworks/blueprint/stylesheets/blueprint/_reset.sass b/frameworks/blueprint/stylesheets/blueprint/_reset.sass new file mode 100644 index 0000000000..2c9178f290 --- /dev/null +++ b/frameworks/blueprint/stylesheets/blueprint/_reset.sass @@ -0,0 +1,3 @@ +@import modules/reset.sass + ++blueprint-global-reset \ No newline at end of file diff --git a/frameworks/blueprint/stylesheets/blueprint/modules/_reset.sass b/frameworks/blueprint/stylesheets/blueprint/modules/_reset.sass new file mode 100644 index 0000000000..fff5f3f517 --- /dev/null +++ b/frameworks/blueprint/stylesheets/blueprint/modules/_reset.sass @@ -0,0 +1,56 @@ +// Global reset rules. +// For more specific resets, use the reset mixins provided below +=blueprint-global-reset + html, body + +blueprint-reset + +blueprint-nested-reset + +// 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. +=blueprint-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 + +blueprint-reset + blockquote, q + +blueprint-reset-quotation + th, td, caption + +blueprint-reset-table-cell + table + +blueprint-reset-table + a img + :border none + +=blueprint-reset-box-model + :margin 0 + :padding 0 + :border 0 + +=blueprint-reset + +blueprint-reset-box-model + :font + :weight inherit + :style inherit + :size 100% + :family inherit + :vertical-align baseline + +=blueprint-reset-quotation + +blueprint-reset + :quotes "" "" + &:before, + &:after + :content "" + +=blueprint-reset-table-cell + +blueprint-reset + :text-align left + :font-weight normal + :vertical-align middle + +=blueprint-reset-table + +blueprint-reset + :border-collapse separate + :border-spacing 0 + :vertical-align middle diff --git a/frameworks/blueprint/templates/project/screen.sass b/frameworks/blueprint/templates/project/screen.sass index 0ca3063843..4bc29e9cb7 100644 --- a/frameworks/blueprint/templates/project/screen.sass +++ b/frameworks/blueprint/templates/project/screen.sass @@ -1,6 +1,6 @@ @import blueprint.sass @import blueprint/modules/scaffolding.sass -@import compass/reset.sass +@import blueprint/reset.sass +blueprint // Remove the scaffolding when you're ready to start doing visual design. diff --git a/frameworks/compass/stylesheets/compass/utilities/general/_reset.sass b/frameworks/compass/stylesheets/compass/utilities/general/_reset.sass index 5857a229a2..71baf8ae33 100644 --- a/frameworks/compass/stylesheets/compass/utilities/general/_reset.sass +++ b/frameworks/compass/stylesheets/compass/utilities/general/_reset.sass @@ -1,10 +1,42 @@ +// Based on Eric Meyer's reset http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ + // Global reset rules. // For more specific resets, use the reset mixins provided below =global-reset - html, body - +reset - +nested-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, + small, strike, strong, sub, sup, tt, var, + dl, dt, dd, ol, ul, li, + fieldset, form, label, legend, + table, caption, tbody, tfoot, thead, tr, th, td + +reset-box-model + +reset-font + + *:focus + +reset-focus + + body + +reset-body + + ol, ul + +reset-list-style + /* tables still need 'cellspacing="0"' in the markup + table + +reset-table + + caption, th, td + +reset-table-cell + + q, blockquote + +reset-quotation + + img a + +reset-image-anchor-border + + // 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. @@ -12,45 +44,62 @@ 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 - +reset - blockquote, q - +reset-quotation - th, td, caption - +reset-table-cell + +reset-box-model + +reset-font + + /* tables still need 'cellspacing="0"' in the markup table +reset-table - a img - :border none - + + caption, th, td + +reset-table-cell + + q, blockquote + +reset-quotation + + img a + +reset-image-anchor-border + +//Mixins partials =reset-box-model :margin 0 :padding 0 :border 0 - -=reset - +reset-box-model + :outline 0 + +=reset-font :font :weight inherit :style inherit :size 100% :family inherit :vertical-align baseline - -=reset-quotation - +reset - :quotes "" "" - &:before, - &:after - :content "" - -=reset-table-cell - +reset - :text-align left - :font-weight normal - :vertical-align middle - + +=reset-focus + :outline 0 + +=reset-body + :line-height 1em + :color = #000 + :background #fff + +=reset-list-style + :list-style none + =reset-table - +reset :border-collapse separate :border-spacing 0 :vertical-align middle + +=reset-table-cell + :text-align left + :font-weight normal + :vertical-align middle + +=reset-quotation + :quotes "" "" + &:before, &:after + :content "" + +=reset-image-anchor-border + :border none \ No newline at end of file diff --git a/frameworks/compass/templates/project/screen.sass b/frameworks/compass/templates/project/screen.sass index 7afbf738eb..aa865b1923 100644 --- a/frameworks/compass/templates/project/screen.sass +++ b/frameworks/compass/templates/project/screen.sass @@ -5,3 +5,9 @@ @import compass/reset.sass + +/* + The *:focus rule is reset and suppresses link outlining. + You _must_ remember to redefine your own outline, as it’s an important accessibility aid. E.g. + *:focus + outline: #ccc dotted medium diff --git a/test/fixtures/stylesheets/compass/css/reset.css b/test/fixtures/stylesheets/compass/css/reset.css index ec2ac31d73..054631bfff 100644 --- a/test/fixtures/stylesheets/compass/css/reset.css +++ b/test/fixtures/stylesheets/compass/css/reset.css @@ -1,64 +1,47 @@ -html, body { +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, +small, strike, strong, sub, sup, tt, var, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; + outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } -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 { - margin: 0; - padding: 0; - border: 0; - font-weight: inherit; - font-style: inherit; - font-size: 100%; - font-family: inherit; - vertical-align: baseline; } +*:focus { + outline: 0; } -blockquote, q { - margin: 0; - padding: 0; - border: 0; - font-weight: inherit; - font-style: inherit; - font-size: 100%; - font-family: inherit; - vertical-align: baseline; - quotes: "" ""; } - blockquote:before, q:before, - blockquote:after, q:after { - content: ""; } +body { + line-height: 1em; + color: black; + background: #fff; } -th, td, caption { - margin: 0; - padding: 0; - border: 0; - font-weight: inherit; - font-style: inherit; - font-size: 100%; - font-family: inherit; - vertical-align: baseline; - text-align: left; - font-weight: normal; - vertical-align: middle; } +ol, ul { + list-style: none; } +/* tables still need 'cellspacing="0"' in the markup */ table { - margin: 0; - padding: 0; - border: 0; - font-weight: inherit; - font-style: inherit; - font-size: 100%; - font-family: inherit; - vertical-align: baseline; border-collapse: separate; border-spacing: 0; vertical-align: middle; } -a img { +caption, th, td { + text-align: left; + font-weight: normal; + vertical-align: middle; } + +q, blockquote { + quotes: "" ""; } + q:before, q:after, blockquote:before, blockquote:after { + content: ""; } + +img a { border: none; }