- E-com DevBlog - http://dev.tonic1394.com -

A few grid systems to keep an eye on

Posted By Phil On August 30, 2011 @ 9:42 am In Web Development | No Comments

I've been attempting to look into the future and what I've found is that you can either code static and pray that your code fits the spec of your end-user, or you can attempt to throw media-queries at everything and hope you had enough to make the design stick.

So where does that leave grids? Grids let us throw a design up and make it look pretty and proportioned. That isn't to say that your design will still look fantastic on someone's imported-Nokia as it did on your cinema display when you pounded the design out, but using a good grid system can help ease the pain of making things a little more responsive and a lot less "borked".

Here are three grid systems worth taking a look at:

  • Simple Grid [1] - Simple grid takes after it's namesake, it is a system focused on simplicity and keeping everything elegantly small. While I haven't created a project with this yet, I'm feeling like my weekend is going to be spent playing with this.
  • Golden Grid [2] - Ever heard of the Golden Ratio [3]? This grid system is based on that principle and claims to handle almost any screen (from 240px to 2560px wide).
  • 1140px CSS Grid System [4] (1140gs) - The ever popular 1140px grid system. Since 1140px is the new hotness for design, we are finally starting to break the shackles of 1024x768 users. However that isn't entirely true, we still have to plan ahead for mobile devices. This is what makes 1140gs so brilliant. It handles the media-queries for you and can handle switching your design out for a much smaller screen. I've used this one on a few projects and while it does take a design shift the results have been worth it.

No that's not anywhere near the entire list of grid systems, but they are the ones that I find to be the most exciting (this month). And I've even used the 1140gs on a few projects (that were met with success). This list should at least get you started. If you do anything cool with any of these (or even some other grid system), drop a link in the comments so we can all see your handiwork.


Article printed from E-com DevBlog: http://dev.tonic1394.com

URL to article: http://dev.tonic1394.com/2011/08/a-few-grid-systems-to-keep-an-eye-on/

URLs in this post:

[1] Simple Grid: http://simplegrid.info/

[2] Golden Grid: http://goldengridsystem.com/

[3] Golden Ratio: http://en.wikipedia.org/wiki/Golden_ratio

[4] 1140px CSS Grid System: http://cssgrid.net/

Copyright © 2008 E-com DevBlog. All rights reserved.