Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
CSS grids as easy to use as a cheese grater
Branch: master

This branch is 11 commits behind soffes:master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
app/assets/stylesheets
lib
.gitignore
Gemfile
Gemfile.lock
LICENSE
Rakefile
Readme.markdown
grater.css
grater.gemspec

Readme.markdown

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

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.

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.

Something went wrong with that request. Please try again.