The Simpler CSS Grid. Last week I talked about 960 Grid System is Getting Old. Surprisingly a lot of comments have been made. It seems like people are using 960gs because of the "golden ratio" — all numbers are even. I'm a designer, not a grid scientist. Why restrict your layout so that it can fit into this 960gs? Problems with 960.gs Narrow Gutter Space I did a quick Photoshop mockup to show how 20px gutter space would look like on 960gs. To solve this small gutter problem, a lot of people add padding to either the content area or sidebar containers, making that subsequent content area smaller. Unnecessary Left and Right Margin To those who don't know, the content width in 960gs is actually 940px, not 960px.
Too Many Classes Visual aesthetic might be a personal biased but, even so, there seems to be some fundamental CSS issues as well. The Simpler 978px Grid (demo) The 978px grid that I mentioned in my previous article got rid of the unnecessary left and right margin. 978px HTML & CSS (demo) Conclusion. CSS3 Patterns Gallery.
Browser support The patterns themselves should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+. However, implementation limitations might cause some of them to not be displayed correctly even on those browsers (for example at the time of writing, Gecko is quite buggy with radial gradients). Also, this gallery won’t work in Firefox 3.6 and IE10, even though they support gradients, due to a JavaScript limitation. Submission guidelines If you have a new pattern to submit, please send a pull request. Does it present a new technique? CSS3 Click Chart | CSS3 Browser Support and Information. 40+ Really Useful CSS3 Techniques & Tutorials. 40 Brilliant CSS3 Techniques and Tutorials.