A Closer Look At the Blueprint CSS Framework

Blueprint is a CSS framework that can save you time and headaches when working on any project that involves HTML and CSS, whether it be with Rails, PHP, or just laying out an HTML page. In this tutorial you will get a look at the inner workings of Blueprint and we’ll take a look at demo application that uses Blueprint to get a better idea of how to use actually use the framework.

1. What is Blueprint CSS?

If you are like me, as in more of a developer than a designer, then you are familiar with the process of starting a new project and not knowing what to do with your CSS. You know that your design will likely change as the project goes on, but you want to have a nice looking design from the beginning. So you spend some time writing some CSS that works in Firefox and Safari, oh wait, don’t forget IE, right, right. Then you write some HTML that you think you will use, and work at getting all of the spacing to look right. Great! Finished! Now, three days later, the requirements for your project have changed and you find yourself redesigning the layout again. Hmm…

Now, even if you are a rockstar designer who already has all this CSS stuff figured out, or if you aren’t worried about how your layout will change over time because you are working from a PSD template or something, that doesn’t mean that there is nothing to learn here. Blueprint can still provide you with some tools so you can…

Spend your time innovating, not replicating.

This is the motto advertised on

blueprintcss.org

And I think that this is exactly what Blueprint accomplishes. Blueprint provides a solid foundation to build your project on top of. It does this by providing sensible defaults across all browsers, nice-looking default typography, a grid framework, nice-looking forms, and a print stylesheet built with printers in mind. Let’s take a look at how Blueprint achieves this:

2. Blueprint Source Files

1. 
   reset.css
   
   This file sets sensible defaults across all browsers. I’m sure we are all familiar with starting a new project, going to our main CSS file and adding a few default styles to the body selector, such as ‘margin: 0; padding:0; font-family: Helvetica, Arial, sans-serif;’ or something along those lines. This is what reset.css does, and more. It resets default styles for spacing, tables, fonts, etc. so you can work from a clean slate.

2. 
   typography.css
   
   This file sets up some nice default typography. I won’t explain all of the styles but I will say that this is my favourite parts of Blueprint because, to me, there is nothing more discouraging than trying to lay out a page and seeing some black Times New Roman text jammed up into the top left corner of a page. Ugh. Blueprint’s typography.css keeps me from ever seeing that again. The typography.css also sets up some really nice styles around font sizes, line-heights, default styling of tables, etc.

3. 
   grid.css
   
   This file handles the grid layout portion of blueprint. We will have a look at the classes that it uses in a bit. One important thing to note with the grid, by default it uses a width of 950px, with 24 columns each having a width of 30px and a 10px margin between columns. This may sound constrictive, but if this is not the layout you want, you can always use a Blueprint Grid CSS Generator to generate a custom grid layout. If this last paragraph completely confused you, please read on as we will build a layout using a grid in a bit. If you are not familiar with CSS grid layouts and want some background, Raj’s
   
   Which CSS Grid Framework Should You Use for Web Design?
   
   is a good intro.

4. 
   ie.css
   
   Blueprint supports IE, so of course it needs it’s own specific stylesheet to take care of those little details that makes IE so special :) The nice thing is that Blueprint does handle this for you, so all of its core styles will work in all of the major browsers (I think it even supports IE 5).

5. 
   print.css
   
   This file sets some default print styles, so that printed versions of your site looks better than they usually would. The print.css file also has an option where you can fill in your domain name so that relative links are shown in parentheses behind the text link in the printed version of your page. Without filling in this section only remote links will print properly. Check out the bottom of the print.css src file, linked above.

6. 
   forms.css
   
   This file provides nice looking default forms as well as classes for error notifications or even flash notifications if you are using something like Rails. Since this is the only section I will not cover in more detail, here is some of the default form styles in use:

   

Does this mean that I have to include six different stylesheets?

No. Blueprint comes with three compressed stylesheets for your HTML pages, screen.css which contains #’s 1-3 & 6 from above, print.css, and ie.css. The reason that I outlined the different parts of the framework above is because the framework is modular, each of those pieces works independently of each other. The nice thing about this is that if you decide that one aspect of Blueprint, such as a grid layout, doesn’t fit your project but you still want the benefits of reset.css and typography.css, you don’t have to use the the grid but the other styles will still work.

3. Let’s Build a Layout with Blueprint

This site is an idea that I had kicking around in my brain so I thought I would bring it to life here. It’s a site where people who like to write novels as a hobby can go to review novels from other hobby writers as well as upload their own to be reviewed.

I realize that all of you rockstar designers who stuck around at the start are now about to leave after taking a look at my design, but the interesting thing about this design is that I did not write any CSS for it. This design uses only Blueprint styles and while it’s not the end of all designs, it provides a flexible, nice-looking design for my project. Since my design is likely change, Blueprint makes it easy to update my layout, and when my site is fully functional, I can think about adding some of my own styling to make things look prettier.

4. Break it Down

The head of the document

    <head>
      <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
      <title>Book Haven</title>

      <!-- Framework CSS -->
      	<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]-->

      	<!-- Import fancy-type plugin. -->
      	<link rel="stylesheet" href="blueprint/plugins/fancy-type/screen.css" type="text/css" media="screen, projection" />
    </head>  
  

This is how a typical <head> tag should look when you are using Blueprint. You need to include the framework’s CSS files, which consists of screen.css, print.css and ie.css.

A great thing about Blueprint: it’s just CSS, so it can be overridden like any other CSS. This is how Blueprint plugins work. In this example I am using the Blueprint fancy-type plugin which offers some fancy typography styling. You can see that I’ve linked to the fancy-type CSS file below the framework’s CSS files, so the fancy-type CSS has the ability to overwrite styles defined by the framework. To this end, there are

several BP plugins available

which simply overwrite aspects of the framework or add new styles for you to use.

Lastly you should include your CSS file where you could overwrite styles from the framework and add your own styling to the page.

The Page Header

    <body>
      <div class="container">

        <div id="header" class="span-24 last">

          <h1 id="book_haven"><img src="images/header.gif" alt="Book header image" id="header-image" /></h1>
        </div>

        <hr />
        <div id="subheader" class="span-24 last">
          <h3 class="alt">Get opinions on your latest novel, and read what other people are writing about.</h3>
        </div>

        <hr />  
  

The most important thing to note about this code: your grid must be surrounded by a <div> with a class of ‘container’ otherwise it will not display as a grid. The <hr /> tags are used by Blueprint to separate sections of your page vertically. The ‘alt’ class is brought to you by the fancy-type plugin and provides a nice way to spice up some text (can be applied to any text element).

Main Content

    <div class="span-17 colborder" id="content">
          <h3 class="loud">Featured Book: "The World Without Us"</h3>
          <p>
            <img class="right" src="images/world-book.gif" alt="featured book" />
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
          </p>
          <p>
            Cras sagittis. Fusce porttitor felis sed massa. In hac habitasse platea dictumst.           
          </p>

          <hr />
          <div class="span-8 colborder">
            <h4 class="prepend-5">Upload a Book</h4>
            <p>
              Nam vitae tortor id ante sodales facilisis. 
            </p>      
          </div>

          <div class="span-8 last">
            <h4 class="prepend-5">Write a Review</h4>
            <p>
              Nam vitae tortor id ante sodales facilisis. Mauris ipsum. 
            </p>      
          </div>
        </div>

        <div class="span-6 last" id="sidebar">

          <div id="recent-books">
            <h3 class="caps">Recent Books</h3>

            <div class="box">
              <a href="#" class="quiet">Hygiene</a>
              <div class="quiet">Nov. 29, 2008</div>
              <div class="quiet">by Craven</div>
            </div>

          </div>

          <div class="prepend-top" id="recent-reviews">
            <h3 class="caps">Recent Reviews</h3>
            <div class="box">
              <span class="quiet">Thor reviewed Hygiene</span>
              <div class="quiet">Rating: 4/5</div>
              <a href="#" class="quiet">Read this review</a>
            </div>

          </div>
        </div>

        <hr />
    

There is lots of important stuff in this code snippet! Let’s start at the top with <div class=”span-17 colborder”>. This tag declares the largest outlined div on that page, the one that contains the Featured Book section as well as the two smaller sections below. The class ‘span-17′ relates to the Blueprint grid layout. It declares that the width of this div should span 17 of the 24 columns on the page. The other class being used, ‘colborder’, is short for column border and tells Blueprint to put a border to the right of this div between it and the sidebar.

Important: using the ‘colborder’ class actually takes up an entire column. Since our main div is using 17 columns (span-17), you would expect that the sidebar could occupy 7 columns (since 17 + 7 = 24, the number of columns on our page), but since the ‘colborder’ property takes up a column to itself, this leaves only 6 columns left for the sidebar div to occupy (17 + 1 + 6 = 24).

Before we get to the sidebar we need to look at those two smaller div’s, the ones titled ‘Upload a Book’ and ‘Write a Review’. This is actually one Blueprint grid nested another Blueprint grid. Since the inner grid is nested inside a div spanning 17 columns, the max width for this grid, instead of 24, is 17.

So, the first div has the classes ‘span-8′ and ‘colborder’, meaning it’s width will span 8 columns and it will have a border to the right. The second div here has classes ‘span-8′ and ‘last’. This is an important part of the Blueprint grid framework. The rightmost column in a grid must have use the ‘last’ class. This tells BP that this is the last column in this grid and it doesn’t need to make space for any more. Notice how we had room for 17 columns to begin with, each of the divs spanned 8 columns and the ‘colborder’ property took up the last column (8 + 8 + 1 = 17).

OK, back to the sidebar. The sidebar div has classes of ‘span-6′ and ‘last’. I’m sure you guys have caught on now to how these classes work. This sidebar completes the grid that the main span-17 div began. In case you didn’t notice, the ‘span-#’ class can take any number between 1 and 24, unless you decide to use a bigger grid, in which case the ‘span-#’ class can take any number so long as the number is less than the total number of columns in your grid.

This is about the simplest HTML I could come up with to demonstrate the grid.

    <div class="container">
          <div class="span-24">
              Header
          </div>
          <div class="span-4">
              Left sidebar
          </div>
          <div class="span-16">
              Main content
          </div>
          <div class="span-4 last">
              Right sidebar
          </div>    
      </div>    
  

Let’s look at a few more of the CSS classes that we used in the layout.

1. ‘caps’: This class is used in the sidebar titles. It is brought to us by the fancy-type plugin and provides nice styling for capitalized titles.
2. ‘box’: This is a great one for displaying list items. It easily distinguished these items from the rest of the page and provides a nice margin between elements and nice padding for the elements inside.
3. ‘quiet’: This is a CSS class that changes the color of text to be that soft grey that you see in the sidebar text.
4. ‘prepend-top’: This one is used on the ‘Recent Reviews’ section of the sidebar. It simply applies a margin of 1.5em to the top of the element. There is a similar class called ‘append-bottom’ which has the same effect on the bottom of an element.
5. ‘prepend-5′: I am using this class to push the titles in the smaller div’s to the right. In Blueprint there are several classes for spacing: prepend, append, pull, and push. Prepend and append add padding to the left and right, respectively. Pull and push add a margin to the left and right, respectively. Once again, you can do as much appending, prepending, pulling, and pushing as you want so long as you don’t use a number bigger than the total number of columns in your grid (such as prepend-25 in a grid with 24 columns).
   

If you are not familiar with the CSS box model and don’t know the difference between padding and margin, here is a a brief lesson. In CSS, padding adds space within the borders of the element and actually increases the size of the element. For example, if you have a table with borders and you add padding to that table, it will actually push the borders away from the table. Margin, on the other hand, adds space outside of the border and does not increase the size of the element. This may have the effect of push other elements away from the current one or moving the current element on the page. Here is a great image to demonstrate the CSS box model:

5. Summary

This tutorial intended to show you how Blueprint CSS can be used to lay the groundwork for your next project, or at least take some of the weight off of your shoulders around resets and typography. Also, if you are using Blueprint with Rails, check out their repository on Github as they have some features that allow you to easily integrate and configure Blueprint to work with your Rails project.

The best thing about Blueprint is that it’s just CSS. It’s all CSS. So if you are interested in Blueprint go check out the source and if you have any knowledge of CSS you should be able to understand how it all works. Blueprint also is not a very large code base, it probably has less CSS than most of us use on a typical project. You can even read the source in your browser over at the Blueprint repository on Github.

I’ll leave you with a few resources on Blueprint:

• The Blueprint web site is at blueprintcss.org. This is the easiest place to download the framework.
• By default Blueprint uses a fixed layout, if you are in favour of liquid layouts here is a plugin that you will allow Blueprint to function with a liquid layout.
• More Blueprint plugins

• Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.