Saturnboy
 11.3

The Magic of Blueprint CSS

,

I’m a bad designer. No amount of ego, or sugary coating can change that fact. Whenever I hang out with my coding buddies to talk design, they actually think I might border on decent. It’s either midget aliens piloting their husks or their brains have been pickled from over-exposure to Hibernate mapping files. Thankfully, I’ve been around some real designers and they know the truth…if it’s brown and smelly it must be a turd.

I do, however, know what I like. And when I’m build a blog, I like to have a header, footer, main content area, and a sidebar or two. Since I need all the help I can get when it comes to website design, I always try to leverage what others have done. In the case of this blog’s design, I’m using Blueprint CSS, a bad ass grid-based CSS framework with smart typography defaults.

But before I dig into the details of my design, I want to start simple. So imagine we want build a website with your basic two-column layout.

layout

Coding a basic layout like this one is almost too easy with Blueprint:

<div class="container">
  <div id="header" class="span-24">header</div>
 
  <div id="content" class="span-18">content</div>
  <div id="sidebar" class="span-6 last">sidebar</div>
 
  <div id="footer" class="span-24">footer</div>
</div>

Add a pinch css to provide some color and some substance:

#header  { background-color:#cc6; padding:30px 0; text-align:center; }
#footer  { background-color:#c6c; padding:30px 0; text-align:center; }
#content { background-color:#6c6; padding-bottom:60px; }
#sidebar { background-color:#6cc; padding-bottom:60px; }

Now, put it all together, and you get this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple Blueprint Layout</title>
 
<link rel="stylesheet" href="blueprint/screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="blueprint/print.css" type="text/css" media="print" />  
<!--[if IE]>
<link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection" />
<![endif]-->
 
<style type="text/css">
#header  { background-color:#cc6; padding:30px 0; text-align:center; }
#footer  { background-color:#c6c; padding:30px 0; text-align:center; }
#content { background-color:#6c6; padding-bottom:60px; }
#sidebar { background-color:#6cc; padding-bottom:60px; }
</style>
</head>
 
<body>
<div class="container">
  <div id="header" class="span-24">header</div>
 
  <div id="content" class="span-18">content</div>
  <div id="sidebar" class="span-6 last">sidebar</div>
 
  <div id="footer" class="span-24">footer</div>
</div>
</body>
</html>

Nothing much to see, all the grid and typography magic is hidden inside Blueprint CSS files. It actually makes the final html code look lame. View the results, and you can judge for yourself. Next, I’ll build an original design and continue digging into Blueprint.


Comments

Jean Pinto

6.12.2010

1

Your website is beautiful and you’ve helped me no end!! This poor old grandmother is self taught (obviously) and has friends who want me to help them with web sites….yeesh
Thanks

6.24.2010

2

I’ve just begun to use blueprint and I enjoy it as well, however, how do you handle the idea of equal height columns? your example layout looks great until you add content to either the main area or sidebar. one will grow beyond the other.

I haven’t found a solution to this, have you?

6.24.2010

3

@Josh: I’m not exactly sure what you mean by equal height columns. This blog includes a sidbar plus content area with a appearance of eqaul height by using images & color. You can also use padding or minHeight to force columns to be equal.

If you are talking about text flow (like a newspaper), then you need to get deep in the weeds with javascript or CSS3 (see here).

6.24.2010

4

sorry didn’t mean to be unclear, I meant equal height without using faux columns with a background image. in your example, if you add content to either the main area or sidebar so it grows, the columns no longer look even.

I was hoping there was a built-in mechanism for equal height columns, but it turns out faux-columns was a lot easier with blueprint than my current hack setup, so it’s still a major improvement :)

© 2017 saturnboy.com