This post has stuff that is outdated. Blueprint CSS Architect is gone
I love Blueprint CSS . But one of the things that bothers me about it is the non-semantic usage of classes. You should never have to put column or span-12 in your HTML because classes like that describe presentational aspects of a site, not structural.
I’ve described the process that I use to create semantic documents using the Blueprint CSS framework and as you’ll recall, it’s very tedious! Well over my New Year’s vacation my mind was feeling clear and happy so I decided to make a tool that you can use to generate semantic layouts based on Blueprint for any website.
Introducing Architect: Getting Started
First get out your base template and add the references to the Blueprint CSS files. Then comment out your grid.css file, Architect is going to generate CSS to replace it. Okay now you’re ready.
1. Dowload and extract the files
2. Add references to files
3. Create a call to the
Then pass in the id’s of the elements that you want to use for your layout
4. Set up the page the way you want it
This is the part where you get to be creative. Use the dropdowns for each element until you’ve got the layout that you’re looking for (at least a roughed in version).
5. Get the CSS for your layout
Hit the Get CSS button and copy the generated styles into your screen.css file.
You should be ready to go now. You’ll likely have to polish up a bit but at least the tedious stuff is done.
A note of caution
I’d love for lots of people to test it out. Tell me how you use it. File an issue on the Google Code page. Heck, contribute by coding. If we get any traction we might be able to get this thing into beta like the rest of this crazy Internet. ;)
What about Plumb?
In case you’re wondering, Plumb and Architect accomplish the same goals but they go about it differently. Plumb assumes that you don’t have an existing template. Architect assumes that you do, and that you want to retrofit it with Blueprint. I took this approach because I often find myself using sandbox themes for CMS ’s. So there you go. Plumb is done really well, I love the interface and I’ll certainly be using it in the future.