Rapid Interactive Prototyping

Posted in ResourcesJan 28, 09 | 10:00 am

Mubashar Iqbal

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.

Share:
  • del.icio.us
  • Digg
  • Sphinn
  • Facebook
  • Mixx
  • Google Bookmarks
  • Design Float
  • DZone
  • StumbleUpon
  • Twitter

Author: 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

inspiring commentary

avatar

January 28th, 2009 at 10:04 pmJesse Foster

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

Jesse


avatar

January 29th, 2009 at 3:04 amCorrado Francolini

Outstanding job.

Thank you very much

Best regards,

Corrado


avatar

January 30th, 2009 at 9:27 amKenneth

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?


avatar

January 30th, 2009 at 9:42 amMubashar Iqbal

@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.


avatar

January 30th, 2009 at 2:48 pmTy (tzmedia)

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.


avatar

January 30th, 2009 at 5:25 pmMicah

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!!


avatar

January 30th, 2009 at 10:33 pmKenneth

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.


avatar

February 1st, 2009 at 10:19 amSajid

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.


avatar

February 1st, 2009 at 1:51 pmTemplates For Rapid Interactive Prototyping

[...] Visit Source. [...]


avatar

February 1st, 2009 at 11:14 pmMubashar Iqbal

@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.


avatar

February 2nd, 2009 at 4:00 amLayouts interactivos 960 Grid System Framework. | Teimagino.com

[...] Rapid Interactive Prototyping [...]


avatar

February 2nd, 2009 at 7:30 amshin

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.


avatar

February 2nd, 2009 at 12:38 pmMubashar Iqbal

@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.


avatar

February 2nd, 2009 at 9:02 pmRey Bango

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

Rey – jQuery Project


avatar

February 3rd, 2009 at 11:01 amMichael Risser

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


avatar

February 3rd, 2009 at 2:28 pmAaron Martin

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!


avatar

February 9th, 2009 at 3:04 pm960.gs Grid Based Prototypes › Wireframes Magazine

[...] 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 [...]


avatar

February 10th, 2009 at 1:32 pmmatthew w

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.


avatar

February 10th, 2009 at 3:27 pmGPSchnyder

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.


avatar

February 11th, 2009 at 10:39 amMubashar Iqbal

@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.


avatar

February 12th, 2009 at 2:06 pmafewtips.com

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.


avatar

February 16th, 2009 at 7:09 amAndrew Smith

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?


avatar

February 16th, 2009 at 3:08 pmMubashar Iqbal

@Andrew:

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

http://users.tpg.com.au/j_birch/plugins/superfish/


avatar

February 24th, 2009 at 10:54 amDan Vega

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.


avatar

February 27th, 2009 at 10:16 am960 Grid System - Creattica Daily

[...] I knew nothing about the 960 Grid System until developer Mubashar Iqbal sent in this link to his Rapid Interactive Prototyping article. I think CSS Beauty defines it the best… The 960 Grid System is an effort to [...]


avatar

February 27th, 2009 at 3:17 pmmorozgrafix

@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.


avatar

February 27th, 2009 at 4:25 pmmorozgrafix

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.


avatar

February 27th, 2009 at 10:17 pmMubashar Iqbal

@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 :)


avatar

April 1st, 2009 at 7:45 amMy Little List of jQuery Tips, Tricks and Resources | Moral Fibre

[...] Rapid Interactive Prototyping [...]


avatar

June 5th, 2009 at 11:05 pmMy Wonderful Webpage

[...] I was finalizing a re-design of my dad’s website, I discovered this, and now I’m here.  The first draft is closer to where I want it, but the second site has [...]


avatar

October 7th, 2009 at 8:49 am20 jQuery Plugins to Build Your Website Around

[...] Rapid Interactive Prototyping Developer Mubashar Iqbal put together a wonderful set of wireframe templates for you using the 960.gs CSS Framework and jQuery. For those who prefer a fluid layout, you’re covered. Mubashar developed three templates: Fixed width with jQuery, Fluid width with jQuery and a standard Fixed width without jQuery. All three prototyping templates use a 16 column grid. [...]