Loading ...
960 CSS Framework – Learn the Basics
CSS frameworks have been here for some time. About the usefulness of these frameworks has been discussed for numerous times. Some say CSS isn’t advanced enough, others say these frameworks saved them many hours of developing time. We will not repeat this discussion here.
I have discovered CSS frameworks just a while back. After experimenting with the Malo CSS framework, the Blueprint framework and 960, I came to the conclusion I like the 960 CSS framework most.
This tutorial will explain the basics of this framework so you can start developing with 960 pretty fast.
The basics principles
You have to know a couple basic principles to “learn how the framework works“. You can learn these during the experimenting process, but I will explain them here for you, too. Let’s start.
Do not edit 960.css
A small note before: do not edit the 960.css file. If you do this, you won’t be able to update the framework in the future. Because we need to style our HTML though, we will create a separated CSS file.
Loading the grid
Before we can use CSS codes in an external file, we have to load these in our own HTML site. Which can be done via these codes:
1 2 3 4 5
<link rel="stylesheet" type="text/css" media="all" href="path/to/960/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="path/to/960/960.css" />
<link rel="stylesheet" type="text/css" media="all" href="path/to/960/text.css" />Once we have this ready, we have to include our own CSS file. For example, you can call this file style.css or site.css or anything else. Include this file with these codes:
1
<link rel="stylesheet" type="text/css" media="all" href="path/to/style.css" />Containers
In the 960 framework, you can choose between 2 container classes namely .container_12 and .container_16. These containers are always 960px width (thence the name 960!) and the difference lies in the number of Columns. The .container_12 container is divided into 12 Columns and the .container_16 container is divided in 16 columns. These 960px width containers are horizontal centered.
Grids / Columns
There are numerous column widths you can choose from and these are different in the 2 containers. You can find these widths by opening the 960.css file, but this isn’t necessary to design a proper website. There is a smart trick that make the framework even easier.
For example, if you want 2 columns in your container (say sidebar/content), you can do that this way:
1 2 3 4 5 6 7
<div class="container_12">
<div class="grid_4">sidebar</div>
<div class="grid_8">main content</div>
</div>You can see that the sum of your first column (grid_4) added with the second column (grid_8) is exact 12. That’s for a reason, you don’t have to know the widths of these columns, you can choose column widths doing a very easy bit of math.
Let’s say we will create a layout with 4 columns. The codes will be these:
1 2 3 4 5 6 7 8 9 10 11
<div class="container_12">
<div class="grid_2">sidebar</div>
<div class="grid_6">main content</div>
<div class="grid_2">photo's</div>
<div class="grid_2">advertisement</div>
</div>As you can see, this system works pretty well. If you try to load this in your browser however, you see something that isn’t right. That’s the introduction of our next topic.
Margins
By default, the columns have some margin between them. Every grid_(insert number here) class has 10px left and right margin. This means that in total, between 2 columns, we have a total margin of 20px.
20px margin is great to create a layout with enough white space to make everything looks smooth. That’s one reason I enjoyed using 960.
With our example from earlier, we had a problem when we loaded the page in our browser. We are about to fix that.
The problem is that every column has Left and Right margin. The first column and the latest column in the container doesn’t need any margin. Here’s the solution.
1 2 3 4 5 6 7 8 9 10 11
<div class="container_12">
<div class="grid_2 alpha">sidebar</div>
<div class="grid_6">main content</div>
<div class="grid_2">photo's</div>
<div class="grid_2 omega">advertisement</div>
</div>You can simple add the class alpha for no left margin, and the class omega for no right margin. This example layout we made is now aligned perfectly in any modern browser (and yes, also in IE6).
Styling
Perfect, you know all the basics to create a grid layout with the 960 framework. Of course, we would like to add some style to our layout, too.
1 2 3 4 5 6 7 8 9 10 11
<div class="container_12">
<div id="sidebar" class="grid_2 alpha">sidebar</div>
<div id="content" class="grid_6">main content</div>
<div id="photos" class="grid_2">photo's</div>
<div id="advertisements" class="grid_2 omega">advertisement</div>
</div>Because CSS uses specificity to determine which style declarations have priority above the other, the id is more important then the classes.
This way we can overwrite rules that have been set by the classes (like width, padding, borders etc) in our own CSS file.
I have added some style too, which took me exactly 5 minutes to get this whole example together. Check the source for the example and style declarations.
We are done
That’s it. You have just learned how to use the 960.gs framework to build cross browser compatible and smart layouts. When you have completely mastered the 960 framework you will greatly decrease the time you are writing CSS.
If you haven’t already, check out the example.
My questions for you!
Do you use the 960 CSS framework? Or any other framework? Do you think a framework help you to improve your code?
Excellent printing brochures available at PsPrint.com
[...] Visit Source. [...]
Great tutorial! I would be happy, if you continue with this tutorial and say something about the “prefix_…”. Thanks.
[...] 960 CSS Framework – Learn the Basics » DivitoDesign. Tags: css [...]
There is a project called compass out there that is combining multiple popular css frameworks and lets you write css in SASS style. Its pretty neat as well.
I like Blueprint
so, this is a great tutorial.
you used the “alpha” style to cut down the left margin, and use omega style to take away the right margin. But after that the total width is 940, not 960 any more!
so I think your first example which without “alpha” and “omega” is right, and the two class should used in nested columns.
[...] Translate From: divitodesign [...]
This is a great tutorial. Designing a website and making the layout could be very easily done now.
Thanks a lot.
Wonderfull tutorial! Thanks for it.
I prefer Emastic, much better! http://code.google.com/p/emastic/
greate, i will use it on my webpage
I agree to @mienflying. He is pointing out the correct way to use the 960 grid. Just take a look at http://960.gs/demo.html and you will see.
CSS Blueprint!!!!
Just started a basic blog as I am a bit of a noob when it comes to html. However it is of real benifit when i stumble across a blog post such as this where i can pick up new tips that i will be able to use in the future.
Excellent post most appreciated.
[...] 960 CSS Framework – Learn the Basics » DivitoDesign (tags: css) [...]
Very good post! I hope you continue, and possibly expand to other css frameworks.
I’ve been playing around with BlueTrip by Capsize Designs and like it so far.
[...] 960 CSS Framework – Learn the Basics » DivitoDesign CSS frameworks have been here for some time. About the usefulness of these frameworks has been discussed for numerous times. Some say CSS isn’t advanced enough, others say these frameworks saved them many hours of developing time. We will not repeat this discussion here. I have discovered CSS frameworks just a while back. After experimenting with the Malo CSS framework, the Blueprint framework and 960, I came to the conclusion I like the 960 CSS framework most. This tutorial will explain the basics of this framework so you can start developing with 960 pretty fast. (tags: 2008 web-developer web-developer/tools web-developer/css reference) [...]
[...] 960 CSS Framework – Learn the Basics DivitoDesign (tags: css) [...]
Great tutorial… can’t wait for more
is it comptible with IE6 ?
@jitendra, check out the whole discussion about the resets. I think this one is fine.
For people who like both Blueprint and 960.gs can use this if want http://pixelhandler.com/design/mash-up-of-two-rockin-css-grids-960gs-blueprint
very nice site here
I’ve read about CSS frameworks before, but never got around to actually trying one. I see the advantages – lots of styles can be reused.
Learning it will take time, but I hope the time will be worth
That example page is quite nice – and to think you took only 5 minutes for it…
That it takes 4 stylesheets – I prefer to minimize HTTP requests. I read about a PHP script to join files today (link, so it should help. Hope others find it useful too.
[...] 960 CSS Framework – Learn the Basics – lot of talk about css frameworks lately so if you’re looking to get a handle on the basics [...]
[...] couple weeks back we have learned about the basics of the 960.gs CSS framework. Today we will talk about 2 problems with the 960 framework you might have struggled with. This [...]
[...] 960 CSS Framework – Learn the Basics » DivitoDesign Learn the Basics of the 960 CSS Framework! (tags: design Tutorials web-design frameworks howto web webdesign Resources webdev tutorial CSS webdevelopment 2008 layout article xhtml Web_Design html framework webmaster cssframework grids grid learn basics 960 divitodesign css-frameworks) [...]
Great article. I’ve been using 960 for a while and greatly prefer it over Blueprint. Question though, do you recommend a convenient way to beef up the outside margins? I’d like to have more than 10px on the left/right of the main content block. I can do it manually, but wonder if anyone’s found a quicker way to get it done.
[...] 960 CSS Framework – Learn the Basics » DivitoDesign [...]
[...] recommend reading Stefan Vervoort’s post on divitodesign to get started, there are also some good examples provided in the downloadable [...]
960 vs Blueprint
* Blueprint is simpler: I like that blueprint’s containers never change. I don’t need either a grid of 12, or a grid of 16. 24 works fine for me. There’s also only a “last” class, as opposed to 960′s “alpha”, and “omega”‘s. What’s the difference between grid-6, and container-6? Can grid-14 fit two container-7? I’m too lazy to look up the answer since I’ve never once run into a problem where blueprints system wasn’t as flexible as I needed. Especially since the designer and I work together, and we tend hold off on the design until we have all the content.
* Blueprint gives a damn about typography: 960′s creator says says “I haven’t gone out of my way to establish a vertical rhythm for text, as is described in the Baseline article on ALA. It’s not that I don’t see the value in it, I do. I think it’s an awesome idea, and a noble pursuit. However, it is fragile. All it takes is for a content editor to upload an arbitrarily sized, 173 pixel tall image, and all the subsequent elements are off-beat.” I fail to see what I gain from losing this feature in blueprint. Especially given I use imagecache, and know exactly what to do when an image is 173 tall: fix it.
* Blueprint has a community of active contributors, and the frameworks is evolving quite noticeably: 960 appears to be the work of one guy.
Good tutorial. I usually just custom build the CSS layouts I create. I guess a framework would be nice to have, though, if you’re unfamiliar with coding.
[...] couple weeks back we have learned about the basics of the 960.gs CSS framework. Today we will talk about 2 problems with the 960 framework you might have struggled with. This [...]
Blueprint Framework may be a bit cleaner, but I like how 960 sets margins correctly, whereas the vertical and horizontal margins are equal, Blueprint’s verticals are 20px while their horizontal spacing is 10px. It’s quite aggrevating, having developed with both frameworks, I find 960 to be easier to use and to develop nicer looking templates. http://woothemes.com … case and point.
[...] 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 [...]
[...] 960 CSS Framework – Learn the Basics [...]
Great tutorial.
I’ll definitely be exploring CSS framworks sometime soon.
[...] 960 CSS Framework – Learn the Basics [...]
very succinct review.
i’m not really crazy about the markup because it isn’t semantic in the slightest. i guess i can tweak it, but then i won’t be able to easily update it, no? oh, well.
also, according to your own example you tweaked the framework. you adjusted some widths, correct? and it didn’t bust up the design, so we should be able to tweak it as well?
this looks promising. i’ve never used any framework – even my resets are customized to the project. i can’t stand unnecessary and bloated code. but if these frameworks can be tweaked then i might be i, too!
I haven’t adjusted the width’s in the example
[...] 960 CSS Framework-Learn the Basic [...]