[zz]A Closer Look At the Blueprint CSS Framework

[my own word]转载还是不转载，这个问题似乎纠结了我很久，有一段时间甚至将我所转的自己喜欢的文章全部删除了，因为我忽然觉得我自己也要为这种信息爆炸负责；但是一方面我发现自己的力量微不足道，另一方面我突然觉得如果是有用的信息好的信息爆炸的话也未尝不是件好事，只是深入继续探讨下去又会有人追我（如何定义好），没办法我还是活在当下，向关注这个领域的人推荐些我喜欢的东西吧，我想这应该是对他们有帮助的东西。真心的希望我不曾浪费来阅读我博客的读者的时间，如果有这样的博文，请务必转告我将其删除，万万不可让其祸害众人。

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.

Author: Jesse Storimer

I'm Jesse. I live in Ottawa, Canada. I'm currently interested in Rails and all things that make web development easier. I have a blog too.

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:

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.

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.

Break it Down

The head of the document

view plaincopy to clipboardprint?

2. <meta http-equiv="Content-type" content="text/html; charset=utf-8">
3. Book Haven
5. <!-- Framework CSS -->
6. <link rel="stylesheet" href="blueprint/screen.css" type="text/css" media="screen, projection">
7. <link rel="stylesheet" href="blueprint/print.css" type="text/css" media="print">
8. <!--[if IE]><link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection" /><![endif]-->
10. <!-- Import fancy-type plugin. -->
11. <link rel="stylesheet" href="blueprint/plugins/fancy-type/screen.css" type="text/css" media="screen, projection">

    
      <meta http-equiv="Content-type" content="text/html; charset=utf-8">Book Haven<!-- 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">

This is how a typical 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

    
      
 
 


        
  
  
 
   
 
  

        
  
  


  
  
 
   
Get opinions on your latest novel, and read what other people are writing about.
 
  

        
  
  

The most important thing to note about this code: your grid must be surrounded by a 
  
  

    with a class of 'container' otherwise it will not display as a grid. The 
   
 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
 
   
 
   
view plaincopy to clipboardprint?
 
   
 
    
 
     
 
     
 
    
Featured Book: "The World Without Us"
 
    
 
    
 
    
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
 
    
 
 
    
 
 
    
 
 
    
 
    
 Cras sagittis. Fusce porttitor felis sed massa. In hac habitasse platea dictumst. 
 
    
 
 
    
 
 
    
 
     
 
    
 
     
 
     
 
    
Upload a Book
 
    
 
    
 Nam vitae tortor id ante sodales facilisis. 
 
    
 
 
    
 
 
   
 
  

  
  
  
 

  
  
 
   
 
   
  
  
Write a Review

  
  
  


  
  
  
 Nam vitae tortor id ante sodales facilisis. Mauris ipsum.