STYLE SHEETS

Pulling Web Page Elements with the Blueprint CSS Framework

If you’re a web designer who’s seeking a comprehensive guide to the main features of the Blueprint CSS framework, you’ve come to the right place. Welcome to the final episode of a series that gives you a quick overview of Blueprint CSS framework. Comprised of seven friendly tutorials, this series gets you started using this robust CSS library, and shows you how to take advantage of its numerous capabilities, by means of a great variety of code samples.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 2

June 18, 2009

TABLE OF CONTENTS:

<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>

<h2>This section spans 8 cols</h2>

</div>

<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>

<h2>This section spans 24 cols</h2>

</div>

</body>

</html>

True to form, understanding how the "push-x" classes do their thing is a very straightforward process, right? As depicted above, in this situation the classes have been assigned to three paragraphs on the web document to achieve different levels of indentation for each one. Again, it's valid to stress here that this "pushing" process is always performed with reference to the background grid, which makes all of the elements of the web document line up in perfect alignment.

So far, so good. Now that you recall how to work with the generic "push-x" classes, the next step of this tutorial will consist of explaining how to use their counterparts, the ones called "pull-x." This interesting topic will be treated in detail in the section to come; to learn more about it, please click on the link that appears below and read the following segment.

Next: Pulling elements out of a web document >>