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.













inspiring commentary
January 28th, 2009 at 10:04 pmJesse Foster
Ah, thanks for porting that to jquery. I was thinking the exact same thing.
Jesse
January 29th, 2009 at 3:04 amCorrado Francolini
Outstanding job.
Thank you very much
Best regards,
Corrado
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?
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.
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.
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!!
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.
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.
February 1st, 2009 at 1:51 pmTemplates For Rapid Interactive Prototyping
[...] Visit Source. [...]
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.
February 2nd, 2009 at 4:00 amLayouts interactivos 960 Grid System Framework. | Teimagino.com
[...] Rapid Interactive Prototyping [...]
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.
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.
February 2nd, 2009 at 9:02 pmRey Bango
@Mubashar: Thanks for doing this. We really appreciate your efforts & support.
Rey – jQuery Project
February 3rd, 2009 at 11:01 amMichael Risser
WOW! Great job, I’ll definitely be using these somewhere. Thanks for your hard work.
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!
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 [...]
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.
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.
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.
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.
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?
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/
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.
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 [...]
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.
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.
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
April 1st, 2009 at 7:45 amMy Little List of jQuery Tips, Tricks and Resources | Moral Fibre
[...] Rapid Interactive Prototyping [...]
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 [...]
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. [...]