centre{source}
INTERACTIVE AGENCY
6 Tips and Tricks for Designing with the 960 Grid System
If you’re not familiar with CSS frameworks, you should be. They create a baseline from which designers and themers can create websites, standardizing basic layout options with a common toolset and language. I was passionately opposed to them for the longest time because I feared we would lose the art and beauty of designing and XHTML/CSS coding. My opinion changed once I discovered the 960 Grid System.
As soon as you hit the 960.gs homepage, you see actual screenshots of websites using the framework with an option to overlay the 12 or 16 column grid template. The first link you see on the site is an option to download templates for Photoshop, Illustrator, and OmniGraffle — oh, and the framework itself is included as well. Finally, a framework for designers! I’m getting verklempt just thinking about it.
I’m no developer, but I felt right at home with 960 from the beginning. Instead of wasting time setting up guides in Photoshop and worrying about proportional structure, I can focus on bigger, more important issues such as what I want a user to focus on, how to get them to a conversion page, or what color scheme might make the most sense. For those just getting started or interested in learning it, I give you six of my favorite tips and tricks for designing with the 960 grid system.
1. Use your background space effectively
As the background of a website can exist outside of the 960 pixel container, it’s a wonderful place to experiment with unique visual elements and horizons, as seen on Bryan Veloso’s avalonstar. Designers now have some rote options for working with backgrounds, such as repeating horizontally a la Drupalcon 2009, highlighting your content by making an elegant centered background like on the Bellingham Real Estate site, or using a full photographic background like on Housing Works.
The background is truly a freeform canvas. You don’t have to worry about browser widths or how it might work with dynamic content, so go to town.
2. Pull or push outside the grid
It’s hard to deny the cold and inescapable reality of the pink columns if you sit and stare at them long enough. But fear not! With the power of CSS positioning, it’s no problem to break out of those constraints.
In this example, I’ve moved the logo about 25 pixels outside the left edge of the grid container to help the design feel a little more free and flowing. It’s often helpful to limit the width of an element you are pushing or pulling to a specific number of columns. I measured the logo out to be about 9 columns in width (out of 16 available columns), which means a front-end designer can apply a grid_9 class to the logo and then position it outside of the grid using CSS. Easy for them, easy for me.
Being able to push and pull things can lead to some extraordinary things and helps you remember that you’re not as boxed in as you might think.
3. Mix 12 and 16 column grids in the same design
While the default 12 column grid template is fine for most projects, some designs might require the additional flexibility and finer control of 16 columns. Newspaper and magazine styles can benefit the most from the extra grid control, especially when you might need to nest multiple small columns. But there’s no rule that you can’t use BOTH the 12 and 16 column grid in the same design.
In this example I have a simple layout that utilizes both grid templates. The top section is more open and simple and worked well with just 12 columns. The bottom section gets a bit trickier. I really wanted 4 columns and some specific layout tricks that would have been more difficult using the default grid template. As you can see, it’s as simple as placing the 16 column grid in the design and having at it.
4. Rotate the template for a poor man’s baseline grid
Since the 960 grid has 20 pixels of margin between each column, you can rotate the grid template 90 degrees and get a nice vertical grid to work with. While the common baseline grid is based on 18 pixels, I find working with a 20 pixel vertical margin helps keep the overall structure standardized and clean.
I’ve modified the 12 and 16 column template that comes with 960 to include this baseline grid to have it readily available.
5. Perfect your proportions
One of the biggest benefits of using 960 when designing is there’s no guesswork over the general size of content areas. The most commonly used format for the web is 2/3 of the overall page width for the main content and 1/3 for sidebar content. In 960, that’s as simple as fitting your main content inside 8 columns and your sidebar content inside the remaining 4 columns. Easy!
Obtaining complex layouts without grids can be painful because alignments need to be acutely defined. Imagine having to deal with a complex 6 column layout and working through issues of a section being 230 pixels versus 235 pixels wide, and how that 5 pixel difference might affect everything else on the page. 960 takes away a lot of the guesswork and tedium and allows you to focus on information flow and overall look and feel.
6. Ditch the grid
That’s right, one of my favorite things to do when designing with 960 is to turn the damn thing off. The template is great for setting up the general size of your content areas and for lining things up, but you shouldn’t get into a habit of leaving it on while you design. Those columns can literally start boxing you in, so ditch them and feel free to get curvy.
In Conclusion
If you’ve never designed with a pre-built grid and framework, now’s the time to give it a try. I’ve found the 960 Grid System to be a valid answer to shrinking budgets and timelines. Even though I was previously a spokesperson against frameworks, I now find them to be useful in many situations.
I’d love to hear what other people think, so leave your comments below. Is designing with a grid helpful or a hinderance?
Great article. I’ve used BlueprintCSS (www.blueprintcss.org) for a number of projects and would not even think twice about starting a project without a CSS framework. “Roll your own” works great if you are ready to code for every possible layout combination, but getting it down to a grid really polishes your overall aesthetics. And for us developer-types, it forces us to obey those elusive conventions everyone talks about.
Great write up. I’ve been meaning to learn more about this 960 grid system :)
Jason,
Are you using 960 on Drupal? I didn’t think there was a Drupal-friendly theme for 960 yet (though I understand one is in development), or are you using a custom one?
I recently tried Blueprint and liked the grid structure, but my original mock up called for a darker background along the footer of the page. Because of dynamic page length, I couldn’t make a single background image and wasn’t willing to ditch the footer color, so I switched to Zen. Worked out pretty well, but I did miss the grid a bit.
We used 960 for our latest project and its was amazing how nice it was to use it. Works cross browsers it was just awesome.
Darrin,
I’m not one of the Drupal guys here but I know we’re about to tackle Drupal/960 integration on an upcoming project. Have you checked out http://drupal.org/project/ninesixty and if so what do you think?
On your footer issue, one of the things I’m going to address in an upcoming post about developing with 960 is using multiple grids within one page, which opens up all sorts of possibilities.
Great article. Keep up the good work.
Great artcile,
I am trying to use the drupal zen_ninesixty I am trying to use alpha and omega in same grid-12 with no success.
Can you help me out.
I use and love 960 I was the same way I thought they would be a waste of time but now Im sold.
I just wrote a post about it too.
Maanas,
Alpha and Omega classes remove the left margin and right margin respectively from a grid column(s) and are used for nesting grids inside of grids. So, if I wanted a grid_12 with two grid_6’s inside (for a 2 column layout) I would need this:
[div class="grid_12"]
[div class="grid_6 alpha"][/div]
[div class="grid_6 omega"][/div]
[/div]
Without the alpha and omega resets, there would essentially be a double margin for both the left and right sides, and you would see columns start to jump down and your layout turn to crap.
Important to note is that only the FIRST and LAST nested grid containers need those extra classes. Any grids in the middle wouldn’t need them.
For an example of how to properly use the classes, check out the source code for this blog, or check out some of the sample sites that 960.gs showcases on their homepage.
I find that CSS grid systems are OK for some sites. I tend to roll my own grids for most designs. However, I have recently started liking (and using) the 1KB Grid: http://1kbgrid.com/ It’s really basic and lightweight compared to Blueprint which has all those extra form and typographic styles.
The 960.gs system is great too and I have used it on one client site. I think it allows you to push/pull things out of the grid a little more easily than with Blueprint. But, given that these frameworks add a bit of CSS overhead I really like the 1KB grid.
Thanks for the read!
Any tips on how to mix a 16 grid with a 12 grid
I want to have a standard 16 column layout with for instance a single row nested within it that has a 12 column layout. Can’t quite get it to work
Ali, I can’t forsee any problems doing that. Your markup would look something like this:
[div class="container_16"]
[div class="container_12"]
[/div]
[/div]
The container classes share the same overall width and set the widths of inside columns based on the container using cascading styles. So, in theory, if you place 3 grid_4’s inside the container_12, they will inherit the column widths from the container_12 set of styles (inherently wider since there are less columns available).
Let me know how that works out, interested to see if it can happen.
Nice and easy to follow, laughed on 6)
I work with the grid off,
while turning guidelines of 960.gs on/off with ctrl + ;
Wow! This is hurting my head but you just explained the alpha/omega problem I was having with the 960.gs grid. Thanks for the clear language & examples.
Interesting tips – some great design tips.
One thing that I am trying to work out the best approach to, is how to pur drop-shadows into the gutters. Do you have any hints on how best to achieve that?
The only way I can see would be to have gutterless column containers, then put a 10-pixel gutter inside each individually, along with the shadows. I’m not sure if that is the right approach though as it could start complicating the CSS a lot.
– Jason
There are a few relatively easy ways to accomplish drop shadows with 960.gs.. all depends on the design and how progressive you want to be.
The easiest and coolest way is to apply the box-shadow property to the container grids. This is achieved with -webkit and -moz CSS extensions (e.g. -webkit-box-shadow: xxx) and would get you nice drop shadows that don’t affect the containers.
Since that won’t work in IE, your next easiest bet is to reduce the background inside your container to be smaller in width _with the drop shadow_, so that the far left and right edges of the show (where it tapers) wouldn’t extend past the edges of the grid. Then, you can set padding on inner elements to compensate.
A trickier method — but one that might be necessary because of a certain design — would be to set up containers that have the drop shadow background, but don’t assign them grid classes. Then, within those containers you can setup your grids. This can get hairy, and might be a situation where you’re better off NOT using a css framework (or at least not 960 specifically).
You comment, “I’ve modified the 12 and 16 column template that comes with 960 to include this baseline grid to have it readily available.”
Where may we download this so our images can have proper baselines??
How does 960 cope with images of varying horizontal and particularly vertical sizes??
Thank you, Tom