Recent update: 2013-03-19 06:09

Welcome to BlueCalc2 - fork and continued development of the original bluecalc by Peter-Christoph Haider.

Planned / work-in-progress features:

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.
The original author of BlueCalc found a Blueprint CSS generator on the web, which actually worked pretty nice, but lacked the functionality to preview the grid and to compare different grid configuration. As he was tired of the guesswork required to calculate a reasonable grid, he created this little tool to calculate and compare different grid configurations.

Give me your feedback! Is something missing? Have you discovered a bug? Just let me know!

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:

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?

  1. Enter the width of your grid.
  2. Add some constraints for your margin and column width.
  3. Hit the calculate button to calculate all possible configurations.
  4. Preview/download the grid.css file and add it to your Blueprint library.
  5. Optionally: Fork this project on GitHub ;)

This project is proudly powered by Usability Idealist - web & frontend development, focused on Usability, WordPress and E-Commerce solutions. More info at: