grater 0.1.0 → 0.1.1

data/.gitignore

@@ -1 +1,2 @@
 .sass-cache
+pkg

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    grater (0.1.0)
+    grater (0.1.1)
       sass (>= 3.2.0.alpha.261)
 
 GEM

data/Readme.markdown

@@ -1,10 +1,40 @@
 # Grater
 
-CSS grids as easy to use as a cheese grater.
+CSS grids as easy to use as a cheese grater. Read the philosphy behind this super simple grid system [here](http://samsoff.es/posts/my-grid-system).
 
-Simply download [grater.css](https://github.com/samsoffes/grater/raw/master/grater.css) to get started. You can also install it as a gem if you are using Rails 3.1 or higher with the asset pipeline.
+Simply download [grater.css](https://github.com/samsoffes/grater/raw/master/grater.css) to get started. You can also install it as a gem if you are using Rails 3.1 or higher with the asset pipeline (see below).
 
-## Gem Installation
+## Usage
+
+Simply structure some HTML like this:
+
+``` html
+<div class="grater">
+  <div>
+    <p>This is on the left or on top when things get narrow.</p>
+  </div>
+  <div>
+    <p>This is on the right or on the bottom when things get narrow.</p>
+  </div>
+</div>
+```
+
+You can also use the reverse version:
+
+``` html
+<div class="grater reverse">
+  <div>
+    <p>This is on the right or on top when things get narrow.</p>
+  </div>
+  <div>
+    <p>This is on the left or on the bottom when things get narrow.</p>
+  </div>
+</div>
+```
+
+`div.grater` is intended to be enclosed in a 640px or 300px container. You can optionally add `<div class="grater-container">` around it to get this functionality.
+
+## Asset Pipeline
 
 Add this line to your application's Gemfile:
 
@@ -16,10 +46,4 @@ And then execute:
 
 You may need to run `bundle update` since Rails comes with `sass-rails` which uses an older version of the Sass gem.
 
-You can also install it yourself with:
-
-    $ gem install grater
-
-## Usage
-
-Simply require `grater` like you would any other stylesheet using Sprockets.
+Now, simply require `grater` like you would any other stylesheet using the Asset Pipeline.

data/app/assets/stylesheets/grater.css.scss

@@ -1,8 +1,23 @@
-// Row
-section.grater {
+$grater-large-container-width: 640px;
+$grater-small-container-width: 300px;
+$grater-column-width: 300px;
+$grater-small-media-query: "all and (max-width: 660px)";
+
+// Grater container
+div.grater-container {
+  width: $grater-large-container-width;
+  margin: 0 auto;
+  
+  @media #{$grater-small-media-query} {
+    width: $grater-small-container-width;
+  }
+}
+
+// Grater row
+div.grater {
   // Columns
-  > section {
-    width: 300px;
+  > div {
+    width: $grater-column-width;
     margin: 0 0 2em;
 
     // First column
@@ -17,7 +32,7 @@ section.grater {
   }
 
   // When the `reverse` class is added, the columns are switch
-  &.reverse > section {
+  &.reverse > div {
     &:first-child {
       float: right;
     }
@@ -41,10 +56,10 @@ section.grater {
   }
 
   // Responsive
-  @media all and (max-width: 660px) {
+  @media #{$grater-small-media-query} {
     margin-bottom: 1em;
 
-    > section {
+    > div {
       float: none !important; // Shut up. I know, I know
       margin: 0 auto 2em;
     }

data/lib/grater/version.rb

@@ -1,3 +1,3 @@
 module Grater
-  VERSION = '0.1.0'
+  VERSION = '0.1.1'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: grater
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.1
   prerelease: 
 platform: ruby
 authors:
@@ -76,7 +76,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: -617764701865611400
+      hash: -614044417912637991
 required_rubygems_version: !ruby/object:Gem::Requirement
   none: false
   requirements:
@@ -85,7 +85,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: -617764701865611400
+      hash: -614044417912637991
 requirements: []
 rubyforge_project: 
 rubygems_version: 1.8.23