Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Fix relations between box-sizing and container width

  • Loading branch information...
commit 69dfe8cf1992a2221f6a5b718fa4fb6bf3867557 1 parent 39617f9
Eric M. Suzanne authored
44 sass/susy/_functions.scss
View
@@ -25,13 +25,41 @@ $browser-default-font-size-pt : 12pt;
@return ($columns * $column-width) + (if($columns >= 1, ceil($columns - 1), 0) * $gutter-width);
}
+// Return the grid width after adding or subtracting grid padding
+//
+// $width : the width of the grid without padding;
+// $operation : ( add | subtract ) if padding should be added or subtracted;
+@function handle-grid-padding(
+ $width,
+ $operation : subtract
+) {
+ $pad: $grid-padding*2;
+
+ @if comparable($width, $grid-padding) {
+ $width: if($operation == subtract, $width - $pad, $width + $pad);
+ } @else {
+ @warn "$grid-padding must be set in units comparable to the container width.";
+ }
+
+ @return $width;
+}
+
// Return the full outer width of a Container element.
//
// $columns : The number of columns in the Grid Layout.
@function container-outer-width(
$columns : $total-columns
) {
- @return columns-width($columns) + $grid-padding*2;
+ $width: columns-width();
+
+ @if $container-width {
+ $width: $container-width;
+ @if not $border-box-sizing { $width: handle-grid-padding($width, subtract); }
+ } @else {
+ @if $border-box-sizing { $width: handle-grid-padding($width, add); }
+ }
+
+ @return $width;
}
// Return the percentage width of a single column in a given 'context'.
@@ -41,7 +69,6 @@ $browser-default-font-size-pt : 12pt;
$context : $total-columns
) {
@return relative-width($column-width, $context);
-
}
// Return the percentage width of multiple 'columns' in a given 'context'.
@@ -259,22 +286,19 @@ $browser-default-font-size-pt : 12pt;
@function get-layout (
$min
) {
- $default-layout : $total-columns;
- $total-columns : 1;
- $layout-width : container-outer-width();
+ $columns : 1;
+ $layout-width : container-outer-width($columns);
$return : false;
$min : fix-ems($min);
@if comparable($min, $layout-width) {
@while $min >= $layout-width {
- $total-columns : $total-columns + 1;
- $layout-width : container-outer-width();
+ $columns : $columns + 1;
+ $layout-width : container-outer-width($columns);
}
- $return : $total-columns;
+ $return : $columns;
}
- $total-columns : $default-layout;
-
@return $return;
}
27 sass/susy/_grid.scss
View
@@ -18,15 +18,12 @@
// Container
// Set the width of a container
-@mixin set-container-width(){
- $width: if($container-width, $container-width, columns-width());
- @if $border-box-sizing {
- @if comparable($width, $grid-padding) {
- $width: $width + ($grid-padding*2);
- } @else {
- @warn "$grid-padding must be set in units comparable to column and gutter widths, in order for $border-box-sizing to work properly.";
- }
- }
+//
+// $columns : The number of columns in the Grid Layout.
+@mixin set-container-width(
+ $columns : $total-columns
+){
+ $width: container-outer-width($columns);
@if $container-style == 'static' {
width: $width;
@@ -35,17 +32,19 @@
width: if(unit($width) == '%', $width, auto);
} @else {
max-width: $width;
- @if $legacy-support-for-ie6 {
- _width: $width;
- }
+ @if $legacy-support-for-ie6 { _width: $width; }
}
}
}
// Set the outer grid-containing element(s).
-@mixin apply-container(){
+//
+// $columns : The number of columns in the container.
+@mixin apply-container(
+ $columns : $total-columns
+){
@include pie-clearfix;
- @include set-container-width;
+ @include set-container-width($columns);
margin: { left: auto; right: auto; }
padding: { left: $grid-padding; right: $grid-padding; }
}
2  test/css/grid.css
View
@@ -27,7 +27,7 @@
display: table;
clear: both;
}
-@media (min-width: 71em) {
+@media (min-width: 69em) {
.complex-container {
max-width: 69em;
}
2  test/css/media.css
View
@@ -13,7 +13,7 @@
clear: both;
}
-@media (min-width: 31em) {
+@media (min-width: 29em) {
.breakpoint .break6 {
max-width: 29em;
margin-left: auto;
Please sign in to comment.
Something went wrong with that request. Please try again.