gridstrap 0.1.6 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 9278f2b04aa29907c7e6ae080f2cd0d64b7d2e96
-  data.tar.gz: f6b0964d2888e03201f5049cc46af5e15a8243f3
+  metadata.gz: 8dd8b7359e4ff3ee7c9d92133c0759d0a5866b5a
+  data.tar.gz: 8e02d55f2f39dd95350c129a8f20451ed0923444
 SHA512:
-  metadata.gz: cfbd7e131a18f9de630d01e27f3fcb43b4b25584b7acd66a92b1fb033eb0ab87167d2d05dc8701346a287bca2491ffe58c117b801d422af3f0fe84e0e7fb2e1a
-  data.tar.gz: 16d919368905794aa6026927b32fd36a74b6d970ba65481f5c33bdc431912e2d454cd6bd332473f217756a5a7676928a658a13a82934cf0278a6884579cead6b
+  metadata.gz: a41ccdd5fca7e2e4de8691e8ee3422083d9638d66a81c9eadac6d2f49114343d3e823b84d01ab864d1ad51f388c3368517ed5f565f175184ba95d971c444d34f
+  data.tar.gz: 8f610e93f55349e182dd208ea9531e867578b8e3eccc0bd75d3ec1904d216e8f5e6f89b9501e9e88875f84fdc7fbd23523961b3c035025b9a6de18e542a65455

data/stylesheets/inc/_build.scss

@@ -22,15 +22,18 @@
 // @param string $responsive The responsive mode to use
 // @param mixed  $cols       The number of columns
 // @param mixed  $gutter     The width of the gutter
+// @param mixed  $fluid      Make the columns % or px based
 
-@mixin gridstrap($responsive: "none", $cols: 0, $gutter: 0) {
+@mixin gridstrap($responsive: "none", $fluid: true, $cols: 0, $gutter: 0) {
 	@if $cols != 0 {
-		$gridstrap-cols: $cols;
+		$gridstrap-cols: $cols !global;
 	}
 	@if $gutter != 0 {
-		$gridstrap-gutter: $gutter;
+		$gridstrap-gutter: $gutter !global;
 	}
 
+	$gridstrap-fluid: $fluid !global;
+
 	// Base Grid Setup
 	@include gridstrap-base;
 

data/stylesheets/inc/_mixins.scss

@@ -1,7 +1,7 @@
 @import "compass/css3/box-sizing";
 @import "compass/utilities/general/clearfix";
 
-// Variable setup mixin.
+// -Use- Variable setup mixin.
 //
 // Pass a list of column modifiers you intend to use.
 //
@@ -15,38 +15,58 @@
 
 @mixin gridstrap-use($uses...) {
 	// Default all to false
-	$gridstrap-use-span:   false;
-	$gridstrap-use-of:     false;
-	$gridstrap-use-offset: false;
-	$gridstrap-use-push:   false;
-	$gridstrap-use-pull:   false;
-	$gridstrap-use-rtl:    false;
+	$gridstrap-use-span:   false !global;
+	$gridstrap-use-of:     false !global;
+	$gridstrap-use-offset: false !global;
+	$gridstrap-use-push:   false !global;
+	$gridstrap-use-pull:   false !global;
+	$gridstrap-use-rtl:    false !global;
 
 	// If first $use isn"t "all"...
 	@if nth($uses, 1) != "all" {
 		// Loop through and set matched options to true
 		@each $use in $uses {
 			@if $use == "span" {
-				$gridstrap-use-span:   true;
+				$gridstrap-use-span:   true !global;
 			} @else if $use == "of" {
-				$gridstrap-use-of:   true;
+				$gridstrap-use-of:   true !global;
 			} @else if $use == "offset" {
-				$gridstrap-use-offset:   true;
+				$gridstrap-use-offset:   true !global;
 			} @else if $use == "move" {
-				$gridstrap-use-push:   true;
-				$gridstrap-use-pull:   true;
+				$gridstrap-use-push:   true !global;
+				$gridstrap-use-pull:   true !global;
 			} @else if $use == "rtl" {
-				$gridstrap-use-rtl:   true;
+				$gridstrap-use-rtl:   true !global;
 			}
 		}
 	} @else {
 		// Make all true
-		$gridstrap-use-span:   true;
-		$gridstrap-use-of:     true;
-		$gridstrap-use-offset: true;
-		$gridstrap-use-push:   true;
-		$gridstrap-use-pull:   true;
-		$gridstrap-use-rtl:    true;
+		$gridstrap-use-span:   true !global;
+		$gridstrap-use-of:     true !global;
+		$gridstrap-use-offset: true !global;
+		$gridstrap-use-push:   true !global;
+		$gridstrap-use-pull:   true !global;
+		$gridstrap-use-rtl:    true !global;
+	}
+}
+
+// Container setup mixin.
+//
+// Pass the small, medium and large container sizes to use.
+//
+// @param number $sm The small (e.g. tablet) container width
+// @param number $md The medium (e.g. laptop) container width
+// @param number $lg The large (e.g. desktop) container width
+
+@mixin gridstrap-sizes($sm: 0, $md: 0, $lg: 0) {
+	@if $sm != 0{
+		$gridstrap-container-sm: $sm !global;
+	}
+	@if $md != 0{
+		$gridstrap-container-md: $md !global;
+	}
+	@if $lg != 0{
+		$gridstrap-container-lg: $lg !global;
 	}
 }
 
@@ -137,16 +157,17 @@
 // Applies $midfix to class names if present.
 // e.g. "sm" > .col-sm-X
 //
-// @param string $midfix Optional The midfix to use on the classes
+// @param string $midfix    Optional The midfix to use on the classes
+// @param number $container The container size to base the widths on
 
-@mixin gridstrap-build-columns($midfix: "") {
+@mixin gridstrap-build-columns($midfix: "", $container: 100%) {
 	@if $midfix != "" {
 		$midfix: $midfix + "-";
 	}
 
 	// Add classes/modifiers for each column number
 	@for $i from 1 through $gridstrap-cols {
-		$gs-col-width: ($i / $gridstrap-cols) * 100%;
+		$gs-col-width: ($i / $gridstrap-cols) * $container;
 
 		.col-#{$midfix}#{$i} {
 			width: $gs-col-width;
@@ -160,7 +181,7 @@
 
 		@if $gridstrap-use-of {
 			.of-#{$midfix}#{$i} {
-				width: 100% / $i;
+				width: $container / $i;
 			}
 		}
 
@@ -260,4 +281,25 @@
 			}
 		}
 	}
+}
+
+// Setup a breakpoint for columns of a certain prefix and container size
+//
+// Will set the container width and call the build-columns mixin,
+// passing the appropriate contianer size based on $gridstrap-fluid
+//
+//
+
+@mixin gridstrap-breakpoint($width, $midfix: ''){
+	$container: 100%;
+
+	@if $width != 'auto' {
+		$container: if($gridstrap-fluid, 100%, $width);
+	}
+
+	.container {
+		width: $width;
+	}
+
+	@include gridstrap-build-columns($midfix, $container);
 }

data/stylesheets/inc/_vars.scss

@@ -1,11 +1,19 @@
+// Fluid or Static mode? (percentage or pixel column widths
+$gridstrap-fluid:        true !default;
+
 // Column/Gutter values
-$gridstrap-cols:       12 !default;
-$gridstrap-gutter:     30px !default;
+$gridstrap-cols:         12 !default;
+$gridstrap-gutter:       30px !default;
+
+// Container width values
+$gridstrap-container-sm: 750px;
+$gridstrap-container-md: 970px;
+$gridstrap-container-lg: 1170px;
 
 // Span and Modifer class options
-$gridstrap-use-span:   true !default;
-$gridstrap-use-of:     true !default;
-$gridstrap-use-offset: true !default;
-$gridstrap-use-push:   true !default;
-$gridstrap-use-pull:   true !default;
-$gridstrap-use-rtl:    false !default;
+$gridstrap-use-span:     true !default;
+$gridstrap-use-of:       true !default;
+$gridstrap-use-offset:   true !default;
+$gridstrap-use-push:     true !default;
+$gridstrap-use-pull:     true !default;
+$gridstrap-use-rtl:      false !default;

data/stylesheets/inc/build/_down.scss

@@ -1,9 +1,7 @@
 @mixin gridstrap-build-down {
 	@include gridstrap-build-simple;
 
-	.container {
-		width: $md-screen - $gridstrap-gutter;
-	}
+	@include gridstrap-breakpoint($gridstrap-container-md, "");
 
 	// Tablet/Desktop/Widescreen Columns Setup
 	@include gridstrap-setup-columns("xs");
@@ -12,25 +10,16 @@
 
 	// Large (Widescreen) and up
 	@include lg-screen {
-		.container {
-			width: $lg-screen - $gridstrap-gutter;
-		}
-		@include gridstrap-build-columns("lg");
+		@include gridstrap-breakpoint($gridstrap-container-lg, "lg");
 	}
 
 	// Small (Tablet) and down
 	@include sm-screen-max {
-		.container {
-			width: $sm-screen - $gridstrap-gutter;
-		}
-		@include gridstrap-build-columns("sm");
+		@include gridstrap-breakpoint($gridstrap-container-sm, "sm");
 	}
 
 	// Extra-Small (Mobile) and down
 	@include xs-screen {
-		.container {
-			width: auto;
-		}
-		@include gridstrap-build-columns("xs");
+		@include gridstrap-breakpoint(auto, "xs");
 	}
 }

data/stylesheets/inc/build/_exact.scss

@@ -6,34 +6,22 @@
 	@include gridstrap-setup-columns("lg");
 
 	// Extra-Small (Mobile) and down
-	@include xs-screen($gridstrap-gutter) {
-		.container {
-			width: auto;
-		}
-		@include gridstrap-build-columns("xs");
+	@include xs-screen {
+		@include gridstrap-breakpoint(auto, "xs");
 	}
 
 	// Small (Tablet) only
 	@include sm-screen {
-		.container {
-			width: $sm-screen - $gridstrap-gutter;
-		}
-		@include gridstrap-build-columns("sm");
+		@include gridstrap-breakpoint($gridstrap-container-sm, "sm");
 	}
 
 	// Medium (Desktop) only
 	@include md-screen {
-		.container {
-			width: $md-screen - $gridstrap-gutter;
-		}
-		@include gridstrap-build-columns("md");
+		@include gridstrap-breakpoint($gridstrap-container-md, "md");
 	}
 
 	// Large (Widescreen) only
 	@include lg-screen {
-		.container {
-			width: $lg-screen - $gridstrap-gutter;
-		}
-		@include gridstrap-build-columns("lg");
+		@include gridstrap-breakpoint($gridstrap-container-lg, "lg");
 	}
 }

data/stylesheets/inc/build/_up.scss

@@ -8,25 +8,16 @@
 
 	// Small (Tablet) and Up
 	@include sm-screen-min {
-		.container {
-			width: $sm-screen - $gridstrap-gutter;
-		}
-		@include gridstrap-build-columns("sm");
+		@include gridstrap-breakpoint($gridstrap-container-sm, "sm");
 	}
 
 	// Medium (Desktop) and up
 	@include md-screen-min {
-		.container {
-			width: $md-screen - $gridstrap-gutter;
-		}
-		@include gridstrap-build-columns("md");
+		@include gridstrap-breakpoint($gridstrap-container-md, "md");
 	}
 
 	// Large (Widescreen) and up
 	@include lg-screen {
-		.container {
-			width: $lg-screen - $gridstrap-gutter;
-		}
-		@include gridstrap-build-columns("lg");
+		@include gridstrap-breakpoint($gridstrap-container-lg, "lg");
 	}
 }

metadata

@@ -1,41 +1,41 @@
 --- !ruby/object:Gem::Specification
 name: gridstrap
 version: !ruby/object:Gem::Version
-  version: 0.1.6
+  version: 1.0.0
 platform: ruby
 authors:
 - Doug Wollison
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-06-04 00:00:00.000000000 Z
+date: 2014-08-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: compass
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '0.11'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '0.11'
 - !ruby/object:Gem::Dependency
   name: handysass
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: 0.1.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: 0.1.0
 description: A bootstrap inspired grid system kit for Compass.
@@ -64,12 +64,12 @@ require_paths:
 - lib
 required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
-  - - '>='
+  - - ">="
     - !ruby/object:Gem::Version
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - '>='
+  - - ">="
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []