HomeProgrammingBlueprint CSS Grid Tool for Adobe Air

Blueprint CSS Grid Tool for Adobe Air

I’m a big fan of the Blueprint CSS framework. In the process of using it to develop the base template for Banjo, the blog app I’m writing, I realized I need a tool to help me keep page elements lined up on the grid, both vertically and horizontally.

Blueprint comes with a background grid image to use for this, but it only works as a background, and it is not that useful when you are working with colors and final tweaks. So, I made a little (tiny) AIR app which will show a floating grid, sized at 18px and with Blueprint-sized columns.

The nice thing is that this is semi-transparent, draggable and resizable. So you just start it up and align things as you please. It floats to the front, so you can even edit behind it while it is running.

Download now

BlueGrid 2

Enjoy, and let me know of any improvements I could make. It is really dead simple.

Soon, hopefully tomorrow, I’ll make an install badge for this app. In the meantime, to install it, first go get Adobe AIR (it is basically just Flash on the desktop), then install my app.


I started out going to college for Business administration but soon found out that Coding would be a great way to have a sustainable career! I made coder's eye as my personal journey on learning how to code and sharing my Findings along the way. My vision with CE now is to be a way to help beginners that want to learn code but don't know where to start.


Sorry, the comment form is closed at this time.