Tools and Resources
Clone this wiki locally
Cheat Sheets and Templates
- Blueprint cheat sheets Cheat sheets for versions 0.7.2, 0.8, 0.9.1 and 1.0.1
- Blueprint placeholder images A collection of nearly 750 placeholder images, optimized for the Blueprint CSS grid, useful for quickly prototyping designs
- Grid Tool for Adobe Air Creates a grid image that you can lay over your live project view
- Gridmaker for Photoshop CS4 PS CS4 extension – allows you to autom. create a PS template for your Blueprint layout. (1)
- 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 ]
- Evolus Pencil stencils (zip the file then import it)
(1) be sure to place the downloaded files under /photoshop_root/plug-ins/panels/new-folder/. then restart ps & find it under “windows” > “extenstions”. Be aware that this is not a final version & only works in ps cs4.
- Blueprinter – generates CSS for Blueprint v1.0.
GridCalc – GridCalc – A visual grid calculator and Blueprint CSS generator
GridCalc takes the pain and guesswork out of calculating a grid that fits your needs. Enter the width of your page, an approximate range for your column and gutter width and GridCalc calculates all the possible combinations and presents them visually. Once you have found a combination that fits your needs GridCalc can generate the Blueprint CSS for version 0.8, 0.9, 0.9.1 and 1.0.
- BlueCalc CSS Generator — Updated on 2012-06-17
- Blueprint Grid CSS Generator
- Blueprint CSS Architect [ BROKEN LINK ]
- Compress.rb Web GUI – Generates v1.0.1 grids using compress.rb
WYSIWYG)Layout Editors (
- Layoutside – An HTML/CSS grid builder and editor.
- Blueprint Layout Tool [ SITE NOT CURRENTLY FUNCTIONAL ]
- Boks – A Visual Grid Editor
- Blueprint Builder – Grid and HTML layout builder with semantic CSS IDs.
- PageBlox – feature-rich blueprint.css layout WYSIWYG editor.
- CSS Mixin PHP Script [PHP] Mixes CSS classes to provide more meaningful styles
- Perl/JQuery property-extractor Extract CSS properties from a set of style sheets. The extracted properties could then be used with JQuery (or any other language).
- JQuery-Plugin-Clear-Css Remove CSS from an element, and from all its children. This JQuery add-on allows the user to remove classes, in-line styles or properties.
- rounded-borders-corners This page shows how to create rounded corners and rounded borders with BluePrint and JQuery.
- Grails Plugin