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:
parent
a05e1ee7c0
commit
3f4d339432
@ -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 {
|
||||
|
@ -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; }
|
||||
|
@ -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; }
|
||||
|
||||
|
@ -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; }
|
||||
|
||||
|
@ -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; }
|
||||
|
@ -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; }
|
||||
|
@ -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; }
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user