A Detailed Look at the 960 CSS Framework

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.

<div id="container" class="container_12">
...content goes here
</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.

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.

<div id="container" class="container_12">
  <div id="header" class="grid_12">
    content goes here
  </div>

  <div id="sidebar" class="grid_3">
    content goes here
  </div>

  <div id="mainContent" class="grid_9">
    content goes here
  </div>
</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. For more detail, be sure to watch the screencast above.

You Also Might Like

• 

  Prototyping With The Grid 960 CSS Framework

  Grid 960 is a CSS Framework that enables developers to rapidly prototype designs. They are excellent tools for creating mock ups. Why? Because they do all the heavy lifting allowing you to get faster results.

  Visit Article

• 

  Build a Newspaper Theme With WP_Query and the 960 CSS Framework

  WP_Query is a powerful tool to control what comes out of your loop. Today I’m going to teach you all how to use it to make a 3 columned newspaper theme that has all your main blog posts in the main column, and off to the side a set of posts with a certain category. We’ll be using the 960 CSS framework for the basic layout and reset of our theme, it will chop a lot of work off what’s needed!

  Visit Article

• 

  Which CSS Grid Framework Should You Use for Web Design?

  Ever wondered how all those slick “magazine” themes for WordPress and other platforms were created? Many, if not all, were designed using a CSS Grid Framework – at least in essence if not in actual fact. That is, you can use an existing CSS framework or build your own from scratch. While it’s possible to design complex web page layouts without a framework, it’s arguably an act in masochism. In this article you’ll get an overview of the current batch of Frameworks and which you should choose to use.

  Visit Article

• Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.