Pushing Web Page Columns with the Blueprint CSS Framework - Review: working with the prepend-x and append-x CSS classes
(Page 2 of 4 )
In case you still have some gaps in your knowledge of using the “prepend-x” and “append-x” CSS classes included with Blueprint CSS together, in the next few lines I listed the example developed in the previous article of this series. In that example, these classes were used together to build a sample web page layout comprised of three main columns that had the same padding values.
Here’s how this particular example looked originally:
<!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>
<!-- framework CSS source files-->
<link rel="stylesheet" href="blueprint/screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="blueprint/print.css" type="text/css" media="print" />
<!--[if IE]><link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection" /><![endif]-->
</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>
As you’ll probably recall, when used in conjunction, the “prepend-x” and “append-x” classes allow you to assign a predefined number of grid units at the beginning and the end of a selected column within a web page. As the above example shows, in this case the classes aggregate only one grid units to each side of the main columns, setting an evened padding for them. It's also possible, however, to add multiple units, always in perfect alignment with the background grid.
All in all, now that you've hopefully recalled how to work simultaneously with the aforementioned “prepend-x” and “append-x” classes, the next topic that I’m going to discuss will be the use of another generic class given by Blueprint CSS, called “push-x.”
This class, as one would imagine, can be used for pushing a targeted element to the left in the web document. This can be helpful for indenting images, paragraphs, lists and so forth. Therefore, in the following segment I’m going to set up another code sample for you, which will illustrate how to use these handy classes in a concrete case.
Now, jump forward and read the next section. It’s only one click away.
Next: Introducing the generic push-x CSS classes >>
More Style Sheets Articles
More By Alejandro Gervasio
