Pulling Web Page Elements with the Blueprint CSS Framework - Pulling elements out of a web document
(Page 3 of 4 )
As I stated at the beginning, Blueprint CSS gives web designers the ability to pull a selected element to the right of the web page via another group of classes, named "pull-x." As you might have guessed, the usage of these classes is very similar to the others that you learned in previous tutorials, but to clear up any possible doubts that you might have regarding their implementation, below I coded another sample (X)HTML file that shows in a nutshell how to utilize them. Here it is:
<!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 pull classes</title>
</head>
<body>
<div class="container showgrid">
<div class="span-24">
<h1>Using pull 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-16">
<h2>This section spans 16 cols</h2>
<p class="pull-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="pull-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="pull-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-8 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 can see, the above code sample is extremely easy to follow, since it looks pretty similar to the one I developed when working with the "push-x" CSS classes. In this particular case, though, each of the paragraphs wrapped by the "span-16" class have been shifted to the right by means of the counterpart "pull-x" CSS class.
It's possible that this specific example doesn't give you a clue about the way that these classes affect the paragraphs, so below I've included an image that shows very crudely how this web page is displayed on the browser:
I deliberately coded the "push-x" classes to make the targeted paragraphs break out of the web document's box, but in productions environments, naturally, they should be used in a more helpful manner.
Having demonstrated basically how to work with "push-x" CSS classes, it's time to complete the signature of the previous (X)HTML file. In its current incarnation it doesn't include any of the Blueprint CSS' source files.
Therefore, in the last section of this article I'm going to list for you the entire code of the file, this time annexing into it the corresponding style sheets.
Now, go ahead and read the final segment, please.
Next: Adding CSS styles to the previous example's markup >>
More Style Sheets Articles
More By Alejandro Gervasio
