Skip to content
master
Switch branches/tags
Code
This branch is 12 commits behind soffes:master.
Contribute
Fetch upstream

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
lib
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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.

About

CSS grids as easy to use as a cheese grater

Resources

License

Packages

No packages published