diff --git a/README.md b/README.md index c99a1cc..42ab2f0 100644 --- a/README.md +++ b/README.md @@ -126,6 +126,7 @@ Changelog ###### Removals * `$colWidth` variable in the `@grid` mixin +* Removed some sloppy code in the `@_offsets` mixin ###### Fixes/Changes * Plural `column` and `columns` for `one-third`, `two-third`, and `full-width` @@ -135,6 +136,7 @@ Changelog * `$new` parameter to `@_fluidGrid` and `@_fixedGrid`. This makes some basic changes to the grid for the new Skeleton CSS format * Default fixed/fluid combo grid for `fresh` theme * Updated offsets for the new fixed/fluid grid combo +* Added new `offset-by-one-third`, `.offset-by-two-thirds`, and `.offset-by-one-half` selectors for new grid ### 2.0.0 diff --git a/skeleton/core/_dependencies.scss b/skeleton/core/_dependencies.scss index cee2e53..5262756 100644 --- a/skeleton/core/_dependencies.scss +++ b/skeleton/core/_dependencies.scss @@ -10,13 +10,13 @@ $gutter: percent($base-gutter-width) / 100; .container { @if($new == true) { width: 80%; } // FIXME: make this dynamic somehow - @if($new == false) { - .column, - .columns { - margin: { - left: $gutter / 2; - right: $gutter / 2; - } + } + @if($new == false) { + .column, + .columns { + margin: { + left: $gutter / 2; + right: $gutter / 2; } } } @@ -27,41 +27,39 @@ &:first-child { margin-left: 0; } } } - // Grid - .container { - @for $i from 1 through $colCount { - $subtractor: 2; - @if($new == true) { $subtractor: ($colCount - $i) / 3; } - @if($i == 1) { - .#{numToString($i)}.column, - .#{numToString($i)}.columns { width: percentage($i / $colCount) - $subtractor; } - } @else { - @if($i == $colCount and $new == true) { - .#{numToString($i)}.columns { - width: percentage($i / $colCount); - margin-left: 0; - } - } @else { - .#{numToString($i)}.columns { width: percentage($i / $colCount) - $subtractor; } + + @for $i from 1 through $colCount { + $subtractor: 2; + @if($new == true) { $subtractor: ($colCount - $i) / 3; } + @if($i == 1) { + .#{numToString($i)}.column, + .#{numToString($i)}.columns { width: percentage($i / $colCount) - $subtractor; } + } @else { + @if($i == $colCount and $new == true) { + .#{numToString($i)}.columns { + width: percentage($i / $colCount); + margin-left: 0; } + } @else { + .#{numToString($i)}.columns { width: percentage($i / $colCount) - $subtractor; } } } - // $top: percentage($colCount / $colCount) - 2; // not sure if this is needed -- test with < 2.5 - .one-third.column, - .one-third.columns { width: 98% * (1 / 3) - 2; } - .two-thirds.column, - .two-thirds.columns { width: 98% * (2 / 3) - 2; } - .one-half.column, - .one-half.columns { width: 48%; } // Leaving this static for now - .full-width.column, - .full-width.columns { - width: 100%; - margin-left: 0; - margin-right: 0; - } - // Offsets - @include _offset(true, $colCount, false); } + // $top: percentage($colCount / $colCount) - 2; // not sure if this is needed -- test with < 2.5 + .one-third.column, + .one-third.columns { width: 98% * (1 / 3) - 2; } + .two-thirds.column, + .two-thirds.columns { width: 98% * (2 / 3) - 2; } + .one-half.column, + .one-half.columns { width: 48%; } + .full-width.column, + .full-width.columns { + width: 100%; + margin-left: 0; + margin-right: 0; + } + + @include _offset(true, $colCount, false); } // _fixedGrid ( number $width, number $colWidth, number $gutterWidth, number $colCount ) @@ -96,18 +94,18 @@ } } -// _offset ( boolean $is-fluid, number $colCount, number $colWidth, [ $new = true ] ) +// _offset ( boolean $is-fluid, number $colCount, number $colWidth, [ $new = false ] ) @mixin _offset($is-fluid, $colCount, $colWidth, $new: $use-new-grid) { // TODO: finish this - @if ($is-fluid) { - $multiplier: 1; - @if($new == true) { $multiplier: (1/3); } - @for $i from 1 through ($colCount - 1 ) { - .offset-by-#{numToString($i)} { padding-left: percentage($i / $colCount) + $multiplier; } - } - } @else { - @for $i from 1 through ( $colCount - 1 ) { - .offset-by-#{numToString($i)} { padding-left: ($colWidth + 20) * $i; } - } + @for $i from 1 through ($colCount - 1 ) { + .offset-by-#{numToString($i)} { margin-left: if($is-fluid, percentage($i / $colCount) + ($i / 3), ($colWidth + 20) * $i); } + } + @if($is-fluid == true and $new == true) { + .offset-by-one-third.column, + .offset-by-one-third.columns { margin-left: 98% * (1 / 3) + 2; } + .offset-by-two-thirds.column, + .offset-by-two-thirds.columns { margin-left: 98% * (2 / 3) + 4; } + .offset-by-one-half.column, + .offset-by-one-half.columns { margin-left: 52%; } } }