Controlling Column Padding with the Blueprint CSS Framework
(Page 1 of 4 )
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.
Introduction
Thus, if you wish to learn how to put all these handy features to work for you in a very short time, then you should read this series of articles. They'll provide you with a comprehensive guide to mastering the main characteristics offered by Blueprint CSS, by means of a hands-on approach.
Naturally, if you’ve been a loyal follower of this series and have already read all of its preceding articles, then at this point you’re familiar with constructing basic web page layouts using this framework. You'll also understand how to manipulate its background grid by way of the generic “appending-x” and “prepending-x” CSS classes, because in the earlier parts I covered all of these topics in detail.
Nevertheless, the examples developed so far demonstrated how to use those CSS classes separately, either for appending a certain number of grid units at the beginning or at the end of a column within the web document. Fortunately, Blueprint CSS allows you to combine the classes in the same design, which provides more control of the way that the columns are positioned on the web page.
Therefore, in this fifth installment of the series, I’m going to show you how to work with the “prepend-x” and “append-x” CSS classes simultaneously, extending their functionality a bit further. So, now it’s time to learn how to accomplish this with the Blueprint CSS framework. Let’s get started!
Next: Review: using the append-x and prepend-x CSS classes independently >>
More Style Sheets Articles
More By Alejandro Gervasio
