Simple Grid jQuery Plugin

Article summary

Simple Grid is a jQuery plugin intended to be a no-fuss way to “replicate” your Photoshop grid on top of your development site.

Download @ GitHub

Set these 3 variables to get started:

  1. rowHeight
    This is your line-height (most of the time)
  2. columnWidth
    This is your column width – it’s BEST to use a number that divides the gridWidth evenly!!
  3. gridWidth
    This is the width of the area being gridded

Example

$.simpleGrid({
rowHeight: 20,
columnWidth: 30,
gridWidth: 960
});

What You Get

Once you’ve added the tiny bit of JavaScript to your page, you will get a pink dot in the upper left corner.

Clicking the pink dot will toggle the grid on and off.

DEMO – Try it!

Credits

A GIANT thank you goes to Patrick Bacon for his coaching and coding input.

Dustin Tinney has been a solid source of inspiration and ideas along the way as well! Major thanks!

Download @ GitHub

Conversation
  • Nice plugin. I’ve used this one in the past, though your solution is more localized: http://gridder.andreehansson.se/

    • Kedron Rhodes says:

      Thanks David. That bookmarklet looks pretty handy!

  • Comments are closed.