Welcome to the fourth installment of a series that offers a quick overview of the Blueprint CSS framework. Composed of seven parts, this series gives you numerous code samples to help explain how to utilize this popular CSS library for building professional-looking, harmonious web page designs.
Prepending Classes in the Blueprint CSS Framework - Pre-appending grid units dynamically (Page 3 of 4 )
In a way similar to the "append-x" CSS classes that you learned before, Blueprint CSS permits us to "pre-append" grid units to a selected column via the previously-mentioned "prepend-x" classes. To help you better understand how these classes work, below I coded the markup of a sample (X)HTML file, which utilizes the classes to create a three-column web page layout. The signature of this file is as follows:
<!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 prepend-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 prepend-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 prepend-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 previous code sample, it's clear to see that "prepend-X" classes look very similar to their counterparts, "append-x" classes, discussed earlier. However, in this case grid units will be aggregated at the beginning of a column, and not at the end.
Obviously, the use of "prepend-x" classes provide more accurate control over how the respective columns are positioned within a web document, which can be enhanced even further when they're used in conjunction with "append-x" classes. But I'm getting ahead of myself; this topic will be covered in the next part of the series.
Now, returning to the previous (X)HTML file, I decided to code only its structural markup, but naturally its definition must be completed by adding to it the corresponding source files of Blueprint CSS.
This process will be accomplished in the last segment of this tutorial. Therefore, to learn how this will be done, please click on the link below and read the next few lines.
Style Sheets 
Controlling Column Padding with the Blueprint CSS Framework
