grid-coordinates 1.1.9 → 1.2.0

data/lib/grid-coordinates.rb

@@ -3,7 +3,7 @@ Compass::Frameworks.register("grid-coordinates", :path => "#{File.dirname(__FILE
 
 module GridCoordinates
   
-  VERSION = "1.1.9"
-  DATE = "2011-10-23"
+  VERSION = "1.2.0"
+  DATE = "2011-10-25"
 
 end

data/stylesheets/_grid-coordinates.scss

@@ -0,0 +1,23 @@
+// Compass requirements
+@import "compass/utilities";
+@import "compass/css3";
+
+// Grid Coordinates configuration
+$grid-columns: 12 !default;
+$grid-width: 60px !default;
+$grid-gutter-width: 20px !default;
+
+// Clearfix prefix string
+// Helps to avoid conflicts with other .clearfix's
+$clearfix-prefix: "" !default;
+
+// Support for deprecated clearfix options
+$support-legacy-grid-clearfix: false !default;
+
+// Modules
+@import "modules/bulletproof-clearfix";
+
+// Partials
+@import "partials/grid-functions";
+@import "partials/grid-coordinates-mixin";
+@import "partials/grid-coordinates-mixins";

data/stylesheets/partials/_grid-coordinates-mixin.scss

@@ -0,0 +1,55 @@
+@mixin grid-coordinates {
+
+  // Main clearfix class to use to @extend elements that require cleafix
+  .#{$clearfix-prefix}clearfix { @include bulletproof-clearfix; }
+  
+  // In place to support legacy clearfix options
+  // Should be deprecated at some point in the future
+  @if $support-legacy-grid-clearfix {
+    .grid-clearfix,
+    .grid-pie-clearfix {
+      @extend .#{$clearfix-prefix}clearfix;
+    }
+  }
+  
+  // All generated grid elements that require clearfix
+  .grid-container,
+  .nested-grid-container,
+  .grid-block,
+  .grid-full {
+    @extend .#{$clearfix-prefix}clearfix;
+  }
+  
+  // Core grid classes and mixin consumption
+  .grid-container {
+    @include grid-container-base;
+  }
+  .nested-grid-container {
+    @include nested-grid-container-base;
+  }
+  .grid-block {
+    @include grid-block-base;
+  }
+  .grid-full {
+    @include grid-base($grid-columns); @extend .grid-block;
+  }
+
+  // Loops to enumerate the classes
+  // Yep, this saves us tons of typing (if this were CSS)
+  @for $i from 1 through $grid-columns {
+    .grid-#{$i} { @include grid-base($i); @extend .grid-block; }
+  }
+  @for $i from 1 to $grid-columns {
+    .grid-prefix-#{$i} { @include grid-prefix($i); }
+  }
+  @for $i from 1 to $grid-columns {
+    .grid-suffix-#{$i} { @include grid-suffix($i); }
+  }
+  @for $i from 1 to $grid-columns {
+    .grid-push-#{$i} { @include grid-push($i); }
+  }
+  @for $i from 1 to $grid-columns {
+    .grid-pull-#{$i} { @include grid-pull($i); }
+  }
+
+}

data/stylesheets/partials/_grid-coordinates-mixins.scss

@@ -0,0 +1,70 @@
+// Grid Container
+@mixin grid-container {
+  @include bulletproof-clearfix;
+  @include grid-container-base;
+}
+
+@mixin grid-container-base {
+  margin-right: auto;
+  margin-left: auto;
+  width: grid-width($grid-columns);
+}
+
+// Nested Container
+@mixin nested-grid-container {
+  @include bulletproof-clearfix;
+  @include nested-grid-container-base;
+}
+
+@mixin nested-grid-container-base {
+  display: inline-block;
+  margin-left: -(grid-margin());
+  margin-right: -(grid-margin());
+  width: auto;
+}
+
+// Grid
+@mixin grid($grid-columns) {
+  @include grid-base($grid-columns);
+  @include grid-block;
+}
+
+@mixin grid-full {
+  @include grid($grid-columns);
+}
+
+@mixin grid-base($grid-columns) {
+  @include grid-width($grid-columns);
+}
+
+// Grid Block
+@mixin grid-block {
+  @include bulletproof-clearfix;
+  @include grid-block-base;
+}
+
+@mixin grid-block-base {
+  @include box-sizing(border-box);
+  @include float-left;
+  position: relative;
+  margin-right: grid-margin();
+  margin-left: grid-margin();
+}
+
+// Grid logic
+@mixin grid-width($grid-columns) {
+  @if $grid-columns == 1 { width: $grid-width; }
+  @else { width: grid-width($grid-columns) - $grid-gutter-width; }
+}
+@mixin grid-prefix($grid-columns) {
+    margin-left: grid-width($grid-columns) + $grid-gutter-width / 2;
+}
+@mixin grid-suffix($grid-columns) {
+  margin-right: grid-width($grid-columns) + $grid-gutter-width / 2;
+}
+@mixin grid-push($grid-columns) {
+  left: grid-width($grid-columns);
+}
+@mixin grid-pull($grid-columns) {
+  left: -(grid-width($grid-columns));
+}

data/stylesheets/partials/_grid-functions.scss

@@ -0,0 +1,9 @@
+// Grid margin function
+@function grid-margin() {
+  @return $grid-gutter-width / 2;
+}
+
+// Core grid-width logic function
+@function grid-width($grid-columns) {
+  @return $grid-columns * $grid-width + $grid-columns * $grid-gutter-width;
+}

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: grid-coordinates
 version: !ruby/object:Gem::Version
-  version: 1.1.9
+  version: 1.2.0
   prerelease: 
 platform: ruby
 authors:
@@ -9,11 +9,11 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2011-10-23 00:00:00.000000000Z
+date: 2011-10-25 00:00:00.000000000Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: compass
-  requirement: &70242823106420 !ruby/object:Gem::Requirement
+  requirement: &70276964560760 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -21,7 +21,7 @@ dependencies:
         version: 0.11.5
   type: :runtime
   prerelease: false
-  version_requirements: *70242823106420
+  version_requirements: *70276964560760
 description: Highly configurable CSS Grid Framework written in Sass.
 email: adam@stacoviak.com
 executables: []
@@ -30,8 +30,11 @@ extra_rdoc_files: []
 files:
 - ABOUT.mdown
 - lib/grid-coordinates.rb
-- stylesheets/_grid-coordinates.sass
+- stylesheets/_grid-coordinates.scss
 - stylesheets/modules/_bulletproof-clearfix.sass
+- stylesheets/partials/_grid-coordinates-mixin.scss
+- stylesheets/partials/_grid-coordinates-mixins.scss
+- stylesheets/partials/_grid-functions.scss
 homepage: http://grid-coordinates.com/
 licenses: []
 post_install_message: 
@@ -46,7 +49,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: 1488851282053818831
+      hash: 233659113814929658
 required_rubygems_version: !ruby/object:Gem::Requirement
   none: false
   requirements:

data/stylesheets/_grid-coordinates.sass

@@ -1,114 +0,0 @@
-@import "compass/utilities"
-@import "compass/css3"
-
-// Modules
-@import "modules/bulletproof-clearfix"
-
-// Configure Grid Coordinates
-$grid-columns: 12 !default
-$grid-width: 60px !default
-$grid-gutter-width: 20px !default
-
-// Support for deprecated clearfix options
-$support-legacy-grid-clearfix: true !default
-
-=grid-coordinates
-  .__clearfix
-    @include bulletproof-clearfix
-  @if $support-legacy-grid-clearfix
-    .grid-clearfix, .grid-pie-clearfix
-      @extend .__clearfix
-  .grid-container, .nested-grid-container, .grid-block, .grid-full
-    @extend .__clearfix
-  .grid-container
-    @include grid-container-base
-  .nested-grid-container
-    @include nested-grid-container-base
-  .grid-block
-    @include grid-block-base
-  .grid-full
-    @include grid-base($grid-columns)
-
-  // Loops
-  @for $i from 1 through $grid-columns
-    .grid-#{$i}
-      @include grid-base($i)
-      @extend .grid-block
-  @for $i from 1 through $grid-columns - 1
-    .grid-prefix-#{$i}
-      @include grid-prefix($i)
-  @for $i from 1 through $grid-columns - 1
-    .grid-suffix-#{$i}
-      @include grid-suffix($i)
-  @for $i from 1 through $grid-columns - 1
-    .grid-push-#{$i}
-      @include grid-push($i)
-  @for $i from 1 through $grid-columns - 1
-    .grid-pull-#{$i}
-      @include grid-pull($i)
-
-// Grid Container
-=grid-container-base
-  margin:
-    right: auto
-    left: auto
-  width: ($grid-columns * $grid-width) + ($grid-columns * $grid-gutter-width)
-
-=grid-container
-  @include bulletproof-clearfix
-  @include grid-container-base
-
-// Nested Container
-=nested-grid-container-base
-  display: inline-block
-  margin:
-    left: -($grid-gutter-width / 2)
-    right: -($grid-gutter-width / 2)
-  width: auto
-
-=nested-grid-container
-  @include bulletproof-clearfix
-  @include nested-grid-container-base
-
-// Grid Block
-=grid-block-base
-  @include box-sizing(border-box)
-  @include float-left
-  position: relative
-  margin:
-    right: ($grid-gutter-width / 2)
-    left: ($grid-gutter-width / 2)
-
-=grid-block
-  @include bulletproof-clearfix
-  @include grid-block-base
-
-// Grid
-=grid-base($grid-columns)
-  @include grid-width($grid-columns)
-
-=grid($grid-columns)
-  @include grid-base($grid-columns)
-  @include grid-block
-
-=grid-full
-  @include grid($grid-columns)
-
-// Grid logic
-=grid-width($grid-columns)
-  @if $grid-columns == 1
-    width: $grid-width
-  @else
-    width: (($grid-columns * $grid-width) + ($grid-columns * $grid-gutter-width)) - $grid-gutter-width
-
-=grid-prefix($grid-columns)
-  margin-left: (($grid-columns * $grid-width) + ($grid-columns * $grid-gutter-width)) + ($grid-gutter-width / 2)
-
-=grid-suffix($grid-columns)
-  margin-right: (($grid-columns * $grid-width) + ($grid-columns * $grid-gutter-width)) + ($grid-gutter-width / 2)
-
-=grid-push($grid-columns)
-  left: ($grid-columns * $grid-width) + ($grid-columns * $grid-gutter-width)
-
-=grid-pull($grid-columns)
-  left: -($grid-columns * $grid-width) + ($grid-columns * $grid-gutter-width)