Missional Code alert('Him');

11Sep/110

960 grid system

The 960 Grid System provides an easier/faster way to configure screen layouts. The idea is that your main body will have 960 pixels, which can conveniently be split up into 12 or 15 columns, each of equal width, with 10px padding on both sides. If I'm working with 12 columns and I've got a sidebar, then a main content area, I can let that sidebar take up 3 of these columns, and the main content 9 of them. Or any combination of numbers, really. I could have 12 distinct content areas if I wanted to.

If you download the package from 960.gs, it'll come with code and some samples - all you'll really need to do is include one (or two more recommended) CSS files, and your HTML markup probably won't have to change too much. I had created a small social media aggregator for some friends and I and recently made the switch to use this 960 grid system. Beyond the very small learning curve, the time spent switching over was straight up negligible.

I don't want to reinvent the wheel or say what's already been said well - you should check out that second link under Resources (the netTuts tutorial). And this may not be clear, but whenever you use the 12 or 15 columns, it is to my understanding that you don't always have to add up to 12 or 15. Just make sure that when you're done, you have a div whose style clears 'both,' as all of the above columns will be floating left.

Resources:

http://960.gs/

http://net.tutsplus.com/tutorials/html-css-techniques/prototyping-with-the-grid-960-css-framework/

Also, an inspired 1140 grid: http://cssgrid.net/ to my understanding, this is unique in that it provides the system, but then is flexible and fluid to adapt to different display sizes like on mobile phones or tablets.

Comments (0) Trackbacks (0)

No comments yet.


Leave a comment

(required)

No trackbacks yet.