From 3f4d339432f6a4546f62a73911d140b83e5129bf Mon Sep 17 00:00:00 2001 From: Chris Eppstein Date: Fri, 12 Nov 2010 09:07:32 -0800 Subject: [PATCH] Port of blueprint commit: commit 50d160b713f119627c7beaebd35b751bc26c5c0a Author: Joshua Clayton Date: Sun Jan 10 10:37:08 2010 -0500 Support HTML5 This includes removing the div scope on grid classes (span-#), applying the reset to core HTML5 elements, and explicitly defining the rule 'display: block' for those elements. --- .../stylesheets/blueprint/_grid.scss | 8 +- .../blueprint/reset/_utilities.scss | 74 ++++++++++------ .../stylesheets/blueprint/css/screen.css | 8 +- .../blueprint/css/single-imports/grid.css | 8 +- .../css/single-imports/reset-utilities.css | 87 +++++-------------- .../blueprint/css/single-imports/reset.css | 51 +++-------- .../blueprint/css/single-imports/rtl.css | 8 +- 7 files changed, 101 insertions(+), 143 deletions(-) diff --git a/frameworks/blueprint/stylesheets/blueprint/_grid.scss b/frameworks/blueprint/stylesheets/blueprint/_grid.scss index 78f509e2..66b60202 100644 --- a/frameworks/blueprint/stylesheets/blueprint/_grid.scss +++ b/frameworks/blueprint/stylesheets/blueprint/_grid.scss @@ -45,16 +45,18 @@ $blueprint_container_size: $blueprint_grid_outer_width * $blueprint_grid_columns // A container should group all your columns .container { @include container; } - .column, #{enumerate("div.span", 1, $blueprint_grid_columns)} { + .column { @include column-base; } // The last column in a row needs this class (or mixin) or it will end up on the next row. - .last, div.last { + .last { @include last; } // Use these classes (or mixins) to set the width of a column. @for $n from 1 to $blueprint_grid_columns { .span-#{$n} { + @extend .column; @include span($n); } } - .span-#{$blueprint_grid_columns}, div.span-#{$blueprint_grid_columns} { + .span-#{$blueprint_grid_columns} { + @extend .column; @include span($blueprint_grid_columns); margin: 0; } input, textarea, select { diff --git a/frameworks/blueprint/stylesheets/blueprint/reset/_utilities.scss b/frameworks/blueprint/stylesheets/blueprint/reset/_utilities.scss index 620d68be..a1fcc487 100644 --- a/frameworks/blueprint/stylesheets/blueprint/reset/_utilities.scss +++ b/frameworks/blueprint/stylesheets/blueprint/reset/_utilities.scss @@ -1,58 +1,82 @@ // Global reset rules. // For more specific resets, use the reset mixins provided below @mixin blueprint-global-reset { - html, body { - @include blueprint-reset; } - html { - font-size: 100.01%; } + html { @include blueprint-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 { - 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 { - @include blueprint-reset; } - blockquote, q { - @include blueprint-reset-quotation; } - th, td, caption { - @include blueprint-reset-table-cell; } - table { - @include blueprint-reset-table; } - a img { - border: none; } } + .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)} { @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; } +} + +@mixin blueprint-reset-html5-element($reset-base-class: false) { + @if $reset-base-class { @extend .#{$reset-base-class}; } + @else { @include blueprint-reset; } + display: block; +} @mixin blueprint-reset-box-model { margin: 0; padding: 0; - border: 0; } + border: 0; +} @mixin blueprint-reset { - @include blueprint-reset-box-model; + @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-reset-typography { font: { weight: inherit; style: inherit; size: 100%; family: inherit; }; - vertical-align: baseline; } + vertical-align: baseline; +} -@mixin blueprint-reset-quotation { - @include blueprint-reset; +@mixin blueprint-reset-quotation($reset-base-class: false) { + @if $reset-base-class { @extend .#{$reset-base-class}; } + @else { @include blueprint-reset; } quotes: "" ""; &:before, &:after { content: ""; } } -@mixin blueprint-reset-table-cell { - @include blueprint-reset; +@mixin blueprint-reset-table-cell($reset-base-class: false) { + @if $reset-base-class { @extend .#{$reset-base-class}; } + @else { @include blueprint-reset; } text-align: left; font-weight: normal; vertical-align: middle; } -@mixin blueprint-reset-table { - @include blueprint-reset; +@mixin blueprint-reset-table($reset-base-class: false) { + @if $reset-base-class { @extend .#{$reset-base-class}; } + @else { @include blueprint-reset; } border-collapse: separate; border-spacing: 0; vertical-align: middle; } diff --git a/test/fixtures/stylesheets/blueprint/css/screen.css b/test/fixtures/stylesheets/blueprint/css/screen.css index e6722f0f..c092bd7c 100644 --- a/test/fixtures/stylesheets/blueprint/css/screen.css +++ b/test/fixtures/stylesheets/blueprint/css/screen.css @@ -234,14 +234,14 @@ caption { overflow: hidden; *zoom: 1; } -.column, div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6, div.span-7, div.span-8, div.span-9, div.span-10, div.span-11, div.span-12, div.span-13, div.span-14, div.span-15, div.span-16, div.span-17, div.span-18, div.span-19, div.span-20, div.span-21, div.span-22, div.span-23, div.span-24 { +.column, .span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12, .span-13, .span-14, .span-15, .span-16, .span-17, .span-18, .span-19, .span-20, .span-21, .span-22, .span-23, .span-24 { display: inline; float: left; margin-right: 10px; } - * html .column, * html div.span-1, * html div.span-2, * html div.span-3, * html div.span-4, * html div.span-5, * html div.span-6, * html div.span-7, * html div.span-8, * html div.span-9, * html div.span-10, * html div.span-11, * html div.span-12, * html div.span-13, * html div.span-14, * html div.span-15, * html div.span-16, * html div.span-17, * html div.span-18, * html div.span-19, * html div.span-20, * html div.span-21, * html div.span-22, * html div.span-23, * html div.span-24 { + * html .column, * html .span-1, * html .span-2, * html .span-3, * html .span-4, * html .span-5, * html .span-6, * html .span-7, * html .span-8, * html .span-9, * html .span-10, * html .span-11, * html .span-12, * html .span-13, * html .span-14, * html .span-15, * html .span-16, * html .span-17, * html .span-18, * html .span-19, * html .span-20, * html .span-21, * html .span-22, * html .span-23, * html .span-24 { overflow-x: hidden; } -.last, div.last { +.last { margin-right: 0; } .span-1 { @@ -313,7 +313,7 @@ caption { .span-23 { width: 910px; } -.span-24, div.span-24 { +.span-24 { width: 950px; margin: 0; } diff --git a/test/fixtures/stylesheets/blueprint/css/single-imports/grid.css b/test/fixtures/stylesheets/blueprint/css/single-imports/grid.css index e1fe71e7..aae16f28 100644 --- a/test/fixtures/stylesheets/blueprint/css/single-imports/grid.css +++ b/test/fixtures/stylesheets/blueprint/css/single-imports/grid.css @@ -4,14 +4,14 @@ overflow: hidden; *zoom: 1; } -.column, div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6, div.span-7, div.span-8, div.span-9, div.span-10, div.span-11, div.span-12, div.span-13, div.span-14, div.span-15, div.span-16, div.span-17, div.span-18, div.span-19, div.span-20, div.span-21, div.span-22, div.span-23, div.span-24 { +.column, .span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12, .span-13, .span-14, .span-15, .span-16, .span-17, .span-18, .span-19, .span-20, .span-21, .span-22, .span-23, .span-24 { display: inline; float: left; margin-right: 10px; } - * html .column, * html div.span-1, * html div.span-2, * html div.span-3, * html div.span-4, * html div.span-5, * html div.span-6, * html div.span-7, * html div.span-8, * html div.span-9, * html div.span-10, * html div.span-11, * html div.span-12, * html div.span-13, * html div.span-14, * html div.span-15, * html div.span-16, * html div.span-17, * html div.span-18, * html div.span-19, * html div.span-20, * html div.span-21, * html div.span-22, * html div.span-23, * html div.span-24 { + * html .column, * html .span-1, * html .span-2, * html .span-3, * html .span-4, * html .span-5, * html .span-6, * html .span-7, * html .span-8, * html .span-9, * html .span-10, * html .span-11, * html .span-12, * html .span-13, * html .span-14, * html .span-15, * html .span-16, * html .span-17, * html .span-18, * html .span-19, * html .span-20, * html .span-21, * html .span-22, * html .span-23, * html .span-24 { overflow-x: hidden; } -.last, div.last { +.last { margin-right: 0; } .span-1 { @@ -83,7 +83,7 @@ .span-23 { width: 910px; } -.span-24, div.span-24 { +.span-24 { width: 950px; margin: 0; } 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 3ac2be95..8eb49cd5 100644 --- a/test/fixtures/stylesheets/blueprint/css/single-imports/reset-utilities.css +++ b/test/fixtures/stylesheets/blueprint/css/single-imports/reset-utilities.css @@ -1,19 +1,15 @@ -html, body { - margin: 0; - padding: 0; - border: 0; - font-weight: inherit; - font-style: inherit; - font-size: 100%; - font-family: inherit; - vertical-align: baseline; } - html { - font-size: 100.01%; } + margin: 0; + padding: 0; + border: 0; } -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 { +.bp-reset-element, body, h1, h2, h3, h4, h5, h6, article, aside, dialog, figure, footer, header, hgroup, nav, section, 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 dialog, body.testing figure, body.testing footer, body.testing header, body.testing hgroup, body.testing nav, body.testing section, 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 { margin: 0; padding: 0; border: 0; @@ -23,41 +19,20 @@ dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, th font-family: inherit; vertical-align: baseline; } +article, aside, dialog, figure, footer, header, hgroup, nav, section { + display: block; } + 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, blockquote:after, q:before, q:after { content: ""; } 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; } 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; } @@ -65,9 +40,13 @@ table { a img { border: none; } -body.testing div, body.testing span, body.testing object, body.testing iframe, body.testing h1, body.testing h2, body.testing h3, body.testing h4, body.testing h5, body.testing h6, 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 { +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 dialog, body.testing figure, body.testing footer, body.testing header, body.testing hgroup, body.testing nav, body.testing section, 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 dialog, body.testing figure, body.testing footer, body.testing header, body.testing hgroup, body.testing nav, body.testing section, 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; @@ -76,39 +55,17 @@ body.testing dl, body.testing dt, body.testing dd, body.testing ol, body.testing font-size: 100%; font-family: inherit; vertical-align: baseline; } +body.testing article, body.testing aside, body.testing dialog, body.testing figure, body.testing footer, body.testing header, body.testing hgroup, body.testing nav, body.testing section { + display: block; } body.testing blockquote, body.testing q { - margin: 0; - padding: 0; - border: 0; - font-weight: inherit; - font-style: inherit; - font-size: 100%; - font-family: inherit; - vertical-align: baseline; 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 { - 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; } body.testing 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; } diff --git a/test/fixtures/stylesheets/blueprint/css/single-imports/reset.css b/test/fixtures/stylesheets/blueprint/css/single-imports/reset.css index 32c4a8fc..65162053 100644 --- a/test/fixtures/stylesheets/blueprint/css/single-imports/reset.css +++ b/test/fixtures/stylesheets/blueprint/css/single-imports/reset.css @@ -1,19 +1,15 @@ -html, body { - margin: 0; - padding: 0; - border: 0; - font-weight: inherit; - font-style: inherit; - font-size: 100%; - font-family: inherit; - vertical-align: baseline; } - html { - font-size: 100.01%; } + margin: 0; + padding: 0; + border: 0; } -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 { +.bp-reset-element, body, h1, h2, h3, h4, h5, h6, article, aside, dialog, figure, footer, header, hgroup, nav, section, blockquote, q, th, td, caption, 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 { margin: 0; padding: 0; border: 0; @@ -23,41 +19,20 @@ dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, th font-family: inherit; vertical-align: baseline; } +article, aside, dialog, figure, footer, header, hgroup, nav, section { + display: block; } + 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, blockquote:after, q:before, q:after { content: ""; } 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; } 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; } diff --git a/test/fixtures/stylesheets/blueprint/css/single-imports/rtl.css b/test/fixtures/stylesheets/blueprint/css/single-imports/rtl.css index 74c9af24..0ab75e0c 100644 --- a/test/fixtures/stylesheets/blueprint/css/single-imports/rtl.css +++ b/test/fixtures/stylesheets/blueprint/css/single-imports/rtl.css @@ -5,15 +5,15 @@ overflow: hidden; *zoom: 1; } -.column, div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6, div.span-7, div.span-8, div.span-9, div.span-10, div.span-11, div.span-12, div.span-13, div.span-14, div.span-15, div.span-16, div.span-17, div.span-18, div.span-19, div.span-20, div.span-21, div.span-22, div.span-23, div.span-24 { +.column, .span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12, .span-13, .span-14, .span-15, .span-16, .span-17, .span-18, .span-19, .span-20, .span-21, .span-22, .span-23, .span-24 { display: inline; float: right; margin-left: 10px; text-align: right; } - * html .column, * html div.span-1, * html div.span-2, * html div.span-3, * html div.span-4, * html div.span-5, * html div.span-6, * html div.span-7, * html div.span-8, * html div.span-9, * html div.span-10, * html div.span-11, * html div.span-12, * html div.span-13, * html div.span-14, * html div.span-15, * html div.span-16, * html div.span-17, * html div.span-18, * html div.span-19, * html div.span-20, * html div.span-21, * html div.span-22, * html div.span-23, * html div.span-24 { + * html .column, * html .span-1, * html .span-2, * html .span-3, * html .span-4, * html .span-5, * html .span-6, * html .span-7, * html .span-8, * html .span-9, * html .span-10, * html .span-11, * html .span-12, * html .span-13, * html .span-14, * html .span-15, * html .span-16, * html .span-17, * html .span-18, * html .span-19, * html .span-20, * html .span-21, * html .span-22, * html .span-23, * html .span-24 { overflow-x: hidden; } -.last, div.last { +.last { margin-left: 0; } .span-1 { @@ -85,7 +85,7 @@ .span-23 { width: 910px; } -.span-24, div.span-24 { +.span-24 { width: 950px; margin: 0; }