Gridder¶ ↑

CSS Grid System for Rails 3. Generates stylesheets on the fly, similar to the ones generated by 960.gs. The main difference is that a namespace is added so that layouts can use multiple grids.

It is probably not a good idea to generate stylesheets on the fly in most cases, but I need it for a project (an editor that lets you design grid layouts).

You can also use this gem to output grids to a file if you do not need them to be generated on the fly. That way they can be used by rails’ asset system.

Dependencies¶ ↑

• Rails 3.2.beta

Sorry I am not targeting earlier versions.

Usage¶ ↑

• Add gem to Gemfile

• bundle update

• Mount engine in routes.rb

  mount Gridder::Engine => '/gridder'
  

• Include helper in controllers that need it

  helper Gridder::GridsHelper
  

• Link stylesheet(s)

  <%= stylesheet_link_tag grid_stylesheet(12, 60, 20) %>

• Use helpers to design a grid

  <% with_grid 12, 60, 20 do |g| %>
    <div class="<%= g.container %>">
      <p class="<%= g.col 4 %>">Hello</p>
      <p class="<%= g.col 4 %>">Hello</p>
      <p class="<%= g.col 4 %>">Hello</p>
      <p class="<%= g.clear %>">&nbsp</p>
      <p class="<%= g.col 3 %>">Hello</p>
      <p class="<%= g.col 3 %>">Hello</p>
      <p class="<%= g.col 3 %>">Hello</p>
      <p class="<%= g.col 3 %>">Hello</p>
      <p class="<%= g.clear %>">&nbsp</p>
      <p class="<%= g.col 3 + ' ' + g.prefix 3 %>">Hello</p>
      <p class="<%= g.col 6 %>">Hello</p>
      <p class="<%= g.clear %>">&nbsp</p>
    </div>
  <% end %>

Designing grids¶ ↑

I’d suggest you check out 960.gs first because it works similarly.

• Link all the stylesheets you are going to use:

  <%= stylesheet_link_tag grid_stylesheet(12, 60, 20) %>

  The 3 arguments are: number of columns, column width, and gutter.

• Use the width_grid helper around a grid:

  <% with_grid 12, 60, 20 do |g| %>
  ...
  <% end %>

Now you can access the grid to output the namespaced CSS classnames.

• Create columns:

  <p class="<%= g.col 4 %>">Hello</p>
  <p class="<%= g.col 4 %>">Hello</p>
  <p class="<%= g.col 4 %>">Hello</p>

• After a row:

  <p class="<%= g.clear %>">&nbsp</p>

Check out 960.gs to learn about prefixes, suffixes, pushes, pulls, and nested columns.

In theory you should be able to nest different grids as well.

Output a grid to a file¶ ↑

Alternatively you can output a grid’s CSS to a file.

rake generate gridder::grid 10 80 20

This will create grid_10_80_20.css in app/assets/stylesheets.

Configuration¶ ↑

You can modify the following options in an initializer:

• Maximum number of columns (default 64)

  Gridder::Engine.config.max_cols
  

• Maximum width of a grid (default 2048)

  Gridder::Engine.config.max_width
  

If you attempt to load the stylesheet for a grid that doesn’t meet these requirements, it will return a :not_acceptable header.

Contributing to gridder¶ ↑

• Check out the latest master to make sure the feature hasn’t been implemented or the bug hasn’t been fixed yet

• Check out the issue tracker to make sure someone already hasn’t requested it and/or contributed it

• Fork the project

• Start a feature/bugfix branch

• Commit and push until you are happy with your contribution

• Make sure to add tests for it. This is important so I don’t break it in a future version unintentionally.

• Please try not to mess with the Rakefile, version, or history. If you want to have your own version, or is otherwise necessary, that is fine, but please isolate to its own commit so I can cherry-pick around it.

Copyright¶ ↑

Copyright © 2011 Stephan Florquin. See LICENSE.txt for further details.