Columnal Grid System - Compass Plugin

Columnal is a responsive CSS grid system helping desktop and mobile browsers play nicely together. See the official site for more info: <www.columnal.com//>

  • This plugin is consistent with latest version of Columnal as of 10/01/2012

This plugin adds the Columnal Grid System framework to [Compass](compass-style.org/). This plugin is heavly based upon the 960.gs compass plugin written by Chris Eppstein and Matt Sanders. I’ve tried to use the same mixin names whenever possible to make a migration easier.

Install

First add to your Gemfile:

gem "compass-columnal-plugin"

Then run:

bundle install

Add a ‘config/compass.rb` file to your project containing:

require 'columnal'

Finally, in your stylesheet:

@import columnal/grid

Class-Based Grid System

To create a grid system that works like the original Columnal Grid System framework use the ‘+grid-system-complete` mixin to generate the corresponding classes:

Example:

+grid-system-complete

Making Semantic Grids

Let’s say we have a 12 columns layout, and we want to use the ‘<section>` tag as a row in the grid:

body
  +grid-container
  section
    +grid-row
    header
      +grid(12)
    article
      +grid(9)
    aside
      +grid(3)
      +last

So we could use the following HTML:

<body>
  <section>
    <header>This header has 12 columns</header>
    <article>Here we have 9 columns</article>
    <aside>And here 3</aside>
  </section>
</body>

Handling horizontal margins and paddings

Every ‘+grid(n)` column comes with a margin-right as default gutter between columns. But we don’t want this margin on the last column because it’ll break our layout. For that, we use:

+grid(3)
+last

Or, for the one’s too damn used to 960.gs:

+grid(3)
+omega

Adding some “blank” (padding-left, actually) columns before your grid column:

+grid(3)
+grid-prefix(9)

Adding some “blank” (padding-right, actually) columns after your grid column:

+grid(3)
+grid-suffix(9)

Using subcolumns

Columnal allows you to use subcolumns that will flatten to a single column on mobile devices, the same way as the normal columns. One thing to note is that sub-columns will only work up to one level deep. More at www.columnal.com/#markupcode

body
  +grid-container
  section
    +grid-row
    article
      +grid(9)
      .author
        +grid-subcolumn(9, 6)
      .date
        +grid-subcolumn(9, 3)
        +last
    aside
      +grid(3)
      +last

This will divide your ‘article` into two subcolumns, one of them with 6 columns and the other with 3.

IMPORTANT: since Columnal is a responsive grid system based on percentage, we can’t know beforehand how many columns the parent ‘article` has. Thus, the first parameter will be the number of columns of the parent.

Creating mobile-only or mobile-hidden content

If you want something to be shown only in mobile devices:

+mobile-only

If you want something to be hidden in mobile devices:

+mobile-hide

Configuring your grid

Defining the grid width:

$columnal-grid-width: 1140px !default

Defining the number of columns:

$columnal-columns: 12 !default

Defining the separator for classes on class-based grids:

$columnal-class-separator: "_" !default

Extras

Basic settings to make type look nice:

+text