Port of blueprint commit:

commit 50d160b713f119627c7beaebd35b751bc26c5c0a
Author: Joshua Clayton <jclayton@thoughtbot.com>
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.
This commit is contained in:
Chris Eppstein 2010-11-12 09:07:32 -08:00
parent a05e1ee7c0
commit 3f4d339432
7 changed files with 101 additions and 143 deletions

View File

@ -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 {

View File

@ -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; }

View File

@ -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; }

View File

@ -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; }

View File

@ -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; }

View File

@ -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; }

View File

@ -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; }