This post is related to the project plan to get in a few new themes into Drupal 7 core. It will list some of the pros and cons of using the 960 Grid System. If you didn't know, it's what most might define as a "CSS framework". This specific framework was created by Nathan Smith. He states that it was started before Blueprint. I have mistaken it myself as a Blueprint derivative since it is a very similar system. But they both were inspired I believe by the same sources. You can read about the background on 960 in his journal.
Now, why would we want a CSS based framework to begin with? Well, it gives web designers and developers an easy way of constructing layouts amongst other things. It does this by having predefined class names that give positioning rules and dimensions to any block level html to which it is applied. If your familiar with the idea behind the CSS Zen Garden, it is a complete 180 from that where the markup is the expected constant and the styling rules are left up to you to change.
I believe the Zen Garden is great for what it demonstrated. That the separation from markup and presentation can be achieved but it comes at a cost. Jeff Croft explains it in a short post. Pure separation is not practical. When was the last time anyone has redesigned a site with pure CSS? Everyone can agree on semantic markup. Semantic classes on the other hand should be used within reason. It helps no one but us building our sites.
Now here's a list of the pros on 960 and frameworks in general:
- Lightweight. A hair under 5k for all the 3 styles. 3.7k for the layout styles and the rest are for text styles and a few reset rules.
- Easy to understand. There are a few group of class names where each increment from 1 to 16. Once you understand each group, that's all there is. .grid-[x], .prepend-[x], .append-[x]
- Comes with templates in various formats for use while wire framing or designing. It also has a sketch sheet for print. Helps workflow big time and keeps your mind in the framework while drawing out rough drafts. An even bigger plus that comes with this is *better communication* amongst your team members. Once everyone knows what they are working with, there's no guessing on how the layout is implemented. Everyone should be able to dig in immediately.
- Use of a common language for presentation. Related to the previous point, it can help with support if there are enough people using it.
- Awesome for prototyping and getting something up quickly!
–Notice what Mark Boulton is prototyping with for the drupal.org redesign? It's Blueprint and working within 960 would be just as easy.
- Not limited to your standard 3 column layouts. You can mix and match however you want. The grid is a building block so you can mix and match for very complex layouts.
- Very similar to Blueprint and this approach is well known by the web community.
- Working within the framework can minimize browser quirks. Namely IE6 & 7. You won't be completely rid of them of course but it will more likely come from your own custom styles than the rules defined by the framework.
- Automatic right to left language support. I added this myself. More on this below.
- Makes little assumpsions on what you want for a starting point. No colors, and very minimal for typography styles.
–Also listed as a con. Depends on your point of view.
And the cons of 960:
- Although the layout possibilities are numerous it is still rigid. Fixed width at 960 pixels and if you're designing a complex site, you have to work within the framework closely. But if you needed it to go beyond 960 for whatever reason, you can continue the pattern where 960 leaves off. Anyone who insists on fluid widths will not be happy with the system.
- Unsemantic class naming. But as I mentioned before, it's really not an issue. It's listed anyway because I know there are a few out there who do care more than me.
- There could be more templates (.tpl.php) being copied over to just to sneak in classes but I don't foresee this to be a big problem. It's almost always done already. -Allowing hook classes within all templates may alleviate that. All themes based on this framework will definitely require their own page.tpl.php so it goes against the idea of pure css based themes. I already mentioned why it wasn't practical though.
- Makes little assumpsions on what you want for a starting point. No colors, and very minimal for typography styles. I would personally like better text styles. Maybe mash-up the best of Blueprint and 960? Blueprints coloring I could do without but I do like their typography a bit more.
Here are the sample themes I promised. "ninesixty" is the base theme with 960 included. Please read the page template, the read me file and explore. I did modify the 960 styles so it conforms more to Drupal standards.
Two things I added was a .push-x & .pull-x class for custom layout ordering that's independent from source order. Also added a 960-rtl.css file. All I had to do was reverse the rules so you'll automatically get rtl support for the rules defined in the framework. The examples provided supports it so check it out.
"carrot" is a sample subtheme I created late last night. I don't see this as core material. It's just a sample. I went from the sketch sheet, drew out the sections on the grid I wanted the theme to fit into with a few notes on color and pulled it all together in about 4 hours from start to finish.
Please download Drupal 7.x-dev and play with them. You can also change "core = 7.x" from the .info file to "core = 6.x" to get it working on Drupal 6. There may be small issues in doing this.
Ninesixty is in my sandbox on d.o under /contributions/sandbox/dvessel/ninesixty/.
<em class="tips>Consensus on a framework theme must be reached by November 14, 2008.
UPDATE 12/14/08: The base theme has been updated. The README.txt file has all the details.