Blueprint CSS Architect: The Easy Way to Layout Your Websites

By on

This post has stuff that is outdated. Blueprint CSS Architect is gone

UPDATE: I just updated Blueprint CSS Architect. The steps outlined below should be considered DEPRECATED . It is waaaay easier now. Read the announcement, then give it a test drive.

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

Architect is a Javascript-based tool that is designed to make it easy to layout a page using the Blueprint CSS grid. You’ll be up and running in just 5 steps. But before you get started you need a little preparation.

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

Download the latest version and extract it to your project’s Javascript directory.

2. Add references to files

You’ll need to reference the Prototype, Script.aculo.us and Architect Javascript files (Prototype and Script.aculo.us are included)

  <script src="js/prototype.js" type="text/javascript"></script>
  <script src="js/scriptaculous.js" type="text/javascript"></script>
  <script src="js/bpa.js" type="text/javascript"></script>

3. Create a call to the toolSpecific method

Then pass in the id’s of the elements that you want to use for your layout

For example:

<script type="text/javascript">
  window.onload = function () {
  	toolSpecific("container,header,main,sidebar,footer");
  };
</script>

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’ve got to warn you, this thing is like pre-alpha. It’s buggy. I’ve only used it in Firefox. The Javascript is likely clunky. You may not like Prototype or Scrip.taculo.us. Things will probably break. Sorry. I did this in a few days so I know it’s not perfect. This is where you come in.

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.