960 System CSS Framework
As Architexture grows and evolves I’ve started to implement ways to streamline my development process. Up until recently I was using a homemade recipe CSS that included a simple grid structure(s), some standard classes I like to use (:focus { outline: none;}) and Eric Meyers Reset CSS. I liked using my own simple framework because I know it inside out plus I’ve used it so many times. The problem I had with taking on a new framework was the time it would take to learn how to follow and implement someone else’s code structure.
Architexture uses an iterative process to early wireframe and template development meaning that there are always quick adjustments being made to the code as required. Adopting a framework like the 960 framework has allowed me to speed up the development and prototyping process with a common grid structure.
The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.
The 960 System website does a great job showcasing the frameworks functionality by offering up working examples, tutorials and demos of the code. What I thought was cool was their “Show Grid” overlay of what grid system their examples are using. Right away I knew this framework was going to suite my needs because of the number of layout options it offered.
Upcoming project using the 960 System
The 960 Gridsystem website offers a great download of resources including printable sketch paper which helps for sketching up preliminary site layouts, plus it offers a grid demo page showing their 12 and 16 column grid structures.
This framework might not work for everyone and I probably wont use it for all websites but it certainly offers enough flexibility for many different layouts. There’s been some talk about moving on from the 960 layout and onwards and updates to 1080. I still remember the painfully slow process of easing out of the 800×600 so I don’t expect to see the switch to 1080 happen anytime soon. Of course a larger resolution is still worth considering depending on your audience (analytics tell all). The flipside is if I was making a site for seniors I probably would go smaller because in the end its all about accessibility.
Until Then…
All modern monitors support at least 1024 × 768 pixel resolution. 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. This makes it a highly flexible base number to work with.
Visit www.960.gs for more information
If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.
Some more good reading on the subject…
http://unitinteractive.com/blog/2009/05/11/big-brand-1080px-design/