Appending Grid Units with the Blueprint CSS Framework

(Page 1 of 4 )

If you’re searching for a friendly guide that shows you how to utilize Blueprint CSS for building your own web page designs with a grid-based approach, then begin reading this series of articles now! In this this third part to a seven-part series, you will learn a new way to use the framework's background grid with the help of the append-x class.

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!

Next: Review: two-column web page design with Blueprint CSS >>
 

More Style Sheets Articles
More By Alejandro Gervasio

Comments On: Appending Grid Units with the Blueprint CSS Framework

· This third chapter of the series explains how to append dynamically columns within...    · The author did a splendid job explaining a CSS utility that is extraordinarily...    · Thanks for the kind words on my articles. It’s good to know they’ve been helpful for...   >>> Post your comment now!