I found a new concept for website template design. 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 12 column grid is divided into portions that are 60 pixels wide. The 16 column grid consists of 40 pixel increments. Each column has 10 pixels of margin on the left and right, which create 20 pixel wide gutters between columns. The premise of the system is ideally suited to rapid prototyping, but it would work equally well when integrated into a production environment. There are printable sketch sheets, design layouts, and a CSS file that have identical measurements. I design my entire template by this concept. It helps me make CSS and working with as a team development. Its time saving, also help full for redesign issue. Demo: http://960.gs/demo.html Code (markup): More to know: http://960.gs/ Code (markup): Source
Everybody's going grid crazy! Although if you want to master it then I recommend creating your own template from scratch rather than relying on 960.gs Must read articles are: http://dev.opera.com/articles/view/grid-design-basics-grids-for-web-page-l/ http://www.netmag.co.uk/zine/develop-css/better-web-typography http://www.netmag.co.uk/zine/develop-css/work-with-print-style-sheets
what i wonder is... isnt it going more complicated than normal 3 or 3 column design which can easily be divided into more 2-3 column and still keep things neat in the design itself!
I've decided now on a 960px grid with 63px columns and 17px gutter... Seems to work out great and is divisible by lots of different numbers
The biggest problem with these grid system approaches, and CSS frameworks in general is they pretty much defeat the whole point of using CSS in the first place, that being separation of presentation from content. What you are doing is creating classes that say how your elements appear, NOT what they ARE. At that point you might as well be using a table with presentational attributes and presentational markup. It's like the people who claim to be using semantic markup, then write code like: <div class="left maxwidth smallfont bold clearfix"> /FAIL/ hard. Especially when you end up resorting to bloating out your markup with those stupid clearing div... much less wasting code putting inside them. The net result is sloppy oversized markup and dead weight CSS. Seriously 15k in 4 files just for the demo? We're talking /FAIL/ before you even get out of the gate. Oh, and your comment placement is tripping the double-render bug in IE6 here.
You don't have to use classes in grids for that reason though do you? I haven't yet. Ideas behind grids are great to play around with - there isn't a set fast way of using them. I haven't really looked that closely at the 960 template above, like I haven't looked very closely at the yahoo and of blueprint template I think it's really important when it comes to constructing your own grid to build it yourself from scratch, that well you have a far better appreciation of its construction and you'll be in a better position for troubleshooting if you run into any problems I always try something different with every design... Especially when it comes to using horizontal text spacing Some of my favourite web designs on the internet at the moment are minimalist, I really appreciate their use of space and typography