Remixable Quilts for the Web

Atul Varma set up a quilt for MozCamp Asia 2012 which I thought was a fantastic tool for that type of event. It provided an engaging visualization, was collaboratively created, and allowed a quick and easy way to dive further into the details about the participating groups.

Screenshot 2014-12-18 15.23.19I wanted to use it for a couple of projects, but the code was tied pretty closely to that specific content and layout.

This week I finally got around to moving the code over to Mozilla Webmaker, so it could be easily copied and remixed. I made a couple of changes:

  • Update font to Open Sans
  • Make it easy and clear how to re-theme the colors
  • Allow arbitrary content in squares

The JS code is still a bit too complex for what’s needed, but it works on Webmaker now!

Screenshot 2014-12-18 15.09.42

View my demo quilt. Hit the “remix” button to clone it and make your own.

The source for the core JS and CSS is at https://github.com/autonome/quilt.


One Comment on “Remixable Quilts for the Web”

  1. Nice! It’s good to see another remix of the quilt idea popping up into the wild 😀

    There are a few tweaks I’d make to simplify the code down a little bit to make it easier for learners (though you can expect a pull request from me for those 😉

    I actually did a little bit of work on the quilt idea myself a few months back, if you’re interested in any of the ideas behind that version (works a in different way to yours) I’d be interested in getting some feedback from you. https://github.com/fuzzyfox/supportopen


Leave a comment