«
»

960.gs Grid Based Prototypes

February 9th, 2009

Just found a nice HTML prototype sample using the CSS 960 Grid System. The CSS grid allows to align elements more easily across pages. Although it can be said that the technique is perhaps more useful for developers, some people also use it to create wireframe prototypes. In addition, Mushabar Iqbal also ported the fluid grid to a jQuery template allowing for smoother template interactions. Adam Hawkins explains how to use the 960 CSS Grid System for interactive prototyping, but at the same time warns of the inflexibility and rigidness of such an approach. Apparently, once the grid foundations are laid down and multiple pages start making use of it, it becomes more difficult to adjust the grid. Finally, a Twitter follower (wrenbjor) also provided me with a nice and elaborate list of even more tutorials on the 960 grid.

Credits: Lachy Groom

Tags: , ,
Posted in Samples | 10 Comments »

10 Responses to “960.gs Grid Based Prototypes”

  1. Wrenbjor Says:
    February 9th, 2009 at 8:07 pm

    W00t! Thanks for the shout out! I am going to try this on my site this week.

  2. Tyler Says:
    February 9th, 2009 at 8:11 pm

    This may also interest you, a Fluid 960 setup: http://www.designinfluences.com/fluid960gs/

  3. juarezpaf Says:
    February 10th, 2009 at 4:45 am

    Hey Tyler that link is great. A bunch of great stuffs there. Really appreciate!

  4. juarezpaf Says:
    February 10th, 2009 at 4:50 am

    One more thing we can do with 960.gs I need take a look more close in this great framework. The jQuery template is nice, I admit I love jQuery. ^^
    Thanks a lot to share with us f

  5. dsign4all Says:
    February 10th, 2009 at 10:58 am

    I've tried YAML instead of a column grid framework which in my design approach is much more effective (flexible to fluid, rtl, builder, proper ie6 hacks so the horizontal organization is not painful – see the famous Andy Rutledge post- , etc.), to build my wireframes AND my (x)html/css code.

    I've tried to squeeze the graphical software in the process (but Fireworks still makes my day).

  6. web2.0junkie Says:
    February 10th, 2009 at 9:31 pm

    Does this work with only 960.gs or can it work with other CSS Frameworks such as http://unobtrusivecss.com ?

  7. Cristian Pascu Says:
    June 25th, 2009 at 10:18 pm

    Since version 1.6, FlairBuilder offers support for grid based wireframes. Check it out online at http://www.flairbuilder.com/demo/

    Cheers,
    Cristian

  8. Jonas Says:
    March 2nd, 2010 at 8:59 pm

    I dont get it