What's this?

This tool helps you to calculate an individual grid layout for your Blueprint-based web site or web application. Being a static grid framework you usually start with defining the total with of your grid and then seperate your workspace into columns. By default Blueprint comes with a 950px grid, which is devided into 24 columns. However, often this configuration is not sufficient to create the kind of layout you have in mind. On the web I found a Blueprint CSS generator, which actually worked pretty nice but lacked the functionality to preview the grid and to compare different grid configuration. As I was tired of the guesswork required to calculate a reasonable grid, I created this little tool to calculate and compare different grid configurations.

About Blueprint

"Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing." Source: www.blueprintcss.org

Blueprint is licensed unter the GPL and the MIT License. Using this tool is absolutely free! Thanks to the Blueprint team for the awsome work!

How does this work?

• Enter the width of your grid.
• Add some constraints for your margin and column width.
• Hit the calculate button to calculate all possible configurations.
• Preview/download the grid.css file and add it to your Blueprint library.

This project is hosted and sponsored by Groupion.

Groupion is a web-based Business Groupware and CRM platform for the Cloud. We design smart web-apps that enable businesses to manage processes within their team. Visit us on www.groupion.com.