Philosophy

Grid systems are one of the most important tools in design. Using grids enforces confident design and is conducive to good communiation. With the emergence of responsive design and fluid grid frameworks, the structure of design has never been so complex and exciting.

What?

With multiple breakpoints, fluid widths, and dynamic baseline heights, fluid grid systems get complicated really quick. Ghost Grid is a lightweight javascript tool for visualizing fluid grid systems during development/design. It is NOT a grid system in itself, but is an agnostic visual companion to any grid system.

Why?

More and more these days, I find myself skipping the design process in applications like Photoshop. It's an amazing feeling when you're able to craft a desisn simply by typing up some html and css, especially when you can do it quickly. Some things, however, are lost in this design process. One of which is visual guides, grids, and layout tools that you find in design & prototyping applications. Ghost Grid is a simple attempt to bridge that gap.

Features

Multiple Breakpoints

Use Ghost Grid to visualize a responsive column layout by setting up different columns at various breakpoints. Resize this screen to see an example.

Muliple Grid Instances

Use the `ghost.containingElement` property to bind the grid to a specific element in your layout. You can create multiple ghost grids this way for complex layouts.

Columns

Visualize your columns while you develop so you can rest assured you're within your bounds and, more importantly, make design decisions based on something you can see.

Plays well with Susy

I love using Susy to quickly get started with complex fluid grid layouts so I made sure this worked well with it. The structure of this project was inspired heavily by Susy and should therefore be familiar to any past users of Susy.

Baseline Grid

For all the masochistic perfectionists out there like me who want to make sure their layout maintains vertical rhythm, you can set a baseline grid for each breakpoint.

Works with Flexbox

Flexbox is the future of web layout, there's no doubt about that. However, the future isn't here yet, so we must keep using floats. For all you flex box cowboys who are building apps for young people, Ghost Grid supports Flexbox as well.