Fixed offsets for new grid

atomicpages · Mar 27, 2015 · 4cee5cb · 4cee5cb
1 parent 8b5368c
commit 4cee5cb
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 49 deletions.
diff --git 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
@@ -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%; }
 	}
 }