stipe 0.0.6.1 → 0.0.6.2

data/readme.md

@@ -12,6 +12,13 @@ To use the Stipe gem, using Bundler `gem 'stipe'`
 Stipe is a Compass Extension, so Compass is a dependency. You will need to include `require 'stipe'` in your config.rb file.
 
 # Stipe Changelog
+
+###0.0.6.2
+* Make `push`/`pull` grid mixins accept context arguments. Useful for nested, percentage-based grids.
+
+###0.0.6.1
+* Tweak `the_grid` to work with 24 column default setting
+
 ###0.0.6.0
 * Updated `@clearfix` to remove redundant CSS output.
 * Added some additional @media query-scoped grid placeholders.

data/stylesheets/stipe/_grid.scss

@@ -39,7 +39,8 @@ $grid_child:          none !default;           // sets parent child relationship
 $grid_align:          default !default;        // by default grids float left. Optional argument is ``center``
 $col_base:            10 !default;             // equal to 10px in the standard 960.gs
 $col_gutter:          $col_base * 2 !default;  // sets default grid gutter width
-$grid_960:            960 / 100% !default;     // grid math for percentages
+$grid_max_width:      960 !default;
+$grid_960:            $grid_max_width / 100% !default;     // grid math for percentages
 
 
 // the_grid calculates all the variables to define with width of the grid column

data/stylesheets/stipe/grid/_mixins.scss

@@ -33,30 +33,30 @@ $border_place: '';
 
 ///////// prefix value accounts for a full column in the grid ////////////
 // -----------------------------------------------------------------------
-@mixin prefix($grid_type, $col_count, $grid_uom: $grid_uom, $move: prefix) {
-	@include ppps ($grid_type, $col_count, $grid_uom, $move);
+@mixin prefix($grid_type, $col_count, $grid_uom: $grid_uom, $grid_context: $grid_type, $move: prefix) {
+	@include ppps ($grid_type, $col_count, $grid_uom, $move, $grid_context);
 }
 
 ///////// suffix value accounts for a full column in the grid ////////////
 // -----------------------------------------------------------------------
 
-@mixin suffix($grid_type, $col_count, $grid_uom: $grid_uom, $move: suffix) {
-	@include ppps ($grid_type, $col_count, $grid_uom, $move);
+@mixin suffix($grid_type, $col_count, $grid_uom: $grid_uom, $grid_context: $grid_type, $move: suffix) {
+	@include ppps ($grid_type, $col_count, $grid_uom, $move, $grid_context);
 }
 
 ///////// push value accounts for a full column in the grid ////////////
 // -----------------------------------------------------------------------
 
-@mixin push($grid_type, $col_count, $grid_uom: $grid_uom, $move: push) {
-	@include ppps ($grid_type, $col_count, $grid_uom, $move);
+@mixin push($grid_type, $col_count, $grid_uom: $grid_uom, $grid_context: $grid_type, $move: push) {
+	@include ppps ($grid_type, $col_count, $grid_uom, $move, $grid_context);
 	position: relative;
 }
 
 ///////// pull value accounts for a full column in the grid ////////////
 // -----------------------------------------------------------------------
 
-@mixin pull($grid_type, $col_count, $grid_uom: $grid_uom, $move: pull) {
-	@include ppps ($grid_type, $col_count, $grid_uom, $move);
+@mixin pull($grid_type, $col_count, $grid_uom: $grid_uom, $grid_context: $grid_type, $move: pull) {
+	@include ppps ($grid_type, $col_count, $grid_uom, $move, $grid_context);
 	position: relative;
 }
 

data/stylesheets/stipe/grid/lib/_push_logic.scss

@@ -1,6 +1,6 @@
 // Sass math that will determine the width of the push, pull, prefix and suffix and write appropiate CSS
 // ---------------------------- //
-@mixin push_logic ($col_count, $grid_uom, $move, $width_gutter) {
+@mixin push_logic ($col_count, $grid_uom, $move, $width_gutter, $grid_context_width) {
 	@if $grid_uom == em {
 		$padding_width: #{($width_gutter * $col_count) / $em}em;
 		@if $move == suffix {
@@ -17,8 +17,7 @@
 		}
 	}
 	@else if $grid_uom == percent {
-		$grid_width: ($width_gutter * $col_count) / $grid_960;
-		$padding_width: #{($width_gutter * $col_count) / $grid_960};
+    $padding_width: #{($width_gutter * $col_count) / $grid_context_width * 100%};
 		@if $move == suffix {
 			padding-right: $padding_width;
 		}
@@ -26,10 +25,10 @@
 			padding-left: $padding_width;
 		}
 		@else if $move == push {
-			left: ($width_gutter * $col_count) / $grid_960;
+			left: $padding_width;
 		}
 		@else if $move == pull {
-			right: ($width_gutter * $col_count) / $grid_960;
+			right: $padding_width;
 		}
 	}
 }
@@ -39,13 +38,23 @@
 // Paired down reusable logic, based on $type will determine width + gutter and 
 // send values to the push_logic mixin to determine the value of the Push, Pull, Prefix or Suffix
 // ------------------------------------------------------------------ //
-@mixin ppps ($type, $col_count, $grid_uom, $move) {
-	@if $type == 12 {
+@mixin ppps ($type, $col_count, $grid_uom, $move, $grid_context) {
+  @if $type == 12 {
 		$width_gutter: 80;
-		@include push_logic ($col_count, $grid_uom, $move, $width_gutter);
+		$grid_context_width: $grid_context * $width_gutter;
+		
+		@include push_logic ($col_count, $grid_uom, $move, $width_gutter, $grid_context_width);
 	}
 	@else if $type == 16 {
 		$width_gutter: 60;
-		@include push_logic ($col_count, $grid_uom, $move, $width_gutter);
+		$grid_context_width: $grid_context * $width_gutter;
+
+		@include push_logic ($col_count, $grid_uom, $move, $width_gutter, $grid_context_width);
+	}	
+	@else if $type == 24 {
+		$width_gutter: 40;
+		$grid_context_width: $grid_context * $width_gutter;
+
+		@include push_logic ($col_count, $grid_uom, $move, $width_gutter, $grid_context_width);
 	}
 }

data/stylesheets/stipe/resets/_toadstool.scss

@@ -150,7 +150,7 @@ pre, code, kbd, samp {
 }
 
 
-.clickable, label {
+.clickable {
 	@extend %stipe-cursor-pointer;
 }
 

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: stipe
 version: !ruby/object:Gem::Version
-  version: 0.0.6.1
+  version: 0.0.6.2
   prerelease: 
 platform: ruby
 authors:
@@ -10,7 +10,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-06-27 00:00:00.000000000 Z
+date: 2013-07-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: compass