Web Blog | Blog, Design, Create, cssOrigins.com

A Detailed Look at the 960 CSS Framework – Nettuts

CSS frameworks are bloated. CSS frameworks are for people who don’t know how to code. CSS is too simple to implement a framework.

If you’ve ever read a tutorial on a CSS framework, I can guarantee that many comments mimic the previous statements. My guess is that the majority of these comments are stemmed from slight ignorance. Once you take the opportunity to spend some time with 960, you’ll be amazed at how much time can potentially be saved when developing your web applications. At the very least, take ten minutes to review the framework. You can always press the delete key…though I doubt you will!

Pros

  • Rapidly speeds up development time.
  • Clean grid structure.
  • Not many browser inconsistencies. The ones you find can be fixed easily.
  • It’s not "bloated" as many people suggest. We’re talking 3-4kb here, folks! You would use many of these stylings anyways.
  • Build complex layouts quickly.

Cons

  • It’s named "960" for a reason. If you’re hoping to use a different width for you website, you might be better off choosing a different framework.
  • As with any "framework", you lose a bit of flexibility.
  • You didn’t create it. There’s something to be said for code being 100% our own.

Usage

Let’s imagine that we want to work with the "12 column" structure to create the extremely simple layout seen below. First, we must create a wrapper div that has a class of "container_12". Notice the 12.

layout

  1. < div id = "container" class = "container_12" >
  2. …content goes here
  3. </ div >

Specifying an id here isn’t required by any means. However, I find that it helps me to remember exactly what the div is. One of the gripes against 960 is that the classes do nothing to define what the element is. Simply including an id fixes that issue.

Grids

Now we want to create a simple header and two column structure. When first getting started, it’s helpful to examine the demo to choose how wide a grid you should use.

960 Framework

I’m going to choose a header width of "940px" (+ 20px margins = 960), a sidebar width of "220px", and a main content width of "700px".

You must assign a class to each div. Naming conventions require that that the class name begins with "grid_" and ends with the number of columns needed. In our case, we’ll use "grid_12′, "grid_3" and "grid_9", respectively.


  1. < div id = "container" class = "container_12" >
  2. < div id = "header" class = "grid_12" >
  3. content goes here
  4. </ div >
  6. < div id = "sidebar" class = "grid_3" >
  7. content goes here
  8. </ div >
  10. < div id = "mainContent" class = "grid_9" >
  11. content goes here
  12. </ div >
  13. </ div >

The only additional styling that I’ve added is background colors and a minimum width for each div to simulate an actual website full of text. I won’t go over that here; mostly because they should be removed. They’re only used here to demonstrate the structure.

Without worrying about margins, floats, or IE hacks, we’re able to create a layout extremely fast. The true power of 960 is demonstrated when building complex newspaper-like layouts.

via A Detailed Look at the 960 CSS Framework – Nettuts+ .

Tags: , , , , , ,

Comments are closed.