Windows 8 Metro Tiles with HTML, CSS3 and JavaScript

Obligatory Introductory Paragraph

Let’s face it – you aren’t going to read this opening paragraph. In fact, if you’ve gotten this far, congratulations. Most of you have clicked on the metro tiles below and returned to twitter, reddit, etc. For those of you who have – go to the next paragraph!

Myself and Chris Clark Sell, Microsoft DPE and man behind Metro Weekly, have been working to bring Windows 8 metro tiles to the web. The idea is to create fully functional, metro-like, Windows 8 tiles using HTML, CSS and JavaScript.  The project is creatively entitled “metro-tile” and can be found on GitHub.

We’re just getting started! I encourage you to fork it, refactor it, add to it, clean it, nuke it and submit pull requests. If you are new to GitHub (frankly, who isn’t) read,  “The quickest and easiest “Getting Started w/ GitHub” article you’ll ever read!”

Potential Use Case Scenarios

  • Front and back tile support with data display & tile flip animation
  • Data binding w/ Knockout.js w/ data provided by an ASP.NET Web API
  • RSS Feed auto-parsing and display
  • Drag and drop w/ auto arrange

Live Demo

Safari and Chrome only; IE10 *should* work but it doesn’t

This entry was posted in Projects. Bookmark the permalink.
  • http://www.facebook.com/payton.lee.12 Payton Lee

    This is pretty awesome. How many people are working on this @ github?

  • http://stramaxon.blogspot.com/ Deepak Kamat

    What about a drag and drop feature ?

  • http://twitter.com/JHSDurhamRegion JohnHowardSociety DR

    Interesting couple of effects, but if I drag my browser window down inn size, it just starts to cut off (no left-right scroll bar even) the right side of the tile. Pull it left far enough, and the tile just disappears. I’d love to see it re-shape the layout of the tiles as you re-shape the width of the browser, and show a little bit of a 3d / raised edging to this. All without the use of silly jpegs.

    I’m using Firefox 18.01 to look at this by the way.

  • Swen

    How can i make the tile clickable ?

  • Swen

    I want to make the tile a link clickable, someone an idea?

  • datbrain

    This is pretty sad. You take a windows interface, and wash your hands of IE. IE10 supports HTML5 like nobody’s business. If it doesn’t work in IE10, it means you’re using vendor prefixes in your code or JS libraries. Please fix this in the interest of cross-browser support

    • Mike G

      Did you even read the post? “We’re just getting started! I encourage you to fork it, refactor it, add to it, clean it, nuke it and submit pull requests.”

  • Edu

    Mhhh…
    Maybe I missed something, but this example Works perfectly on my IE 10 (in
    fact, it renders better the edge of the squeezed tiles than Firefox!)

    I’m running Win8, maybe that’s the fact.

  • http://www.facebook.com/profile.php?id=100000465946348 Tylor Lavoie

    Works in Firefox 19. I don’t know about lower versions. Its pixelly tho.

  • Alperen

    Test Results
    IE 10 – Cool
    IE 9 – Pretty Cool
    IE 8-7 – No js Effects.

    Chrome : Pretty Cool
    Firefox : Cool
    Opera: No js Effects .

    Thank you Guys.