Blueprint: A Practical CSS Framework
There’s a fair bit of tedium and redundancy that goes into the set up of a new site. Most web designers start with the same tasks like reseting all default margins, padding, and other values to a common baseline for cross-browser support, you define your layout, wrestle with type, maybe even set up a print style sheet. We often find ourselves repeating what we’ve already done many times over on other projects. Blueprint, a recently released CSS framework created by Norwegian student Olav Frihagen Bjorkoy, seeks to eliminate this common tedium by providing a concise set of style sheets that make setup and design quick and easy.
If you are unfamiliar with the concept of a framework, you can think of it as a base structure of prefabricated code utilities that function both as a toolbox and a skeletal structure for a project. Many great frameworks have been created for both client-side (Prototype, Dojo, JQuery) and server-side development (Ruby on Rails, CakePHP, Code Igniter), and have revolutionized the way web applications are built. The goal of a framework is to allow you to concentrate more on the project concept and mission rather than micro-focusing on the details of the inner pinnings of the code.
That’s exactly what Blueprint delivers for CSS design. It brings together the solutions from many recent articles on grid-based layout, page rhythm, print style sheets, and typography and packages them neatly into a practical system with a low learning curve. By default, Blueprint creates a flexible 14 column grid to guide your layout. Using very simple class combinations, you can define the size of a div to span any number of horizontal units in the grid. For example, a div like the following will span 5 units of the grid and will sit on the right side of the layout.
<div class=“column span-5 last”>…<div>
Blueprint also creates flowlines that define the type baseline, and create a uniform rhythm to the page. Background images can be turned on to draw out the grid columns and flowlines as guides while refining your layout.
Although still undergoing refinements to create consistent cross-browser support, Blueprint is in a relatively stable state for project development. If you’re curious about the story behind the project, check out Khoi Vinh’s recent blog post on the subject, which includes an interview with Olav Bjorkoy, Blueprint’s creator.
I completely see the use in such a framework especially with stylesheets. I, for some reason, find that without proper documentation or a strong user base, starting as a novice was quite challenging. I tried to grasp the concept of Dojo, but the lack of documentation proved my time fruitless. I will look into this as for it my be documented better than with my other attempts.
October 22nd, 2007 at 3:14 pm