This site is designed to work with IE7 or greater. Please consider upgrading your browser.

Meet the super-light HTML prototyping toolkit in under 3 minutes

This is a demo of an HTML Prototyping Toolkit that I've assembled from a few open source libraries. The idea is to create something super light so you can sketch your wireframes in HTML.

Using Templates

I'm using a jQuery template for creating columns in a grid.

Columns look like this:

{cols}  <-- grid layout container
  {col12} <-- 12 unit column
  {/col}  <-- closed column
  {col12last}  <-- 12 unit column
                   last in container
  {/col}
{/cols}  <-- end of container

You can try out the prototypes I'm playing with here:

http://www.konigi.com/protokit/projects/tsi-proteus/index.html

If you have Firebug, inspect the page to see what the templates are building.

Works with ixEdit

As I said above, this is meant to be super light and uses existing libraries. I'll start posting the code when it's cleaner.

Comments

Anonymous's picture
Johan Strandell
11/18/09 09:49

Looks very promising. I'm definitely looking forward to seeing the code!

Advertisement
Ben Rossi's picture
Ben Rossi
11/18/09 14:13

Great work Mike! (and all the authors of the frameworks that you have built-upon)

I look forward to seeing Protokit as it is refined.

Please let the community know if you need testers down the line.

-Ben

Anonymous's picture
Dave Harrison
11/22/09 01:21

This looks great, far superior in so many way s to the SaaS options we have at present. If you get the code cleaned up and it is easy to implement I will be championing this!

Anonymous's picture
Corrado Francolini
11/22/09 07:39

Can't wait for the first release.

Thanks for your effort and for sharing your excellent work.

Best regards,

Corrado

Anonymous's picture
Andy Howard
12/04/09 21:35

Wow, looking awesome! Can't wait for this.

Post new comment

The content of this field is kept private and will not be shown publicly. If you have a Gravatar account, used to display your avatar.