Prepending Classes in the Blueprint CSS Framework

Blueprint CSS is a robust framework that provides web developers with a set of useful CSS classes to speed up the creation of web page layouts. The features offered by this library are quite impressive. It offers powerful resetting capabilities for common elements of a web document, a grid-based design approach, styling of both online forms and text, and so forth.

So, if you're a web designer who's looking for an approachable guide that gets you started using Blueprint CSS for building your own web sites, then this series of articles might be what you really need.

Now that you're aware of the goal of this article series, it's time to recapitulate the topics that were discussed in the last tutorial, so you can see how these will be linked with the ones that I plan to explore in the next few lines. In that article I explained how to make use of the set of generic "append-X" classes provided by Blueprint CSS to easily aggregate a certain number of grid units to columns within a sample web page.

As the name clearly suggests, these classes append grid units after you've defined a specified column. Nevertheless, the framework also permits you to perform this aggregation task before creating the column in question, via another group of CSS classes, generically called "prepend-x."

If you're interested in learning how to employ these classes when creating a specific web page design, in this fourth chapter of the series I'm going to discuss them in depth by using a hands-on approach.

With the preliminaries out of our way, it's time to learn how to work with "prepend-x" classes and the Blueprint CSS framework. Let's get going!