Blueprint Builder

Developer: Del Sol Software

Current Version: 1.3

Last Updated: 4 years ago

Download Size: 3.2 MB - Download


Blueprint CSS Grid and HTML Layout Builder.
Watch a screencast demo at

This app is a graphical frontend to the Blueprint CSS Framework at If you are not familiar or happy with the Blueprint CSS Framework, this app might not be for you.

Generate custom grids:
1. Create CSS Blueprint Grids of infinite varieties.

Build your HTML layout graphically:
1. Draw your HTML layout on top of your Blueprint grid.
2. Build complex layouts of any variety and depth.

Semantic CSS IDs using Blueprint:
1. Use your own semantic CSS IDs in your HTML layout.
2. Use id="sidebar" instead of class="span-6, last" on your divs.

Blueprint Builder lets you generate a Blueprint CSS framework for a grid of any dimension. Then draw your html layout graphically on top of your grid and preview your html and css in any web browser.

If you do not care for the Blueprint CSS Framework, you can add your own CSS id's to all divs in your layout, then you can export your layout without relying on the Blueprint CSS Framework.

Finally export your new source files to begin development.

Blueprint Builder validates your layout, but it does not demand that you accept the validation. Layout that does not validate might not appear correctly in any browser.

See for more info on the Blueprint CSS Framework.


Release Notes:

Removed unneccesary CSS comments for less clutter in exported source files.
Small bug fixes.


Most Helpful Reviews

Version 1.0
Review by Steve Halford

Pixel Perfect Layouts with Ease! - This is a great application. Simply drag out your layout and generate validated html/css with semantic tags in a matter of minutes. I'm not a full time developer or designer, but I have responsibility for a number of sites, and this makes creating solid layouts a breeze. It's lightweight with an intuitive interface, and it doesn't pretend to be an all-purpose tool. If you weren't a user of the blueprint framework before, this could make you a convert. In addition, the developer is incredibly responsive. I emailed him a couple of desired enhancements, and he was back to me within an hour saying that he would work on these for the next version. Wow.

Found helpful by 6 out of 6 people

More Reviews for Current Version

Version 1.3
Review by BrainOpener

Does exactly what it says - Great utility for quickly laying out a page using Blueprint.

Found helpful by 5 out of 8 people
Version 1.3
Review by NoFakeNamesPlease

Such a time & hair saver! - If you're developing any type of web site, this is a great time saver. I don't use the Blueprint framework with my sites, but it doesn't matter. This app will allow you to export semantic CSS/HTML to use any way you want. You can quickly layout a web page framework and export the result to get a jump on the development of the internals (text/graphics/etc). With any new development, getting the framework setup and correct is the first step to creating a well designed, easy to maintain web site. This tools allows you to do just that. The Add background feature is a great tool. I took a screen shot of my current site (which I'm thinking about re-designing) and it allowed me to quickly setup the html/css framework to build within. Working without the visual cues from the background image, I can try different layout options. And when I'm done playing, I know I'll get valid HTML/CSS as my starting point. Import the output files into my favorite HTML editor (currently Espresso) and I'm off and running.

Found helpful by 1 out of 1 people
Version 1.3
Review by Artcar12

great html builder - This is exaclty what I was looking for. Lets you layout your site by div and style it later with jq ui etc… you can name the divs by id's and view/modify the source. use this in combination with div builder tool by the same developer for a full wysiwyg tool. The tool is simple(good in this case, almost no learning curve) and solid. It has a great validate feature which will correct your layout if you leave empty space in the page. 2 things that would make this even better: integration with div builder ability to resize divs(now you have to delete them and make a new one, but it's not a big drawback)

Found helpful by 0 out of 0 people
Version 1.3
Review by isomer1

not up to snuff (yet) - With work this could be a powerful tool, but as currently offered it is an early beta at best. Examples: Margins exist only on the right side of objects, margins have a minimum width of 5 pixels, the validator insists on nesting multiple objects for no apparent reason. Once a layout box is created it can not be altered, only deleted. Documentation is nonexistent. As currently offered (v1.3) this is not suitable for any but the most rudimentry of layout tasks.

Found helpful by 0 out of 1 people