Appending Grid Units with the Blueprint CSS Framework
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.
Appending Grid Units with the Blueprint CSS Framework - Using the generic append-x CSS classes (Page 3 of 4 )
As I stated in the section that you just read, Blueprint CSS comes equipped with another set of generic CSS classes, called “append-x,” which can be used for appending dynamically a specified number of grid units to a selected column within a web page.
However, the best way to understand how these classes work is via a concrete example. So, below I defined the markup of a new sample (X)HTML file that uses the classes to build a three-column web page layout. Here’s how this file looks:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="span-6 append-1">
<h2>This section spans 7 cols</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="span-9 append-1">
<h2>This section spans 10 cols</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="span-6 append-1 last">
<h2>This section spans 7 cols</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="span-24">
<h2>This section spans 24 cols</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</body>
</html>
From the sample file coded above, it’s easy to see how an “append-x” CSS class can be used for appending a number of grid units to a column of the web document. In this particular case, I used an “append-1” class to aggregate only one unit to each column of the web page, but you can append multiple units by using, for instance, classes like “append-2,” “append-3” and so forth. I guess you get the idea.
Now that you have a clearer picture of the use of the generic “append-x” CSS classes provided by Blueprint CSS, it’s time to complete the definition of the previous sample (X)HTML file by adding to it the corresponding source files of the CSS framework.
This process will be shown in detail in the following section. Therefore, to learn how it will be accomplished, jump forward and read the next few lines.
Style Sheets 
/ 3 
Changing Grid Units in the Blueprint CSS Framework
