Grater

CSS grids as easy to use as a cheese grater. Read the philosphy behind this super simple grid system here.

Simply download 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).

Example

Usage

Simply structure some HTML like this:

<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:

<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>

Important: 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.

Using with Sprockets (Asset Pipeline)

Add this line to your application's Gemfile:

gem 'grater'

And then execute:

$ bundle

You may need to run bundle update since Rails comes with sass-rails which uses an older version of the Sass gem.

Now, simply require grater like you would any other stylesheet using the Asset Pipeline. Grater also works with plain Sprockets. It's recommended to add sass-sprockets to your Gemfile to make the load paths work better.