Pushing Web Page Columns with the Blueprint CSS Framework

Many of the CSS frameworks developed in the last few years have not been very appealing to professional web designers in general. They lacked some crucial features, such as a solid grid-based approach and decent resetting capabilities. Of course, there are others that did make a huge leap in the right direction, for instance Yahoo Grid CSS, to cite an example.

However, with the release of Blueprint CSS, it seems that the terrain dominated by CSS frameworks has changed significantly, and this time for good. Indeed, this CSS library created originally by Oval Frihagen Bjørkøy comes equipped with a robust set of features that will fit the needs of both novices and seasoned designers equally.

Due to its inherent flexibility, Blueprint CSS makes it extremely easy to build harmonious web page layouts via a set of intuitive classes (although they’re not very semantic actually). It also permits users to style text and web form elements in a fairly appealing fashion.

Of course, covering all of these characteristics in depth in only one tutorial is practically impossible. That's where this series of articles comes in. In its various parts you’ll find a bunch of code samples that hopefully will get you started mastering Blueprint CSS very quickly and with minor hassles. This is the sixth part of a seven-part series.

In the previous part of this series, you’ll possibly recall that I demonstrated how to combine the functionality of the generic “prepend-x” and “append-x” classes that come bundled with Blueprint CSS to build a classic three-column web page design. In truth, working with these classes is a no-brainer process, so you shouldn’t have major problems using them when creating your own layouts.

Nonetheless, the Blueprint CSS framework offers yet another set of classes, called generically “push-x,” that can be used for pushing to the left one or multiple columns within a web document. This comes in handy for indenting lists, images and paragraphs.

Thus, in this sixth installment of the series I’m going to take a deeper look at these classes, so you can learn how to work with them with minor efforts. Now that you know what to expect from this tutorial, let’s move forward and see how to push web page elements with Blueprint CSS. Let’s get going!