Rapid Interactive Prototyping

Yesterday I posted a link to some templates that extended the 960.gs grid system that could be used for Rapid Interactive Prototyping.

I loved the templates, but not that they used Mootools, I prefer to use JQuery where possible. I put on my hackers hat and ported the templates to JQuery.

You can see a demo of the Fixed width, and Fluid templates, and download the files here.

About Mubashar Iqbal

Mubashar Iqbal is the creator of Most Inspired, a web designer and developer, who has been building websites for over 13 years. You can read his blog at Mubashar Iqbal
This entry was posted in Resources and tagged , . Bookmark the permalink.

32 Responses to Rapid Interactive Prototyping

  1. Jesse Foster says:

    Ah, thanks for porting that to jquery. I was thinking the exact same thing.


  2. Outstanding job.

    Thank you very much

    Best regards,


  3. Kenneth says:

    Hey, I commented on the original implementation, but I’m glad to see a jQuery version (MooTools was just never my bag). Any chance of a publicly tracked version? Maybe on GitHub or something?

  4. @jesse: thanks

    @corrado: the port to jquery was pretty simple, great work for those that came before me!

    @kenneth: for sure, i’m gonna check with stephen to see if he wants to include these in his repository, if not i’ll setup something separate.

  5. Ty (tzmedia) says:

    Hey hey…. Now I can stop IM’ing you about when you are going to share these with me!
    Now I’m off to find more goodie’s and see if I can get somebody to port those to jQuery if need be.
    FYI using jQuery plugins so they don’t conflict w/ other scripts is as easy as replacing the $ in the script code with the word jQuery, how easy is that, darned easy!

    OH yeah thanks heaps Mubs and other members of the secret order of the 960.

  6. Micah says:

    Thank you so much for supplying this awesome framework. It has been a tremendous help to accomplishing a task that has been 7 years in the making. You rule!!

  7. Kenneth says:

    Really you should just fork his public repo and put your version in the fork. That way we can see the evolution on both versions.

  8. Sajid says:

    well thanks for jquery version, but i think show hide animation of boxes and accordian isn’t that smooth like in mootools version. i always came across this kind of jerky animation when using jquery’s slideUp,slideDown effects.

  9. Pingback: Templates For Rapid Interactive Prototyping

  10. @kenneth: I’m a bit new to Git (old time SVN user 🙂 ) but I’ll take a look at what I can do.

    @sajid: Agreed, and a couple of other people have noted that to also. I will look into fixing that.

    I noticed that I hadn’t ported the Accordion for the section menu in the left column, so I’ve updated the code with a fix for this.

  11. Pingback: Layouts interactivos 960 Grid System Framework. | Teimagino.com

  12. shin says:

    Mmm, showing or accordion is not smooth as mootools. You can see this by clicking paragraph, ajax content or section menu on the left column.

  13. @shin: I’ve looked into this and there is a ‘bug’ that causes this jump, but there appears to be an quick workaround, will try and get it integrated soon.

  14. Rey Bango says:

    @Mubashar: Thanks for doing this. We really appreciate your efforts & support.

    Rey – jQuery Project

  15. WOW! Great job, I’ll definitely be using these somewhere. Thanks for your hard work.

  16. Aaron Martin says:

    This is great. When I saw the fluid 960 going around, I was excited. I’m even more excited that it’s using jQuery now.

    Brilliant work!

  17. Pingback: 960.gs Grid Based Prototypes › Wireframes Magazine

  18. matthew w says:

    You should give credit and links to people in your version of 960gs. As you say, you’re standing on the shoulders of giants, but you aren’t doing a good job of giving them credit. All you did was swap out mootools for jquery. Everything else was done by someone else. Give credit -where- credit is due.

  19. GPSchnyder says:

    I’m right now working on a Website using your “Port” of the 960.gs, and I’m loving it.

    First time using a framework, and it works like a breeze.

    Thanks for your work.

  20. @matthew: I left the original credit text from Stephens work as it was, its in the accordian section as he had it placed. But I will make it clearer.

    I think I’ve made it quite clear that I was just porting the framework and not trying to take credit for other peoples work.

    To everyone else, thank you for your comments, I will be adding this to GitHub shortly to make it easier to keep in sync with the original base, but also to manage ports to other CMS platforms.

  21. afewtips.com says:

    Your work and the originating work on the fluid 960 is just terrific.

    I am trying to utilize the framework for a Plone theme I am making.

    Thanks very much for great work.

  22. Andrew Smith says:

    Any suggestions for adding another level to the main navigation menu?
    Is suckerfish the best system out there, or can it be achieved with jquery?

  23. @Andrew:

    There is a JQuery version of suckerfish called Superfish that should do what you need.


  24. Dan Vega says:

    Any ideas on why it does not work in IE6? The columns are off, there is a horizontal scroll bar and the menus do not work.

  25. Pingback: 960 Grid System - Creattica Daily

  26. morozgrafix says:

    @Dan Vega

    I believe IE6 breaks because of this code in layout.css (I think you talking about 16 column fixed version)

    #accordian-block dd {
    width: 380px;

    I didn’t have time to play around with it but I think it would be a good starting point.

  27. morozgrafix says:

    I dug a little more and tried to validate fixed layout.

    html code wasn’t validating correctly.

    I’ve made some changes and it validates now. Please check and see if cross browser functionality is still there. Here is a link to valid html code:http://snipt.org/Ggm

    This is for fixed 16 column layout only.

  28. @Dan Vega: I believe Stephen made some updates to the original CSS to try and fix some of the CSS issue with IE6, which I haven’t had a chance to update in my version. I’ll try and get that done soon.

    In the mean time you can try checking the code on Stephen’s site to see if it fixed the problem.

    @morozgrafix: Thanks for taking the time to dig into this! All hands on deck 🙂

  29. Pingback: My Little List of jQuery Tips, Tricks and Resources | Moral Fibre

  30. Pingback: My Wonderful Webpage

  31. Pingback: 20 jQuery Plugins to Build Your Website Around

  32. InsiteFX says:

    Hi Mubashar,

    First off, thank you very much for proting this to jQuery.

    Now I have found a problem with the layout, in IE8 this works fine. In IE7 the only way to open and close the panels is to click on the top titles the buttons do not work at all.

    As for others complaining about the smoothnest of the planes try using the jQuery easing plugin.

    Thank you