Design Studio 1.2 SDK - Use both sides - Double Sided Tiles

[mike_howles4]

Like they said in school.  Use both sides of your paper!  Below is an extension of my HTML Templating example, with some CSS3 flipping goodness.  Inspired by the SCN Reputation Missions tiles that you can flip.  Source can be found at the github repo below.

SDK Source:

entmike/com.ipaper.sample.doublesidedtile · GitHub

External sources/acknowledgments:

• Charting script from http://omnipotent.net/jquery.sparkline
• CSS3 flipping from http://davidwalsh.name/css-flip
• Code highlighting from CodeMirror

As I mentioned, I liked the interactive flipping tiles of SCN's missions, and figured something similar might serve as a contextual drilldown or an in-place tooltip on steroids use.  Imagine wanting to show a KPI title with sales and maybe some other high-level information, but also wanting to pack in some additional information on mouseover.  The Design Studio project is also included in my Github repository mentioned above.

Below is a design-time snapshot, and a runtime animated example.

Happy Holidays!

At runtime (click image below if not animating in blog post):