STYLE SHEETS

Controlling Column Padding with the Blueprint CSS Framework

Blueprint CSS is a robust framework that lets you speed up the creation of complex web page layouts by using a grid-centric approach. It's great for distributing the contents of a web site in a harmonious, eye-pleasing fashion. The framework includes a number of source files that help you perform certain common designing tasks, such as resetting styles for most web page elements, styling text both for screen and printers, and much more. This is the fifth part of a seven-part series that explores the capabilities of the Blueprint CSS framework.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 2

June 04, 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 8 cols</h2>

</div>

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

</div>

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

</div>

</body>

</html>

Now the above web page layout has been completed. Of course, this is simply a basic example aimed at showing how to employ the “append-x” and “prepend-x” CSS classes in Blueprint. But having at your disposal all of the code samples developed in this tutorial, it should be fairly easy for you to modify them to gain a deeper understanding of how these classes can be used for positioning columns in perfect alignment with the background grid.

Final thoughts

Over this fifth chapter of the series, you hopefully enhanced your understanding of the Blueprint CSS framework, since you learned how to use its generic “prepend-x” and “append-x” CSS classes to create evened padding around selected columns of a web document.

In the forthcoming part, I’m going to explain how to push columns to the left of a web page by using another handy class bundled with Blueprint CSS. So, here’s my final recommendation: don’t miss the next article!

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.