Skip to content

Commit

Permalink
Deprecate the blueprint span mixin in favor of the blueprint span fun…
Browse files Browse the repository at this point in the history 
…ction.
  • Loading branch information
@chriseppstein
chriseppstein committed Jan 3, 2011
1 parent 2ad47f5 commit 1369545
Show file tree
Hide file tree
Showing 7 changed files with 92 additions and 83 deletions.
6 changes: 6 additions & 0 deletions doc-src/content/CHANGELOG.markdown
View file
Expand Up @@ -30,6 +30,12 @@ The Documentation for the [latest preview release](http://beta.compass-style.org
syntax across all browsers. It is now possible to configure which browsers support which
experimental functions outside of the compass release cycle. For details, see the
[cross browser helpers](/reference/compass/helpers/cross-browser/).
* [Blueprint] Added a new sass function called span($n) to the grid module which replaces
the now **deprecated span mixin**. If you are using this mixin, please replace it with:
`width: span($n)`.
* [Blueprint] Blueprint no longer adds `!important` to the widths of `input`, `textarea`,
and `select` form fields, so compass no longer defaults to using `!important` in those cases.
If you were relying on this behavior, you may need to adjust your stylesheets accordingly.


0.11.alpha.4 (12/08/2010)
Expand Down
6 changes: 3 additions & 3 deletions examples/blueprint_semantic/src/liquid.scss
View file
Expand Up @@ -20,11 +20,11 @@ body.blueprint {

body#index {
#page-header {
@include span(6); }
width: span(6); }
#files-header {
@include span(8); }
width: span(8); }
#description-header {
@include span(10); }
width: span(10); }
#info {
@include box;
ul {
Expand Down
6 changes: 3 additions & 3 deletions examples/blueprint_semantic/src/screen.scss
View file
Expand Up @@ -20,11 +20,11 @@ body.blueprint {

body#index {
#page-header {
@include span(6); }
width: span(6); }
#files-header {
@include span(8); }
width: span(8); }
#description-header {
@include span(10); }
width: span(10); }
#info {
@include box;
ul {
Expand Down
13 changes: 8 additions & 5 deletions frameworks/blueprint/stylesheets/blueprint/_grid.scss
View file
Expand Up @@ -54,15 +54,15 @@ $blueprint-container-size: $blueprint-grid-outer-width * $blueprint-grid-columns
@for $n from 1 to $blueprint-grid-columns {
.span-#{$n} {
@extend .column;
@include span($n); } }
width: span($n); } }
.span-#{$blueprint-grid-columns} {
@extend .column;
@include span($blueprint-grid-columns);
width: span($blueprint-grid-columns);
margin: 0; }
input, textarea, select {
@for $n from 1 through $blueprint-grid-columns {
&.span-#{$n} {
@include span($n, true); } } }
width: span($n); } } }
// Add these to a column to append empty cols.
@for $n from 1 to $blueprint-grid-columns {
.append-#{$n} {
Expand Down Expand Up @@ -106,9 +106,9 @@ $blueprint-container-size: $blueprint-grid-outer-width * $blueprint-grid-columns
// Use this mixins to set the width of n columns.
@mixin column($n, $last: false) {
@include column-base($last);
@include span($n); }
width: span($n); }

// Return the width of `$n` columns.
// Return the width in pixels of `$n` columns.
@function span($n) {
@return $blueprint-grid-width * $n + $blueprint-grid-margin * ($n - 1);
}
Expand All @@ -117,7 +117,10 @@ $blueprint-container-size: $blueprint-grid-outer-width * $blueprint-grid-columns
// Most of the time you'll want to use `+column` instead.
//
// This mixin is especially useful for aligning tables to the grid.
//
// @deprecated Please use the span function with the width property instead.
@mixin span($n, $important: false) {
@warn "The span mixin is deprecated. Please use the span function instead. E.g. width: span(#{$n})";
@if $important {
width: span($n) !important; }
@else {
Expand Down
48 changes: 24 additions & 24 deletions test/fixtures/stylesheets/blueprint/css/screen.css
View file
Expand Up @@ -315,53 +315,53 @@ caption {
margin: 0; }

input.span-1, textarea.span-1, select.span-1 {
width: 30px !important; }
width: 30px; }
input.span-2, textarea.span-2, select.span-2 {
width: 70px !important; }
width: 70px; }
input.span-3, textarea.span-3, select.span-3 {
width: 110px !important; }
width: 110px; }
input.span-4, textarea.span-4, select.span-4 {
width: 150px !important; }
width: 150px; }
input.span-5, textarea.span-5, select.span-5 {
width: 190px !important; }
width: 190px; }
input.span-6, textarea.span-6, select.span-6 {
width: 230px !important; }
width: 230px; }
input.span-7, textarea.span-7, select.span-7 {
width: 270px !important; }
width: 270px; }
input.span-8, textarea.span-8, select.span-8 {
width: 310px !important; }
width: 310px; }
input.span-9, textarea.span-9, select.span-9 {
width: 350px !important; }
width: 350px; }
input.span-10, textarea.span-10, select.span-10 {
width: 390px !important; }
width: 390px; }
input.span-11, textarea.span-11, select.span-11 {
width: 430px !important; }
width: 430px; }
input.span-12, textarea.span-12, select.span-12 {
width: 470px !important; }
width: 470px; }
input.span-13, textarea.span-13, select.span-13 {
width: 510px !important; }
width: 510px; }
input.span-14, textarea.span-14, select.span-14 {
width: 550px !important; }
width: 550px; }
input.span-15, textarea.span-15, select.span-15 {
width: 590px !important; }
width: 590px; }
input.span-16, textarea.span-16, select.span-16 {
width: 630px !important; }
width: 630px; }
input.span-17, textarea.span-17, select.span-17 {
width: 670px !important; }
width: 670px; }
input.span-18, textarea.span-18, select.span-18 {
width: 710px !important; }
width: 710px; }
input.span-19, textarea.span-19, select.span-19 {
width: 750px !important; }
width: 750px; }
input.span-20, textarea.span-20, select.span-20 {
width: 790px !important; }
width: 790px; }
input.span-21, textarea.span-21, select.span-21 {
width: 830px !important; }
width: 830px; }
input.span-22, textarea.span-22, select.span-22 {
width: 870px !important; }
width: 870px; }
input.span-23, textarea.span-23, select.span-23 {
width: 910px !important; }
width: 910px; }
input.span-24, textarea.span-24, select.span-24 {
width: 950px !important; }
width: 950px; }

.append-1 {
padding-right: 40px; }
Expand Down
48 changes: 24 additions & 24 deletions test/fixtures/stylesheets/blueprint/css/single-imports/grid.css
View file
Expand Up @@ -88,53 +88,53 @@
margin: 0; }

input.span-1, textarea.span-1, select.span-1 {
width: 30px !important; }
width: 30px; }
input.span-2, textarea.span-2, select.span-2 {
width: 70px !important; }
width: 70px; }
input.span-3, textarea.span-3, select.span-3 {
width: 110px !important; }
width: 110px; }
input.span-4, textarea.span-4, select.span-4 {
width: 150px !important; }
width: 150px; }
input.span-5, textarea.span-5, select.span-5 {
width: 190px !important; }
width: 190px; }
input.span-6, textarea.span-6, select.span-6 {
width: 230px !important; }
width: 230px; }
input.span-7, textarea.span-7, select.span-7 {
width: 270px !important; }
width: 270px; }
input.span-8, textarea.span-8, select.span-8 {
width: 310px !important; }
width: 310px; }
input.span-9, textarea.span-9, select.span-9 {
width: 350px !important; }
width: 350px; }
input.span-10, textarea.span-10, select.span-10 {
width: 390px !important; }
width: 390px; }
input.span-11, textarea.span-11, select.span-11 {
width: 430px !important; }
width: 430px; }
input.span-12, textarea.span-12, select.span-12 {
width: 470px !important; }
width: 470px; }
input.span-13, textarea.span-13, select.span-13 {
width: 510px !important; }
width: 510px; }
input.span-14, textarea.span-14, select.span-14 {
width: 550px !important; }
width: 550px; }
input.span-15, textarea.span-15, select.span-15 {
width: 590px !important; }
width: 590px; }
input.span-16, textarea.span-16, select.span-16 {
width: 630px !important; }
width: 630px; }
input.span-17, textarea.span-17, select.span-17 {
width: 670px !important; }
width: 670px; }
input.span-18, textarea.span-18, select.span-18 {
width: 710px !important; }
width: 710px; }
input.span-19, textarea.span-19, select.span-19 {
width: 750px !important; }
width: 750px; }
input.span-20, textarea.span-20, select.span-20 {
width: 790px !important; }
width: 790px; }
input.span-21, textarea.span-21, select.span-21 {
width: 830px !important; }
width: 830px; }
input.span-22, textarea.span-22, select.span-22 {
width: 870px !important; }
width: 870px; }
input.span-23, textarea.span-23, select.span-23 {
width: 910px !important; }
width: 910px; }
input.span-24, textarea.span-24, select.span-24 {
width: 950px !important; }
width: 950px; }

.append-1 {
padding-right: 40px; }
Expand Down
48 changes: 24 additions & 24 deletions test/fixtures/stylesheets/blueprint/css/single-imports/rtl.css
View file
Expand Up @@ -90,53 +90,53 @@
margin: 0; }

input.span-1, textarea.span-1, select.span-1 {
width: 30px !important; }
width: 30px; }
input.span-2, textarea.span-2, select.span-2 {
width: 70px !important; }
width: 70px; }
input.span-3, textarea.span-3, select.span-3 {
width: 110px !important; }
width: 110px; }
input.span-4, textarea.span-4, select.span-4 {
width: 150px !important; }
width: 150px; }
input.span-5, textarea.span-5, select.span-5 {
width: 190px !important; }
width: 190px; }
input.span-6, textarea.span-6, select.span-6 {
width: 230px !important; }
width: 230px; }
input.span-7, textarea.span-7, select.span-7 {
width: 270px !important; }
width: 270px; }
input.span-8, textarea.span-8, select.span-8 {
width: 310px !important; }
width: 310px; }
input.span-9, textarea.span-9, select.span-9 {
width: 350px !important; }
width: 350px; }
input.span-10, textarea.span-10, select.span-10 {
width: 390px !important; }
width: 390px; }
input.span-11, textarea.span-11, select.span-11 {
width: 430px !important; }
width: 430px; }
input.span-12, textarea.span-12, select.span-12 {
width: 470px !important; }
width: 470px; }
input.span-13, textarea.span-13, select.span-13 {
width: 510px !important; }
width: 510px; }
input.span-14, textarea.span-14, select.span-14 {
width: 550px !important; }
width: 550px; }
input.span-15, textarea.span-15, select.span-15 {
width: 590px !important; }
width: 590px; }
input.span-16, textarea.span-16, select.span-16 {
width: 630px !important; }
width: 630px; }
input.span-17, textarea.span-17, select.span-17 {
width: 670px !important; }
width: 670px; }
input.span-18, textarea.span-18, select.span-18 {
width: 710px !important; }
width: 710px; }
input.span-19, textarea.span-19, select.span-19 {
width: 750px !important; }
width: 750px; }
input.span-20, textarea.span-20, select.span-20 {
width: 790px !important; }
width: 790px; }
input.span-21, textarea.span-21, select.span-21 {
width: 830px !important; }
width: 830px; }
input.span-22, textarea.span-22, select.span-22 {
width: 870px !important; }
width: 870px; }
input.span-23, textarea.span-23, select.span-23 {
width: 910px !important; }
width: 910px; }
input.span-24, textarea.span-24, select.span-24 {
width: 950px !important; }
width: 950px; }

.append-1 {
padding-left: 40px; }
Expand Down

0 comments on commit 1369545

Please sign in to comment.