Blueprint CSS Framework – Learn The Basics
Written by Stefan Vervoort on February 1, 2009Because of the success of the latest “Learn the Basics” article about the 960 CSS Framework, I feel there is a need for detailed tutorials on how to start with CSS Frameworks. It’s not uncommon that people don’t know the basics before they start. It’s time to change that.
In the mentioned article, many people commented they like the Blueprint CSS framework more than the 960.gs. They feel it gives them more flexibility and works easier. That’s why I took a better look at this CSS framework and decided to teach you exactly how the basics work.
This tutorial will only gives you the basics of the Blueprint CSS framework. You need to understand CSS before you should be using CSS frameworks.
The Basic Principles
Before you can really develop with this framework you need a few things up-front.
Which files do you need
We need to download the CSS framework first. You can download the files here. Once you have opened your .zip/.rar, you will notice a lot of files. That’s because this isn’t your basic CSS framework alone, there are many other features we won’t discuss today.
We only need screen.css, print and ie.css, which you can find in the blueprint folder.
Do not edit templates
I suggest you don’t edit these CSS files, because they are part of a template. A template that might gets a few updates in the future and if you add customizations there, you won’t have an easy updating procedure.
How to add Blueprint to your site
Adding Blueprint only requires these lines of codes. You need to insert these between the <head></head> tags of your site.
<link rel="stylesheet" href="screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="print.css" type="text/css" media="print"> <!--[if IE]><link rel="stylesheet" href="ie.css" type="text/css" media="screen, projection"><![endif]-->
But, of course, you want to add some custom styles too. We have to create another separated CSS file that does that. For example, you can call that file style.css. Use this line of codes to add this file to your site.
<link rel="stylesheet" href="style.css" type="text/css">
What Can Blueprint Do?
We have a number of classes in the blueprint stylesheets we can use. I will explain the most important ones for our grid layout first.
Container
We have to start with a container. By default, this container is 950px width and is centered in the middle of your screen. You can add 24 columns in this container, with a width of 30px per column. A margin of 10px is added to the right side of the column.
<div class="container"></div>
Columns
There are 24 columns you can choose from. For example, you can choose a layout with 4 boxes with boxes composed of 4, 12, 4 and 4 columns. Here’s the structure:
<div class="container"> <div class="span-4">Sidebar</div> <div class="span-12">Content</div> <div class="span-4">Photos</div> <div class="span-4">Sponsors</div> </div>
As you can see, blueprint uses the span-x class to determine how many columns you need to add.
Margins.
As you all know, every column in blueprint has a margin-right of 10px. When we leave the structure this way, the last column in the layout will have that margin as well. We don’t need it there because it’ll break our layout.
Blueprint has a solution for that in the form of the .last class. Where you add that like this, your layout will render perfectly.
<div class="container"> <div class="span-4">Sidebar</div> <div class="span-12">Content</div> <div class="span-4">Photos</div> <div class="span-4 last">Sponsors</div> </div>
Styling Your Columns
Now that you know how to build your structure with Blueprint, it’s time to add some padding and maybe a background color. So how are we going to do that when we can’t touch the original screen.css and print.css? Simple. Remember the style.css file I asked you to make?
First we have to do something about our structure. Due CSS specificity an ID is more important than a Class and we are going to add ID’s to all our boxes. When we style ID’s, we will overrule the styles the classes give.
<div class="container"> <div id="sidebar" class="span-4">Sidebar</div> <div id="content" class="span-12">Content</div> <div id="photos" class="span-4">Photos</div> <div id="sponsors" class="span-4 last">Sponsors</div> </div>
We can now open up our custom stylesheet (style.css or any other name) and style the ID’s we have given here. If you don’t understand what I mean, I suggest you start learning CSS from scratch first.
As an example, I have made a small layout and added some style myself, check it out.
More Practices
Blueprint is much more than all the above. For example, you can add classes like .hide (to hide an element), .highlight (to give an element a specific background and highlight the text), add borders, and the default styles for typography and forms are pretty nice as well.
Position classes are added as well, but I haven’t really worked with that yet. I will post a follow-up article on the Blueprint CSS framework once I have experienced to this CSS framework’s full potential. You can get a message when this article arrives by subscribing to the RSS feed or via email.
More Reading About Blueprint CSS Framework
There are numerous articles, tutorials and site out there, so if you want to learn more about this framework, check out the links below:
- Blueprint CSS Homepage
- Blueprint’s demos
- Blueprint’s Wiki
- BlueprintCSS 101
- A Closer Look At The Blueprint Framework
This article is written by:
Name: Stefan Vervoort
URL: http://www.divitodesign.com
Description: I am a 18-year-old webdesigner and blogger from Waalwijk, the Netherlands. I also blog at WPTOY and work at DivitoMedia.
Loading ...
Thx for starting this
Nice article, however I feel that you can and should edit the template, everyone has their own preference, for instance I make the body default font size 62.5% so 1em = 10px I like working that way. As far as upgrading the framework later, I would never suggest doing so on a production site since one minor change could throw off your design that you relied on what they changed. That’s just my opinion, but thank you for posting this article
Stephan, you can reset that in your style.css file, right? That way you never have any problems with upgrading.
Stefan, You could. However then you’re adding / overwriting what I feel is unnecessary code. But again this is just how I work, I guess I use Blueprint as more of a starting point.
But your right, if you wanted to keep it in a way so you can upgrade then yes, you could just overwrite it
(Sorry about the double post, I accidentally hit submit comment the first time
)
Hehe, no problem, I just think it’s more important to leave the Grid file intact. Thank you for your comment!
I love your article. It’s a good start point to understand how BluePrint works. Congrats!
[...] Blueprint CSS Framework – Learn The Basics » DivitoDesign Nice Intro to Blueprint (tags: design frameworks webdesign blueprint tutorial css howto framework tutorials) [...]
Love BP
[...] Blueprint CSS Framework – Learn The Basics » DivitoDesign (tags: webdesign design tutorials tutorial css framework frameworks blueprint) [...]
I am so far from a programmer, but I have found that since getting involved with Wordpress that I am slowly learning more and more about html and css without even intending to. I will be faced with a problem and after a Google search I am bravely hacking away at my theme. I wonder how many other non-tech types have had similar experiences.
BP is nice, however I am still learning CSS. Hoping all the blog reading will help me out. thanks for a good post. I am starting a blog and put it all in Wordpress ..So far so good though.
[...] Read the article here [...]
I got a lot of information from this site.
Very easy to follow article for a new adopter like myself. Thank you.
Really a Great information of DOCTYPES, I sincerely appreciate it! Thanks!
I hate to see you leave the do follow movement, but sites with high traffic like yours are ripe for spamming. It really is a shame that a few (or a bunch) would cause so many problems. I’ll still be sticking around though.
Thanks for the share.. great work
I found your blog on google and read a few of your other posts. I just added you to my Google News Reader. Keep up the good work. Look forward to reading more from you in the future.