Quick CSS-based grids with Blueprint CSS

Blueprint CSS is a pretty quick way to design complex grids with CSS. The idea is basic – include the necessary styles, and you get a container for your site with fixed with of 960 px. So it’s not a universal solution, but at least if you’re comfortable with the width of 960, Blueprint will prevent you from giving up and using tables.

There are just 3 compressed CSS files to include, the third one is only for IE support.

<link rel=“stylesheet” href=“css/blueprint/screen.css” type=“text/css” media=“screen, projection”>
<link rel=“stylesheet” href=“css/blueprint/print.css” type=“text/css” media=“print”>
<!–[if IE]>
  <link rel=“stylesheet” href=“css/blueprint/ie.css” type=“text/css” media=“screen, projection”>
<![endif]>

Then a simple container div will give you a centered area 960 pixels wide:

  1. <div class=“container”>
  2.   I am a container.
  3. </div>

You can attach any of your own styles to that container div, so I had an extra class that painted the container silver for better visualization.Blueprint CSS example - a single container

Let’s say we are going to need a header, a footer, a narrow right sidebar, a narrow left sidebar, and wide area in the center for content. Blueprint provides you with a bunch of classes ranging from span-1 for 1 column to span-24 for full 100% width. So for a full-width header and footer we create the following markup:

<div class=“container”>
   <!– header –>
   <div class=“span-24 header”>
   </div>
   <!– footer –>
   <div class=“span-24 footer”>
   </div>
</div>

What about the content area with 2 sidebars? With Blueprint CSS, your spans on one row have to equal to 24, so we can either do 1-22-1, or 2-20-2, or 3-18-3, and so on. 8-8-8 would get us a page equally divided into three divs. Let’s go the 2-20-2 route:

<div class=“container”>  <!– header –> 

  <div class=“span-24 header”>Header </div>

  <!– content>

  <div class=“span-2″>I am the left column</div>

  <div class=“span-20″>I am the main content area</div>

  <div class=“span-2 last”>I am the right column</div>

  <!– footer –>

  <div class=“span-24 footer”>Footer</div>

</div>

There’s another nuance to the markup above – the right sidebar has to have the last class. If I add some additional coloring to those divs, here’s a sample layout I’ve built with the code above:

Three - column layout with Blueprint CSSBut wait, there’s more. You can host divs inside divs without worrying about them overflowing. Let’s say we wanted to make the right column wider, up to 10 columns, which would make the central column become a span-12. And inside that right sidebar that’s a span-10 we wanted to host 2 divs per line, span-5 each, perhaps displaying an image, or a square ad. You can host two span-5 divs inside a span-10, or even a span-10 ad inside a span-10:

<div class=“container”>
   <!– header –>
   <div class=“span-24 header”>Header</div>
 
  <!– content>
   <div class=“span-2″>I am the left column</div>
   <div class=“span-12″>I am the main content area</div>
   <div class=“span-10 last”>
     <div class=“span-10 last”>Ads</div>
     <div class=“span-5″>I am some kind of ad</div>
     <div class=“span-5 last”>I am some kind of ad</div>
     <div class=“span-5″>I am some kind of ad</div>
     <div class=“span-5 last”>I am some kind of ad</div>
     <div class=“span-5″>I am some kind of ad</div>
     <div class=“span-5 last”>I am some kind of ad</div>
     <div class=“span-5″>I am some kind of ad</div>
     <div class=“span-5 last”>I am some kind of ad</div>
   </div>

  <!– footer –>
   <div class=“span-24 footer”>Footer</div>
</div>

With some colorful background we get this grid:
Alternating ads in a sidebar with Blueprint CSS

There’s a pretty good quickstart tutorial on Blueprint github Wiki page. There’s also an example page that implements a somewhat complicated grid:

A sample page grid with Blueprint CSS

  • Noneofyourbusiness

    nice one

  • http://www.sendgroupsms.com sms software

     

    Truly by this blue print CSS helps to provide good designs
    to the grids, thanks for sharing the code, great blog.

  • Nathan Todd

    This stuff just made my day!

  • Brandon Selby

    Great food for thought. 
    Just a FYI your pics are not working (page not found.