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>

As you can see, it's extremely easy to aggregate a specified number of grid units to a selected column via the "append-x" classes. The above sample file shows how to perform this task by appending only one unit to the main sections of the web document, but naturally it's possible to add multiple units.

So far, so good. At this point, you've hopefully recalled how to utilize the generic "append-x" classes in Blueprint CSS, meaning that it's time to explore a few others provided by this framework. Thus, in accordance with the concepts deployed in the introduction, in the section to come I'm going to show you how to make use of the "prepend-x" classes.

To learn more about it, you'll have to click on the link below and keep reading.

Next: Pre-appending grid units dynamically >>