Appending Grid Units with the Blueprint CSS Framework

Introduction

When it comes to building professional CSS layouts in a quick fashion, web designers don’t have to reinvent the wheel. There are some good frameworks currently available on the web that make this task a true no-brainer process.

In the last few months, the Blueprint CSS library has gained considerable popularity with both inexperienced designers and seasoned professionals. Its remarkable features allow users to create all sorts of web page layouts very rapidly, by means of a robust group of CSS classes.

Having already introduced you to the subject of this group of tutorials, it’s a good moment to review the topics that were covered in the previous one. In the preceding part of the series, I discussed the use of the “span-x” CSS classes that come with the Blueprint CSS framework to build a primitive web page layout, which was comprised of two primary columns and the typical header and footer areas.

In that particular case, and for the sake of making this example a bit easier to grasp, I decided to keep the background grid visible, which facilitates positioning the columns across the web document. However, the grid can be disabled at any time, simply by removing the “showgrid” CSS class from the main container div.

At this point, you hopefully recalled how to create a simple web page layout via the Blueprint CSS framework, so it’s time to continue exploring many other useful features offered by this library. Therefore, in this third chapter of the series, I’m going to explain how to append dynamically columns within the background grid, via another group of CSS classes generically called “append-x.”

Ready to learn how to use these classes? Then let’s get started!