Eivind Borgersen — Personal Blog of Eivind Borgersen

Blueprinted.

˜

Posted 07/12/2009 by Eivind Borgersen in Design, Thoughts

Upon this discovery, I thought why not use it for my portfolio? Actually, I only started using Blueprint in this blog since the theme I run her is based on it. It struck me how easy it was to actually modify and place items in the grid structure not having to figure out all the CSS structure myself. So, I embarked on a mission to redo my portfolio website using Blueprint.

Previous Grid System

My portfolio was from the get-go based on a grid system – the 960 Grid System. However I didn’t use the actual framework, but the template grid for Photoshop. I chose to use the 12 column grid structure as a base for my design in Photoshop, and added an 18 pixel baseline to tie it all together nicely.

To the right you can see the current version of my portfolio using the 960 Grid System template. What I’ve discovered as of late is that the 12 columns with a 20 pixel gutter, really isn’t that flexible. It often locks me into patterns, solving problems the same way I’ve always done it. Therefore, it acts more like a constraint than a solid base for good, user friendly design.

Another thing was that for every website or blog I coded using this grid, I coded the CSS framework myself, from scratch. Obviously it works, and in most cases both the XHTML and CSS validate, but it takes so much time doing all the CSS yourself every single time. Also, staying true to the grid when coding is inherently difficult as I sometimes actually change design details as I code, and therefore keep breaking the grid or the baseline to make things fit. And all the hacks, tweaks and modifications I did to make this work while coding the CSS frameworks for this just took too damn long.

Enter Blueprint. A comprehensive, yet slim CSS framework that has solved all the problems I’ve been spending hours trying to fix, research or just given up entirely. Based on a 24 column, 10 pixel gutter with an established typographic baseline it is the ultimate tool for designers that’s not CSS gods. You have to understand the basics of CSS and HTML to make it work to your benefit, but it is in fact really easy to get into.

Another thing is that by using 24 columns over twelve, the increments you have to work with is much smaller, giving a lot more flexibility in the way you design, and breaking the grid to accomodate for your specific needs or wants easier without disrupting the overall balance of your layout.

The Blueprint CSS Grid

Enter the new blueprinted version of my Portfolio. Total HTML and CSS time was about three hours, including Photoshop mock-ups. You may notice that the baseline is adjusted slightly, but I needed to do so in order to apply some of my styling options. Setting up the entire layout for the two different templates was super easy, and I think I only wrote about 50 lines of additional CSS for different stylings, and edited just slightly the core Blueprint files to meet my needs.

Major changes include of course the grid structure, but also new typography (Corbel is the new primary typeface, with Helvetica Neue as the supporting  player). The design is pretty much the same, with few cosmetic changes.

Although I like doing CSS, and enjoy figuring out the quirks and problems, Blueprint helped me code and clean up my site in less than three hours. Thankfully, since the previous design was also grid based and took a lot of the same theory into it, all the images already on there is formatted perfectly to fit within the new grid, saving me tons of time in that department as well. I actually had to do a fair bit of clean-up because of code left behind from the old template.

When discovering this, I finally realized that I can shorten down the development and coding time for my websites, and deliver more “bang for the buck” to my customers, without wasting their time and money reinventing the wheel everytime. Good stuff!

I’m even more stoked to go ahead with this project now than I was before!