Philosophy

Graphpaper is a lightweight plugin to Compass that provides tools for rapidly prototyping fixed-width grid-based HTML layouts. While Graphpaper makes little to no design assumptions, it does provides a highly organized file structure and opinionated defaults to assist in an iterative development environment.

Sample Workflow

Graphpaper is used internally at Policus to prototype all HTML-based interfaces. Our workflow usually goes as follows:

1. The basic layout of a page is developed through iterative pencil sketches.

2. Using Graphpaper, we immediately jump into coding HTML prototypes to test assumptions made on paper and get a feel for how the interface will work in a browser.

3. Once we're happy with the overall architecture of the page, Paparazzi is used to create a screen capture of the entire page.

4. The graphic design team takes the screen capture and uses it to guide the the visual design of the site.

5. Visual design changes are then quickly implemented using standard SASS and Compass functionality to enable immediate feedback from developers, designers, and clients.

Getting Started

Check partials/_base.sass for instructions to initialize a grid for your page. Graphpaper makes heavy use of the last-child pseudo-element to clear the floats required for a grid. The +last mixin is available for use in your IE stylesheet to compensate for the browser's implementation deficiencies.

To create your grid columns, mix +container into any element that will be grouping columns and then use +column(n) to have an element span n-number of columns.

The size of your columns and gutters can be defined in _config.sass. Graphpaper defaults to the standard Blueprint 960px grid.

Installing

$> sudo gem install alexcabrera-graphpaper --source http://gems.github.com/

Creating a New Project Based on GraphPaper

$> compass -r graphpaper -f graphpaper my_graphpaper_project

Related Links

• The GraphPaper project is hosted on GitHub.
• The GraphPaper Wiki.
• The Compass Stylesheet Authoring Framework.