YTV Channel
Agency: Playground Inc
YTV's playfully simple design belies a project of tremendous complexity.
I was responsible for coding the front end for most of the primary UI components — the content grid, hero slider, content overlay, special effects for the "Don't Press Me" button, and many others. Everything is responsive.
I also contributed to significant parts of the back end with several custom Drupal modules, including a powerful site-wide skinning engine.
- HTML5
- CSS3
- jQuery
- Drupal
- PHP

I used Packery to assemble the semi-random content grid, and wrote a custom Drupal module to automatically generate SVG masks for the skewed grid cells.



I also wrote a Skin module that enables changing the entire site's appearance directly through the CMS, with changes reflected instantly in a live preview window. Skins are assigned to prominent shows and holiday events.

I had a lot of fun using CSS3 transforms, SVG graphics, spritesheets and HTML5 Audio to build various wacky special effects for the "Don't Press Me" button. It received over 35,000 clicks in a single day.