Home arrow Style Sheets arrow Changing Grid Units in the Blueprint CSS Framework
STYLE SHEETS

Changing Grid Units in the Blueprint CSS Framework


Among the dozens of CSS frameworks available these days on the web, there’s one that stands out from the rest due to its impressive features and flat learning curve. In this particular case, I’m speaking of Blueprint CSS, a robust CSS library created over the last year by Oval Frihagen Bjørkøy that permits you to build all sorts of clever web page layouts by using a clean, grid-based approach.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 1
May 14, 2009
TABLE OF CONTENTS:
  1. · Changing Grid Units in the Blueprint CSS Framework
  2. · Review: constructing a three-column design with Blueprint CSS
  3. · Building a two-column web page layout
  4. · Completing the web page layout

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Changing Grid Units in the Blueprint CSS Framework
(Page 1 of 4 )

Introduction

So, if you’re interested in learning how to include this CSS framework in your design toolbox and take advantage of its remarkable functionality, then you should start reading this series of articles. In its different parts you’ll be provided with a comprehensive guide that hopefully will get you started using the numerous features that comes packaged with Blueprint CSS.

Naturally, if you already read the first chapter of this seven-part series, then you're probably familiar with using Blueprint CSS at a basic level. In that article I explained how to use the framework for constructing a simple web page layout made up of three columns and the classic header and footer sections.

Apart from the rudimentary characteristics of this sample layout, it came in handy for implementing some core features offered by Blueprint CSS, such as displaying and hiding its background grid, in addition to making use of its “span-x” classes for dropping columns quickly across the web page.

However, I’m only scratching the surface when it comes to leveraging the functionality of this framework. It comes bundled with many other handy features that need to be explored more deeply. With that idea in mind, in this second installment of the series, I’ll be demonstrating how to develop a two-column design with Blueprint CSS by tweaking its column units.

The experience will be quite educational, trust me. So please, start reading now!


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- 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...
- CSS3 Animated Image Gallery: Transitions
- CSS3 Properties: Fixed Heights with box-sizi...
- CSS3 Properties: Altering Strokes and 3D Eff...
- CSS3 Properties: Text-Stroke
- CSS3 Transitions: Width and Height Properties
- Creating a Drop Down Menu in CSS3
- Intro to CSS Transitions

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



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