STYLE SHEETS

Prepending Classes in the Blueprint CSS Framework

Welcome to the fourth installment of a series that offers a quick overview of the Blueprint CSS framework. Composed of seven parts, this series gives you numerous code samples to help explain how to utilize this popular CSS library for building professional-looking, harmonious web page designs.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

May 28, 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 7 cols</h2>

</div>

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

</div>

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

</div>

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

</div>

</body>

</html>

In addition to examining the above code sample, you may want to look at the following complementary image, which depicts how this web page design is displayed on screen. Here it is:

And with this last screen capture, I'm finishing this article on utilizing generic "prepend-x" CSS classes with the Blueprint CSS framework. As always, feel free to edit and improve all of the code samples shown in this tutorial, so you can sharpen your skills.

Final thoughts

In this fourth chapter of the series, I discussed the use of "prepend-x" CSS classes with Blueprint CSS, which as you saw before, can be used for aggregating grid units to a selected column at its beginning.

It's perfectly possible to use these classes along with their "append-x" counterparts, in this way combining their respective functionalities. Nonetheless, this topic will be treated in the upcoming article of the series, so now that you've been warned, you won't want to miss it!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.