compass-lucid-grid 0.4.0 → 0.4.1

data/README.md

@@ -14,7 +14,7 @@ Not only does it match other grids in functionality, but it also comes with a ha
 * Add borders and padding _directly to your grid elements_ without using nested `<div>`s
 * Use "gutterless" grid elements for nesting and precise styling
 * Cater to multiple screen widths by reconfiguring Lucid inside media queries
-* Achieve leaner compiled CSS than other SASS grids, due to Lucid's internal [@extend](http://sass-lang.com/docs/yardoc/file.SASS\_REFERENCE.html#extend) logic
+* Achieve leaner compiled CSS than other SASS grids, due to Lucid's internal [@extend](http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#extend) logic
 
 Go ahead! Judge for yourself:
 
@@ -39,13 +39,13 @@ Or
 compass create -r lucid --using lucid your_new_project
 ```
 
-(Note: Creating a project with Lucid does not generate the default Compass stylesheets, only the `\_grid.scss` partial.)
+(Note: Creating a project with Lucid does not generate the default Compass stylesheets, only the `_grid.scss` partial.)
 
 #Documentation
 
-###Setup 
+###Setup `+grid-init` 
 
-After installation, @include '_grid.scss' or copy its contents into your base file. It should look something like this:
+After installation, @import '_grid.scss' or copy its contents into your base file. It should look something like this:
 
 ```scss
 // Remove the following line if Compass has already been included
@@ -74,7 +74,7 @@ $grid-centering: true;
 @include grid-init;
 ```
 
-### Basic Usage
+###Basic Usage `+container, +columns( $columns (int) )` 
 
 Now we're ready to style:
 
@@ -92,6 +92,11 @@ Now we're ready to style:
   .main {
     @include columns(9);  // 9 column element
   }
+
+  .custom {
+    @include columns(0);  // custom width element (includes only float and gutters)
+    width: 123px;
+  }
 }
 
 .another-container {
@@ -125,8 +130,9 @@ Now we're ready to style:
 
 .grid-element,
 .container .sidebar,
-.container .main {
-  // float: left, display: inline, and styles common to all grid elements
+.container .main,
+.container .custom {
+  // styles shared by all grid elements
 }
 
 .container .sidebar {
@@ -134,7 +140,11 @@ Now we're ready to style:
 }
 
 .container .main {
-  // 3 column width
+  // 9 column width
+}
+
+.container .custom {
+  width: 123px;       // custom width
 }
 ```
 
@@ -144,7 +154,52 @@ Instead of applying styles directly to each grid element, whenever possible, Luc
 
 This results in MUCH leaner compiled CSS, as it avoids needless repetition.
 
-###Using with Borders and Padding
+###Offset Positioning `+offset( $offset (int) )`
+
+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
+}
+
+.offset-to-the-left {
+  @include columns(6);
+  @include offset(-3);  // shifts element to the left 3 columns
+}
+```
+
+Unlike other grids that use padding or relative positioning to achieve this, Lucid does it with just `margin-left`. That means the element itself can still safely recieve styling!
+
+###New Rows `+row-break`
+
+Because of the way Lucid was designed, elements that exceed the width of the container will automatically wrap into the next row. If you want to insert a "row break" manually, it's dead simple:
+
+```scss
+.container {
+  @include container;       // 12 column container
+                            // would normally accomodate all 4 children
+  .on-row-1 {
+    @include columns(3);
+  }
+
+  .also-on-row-1 {
+    @include columns(3);
+  }
+
+  .on-row-2 {
+    @include columns(3);    // would have been on row 1
+    @include row-break;     // +row-break puts it on row 2
+  }
+
+  .also-on-row-2 {
+    @include columns(3);    // all following elements affected as well
+  }
+}
+```
+
+###Using with Borders and Padding `+columns( $columns (int), $adjustment (px) )`
 
 With other grids, styling an inner `<div>` is often the cleanest method to accomodate borders and padding, since it preserves the width of the grid element:
 
@@ -190,7 +245,7 @@ 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
+###Gutterless Elements `+columns( $columns (int), $adjustment (px), $gutters (bool) )`
 
 Sometimes, it's convenient to have grid units without gutters. For example, when you want to nest elements within other elements:
 
@@ -210,7 +265,7 @@ Sometimes, it's convenient to have grid units without gutters. For example, when
 
 #Advanced
 
-###Adapting to Media Queries
+###Media Queries and Grid Reformatting `+grid-reinit`
 
 Lucid uses pixels, which means that it's a fixed-width grid (percentages aren't precise enough). Fortunately, this doesn't mean that your sites have to be fixed-width:
 
@@ -249,7 +304,7 @@ $grid-hook-element: ".grid-element";
 $grid-hook-gutterless: ".grid-column-gutterless";
 ```
 
-###Unsemantic Class Names
+###Unsemantic Class Names `+grid-classes( $gutterless (bool), $prefix (str), $prefix-gutterless (str) )`
 
 For testing purposes, or for those who are unwilling to part with old ways, Lucid provides a class name generator mixin:
 

data/stylesheets/lucid/_public.scss

@@ -62,6 +62,7 @@
 //
 // Columns
 // - 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)
@@ -71,11 +72,15 @@
 @mixin columns($columns, $adjustment: 0, $gutters: true) {
   @if $gutters == false { 
     @extend #{$grid-hook-gutterless};
-    @include _grid-element-style($columns, $adjustment, 0, grid-column-width());
+    @if $columns > 0 {
+      @include _grid-element-style($columns, $adjustment, 0, grid-column-width());
+    }
   }
   @else {
     @extend #{$grid-hook-element};
-    @include _grid-element-style($columns, $adjustment, $grid-gutter, grid-column-width());
+    @if $columns > 0 {
+      @include _grid-element-style($columns, $adjustment, $grid-gutter, grid-column-width());
+    }
   }
 }
 

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: compass-lucid-grid
 version: !ruby/object:Gem::Version
-  version: 0.4.0
+  version: 0.4.1
   prerelease: 
 platform: ruby
 authors:
@@ -9,11 +9,11 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2011-06-04 00:00:00.000000000Z
+date: 2011-06-29 00:00:00.000000000Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: compass
-  requirement: &74705840 !ruby/object:Gem::Requirement
+  requirement: &86143910 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -21,7 +21,7 @@ dependencies:
         version: '0.11'
   type: :runtime
   prerelease: false
-  version_requirements: *74705840
+  version_requirements: *86143910
 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