2.0.0-b6

Cleaned up some functions and mixins. Also fixed the fluid grid for mobile devices so it's based on percentages rather than pixels. Media query breakpoints are still pixels. This change needs testing!
atomicpages · Jun 4, 2014 · 1085317 · 1085317
1 parent 5f0f4f0
commit 1085317
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 37 deletions.
diff --git a/core/_config.scss b/core/_config.scss
@@ -30,19 +30,20 @@ $link-hover: #000 !global; // default link color on :hover
 $link-decoration: underline !global; // default link decoration
 
 // GRID
-$is-fluid: false !global; // Change to true to enable the fluid grid
-$base-width: 960px !global;  // The overall width of the grid
+$base-width: 98% !global;  // The overall width of the grid (.container)
+$is-fluid: true !global; // Change to true to enable the fluid grid
 $base-col-width: 40px !global; // The width of each columns
 $base-gutter-width: 20px !global; // The space between columns
 $base-col-count: 16 !global; // The number of columns
 
-// ------ CHANGE MAY CAUSE UNDESIRED RESULTS
-$base-font-size: 10px !global; // the font size in the html element
-
-// media query dimensions
+// BREAKPOINTS
 $tablet-width: 768px !global; // the tablet width media query
 $mobile-portrait-width: 300px !global; // the mobile portrait media query
 $mobile-landscape-width: 420px !global; // the mobile landscape media query
+	$mobile-fluid-width: 100%;
+
+// ------ CHANGE MAY CAUSE UNDESIRED RESULTS
+$base-font-size: 10px !global; // the font size in the html element
 
 // ------ IMPORTS. DO NOT CHANGE
 @import "dependencies";

diff --git a/core/_dependencies.scss b/core/_dependencies.scss
@@ -19,14 +19,14 @@
 	// Grid
 	.container {
 		@for $i from 1 through $colCount {
-			@if ( $i == 1 ) {
+			@if($i == 1) {
 				.#{numToString($i)}.column,
 				.#{numToString($i)}.columns { width: percentage( $i / $colCount ) - 2; }
 			} @else {
 				.#{numToString($i)}.columns { width: percentage( $i / $colCount ) - 2; }
 			}
 		}
-		$top: percentage( 16 / $colCount ) - 2;
+		$top: percentage(16 / $colCount) - 2;
 		.one-third.columns { width: $top * (1 / 3) - 2; }
 		.two-thirds.columns { width: $top * (2 / 3) - 2; }
 		.full-width.columns {
@@ -53,7 +53,7 @@
 	/* The Grid */
 	.container {
 		@for $i from 1 through $colCount {
-			 @if ( $i == 1 ) {
+			 @if($i == 1) {
 				.#{numToString($i)}.column,
 				.#{numToString($i)}.columns { width: $colWidth; }
 			} @else {
@@ -73,7 +73,7 @@
 
 // _offset ( boolean $is-fluid, number $colCount, number $colWidth )
 @mixin _offset($is-fluid, $colCount, $colWidth) {
-	@if ( $is-fluid == true ) {
+	@if ($is-fluid) {
 		@for $i from 1 through ( $colCount - 1 ) {
 			.offset-by-#{numToString($i)} { padding-left: percentage( $i / $colCount ); }
 		}
@@ -84,26 +84,27 @@
 	}
 }
 
-// _mobileGrid ( number $width, number $colCount )
-@mixin _mobileGrid($width, $colCount) {
+// _mobileGrid ( number $width, number $colCount, boolean $isFluid )
+@mixin _mobileGrid($width, $colCount, $isFluid) {
+	$width: if($isFluid, $mobile-fluid-width, $width);
 	.container {
 		width: $width;
 		.column,
 		.columns {
 			// fixes https://github.com/atomicpages/skeleton-sass/issues/9
 			margin: {
-				left: 0;
-				right: 0;
+				left: if($isFluid, 2%, 0);
+				right: if($isFluid, 2%, 0);
 			};
 		}
 		@for $i from 1 through $colCount {
 			@if ($i == 1) {
 				.#{numToString($i)}.column { width: $width; }
 			}
 		}
-		@include _group($colCount, ".columns", "after") { width: $width; }
-		.one-third.column { width: $width; }
-		.two-thirds.column { width: $width; }
+		@include _group($colCount, ".columns", "after") { width: $width - 4; }
+		.one-third.column { width: $width - 4; }
+		.two-thirds.column { width: $width - 4; }
 		.full-width.columns {
 			width: $width;
 			margin-left: 0;

diff --git a/core/_mixins.scss b/core/_mixins.scss
@@ -4,7 +4,7 @@
 
 // grid ( [ number $width: 960px, [ boolean $fluid: false, [  number $gutterWidth: 20px, [ number $colCount: 16 ] ] ] ] )
 @mixin grid($width: $base-width, $fluid: $is-fluid, $gutterWidth: $base-gutter-width, $colCount: $base-col-count) {
-	@if ( $fluid == true ) {
+	@if($fluid) {
 		@include _fluidGrid($colCount);
 	} @else {
 		// we no longer need to set a value for $colWdith because it is generated dynamically right here!
@@ -15,25 +15,25 @@
 }
 
 // mobileGrid ( [ number $width: 960px, [ number $colCount: 16 ] ] )
-@mixin mobileGrid($width: $base-width, $colCount: $base-col-count) {
-	@include _mobileGrid($width, $colCount);
+@mixin mobileGrid($width: $base-width, $isFluid: $is-fluid, $colCount: $base-col-count) {
+	@include _mobileGrid($width, $colCount, $isFluid);
 }
 
 // font-size ( [ number $size, [ boolean $fallback: true ] ] )
 @mixin font-size($size, $fallback: $use-px-fallback) {
-	@if($fallback == true) {
+	@if($fallback) {
 		font-size: $size;
 	}
 
-	@if($use-rem == true and $use-em == false and $use-percent == false) {
+	@if($use-rem and not $use-em and not $use-percent) {
 		font-size: rem($size);
-	} @elseif($use-em == true and $use-rem == false and $use-percent == false) {
+	} @elseif($use-em and not $use-rem and not $use-percent) {
 		font-size: em($size);
-	} @elseif($use-percent == true and $use-rem == false and $use-em == false) {
+	} @elseif($use-percent and not $use-rem and not $use-em) {
 		font-size: percent($size);
 	} @else {
 		@debug "More than one option is chosen for the default unit. Choose only one. Defaulting to px.";
-		@if($fallback == false) {
+		@if(not $fallback) { // we have no other choice...
 			font-size: $size;
 		}
 	}

diff --git a/skeleton/sphenoid/_skeleton.scss b/skeleton/sphenoid/_skeleton.scss
@@ -18,9 +18,7 @@
 }
 .row { margin-bottom: relative(20px); }
 
-// @include grid($base-width, true); // fluid
-// @include grid($base-width, false, 20px, 12); // 12-column fixed grid
-// @include grid($base-width, false, 20px, 20); // 20-column fixed grid
+// Set variables in user global config in skeleton sass root instead of editing directly
 @include grid($base-width, $is-fluid, $base-gutter-width, $base-col-count);
 
 /* TABLET (PORTRAIT)
@@ -33,13 +31,13 @@
 			&.alpha {
 				margin: {
 					left: 0;
-					right: 10px;
+					right: if($is-fluid, 2%, 10px);
 				};
 			}
 			&.omega {
 				margin: {
 					right: 0;
-					left: 10px;
+					left: if($is-fluid, 2%, 10px);
 				};
 			}
 		}
@@ -51,22 +49,23 @@
 		};
 	}
 
-	// DNRY (Do Not Repeat Yourself) for fluid tablet, values are the same
-	// @include grid($tablet-width, false, 20px, 12); // 12-column fixed grid
-	// @include grid($tablet-width, false, 20px, 20); // 20-column fixed grid
-	@include grid($tablet-width, $is-fluid, $base-gutter-width, $base-col-count); // fixed
+	// If it is fluid, then we don't need to repeat ourselves. The grid will be identical
+	@if(not $is-fluid) {
+		// Set variables in user global config in skeleton sass root instead of editing directly
+		@include grid($tablet-width, false, $base-gutter-width, $base-col-count); // fixed
+	}
 }
 
 /*  MOBILE (PORTRAIT)
  * ------------------------------------------------ */
 @media only screen and (max-width: $tablet-width - 1) {
-	@include mobileGrid($mobile-portrait-width);
+	@include mobileGrid($mobile-portrait-width, $is-fluid, $base-col-count);
 }
 
 /* MOBILE (LANDSCAPE)
  * ------------------------------------------------ */
 @media only screen and (min-width: 480px) and (max-width: $tablet-width - 1) {
-	@include mobileGrid($mobile-landscape-width);
+	@include mobileGrid($mobile-landscape-width, $is-fluid, $base-col-count);
 }
 
 /* CLEARING

diff --git a/skeleton_template.scss b/skeleton_template.scss
@@ -3,7 +3,7 @@
  * @author Dennis Thompson <http://www.atomicpages.net>
  * @copyright Copyright (c) 2014 AtomicPages LLC
  * @license MIT
- * @version 2.0.0-b5
+ * @version 2.0.0-b6
  */
 
 // Choose the your flavor of Skeleton Sass and compile