Journal
960 Grid System
26 March 2008 › 44 comments
Update: Bryan Veloso recently re-launched his personal site Avalonstar using the 16 column Photoshop template from the 960 Grid System. Special thanks to Bryan, for letting me use a screenshot of his work on 960.gs.
As you might have heard, I recently launched a site for the templates that I created to use in my personal and professional projects. For lack of a better name, and because the numerals made for a nice logo, I’ve decided to simply refer to it as the 960 Grid System. It’s funny, because even though all I did was post a single tweet about it before going to bed Sunday night, viral word of mouth kicked in, and I’m already getting inquiring emails.
I should note that the 180 KB download size isn’t for the CSS framework alone. That download bundle is for all the files: printable sketch sheets, design templates for Fireworks, Photoshop, OmniGraffle and Vision + the CSS and HTML. The 960.css file itself is only 4 KB when compressed.
First of all, I made this for myself, to scratch an design itch. Not everyone will like it, and I’m okay with that. There’s an old saying: “You can please everyone some of the time, and some people all of the time.” I am not trying to accomplish either. I am simply sharing the grid dimensions that I have found myself gravitating towards over the past year or so. If others can benefit from that, then all the better. That being said, read on.
Browsers
I built the code in my grid system to accomodate all A-Grade browsers, as determined by Yahoo. At the time of this writing, that chart looks like…
Note that IE5.x is nowhere to be found. That’s for good reason. There’s not enough market share for it to be important to Yahoo. Not only that, but even Microsoft has discontinued support for it. If you’re stuck in a position where you’re still having to code for that ancient browser, the best suggestion I have is to go peruse Authentic Jobs and find better employment.
Background
I first became interested in grid design via reading articles by Khoi Vinh and Mark Boulton. Initially, I must admit that I didn’t fully grasp the concept. But, the more I thought about it, the more I realized that this time-tested practice from printing works well on the web. Like it or not, web pages essentially revolve around boxy shapes. Inevitably, these rectangles have to come together in some way or another to form a design.
As long as we’re using shapes consisting of right angles, we might as well make some logical sense of it all. Some time after the intial work of Khoi and Mark, I happened upon an article by Cameron Moll, heralding a width of nine-hundred and sixty pixels as the optimal size for design. Basically, 1024×768 is the new 800×600, and 960 makes for a good magic number to utilize the wider canvas on which we paint.
After that seminal article, I have been basically designing on some subdivided variant of 960 pixels ever since. Last spring (2007), I found my groove, so to speak. It happened when I began to redesign my personal site. It’s still in the works, but here’s a sneak peek. As you can see, I’m eating my own dog food, as the future version of my site will use a 16 column grid.
I have yet to sit down and complete the redesign, since I am still finishing up my masters degree via correspondence, and because other paying freelance work came up, plus day job, etc. Chronologically though, I technically “began” work on my grid system before the release of Blueprint.
That’s not a value judgement, but helps to explain “why another grid framework,” because I had already started down that path by the time Blueprint was announced. I have used BP, on a project where I was required to use a documented code base, to ease future maintenance of the site. Though it was agreed upon, the designer on the project didn’t design according to BP’s dimensions. That was partially my fault, for not better communicating how it worked. By the end of the project, I had basically overridden nearly everything BP brought to the table.
That’s when I got to thinking, wouldn’t it be great if there was a way to streamline things, to get designers and developers thinking and communicating better? And, what if IAs were included in that workflow? That inevitably led up to what is now the 960 Grid System.
What it’s not
By far, the most common question I have received via email has been “How does this differ from Blueprint?” People seem to ask the question almost antagonistically, as if to say — “You’re wasting your time, because Blueprint already exists, and I like it better, so nanny boo-boo.”
For those people, I say, bravo. Please, continue to use whatever works best for you, and whatever you are most familiar and/or comfortable with. I am certainly not looking to draw up battle lines, or trying to change anyone’s mind about what framework to use, or even if one should be used.
One of the glaring omissions, or nice features, depending on how you look at it, is the way the 960 handles (or doesn’t) typography. There is a text.css file included, but this is mainly to ensure that there is at least a something in place, so that as you do rapid prototyping, common elements such as headings, paragraphs and lists have basic styling.
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 see this as being more of a design choice, than something that needs to be standardized. In fact, most things that might be considered unique to a site design have been left out. I have specifically not set any text or page background colors. Call me lazy if you want, but that’s one thing I found myself consistently overriding when using BP. I’d wonder things like: “Why is there a <th> background color?”
I have also not put in pull or push image/quote styles, as those are things I rarely use, and I consider that to be a bit more design and contextually content oriented than related to page layout and prototyping. It’d be easy enough to write as a one-off in your own design stylesheet.
So, I hope you’ll forgive me if my grid system isn’t all you think it should be. Much as I like the The Beatles, I don’t exactly want to hold your hand.
Texting
After that underwhelming explanation of what the 960 Grid System doesn’t do, let me highlight what I consider to be the features. First off, some love for Linux users. The default font-family order is Helvetica, Arial, Liberation Sans and FreeSans, with a generic fallback of sans-serif.
One thing I’ve found about Ubuntu is that the default sans-serif font is actually closer in width to Verdana than Helvetica or Arial. It’s not a big deal, but if you want text that looks relatively the same cross-browser, you need more than just a generic fallback for Linux users. This can be especially important if using the size of a particular font to approximate a certain width. It stinks to see carefully crafted navigation break to the next line.
In talking to my friend Yannick, he advised me that Liberation Sans is available by default on both Fedora and Red Hat distributions of Linux. It is also freely available under the GPL, so what’s not to like? If I had to describe it, I’d say the numerals are reminiscent of Verdana, but the rest of the characters map nicely to the dimensions (if not glyphs) of Helvetica.
From what I could tell via Jon Christopher’s article, FreeSans is the nicest looking equivalent to Helvetica available by default on Ubuntu. So, the text.css font-family list handles OSX, Windows, Linux builds.
Sizing + Spacing
Before we get into the pedantic debate about pixel font sizes, let me just say — Let’s not go there. I’m aware of all the arguments, and have even toyed with making elastic layouts. For me, it’s about ROI. You can spend countless hours toying with font-size inheritance, like I did on the Geniant Blog, or you can set sizes in pixels and get on with your life.
I’m aware that Blueprint’s text equates to 12px, but 13px is what YUI‘s fonts.css file specifies, and I actually quite like the way they’ve done their typography, aside from percentage based sizing being a bear to wrangle. We used it on the Geniant Blog, to great (albeit time-consuming) effect.
While I haven’t painstakingly set a vertical baseline, body text is 13px with a line-height of 1.5 (unit-less) = 19.5px. Most block-level elements have a bottom margin of 20px. So, that right there gets you pretty close to a consistent baseline. Just need to tweak line-heights on headings, etc.
The two block-level elements to which I did not apply bottom margin are blockquote and form. In strict doctypes, both of these require other block level elements to be inside of them. For instance, paragraph tag(s) inside a blockquote or fieldsets in a form. By not having any margins themselves, other blocky children can stack neatly inside.
I’ve also re-indented list items by 30 pixels on the left, so if you want hanging bullets, be sure to set that back to zero. I actually think hanging punctuation is pretty cool, but have yet to meet a client who agrees, so I erred on the side of caution in my CSS, in hopes of mitigating future arguments.
:Focus
I just wanted to briefly mention this, because it has to do with accessibility. While I personally think that Eric Meyer’s reset.css removal of :focus outlines is aesthetically pleasing, I think the right thing to do is to retain focus borders, for users that navigate links via a keyboard instead of a mouse.
This has been a longstanding gripe of mine with the Opera browser — the utter non-existence of any sort of :focus indicator. Anyway, you can remove the a:focus code in text.css if you want to have cleaner looking links, but know that you do so at the expense of accessibility.
Columns
One of the key differences between Blueprint and 960, aside from nomenclature, is the way the grid columns receive their gutters. In Blueprint, all the gutters are 10px wide (a bit too narrow for my taste), and are to the right side. The last column in each row needs class="last" to remove the margin. This means that neither the left nor right sides of a container have any spacing. For the most part, this is no big deal, but if a user’s browser is constrained, body text actually touches the browser chrome.
In the 960 Grid System, each column has 10px margin on both the left and right sides. This allows for the overall container to have a 10px buffer at the edges, and the margins combine between columns to form 20px gutters (a bit more room to breathe). Additionally, there is no need to add an extra class for the last column in a row.
In some unique cases, you might want grid units nested within a parent grid unit. In this case, you will need class="alpha" and class="omega" on the first/last child in each row. It’s a bit more work, but is more of a fringe situation, so it won’t come up as often.
I specifically chose grid_XX as the naming convention because for some reason, having a class named span-XX bothered my brain, since <span>, <td colspan="X"> and <colgroup span="X"> already exist in HTML. I guess I just like the idea of there not already being several tag/attributes with the same naming conventions. I also disliked the monotony of typing class="column ..." repeatedly, though to their credit, the BP guys have eliminated that necessity in their most recent build.
Much like with Blueprint, you can add empty columns before/after a grid unit, by specifying a class of prefix_XX and/or suffix_XX. The naming convention there was simply one of personal preference, as I admittedly tend to get confused by the word append, forgetting if it goes before or after.
Internet Explorer
Someone emailed me today asking about IE compatibility, and why there is no ie.css file included with 960. Simply put, it wasn’t needed to fix any of the grid aspects. IE6 has a wicked bug which doubles the margin on any floated elements. This could be a huge problem, but is easily fixed by adding display: inline to that which is floated. This causes no side-effects in any other browsers, so it simply lives in the main 960.css file.
You may find that IE6 and IE7 both get the spacing around <hr /> slightly off, by 7 pixels above and beneath, which is easily fixed by adjusting margins accordingly. To me, that’s an acceptable issue, and not really worth adding another CSS file with conditional logic in the markup. If you do end up creating a separate IE stylesheet, keep that in mind, and address it.
In the Clear
Lastly, I wanted to talk about the clearing methods included in the 960.css. First off is my personal preference, adding an innocuous bit of markup to clear all elements. I have already written about it extensively, so I won’t go over all that again. Basically, add class="clear" to a <span>, <div>, <li> or <dd> that you want to disappear. The only effect it will have is to clear floats.
The other method is for all you markup purists out there, who don’t want to dirty your HTML. Instead, you can insert markup via your CSS. This technique is well documented already as well. Essentially, add class="clearfix" to elements to clear what comes after them.
Licensing
The whole bundled package is free of charge, dual licensed under GPL and MIT. While I’m no suit, it is my understanding that these two licenses ensure that you can use the grid system in just about any situation. I must especially thank my friend Michael Montgomery for his informal advice, helping me to wrap my mind around all the legalese. He is a patent attorney by day, web ninja by night, and helped me wordsmith the 960 copy.
Finito
That’s all folks. Hopefully you’ll find the 960 Grid System to be helpful in sketching, wireframing, designing and/or coding. Future plans include a tutorial on how to use jQuery to add styling hooks to form elements, since I know from experience that is no cup of tea. I’m not sure JS belongs in a CSS framework, so I might just make that a separate tutorial series.
Discussion + Dissension
Comments closed after 2 weeks.
#1 Jesse J. Anderson
Wow, I love it!
Definitely going to keep my eyes on this. I loved the idea of Blueprint but it never really worked for me (totally agree with your take on the baseline).
Also, the new SonSpring design looks sweet! When’s that coming out?? =)
#2 Jesse Gardner
This helped clarify things quite a bit. I’m usually writing everything from scratch… so to have a framework like 960.gs would be helpful; it’s just going to take time getting used to the dimensions in PS when creating mockups…
#3 Andrew Ingram
I understand why such a bunch of templates should exist, what I don’t understand is why it needs its own domain. Especially when you’re abusing the use of country-based top-level domains.
It’s a bit of a peeve of mine, but unless you’re based in the Sandwich Islands you shouldn’t really be using their country domain.
#4 Spencer Davies
Looks great, particularly the sketches and PSD files. Thanks a lot!
#5 matthew Smith
Nathan,
Great work. What a package, and a solid writeup whether you’re new to Grids or if it’s old hat. I really can’t wait for the revamped Sonspring either. Thanks for continuing to pull out the great resources!
#6 Natalie
Thanks, Nathan, for making math-based design look easy! I suck so bad when it comes to math-based grids so although I’ve been with you on the 960 width for some time I haven’t had any real consistency in the grid within that.
I’m also glad you explained the Blueprint connection because I’m seeing a lot of misunderstanding comments around and I can point people here if someone asks. When we were talking about this grid and I said essentially “huh?” it was because I was thinking of Blueprint and my brain sort of went foggy. Even with Blue Flavor’s How-to I could never make sense of it.
So though I haven’t had a chance to sit down with the code yet, I’ve briefly browsed the files and I’m pretty hopeful. You’ve done an amazing job of making this manageable for designers instead of leaving all the goodies for programmers only. So thanks for that!
#7 Josh H.
Great work Nathan! It’s a well thought out framework. I particularly like the additional files you supplied (sketch sheets and prototyping templates). I also like the two methods for clearing floats. I tend to use the “clearfix” class a lot. And the “grid_xx” naming convention is much easier on the eyes. A big thanks for all your work on this and sharing it with the rest of us!
I hope we see the new Sonspring design online soon. ;)
#8 Mike Robinson
“I think the right thing to do is to retain focus borders, for users that navigate links via a keyboard instead of a mouse.”
This is something I was thinking about recently. I realized how important this is when I was tabbing through some links myself and had no idea where I was.
I saw the buzz about this on Twitter but have yet to check it out. I must set aside some time :)
#9 Jason
Nathan-
Thanks for your hard work on this. I’m particularly impressed with the .pdf files you included. I can’t think of a site I’ve designed that hasn’t started off on paper.
Also, I’ve seen some jQuery tutorials and I’d love to see your take on things.
Keep it up!
#10 Daniel Marino
I really missed the boat on learning/utilizing Blueprint, and quite frankly was completely turned off to it, mostly because I couldn’t stand the notion of using pre-defined styles. This is partly due to comments I heard others make. In fact, I remember reading before how you had to rewrite/rework a lot of the Blueprint code when doing the Christ Fellowship site…
That being said, I’ve been hearing a lot of hype about the 960 system, particularly at the Godbit forums, but I had no idea that you were the mastermind behind it. Sorry if this sounds sappy, but I’ve always admired your work, and know that when it comes to this type of stuff, you’re definitely on your game. I’ll be sure to check out the 960 system and look forward to it.
#11 Justin Lilly
Great job, Nathan. I really like how much research you did for the article with all of the delicious links sprinkled throughout. I would also suggest you link to this post from 960.gs
#12 Jeff Croft
Great job, man. There’s definitely a lot of stuff I like better about this than Blueprint — I’ll be giving it a shot, for sure. Here’s hoping you avoid the haters. The sort of negativity I got when I spoke about Blueprint publicly was not easy to deal with at all. Hopefully CSS people are finally waking up to the fact that programmers have known for ages: code re-use is a good thing.
#13 Mike Stickel
Great write up and work! I’ve been messing around with a little system myself and some of your reasoning has made me start to rethink certain aspects. Thanks for putting this all out there Nathan, it’s great stuff.
#14 Jody
Great stuff! Have you given any thought as to how to integrate the horizontal axis? i.e. a baseline grid/line-height. Also, how about ems….have you given thought to an elastic layout?
#15 Josh S
Very nice. I’ve used Blueprint, but I’m considering using this for my next project. Thanks for making this available, Nathan!
#16 Don Druktenis
Nathan. I am just getting in to understanding wed design and CSS , and just reading about this grid system made me understand more of the basic Design than any other paper I was reading. Thanks
#17 Makeesha
I’ve been reading a lot about this lately and it’s so interesting because I went from print design in newspaper and magazine to doing some website design for friends and just translated my experience and methodology in print to web design – - not knowing any different – - I even used my old grid sheets from newspaper to sketch designs for websites… I don’t really do sites anymore so a lot of this is lost on me but this grid buzz is pretty cool to hear from that perspective lol
#18 Bryan Veloso
Thanks for throwing my site up there Nathan! Like I said, more than the CSS framework itself, it was the tools you included with it: the PSD grids and the sketchpad that did wonders for the final planning of Avalonstar.
I truly hope this does well, and maybe I’ll get myself to dive into the CSS portion as well!
#19 David Sutoyo
Good stuff. The templates are very useful, even for those who don’t use the framework itself.
#20 Rachel Maxim
Nice work. I really like the grid approach, and I for one am happy to see another CSS framework option. Your contribution is appreciated!
#21 Valamas
Love the site. What font are you using for the banner “960 Grid System” please?
#22 Chris Pollock
Hey Nathan,
Glad to see this come to fruition for you. Very through write up! Brought out some of the important distinctions in your system. Well bravo and keep up the good work.
Chris
#23 Nathan Smith
Wow. Thank you all, for the overwhelmingly positive feedback. To answer a few questions listed in the previous comments…
— At this time, I do not have any foreseeable plans to impose a vertical rhythm via text.css line-height. I addressed that in the body of this article. I don’t want to force something artificial, because I believe typographical arrangement is for a designer to decide, not a framework.
— As for elastic layouts, I’m not sure how crucial they are, given that most current and future browsers will support full page zooming anyway. For more on that, read this article by Robert Nyman. Times are changing!
— The font I used for the 960 logo is called Meta. It’s worth noting that I did some modifications to the numbers to get them just right, so don’t be disappointed if the font doesn’t look exactly the same.
#24 Michael Montgomery
Excellent work all ‘round!
Here’s the big pullquote and key feature, in my opinion:
Congratulations, and thanks.
#25 Jeremy Greenawalt
Nathan, this looks great… now I’m wondering if I’m too deep into a new site I’m doing to drop Blueprint for 960… Either way, I’ve got at least two projects I haven’t even sketched yet and I’ll try 960.
#26 Jeff Mackey
Nathan –
Thank You very much for releasing 960 Grid – I love your in-depth write up of it and explaining how you came about decisions for certain elements of the CSS framework. As a user of Blueprint, I would have been one of the peeps emailing the “how is this different from Blueprint, etc”. ;)
I will definitely give this a try for my next web project.
Thanks again,
Jeff Mackey
BTW, sonspring.com is an awesome site, too.
#27 Ben Gray
This is great. I just used it on my site to make everything line up in a grid system. Perfect.
#28 Matt Stanley
I’m curious about the application of the 10px outer gutters. While that follows hard-and-fast your rule of having both inner and outer gutters, it seems, based on your examples including the layout of 960.gs itself, to actually limit the layout’s width to 940px. It’s been my understanding that the design cognoscenti consider 960px the maximum usable (not just visible) width for a centered, fixed-width layout, i.e., it still left a smidge of safety between the layout and the browser chrome. Has your research led you to determine that 940px is better?
#29 Nathan Smith
Matt: I’ve found 960 to be the optimal width, of “real” space – accounting for scrollbar, browser chrome, etc. By real, I mean it occupies screen real-estate, whereas margin: auto is just filler. Within that space, I’ve put a 10px buffer on each side, to ensure content has room to breath. Even if 960 was the full, usable space as you defined it, that would necessitate 980 total width. I understand what you’re getting at, but I think any potential confusion is nullified by the demo page explicitly listing the dimensions.
#30 Matt Darby
Wonderful work! My newest Rails app will feature 960!
Thank you!
#31 Nathan Smith
@Matt Darby — Cool, let me know when it goes live!
#32 Jelle Desramaults
Nathan,
Great stuff, not too big on CSS frameworks in general but the sketch sheets are great for quick wireframing.
One little remark: in the downloadable demo page, (12 column grid) the 4 column block is marked as 330px. Should be 300px.
Great job,
Jelle
#33 Nathan Smith
Jelle: Thanks, I appreciate the catch! I fixed it in the downloadable file.
#34 Andy Ford
Nathan, great work! I’m a Mac and PC user, but I like that you’ve carefully considered the “other” OS’s out there. I’m really happy to see more CSS frameworks in the mix. It’s a great thing that CSS developers are actively thinking about and discussing code re-use. Thanks!
#35 Stephen Tudor
Nathan, this is just great. Thanks for contributing to the community in yet another way. I’ll definitely be using this in the re-design of my own site.
I am curious, would it be wise to add @*:first-child+html .clearfix { min-height: 1px; }@ in order to accommodate IE7’s, or does the @.clearfix { display: inline-block; }@ declaration make that unnecessary?
I’ll probably get around to testing it anyway, but I just thought I’d ask :)
#36 Craig Erskine
Great job, Nathan! I’m in the middle of a site redesign and I think I might start over again and use this 960 system. It opens up so many options. Thanks for your hard work.
#37 Nathan Smith
@Stephen: Yes, display:inline-block is what triggers IE7. You can read more about the reasoning behind all that CSS trickery via these links…
— www.456bereastreet.com
— www.tanfa.co.uk
As for whether or not this will change with the impending release of IE8, I’m not sure. That’s why I’ve typically bit the bullet in the past, and just used a clearing <div>. It’s guaranteed future-proof, albeit more markup.
@Craig: I’d be honored if you end up using my grid for your redesign. I’ve certainly learned quite a bit about Adobe Fireworks from your tutorials!
#38 David Brooks
Thanks for the work you put into this. To point out exactly how useful it has already been for me, I passed this to some others who have never really designed for the web and because of the templates and examples I think we’re finally on the same page. Communication has been simplified, and they don’t have to decode my hand drawn chicken scratched grids.
Great work.
#39 Jeff Ludwig
Nathan,
I wanted to be another voice in the crowd here. I’ve been a VB programmer, and have recently turned to web developing and am attempting to grasp at design. I’m learning as I go and have precious few mentors as seek to earn my designer’s stripes, but this article and 960.gs will help me learn. Like Don Druktenis said above, I have learned more from your practical example than I have from the more academic offerings that I have read.
I always appreciate your take on web design and development.
#40 Brian Lang
I’m considering using this for a website I’m working on. Can you tell me how you would go about integrating the ThrashBox rounded corners model into the grid framework? I’ve got one concept worked out, but it’s leaving far larger margins than I’d like at present.
#41 Nathan Smith
@David Brooks + Jeff Ludwig — Good to hear from you both! I’m glad the grid templates have proven useful in a tangible and practical way. I hope all is going well at Asbury Seminary and in Wilmore, KY in general.
@Brian: If you’re having problems with margins, it might due to spacing from the inherited grid gutters. I’d suggest placing the box markup within the grid_XX element, versus trying to change it into a ThrashBox…
<div class=“grid_XX”>
<div class=“cssbox”>
<div class=“cssbox_head”><h2>Header</h2></div>
<div class=“cssbox_body”><p>Content</p></div>
</div>
</div>
That being said, if you’re still having too much spacing, you may need to bump down line-height on ThrashBox child elements, and reduce the margin on headings, paragraphs or the ThrashBox itself. Hope that helps!
#42 Renato Carvalho
Great!
Thanks for sharing. I’m considering using this on my website.
I’ll study 960 grid system a little bit more and provide a feedback ;)
#43 Antti
Excellent Job and a very big thank you! I have always loved Blueprint, but I felt it was a little bit bloated. I also didn’t like the way it has margin only on one side of column. And vertical rhythm for text… I agree – it sounds nice on paper, but in big sites with lots of images it just doesn’t work.
I transformed one big project from BP to 960 in two hours. These frameworks have so much in common, so it is pretty straightforward process.
I think 960 has all I need, and nothing too much. Thanks!
When our site goes online (it is a big digital music store) I will let you know (I hope I won’t forget).
#44 Tim Stanley
Thanks so much for publishing this. I’ve watched quietly from the wings for a lot of your posts.
Even if the full css is not used, the general concept for layout design I believe is an excellent idea. I happen to be using Microsoft based tools and I’m working on a layout grid similar to the 960 format in Microsoft Expression.