Pushing Web Page Columns with the Blueprint CSS Framework - Introducing the generic push-x CSS classes
(Page 3 of 4 )
As I expressed in the introduction, Blueprint CSS comes equipped with the “push-x” class that obviously permits users to push a selected web page element to the left. As with the “span-x,” “prepend-x” and “append-x” classes that you learned in previous articles, “push” classes work with grid units, which ensures that all of the pushed elements will be aligned on the pixel level with the background gird.
But undoubtedly, the best way to understand how “push-x” classes work actually is by means of a concrete code sample. With this in mind, below I recoded the (X)HTML file that you saw in the previous section, this time using these classes. Here’s how this file now 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 push class</title>
</head>
<body>
<div class="container showgrid">
<div class="span-24">
<h1>Using push class</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-8">
<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-16 last">
<h2>This section spans 16 cols</h2>
<p class="push-1">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>
<p class="push-2">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>
<p class="push-3">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>
See how simple it is to work with “push-x” CSS classes with Blueprint CSS? I guess you do! However, take some time to analyze more closely the markup of the above (X)HTML file. It uses the classes in question to set three different levels of indentation for some paragraphs.
Quite possibly, the previous code sample won’t show too clearly how the “push-x” classes really behave, so to dissipate any doubts that you might have, in the next few lines I included a complementary image that demonstrates how this web page layout is rendered on screen. Have a look at it, please:
As shown by the previous screen shot, the paragraphs have been neatly shifted to the left side of the web document, while sticking to the background grid the entire time. This makes the whole design flow very harmoniously across the web document.
Well, at this moment, you hopefully grasped the logic that drives the usage of “push-x” columns with Blueprint CSS. Thus, in the concluding segment of this article I’m going to complete the signature of the (X)HTML file defined earlier, by annexing to it the source files of the framework.
To see how this final process will be performed, please click on the link shown below and read the next few lines. We’re almost finished!
Next: Adding the Blueprint CSS style sheets to the (X)HTML file >>
More Style Sheets Articles
More By Alejandro Gervasio
