From af645fa9910d31f6b1b6f3e5c2f4fd725d418a59 Mon Sep 17 00:00:00 2001 From: Chris Eppstein Date: Sun, 18 Mar 2012 01:43:11 -0700 Subject: [PATCH] Use placeholder selectors to make the blueprint reset module much cleaner. --- .../blueprint/reset/_utilities.scss | 79 +++++++++---------- .../css/single-imports/reset-utilities.css | 37 +-------- .../blueprint/css/single-imports/reset.css | 8 +- 3 files changed, 43 insertions(+), 81 deletions(-) diff --git a/frameworks/blueprint/stylesheets/blueprint/reset/_utilities.scss b/frameworks/blueprint/stylesheets/blueprint/reset/_utilities.scss index 2754b476..8fd7db83 100644 --- a/frameworks/blueprint/stylesheets/blueprint/reset/_utilities.scss +++ b/frameworks/blueprint/stylesheets/blueprint/reset/_utilities.scss @@ -1,32 +1,31 @@ // Global reset rules. // For more specific resets, use the reset mixins provided below @mixin blueprint-global-reset { - html { @include blueprint-reset-box-model; } - body { @extend .bp-reset-element; } - @include blueprint-nested-reset; } + html { @extend %bp-reset-box-model; } + body { @extend %bp-reset-element; } + @include 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. @mixin blueprint-nested-reset { - .bp-reset-element, div, span, object, iframe, 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 { @include blueprint-basic-reset; } - #{headers(all)} { @include blueprint-basic-reset(bp-reset-element); } - #{elements-of-type(html5-block)} { @include blueprint-reset-html5-element(bp-reset-element); } - blockquote, q { @include blueprint-reset-quotation(bp-reset-element); } - th, td, caption { @include blueprint-reset-table-cell(bp-reset-element); } - table { @include blueprint-reset-table(bp-reset-element); } - a img { border: none; } + caption, tbody, tfoot, thead, tr { @extend %bp-reset-element; } + #{headers(all)} { @extend %bp-reset-element; } + #{elements-of-type(html5-block)} { @extend %bp-reset-html5-element; } + blockquote, q { @extend %bp-reset-quotation; } + th, td, caption { @extend %bp-reset-table-cell; } + table { @extend %bp-reset-table; } + a img { @extend %bp-reset-linked-image; } } -@mixin blueprint-reset-html5-element($reset-base-class: false) { - @if $reset-base-class { @extend .#{$reset-base-class}; } - @else { @include blueprint-reset; } +@mixin blueprint-reset-html5-element { + @extend %bp-reset-element; display: block; } @@ -36,18 +35,9 @@ border: 0; } -@mixin blueprint-reset { - @warn "The blueprint-reset mixin is deprecated. Please use blueprint-basic-reset instead."; - @include blueprint-basic-reset; -} - -@mixin blueprint-basic-reset($reset-base-class: false) { - @if $reset-base-class { - @extend .#{$reset-base-class}; - } @else { - @include blueprint-reset-box-model; - @include blueprint-reset-typography; - } +@mixin blueprint-basic-reset { + @include blueprint-reset-box-model; + @include blueprint-reset-typography; } @mixin blueprint-reset-typography { @@ -55,29 +45,36 @@ weight: inherit; style: inherit; size: 100%; - family: inherit; }; + family: inherit; + } vertical-align: baseline; } -@mixin blueprint-reset-quotation($reset-base-class: false) { - @if $reset-base-class { @extend .#{$reset-base-class}; } - @else { @include blueprint-reset; } +@mixin blueprint-reset-quotation { + @extend %bp-reset-element; quotes: "" ""; - &:before, - &:after { - content: ""; } } + &:before, &:after { content: ""; } +} -@mixin blueprint-reset-table-cell($reset-base-class: false) { - @if $reset-base-class { @extend .#{$reset-base-class}; } - @else { @include blueprint-reset; } +@mixin blueprint-reset-table-cell { + @extend %bp-reset-element; float: none !important; text-align: left; font-weight: normal; - vertical-align: middle; } + vertical-align: middle; +} -@mixin blueprint-reset-table($reset-base-class: false) { - @if $reset-base-class { @extend .#{$reset-base-class}; } - @else { @include blueprint-reset; } +@mixin blueprint-reset-table { + @extend %bp-reset-element; border-collapse: separate; border-spacing: 0; - vertical-align: middle; } + vertical-align: middle; +} + +%bp-reset-box-model { @include blueprint-reset-box-model; } +%bp-reset-element { @include blueprint-basic-reset; } +%bp-reset-html5-element { @include blueprint-reset-html5-element; } +%bp-reset-quotation { @include blueprint-reset-quotation; } +%bp-reset-table-cell { @include blueprint-reset-table-cell; } +%bp-reset-table { @include blueprint-reset-table; } +%bp-reset-linked-image { border: none; } diff --git a/test/fixtures/stylesheets/blueprint/css/single-imports/reset-utilities.css b/test/fixtures/stylesheets/blueprint/css/single-imports/reset-utilities.css index 5ddd1bb2..a2e76e38 100644 --- a/test/fixtures/stylesheets/blueprint/css/single-imports/reset-utilities.css +++ b/test/fixtures/stylesheets/blueprint/css/single-imports/reset-utilities.css @@ -3,7 +3,7 @@ html { padding: 0; border: 0; } -.bp-reset-element, body, h1, h2, h3, h4, h5, h6, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, blockquote, q, th, td, caption, table, body.testing h1, body.testing h2, body.testing h3, body.testing h4, body.testing h5, body.testing h6, body.testing article, body.testing aside, body.testing details, body.testing figcaption, body.testing figure, body.testing footer, body.testing header, body.testing hgroup, body.testing menu, body.testing nav, body.testing section, body.testing summary, body.testing blockquote, body.testing q, body.testing th, body.testing td, body.testing caption, body.testing table, div, span, object, iframe, 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 { +article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, blockquote, q, th, td, caption, table, body, div, span, object, iframe, p, pre, a, abbr, acronym, address, code, del, dfn, em, img, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, tbody, tfoot, thead, tr, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; border: 0; @@ -18,7 +18,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, blockquote, q { quotes: "" ""; } - blockquote:before, blockquote:after, q:before, q:after { + blockquote:before, q:before, blockquote:after, q:after { content: ""; } th, td, caption { @@ -34,36 +34,3 @@ table { a img { border: none; } - -body.testing .bp-reset-element, body.testing body, body.testing h1, body.testing h2, body.testing h3, body.testing h4, body.testing h5, body.testing h6, body.testing article, body.testing aside, body.testing details, body.testing figcaption, body.testing figure, body.testing footer, body.testing header, body.testing hgroup, body.testing menu, body.testing nav, body.testing section, body.testing summary, body.testing blockquote, body.testing q, body.testing th, body.testing td, body.testing caption, body.testing table, body.testing h1, body.testing h2, body.testing h3, body.testing h4, body.testing h5, body.testing h6, body.testing article, body.testing aside, body.testing details, body.testing figcaption, body.testing figure, body.testing footer, body.testing header, body.testing hgroup, body.testing menu, body.testing nav, body.testing section, body.testing summary, body.testing blockquote, body.testing q, body.testing th, body.testing td, body.testing caption, body.testing table, -body.testing div, body.testing span, body.testing object, body.testing iframe, body.testing p, -body.testing pre, body.testing a, body.testing abbr, body.testing acronym, body.testing address, -body.testing code, body.testing del, body.testing dfn, body.testing em, body.testing img, -body.testing dl, body.testing dt, body.testing dd, body.testing ol, body.testing ul, body.testing li, body.testing fieldset, -body.testing form, body.testing label, body.testing legend, -body.testing caption, body.testing tbody, body.testing tfoot, body.testing thead, body.testing tr { - margin: 0; - padding: 0; - border: 0; - font-weight: inherit; - font-style: inherit; - font-size: 100%; - font-family: inherit; - vertical-align: baseline; } -body.testing article, body.testing aside, body.testing details, body.testing figcaption, body.testing figure, body.testing footer, body.testing header, body.testing hgroup, body.testing menu, body.testing nav, body.testing section, body.testing summary { - display: block; } -body.testing blockquote, body.testing q { - quotes: "" ""; } - body.testing blockquote:before, body.testing blockquote:after, body.testing q:before, body.testing q:after { - content: ""; } -body.testing th, body.testing td, body.testing caption { - float: none !important; - text-align: left; - font-weight: normal; - vertical-align: middle; } -body.testing table { - border-collapse: separate; - border-spacing: 0; - vertical-align: middle; } -body.testing a img { - border: none; } diff --git a/test/fixtures/stylesheets/blueprint/css/single-imports/reset.css b/test/fixtures/stylesheets/blueprint/css/single-imports/reset.css index 4849fff3..06d6ebc8 100644 --- a/test/fixtures/stylesheets/blueprint/css/single-imports/reset.css +++ b/test/fixtures/stylesheets/blueprint/css/single-imports/reset.css @@ -3,13 +3,11 @@ html { padding: 0; border: 0; } -.bp-reset-element, body, h1, h2, h3, h4, h5, h6, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, blockquote, q, th, td, caption, table, -div, span, object, iframe, p, +article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, blockquote, q, th, td, caption, table, body, div, span, object, iframe, 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 { +form, label, legend, tbody, tfoot, thead, tr, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; border: 0; @@ -24,7 +22,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, blockquote, q { quotes: "" ""; } - blockquote:before, blockquote:after, q:before, q:after { + blockquote:before, q:before, blockquote:after, q:after { content: ""; } th, td, caption {