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.
What is Blueprint CSS?
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
-
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.
-
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.
-
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.
-
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).
-
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.
-
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
<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.
- '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.
- '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.
- 'quiet': This is a CSS class that changes the color of text to be that soft grey that you see in the sidebar text.
- '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.
-
'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:
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.
Related Posts
Check out some more great tutorials and articles that you might like
User Comments
( ADD YOURS )Mohsen December 22nd
nice and well explained tut.
thanks
rp December 22nd
using tags!! not sure if that’s the right way to use. also using class names like span-16, bad bad stuff, does this markup mean anything when it comes to using it on a mobile device? shouldnt markup be independent of where you use it
Ben Reid December 22nd
Thanks for the detailed look into Blueprint.
I’m not very keen on using these kind of frameworks / templates but this does look a cut above the rest.
I’ve been trying to write my own CSS framework. Using global classes that can be applied across multiple websites, despite the designs. Making sure that the styles that are all valid in both XHTML and CSS along with working across all browsers.
Maybe a good idea to have a look at what Blueprint have done then expand mine own ideas from there’s.
Nice article none the less.
Ben Reid December 22nd
*Making sure that the styles are all valid, both in the XHTML and CSS, along with working across all browsers.
That still doesn’t make sense - long day
Daniel Apt December 22nd
Thanks, I use 960gs, but this also looks interesting, however both do seem to work around the same idea, assigning classes to the divs
demogar December 22nd
I’ve been using the Blueprint framework for some projects I need to develop quickly but I don’t recommend it if you have enough time to build your own css code.
I really like some of its features like the forms, typography and grid classes!
Josh Drake December 22nd
This looks interesting - I think I’ll take a closer look at blueprint, and see if I want to start using it. Thanks!
insic December 22nd
ive used this framework. and its awesome. but i got lost sometimes.
Evan Riley December 22nd
Very well, explained tutorial, I’m more of a designer than a coder, this helped alot.
DKumar M. December 22nd
This a good framework for designer and coder too…. nice writing Jesse.
Sumesh December 22nd
That’s the second time in as many days that I’m reading about Blueprint - I think I will check it out.
The main reason for me would be that I can spend more time on details and less time on the structure (using grid styles) - the structure and its various nuances is one area where I go slowly.
Kevin Quillen December 22nd
I don’t know. I still prefer to do it all myself just as quickly.
The thing is, design scope should never change. These things should be well laid out in your contract and statement of work. Once a design is ‘approved’- the client shouldn’t be able to come back at a later point in the project and request changes so major that it would affect the layout of the website.
Once you and the client reach an agreeable design, there really shouldn’t be a reason for major revisions.
One thing though, how do you know what the difference is between span-x and span-y without constantly referring to the css document?
Also, sans the ie.css, cant these all be in one file?
M.A.Yoosuf December 22nd
thank you, but i always prefer to code from sketch, well, I’ll try this out al least once.
M.A.Yoosuf
http://yoosuf.awardspace.com/
Gelay December 22nd
Love Blueprint CSS. Hasn’t failed me yet.
Jonathan Solichin December 22nd
Very interesting. Although I am a fellow 960gs user. Is there a pro and con between the two?
Ryan December 22nd
Those classes are nasty. CSS isn’t difficult, what ever happened to learning your craft and doing it properly? Especially if it’s for a client paying money!
antpaw December 22nd
agree @ ryan
ByResul December 22nd
Very good thanks
Michael December 22nd
Thanks for pushing me over the edge into d/l’d and implementation.
I’d looked at and read previously about BP, and other css frameworks, but like quite a few of the dissenters above, was left with a bit of pimpishness.
The goal is to work smarter, not harder.
With that said, and your article, I’ll be giving BP a run.
The only dissent I have with your article is your choice to let your captures remain so bloated. I grabbed one just for sh*ts&g*ggles, and in a second had slimmed it to 22 versus 85k.
Call me old school I guess.
Thanks again for your evangelizing of BP.
ML.
Daniel December 22nd
Great tutorial, Jesse!
Furley December 22nd
ive sort of built my own css framework over the years. when it come to forms i like to use uni-form for basic formatting. its really a complete solution
Zach Dunn December 22nd
As much as I value hand coding, these frameworks do cut down development time spent. Especially with cross browser issues.
Great outline!
Jesse December 22nd
I agree with everyone who has said that if you have a design layed out with a client and you know that it will not change, you may not have a need for something like a grid framework.
Just don’t forget about the other useful parts of BP, resets.css and typography.css. If you don’t have a good working CSS template for new projects, why re-invent the wheel?
Kevin: for the span-x classes, x just refers to the number of columns that that element should occupy.
By default, BP gives you a screen.css and print.css file, but yes, you should be able to combine those into one.
Micheal: Thanks for the tip
Amr December 22nd
I’ve used this framework, and its great.
always great!
Brian Cray December 22nd
Blueprint.css is great. PXtoEM.com uses Blueprint.css’s typography.css file to generate a CSS file after you convert PX to EMs.
Scott December 22nd
An important thing to bear in mind when using these css frameworks, is to not forget that they’re frameworks! A few people here have commented on the non-semantic class names, but if you use blueprint properly you should only use ’span-14′, ‘last’, ‘prepend’ etc during development. When you’re happy with your layout you should compile all the separate blueprint classes and give them meaningful names in your mark up and stylesheets.
And to be fair to Jesse, he does mention this briefly in the summary - “This tutorial intended to show you how Blueprint CSS can be used to lay the groundwork for your next project”
yosrysabry December 22nd
It will Help designers to work faster and simpler projects..
thanks tut ..
Dan December 22nd
Good explanation
Page Gardens December 22nd
Fantastically useful.
Mike December 22nd
Check out BlueTrip…the best of Blueprint and many other frameworks. http://bluetrip.org
Andy Gongea December 22nd
CSS Frameworks are good in development phase. But overall they are bad.
http://www.gongea.com/the-debate-for-css-frameworks/
NetOperator Wibby December 22nd
I think that with this I can try making web pages from scratch. I’ll check this out.
Chris Gunther December 22nd
I’ve heard a lot about CSS frameworks but never actually used one on a project. I may just have to try one once to see what all the fuss is about.
Melvin Walls December 22nd
Great in depth explanation of Blue Print! Thanks
Tanner Hobin December 22nd
Great tut!
I’ve been using the framework for a couple months now and really like it for rapid development.
This cheat sheet was very handy starting out. http://tinyurl.com/2r8kyy
Wazdesign December 22nd
Hey I will gonna use this Frame work soon, Keep posting time saving Layout.
desu December 22nd
Thank you very much for tut
franky December 23rd
Just use tables….
Seriously, css frameworks are bad bloated, and full off presentational and meaningless classes blueprint is one of the worst.
macias December 23rd
i have to start work with blubprint soon..thx
leksa December 23rd
i have used blueprint mostly in my WP design. More easy for me to manage the site..
this tuts really simple and i can enjoy it well…
thx Jesse
jonhas December 23rd
Thanks, this article was great. Now I know something I didn’t before.
I can’t wait to use BP on my next layout.
kiran December 23rd
Very useful information.Thanks for sharing.
Robin December 23rd
There’s also another framework that is quite popular and behaves much in the same way, and that is 960.css http://www.960.gs/ The difference here is that it works for a 960px width as 12/16 columns.
Frameworks are good for fairly rapid deployment once you get comfortable with them. I still only use them occasionally.
@Ryan and others regarding use of classes…
The typical method of semantically marking up your HTML would come in the method of id=”semanticName” and class=”frameworkClass”
Chris Robinson December 23rd
I really am I strong believer in knowing your craft and using a CSS framework is taking the easy way out IMO, it’s just a fast to write your own CSS if you know what you’re doing.
A few quotes from Eric Meyer on frameworks:
“Which framework is right for you? None of them are right for you, it all depends on the project.”
“If you’re going to use a framework it should be yours, something you created.”
Mohamed December 23rd
Awesome , Thanks Jesse .
Can you write about Grid Design best practices .. etc
Harry M December 23rd
Fantastic, but I prefer 960 CSS Framework
Yannick De Smet December 23rd
Hmm, it’s helpful for a lot of people, but I intend to name my elements a bit more semantic. Nice tutorial
Ben December 23rd
Ive been using BP for a while now and I love it. However, I dont really consider it a timesaver. The CSS box model is pretty quick too
feir December 23rd
960 is also a choice.
Baz L December 24th
Not sure why the Framework haters still keep commenting on these posts.
I’ll agree, that the best framework is one you build yourself. However, in the absence of that reusing tried and true methods is one way to save yourself a lot of frustration and get your website to not suck on most browsers.
Frameworks have an audience. Recently, I’ve fallen into this audience, since I “dabble” in CSS.
Sometimes, it’s just not worth the time and effort to deal with browser compatibility issues and CSS hacks.
BTW. Just because it’s a framework, doesn’t mean you can’t strip stuff from it.
I only use the typo. form and grids from Blueprint. And on the grids, only the containers and spans.
And enough with the semantics. It’s a framework, you can’t have it both ways.
Jenna December 24th
agrees with ryan
Adam December 24th
BlueTrip ( http://bluetrip.org/ ) also looks interesting - it’s Blueprint, but merged with some others, too.
I’ve been using Blueprint for a while now, and it gets intuitive enough to think in terms of a 40px pretty quick, to where I never have to use bp’s span classes anymore; I just write semantically.
Ahmad Alfy December 24th
Thanks for the tips, I always wanted to check CSS frameworks but never had the time. That quick introduction will give me something to play with in the next hour!
I believe I will be using BP for my next projects.
Thanks for the cheat sheet Tanner
Thumb up!
Michael Grech December 24th
I wish I would have used this to build my site!
Josh N. December 25th
“frameworks are bad!”
Then you better stop using Moo Tools, Wordpress and all those other “bloated” frameworks and write your own code.
HKS December 26th
Thanks for enlightening me…I’d never heard of it…
It would be useful to see a demo of the framework implementing slightly more complex layouts - eg rows spanning multiple columns…
cardeo December 26th
We recently rebuilt our corporate site (www.yoursole.com) on the blueprint framework and it worked great. We had over 100 pages to implement so it was very helpful for keeping our layouts on the grid. I fought with the pre-defined styles for awhile until I realized I should just sit back and let blueprint do the work. I’d definitely recommend it to anyone
Hasan Tayyar BEŞİK December 27th
Thkans, good and needed article
yes, css don’t need a whole framework. css is not complex.
Yizi December 27th
Amazing tutorial, keep it up!
Mason Sklut December 28th
I like what it does — but for customized blogs or websites, grids don’t always cut it.
Eray Alakese December 28th
Thanks for this article
Ofcourse, fancy fonts doesn’t compatible with Turkish fonts
agilius December 29th
The reset file is the one I am 100% that I am going to use in all my future projects.
Web Design December 30th
Nice article, good resources for web design who interested on CSS design.
MikeM December 30th
Great example of the blueprint css in use is our newly redesigned web site @ blueprint design studio. Another great post! Thanks.
Tudor January 4th
how’s blueprint css compared to yui ?
I’m a yui user, for now.
Ivor January 7th
Look at this SlikSprite plugin, famfamfam icons applied to Blueprint http://www.ajaxbestiary.com/Labs/SilkSprite/
Add Your Comment
( GET A GRAVATAR )Your Name January 9th
Trackbacks