Tools and Resources

Cheat Sheets and Templates

• Blueprint Cheatsheets Cheat sheets for versions 0.7.2, 0.8 and 0.9.1
• Grid Tool for Adobe Air Creates a grid image that you can lay over your live project view
• Paper Grid [A4, PDF, 53kb] You can print this out and use it to visualize/sketch your layouts, wireframes, etc.
• Illustrator Template for Comps
• Photoshop Template for Comps
• Fireworks Template for Comps
• Illustrator Template for Comps [ BROKEN LINK ]

Code Generators

• GridCalc – Grid calculator and generator, generates CSS for Blueprint v0.9.
• BlueCalc CSS Generator — BlueCalc v0.8 is great, but if you have more than 24 columns you might need to fix grid.css by adding your extra div.span classes to line 46 (and other similar lines)
• Blueprint Grid CSS Generator
• Blueprint CSS Architect [ BROKEN LINK ]

Layout Editors (WYSIWYG)

• Construct
• Blueprint Layout Tool [ SITE NOT CURRENTLY FUNCTIONAL ]
• Boks – A Visual Grid Editor

Language-specific Utilities

• CSS Mixin PHP Script [PHP] Mixes CSS classes to provide more meaningful styles

Javascript Background Grid Switchers/Togglers

• Blueprint CSS + jQuery
• Bookmarklet to toggle the Blueprint CSS Background Grid