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

Tweet about this on Twitter6Share on Facebook1Share on Google+1Share on LinkedIn2Pin on Pinterest0

Comments

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

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

  3. What about a drag and drop feature ?

  4. What about a drag and drop feature ?

  5. 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.

  6. 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.

  7. How can i make the tile clickable ?

  8. How can i make the tile clickable ?

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

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

  11. 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

    • 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.”

  12. 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

    • 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.”

  13. 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.

  14. 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.

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

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

  17. 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.

  18. 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.

  19. Doesn’t work on chrome.

    • ryanlowdermilk says:

      Shrey,

      This is fixed. I’m now powering my site with a CDN and neglected to update the code for the above example. Thx for the heads up!

  20. Any idea where the content went to? The Live Demo doesn’t appear to work. cdn.* no longer exists?

Speak Your Mind

*