The Blueprint CSS Framework

Introduction

Building a web site is an easy task. Anyone who has a basic understanding of HTML and CSS can create web pages and link these documents with each other. They can even spice up these pages with some appealing images, crafted quickly using Photoshop. Sweet and simple.

However, things get more complicated when it comes to developing a professional web site. This process not only requires a deep grounding in the  client and server-side technologies involved, but an appropriate knowledge of several theoretical concepts applied to general design, such as grid theory (used with the Golden Proportion and the Rule Of Thirds, for instance), balance, proportionality, content distribution, blank space, etc. And the list goes on and on.

In addition, designing a professional web site demands creativity in most cases, which can be pretty challenging even for experienced designers. Fortunately, nowadays there’s a great arsenal of tools and resources available on the Internet that facilitates the creation of a good looking, carefully-crafted web site, without forcing the designer to be a guru in HTML/CSS or server-side programming.

For example, popular blog engines like WordPress and Expression Engine permit users to build database-driven web sites without being a programmer, while Yahoo Grid CSS (which I reviewed on the Dev Shed network the last year) is a robust CSS framework that will let you create all sorts of clever web page layouts using clean markup and simple style sheets.

However, when it come to creating web page layouts rapidly, in the last few months a new CSS framework has gained popularity with designers, due to its flat learning curve, solidness and flexibility. As you may have already guessed, in this case I’m speaking of Blueprint CSS, a CSS library created by Oval Frihagen Bjørkøy that lets you build different layouts using a intuitive grid-based approach.

As with Yahoo Grid CSS, Blueprint permits newcomers to implement proven design techniques, such as the aforementioned Golden Ratio and the Rule Of Thirds very easily when constructing web page layouts, by utilizing only a few simple CSS classes and clean markup. Thus, assuming that you’re interested in learning how to put this framework to work for you, in this group of articles I’ll show you how to use its main features, so you can employ them for building your own designs.

Now, it’s time to leave the preliminaries behind and begin discovering the real power behind the Blueprint CSS framework. Let’s get going!