compass-lucid-grid 0.4.1 → 0.5.0

data/README.md

@@ -154,19 +154,24 @@ Instead of applying styles directly to each grid element, whenever possible, Luc
 
 This results in MUCH leaner compiled CSS, as it avoids needless repetition.
 
-###Offset Positioning `+offset( $offset (int) )`
+###Offset Positioning `+offset( $offset (int), $gutters (0 || none) )`
 
 Sometimes, your layout needs a little bit of whitespace. Not a problem with Lucid:
 
 ```scss
 .offset-to-the-right {
   @include columns(6);
-  @include offset(3);   // shifts element to the right 3 columns
+  @include offset(3);         // shifts element to the right 3 columns
 }
 
 .offset-to-the-left {
   @include columns(6);
-  @include offset(-3);  // shifts element to the left 3 columns
+  @include offset(-3);        // shifts element to the left 3 columns
+}
+
+.offset-gutterless {
+  @include columns(6, 0, none);
+  @include offset(3, none);   // include 'none' or '0' when grid element is gutterless
 }
 ```
 
@@ -224,7 +229,7 @@ With other grids, styling an inner `<div>` is often the cleanest method to accom
 }
 ```
 
-With Lucid, this practice is no longer necessary, as you can adjust the width of grid elements individually! Just add your total borders / padding together and pass it as a mixin parameter. Like this:
+With Lucid, this practice is no longer necessary, as you can adjust the width of grid elements individually! Just add your total borders / padding together and pass the negative value as a mixin parameter. Like this:
 
 ```html
 <div class="container">
@@ -236,7 +241,7 @@ With Lucid, this practice is no longer necessary, as you can adjust the width of
 
 ```scss
 .look-ma-no-wrapper {
-  @include columns(3, 40px);  // (1px + 19px) * 2
+  @include columns(3, -40px);  // (1px + 19px) * 2
 
   border: 1px solid #ccc;
   padding: 19px;
@@ -245,13 +250,13 @@ With Lucid, this practice is no longer necessary, as you can adjust the width of
 
 Note, adjusting the width of a grid element means that nesting other grid elements within is no longer guaranteed to add up correctly. You *can* make use of Lucid's `+grid-reinit` to define a new inner grid however!
 
-###Gutterless Elements `+columns( $columns (int), $adjustment (px), $gutters (bool) )`
+###Gutterless Elements `+columns( $columns (int), $adjustment (px), $gutters (0 || none) )`
 
 Sometimes, it's convenient to have grid units without gutters. For example, when you want to nest elements within other elements:
 
 ```scss
 .gutterless {
-  @include columns(9, 0, false);
+  @include columns(9, 0, none);   // $gutters can accept 'none' or '0'
 
   .nested {
     @include column(3);

data/stylesheets/lucid/_internal.scss

@@ -60,16 +60,16 @@
 // - applies shared grid element styles
 // - used in .grid-element and .grid-gutterless @extend hooks
 //
-// $gutter  (px)  whether to include gutters
+// $gutters  (px)  whether to include gutters
 //
 
-@mixin _grid-element($gutter) {
+@mixin _grid-element($gutters) {
   display: inline;
   float: left;
 
-  @if $gutter > 0 {
-    margin-left: $gutter;
-    margin-right: $gutter;
+  @if $gutters > 0 {
+    margin-left: $gutters;
+    margin-right: $gutters;
   }
 }
 
@@ -78,13 +78,13 @@
 // Grid Element Style
 // - applies individual styles for each grid element
 //
-// $columns     (int)   number of columns to span
-// $adjustment  (px)    width to shrink the element by (to compensate for borders and padding)
-// $gutter      (px)    width of gutter
-// $col-width   (px)    calculated width of a single grid column
+// $columns       (int)   number of columns to span
+// $adjustment    (px)    adjustment to element width (to compensate for borders and padding)
+// $gutter-width  (px)    whether to include gutters
+// $col-width     (px)    calculated width of a single grid column
 //
 
-@mixin _grid-element-style($columns, $adjustment, $gutter, $col-width) {
-  width: ($columns * $col-width) - $adjustment - ($gutter * 2);
+@mixin _grid-element-style($columns, $adjustment, $gutter-width, $col-width) {
+  width: ($columns * $col-width) + $adjustment - ($gutter-width * 2);
 }
 

data/stylesheets/lucid/_public.scss

@@ -27,6 +27,7 @@
   @return ($grid-width - (2 * ($grid-outer-gutter - $grid-gutter))) / $grid-columns;
 }
 
+
 //
 // GRID BASIC USAGE
 //----------------------------------------------------------------------------//
@@ -64,13 +65,19 @@
 // - defines a grid element that spans one or more columns 
 // - if $columns is 0, only the float and margin are applied
 //
-// $columns     (int)   number of columns to span
-// $adjustment  (px)    amount to shrink width (to compensate for borders and padding)
-// $gutters     (bool)  whether to include gutters
+// $columns     (int)         number of columns to span
+// $adjustment  (px)          adjustment to element width (to compensate for borders and padding)
+// $gutters     (0 || none)   whether to include gutters
 //
 
-@mixin columns($columns, $adjustment: 0, $gutters: true) {
-  @if $gutters == false { 
+@mixin columns($columns, $adjustment: 0, $gutters: null) {
+  @if $gutters == none {
+    @extend #{$grid-hook-gutterless};
+    @if $columns > 0 {
+      @include _grid-element-style($columns, $adjustment, 0, grid-column-width());
+    }
+  }
+  @else if $gutters == 0 {
     @extend #{$grid-hook-gutterless};
     @if $columns > 0 {
       @include _grid-element-style($columns, $adjustment, 0, grid-column-width());
@@ -107,14 +114,20 @@
 // - shifts grid element to the left/right (-/+) by one or more columns
 // - must be defined after +column
 // 
-// $offset    (int)   the number of columns to shift (positive to the right, negative to the left)
-// $gutters   (bool)  whether the element has gutters
+// $offset    (int)         the number of columns to shift (positive to the right, negative to the left)
+// $gutters   (0 || none)   whether the element has gutters
 //
 
-@mixin offset($offset, $gutters: true) {
-  $gutter: if($gutters == false, 0, $grid-gutter);
-
-  margin-left: ($offset * grid-column-width()) + $gutter;
+@mixin offset($offset, $gutters: null) {
+  @if $gutters == none {
+    margin-left: ($offset * grid-column-width());
+  }
+  @else if $gutters == 0 {
+    margin-left: ($offset * grid-column-width());
+  }
+  @else {
+    margin-left: ($offset * grid-column-width()) + $grid-gutter;
+  }
 }
 
 
@@ -153,7 +166,7 @@
 
   @if $gutterless == true {
     @for $i from 1 through $grid-columns {
-      .#{$gutterless-prefix}#{$i} { @include columns($i, 0, false); }
+      .#{$gutterless-prefix}#{$i} { @include columns($i, 0, 0); }
     }
   }
 }

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: compass-lucid-grid
 version: !ruby/object:Gem::Version
-  version: 0.4.1
+  version: 0.5.0
   prerelease: 
 platform: ruby
 authors:
@@ -9,11 +9,11 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2011-06-29 00:00:00.000000000Z
+date: 2011-06-30 00:00:00.000000000Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: compass
-  requirement: &86143910 !ruby/object:Gem::Requirement
+  requirement: &78872390 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -21,7 +21,7 @@ dependencies:
         version: '0.11'
   type: :runtime
   prerelease: false
-  version_requirements: *86143910
+  version_requirements: *78872390
 description: A Compass/SASS grid that outputs lean, semantic stylesheets. Avoids CSS
   repetition on SASS compilation and reduces the need for wrapper <div>s.
 email: yz@yifei.co