Home arrow Style Sheets arrow Controlling Column Padding with the Blueprint CSS Framework

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
Rating: 5 stars5 stars5 stars5 stars5 stars / 7
June 04, 2009
  1. · Controlling Column Padding with the Blueprint CSS Framework
  2. · Review: using the append-x and prepend-x CSS classes independently
  3. · Using the prepend-x and append-x CSS classes simultaneously
  4. · Finishing the sample web page layout with Blueprint CSS’ source files

print this article

Controlling Column Padding with the Blueprint CSS Framework
(Page 1 of 4 )


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!

blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials