Controlling Column Padding with the Blueprint CSS Framework - Using the prepend-x and append-x CSS classes simultaneously
(Page 3 of 4 )
Using the “append-x” and “prepend-x” CSS classes simultaneously on the same web page is only a matter of assigning these classes conjunctly to a targeted column. It’s nothing more complex than that, really. Though, to clarify this concept a bit further, I’m going to modify the structural markup of the example that you saw in the previous section to create a different web page layout that uses the aforementioned classes.
Here’s how the modified version of this example looks:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Using prepend and append classes</title>
</head>
<body>
<div class="container showgrid">
<div class="span-24">
<h1>Using prepend and append classes</h1>
<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 class="span-6 prepend-1 append-1">
<h2>This section spans 8 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 append-1">
<h2>This section spans 8 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 append-1 last">
<h2>This section spans 8 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>
Didn’t I tell you that working with “append-x” and “prepend-x” classes conjunctly was really simple? Well, the above code sample demonstrates that I was right. As you can see, in this case, the classes were utilized for building a typical web page layout comprised of three columns that have the same width.
However, and here’s where things get a bit more interesting, each column aggregates a single grid unit at the beginning and at the end respectively, in this way assigning the same padding values for its left and right sides.
Quite possibly, you’ll get a better idea of how the this example layout is displayed on the browser if you take a look at the following screen capture:
As I said before, each of the columns included in the prior web document has the same left and right padding, while they maintain perfect alignment with the background grid. Pretty appealing and pleasant, right?
Now that you've hopefully learned how to work at the same time with the generic “append-x” and “prepend-x” CSS classes, it’s time to incorporate the source files of this framework into the previous web document, thus completing the development of this specific web page design.
Since the full details of this process will be covered in the concluding section of this tutorial, please click on the link below and read the new few lines.
Next: Finishing the sample web page layout with Blueprint CSS’ source files >>
More Style Sheets Articles
More By Alejandro Gervasio
