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

Poor Best

Rating:

/ 1

May 14, 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 16 cols</h2>

</div>

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

</div>

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

</div>

</body>

</html>

Simple to code and read, right? Now, if you try out the above example on your own browser, you should get an output similar to the following:

For the sake of clarity, I decided to keep the background grid visible, but naturally it can be easily hidden from display by removing the “showgrid” CSS class from the main “container” div. Now, have fun by tweaking this class and the ones that span grid units to produce different sorts of web page layouts. I used to do this when I’ve had problems sleeping, and it works like a charm.

Final thoughts

In this second part of the series, I went through the development of a two-column web page layout using the Blueprint CSS framework. Indeed, this process is extremely straightforward, meaning that you shouldn’t have major problems if you ever want to implement it when building your own web sites.

In the forthcoming article, I’ll be discussing the use of “append-x” CSS classes with Blueprint CSS. Now that you’ve been warned about the topics that will be covered in the next tutorial, you won’t want to miss it!

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.