2

I would like to know if it's possible to recreate the tile system of modern UI from Windows 8 on a HTML page.

I already created this from this website. Here is the code 

<div class="tile pos1-1 w1h1 techolive"></div>
<div class="tile pos1-2 w1h1 techblue"></div>
<div class="tile pos2-2 w1h1 techred"></div>
<div class="tilebanner" style="font-size: 20px !important;">
    <a class="tile pos2-3 w2h1 techdarkblue" href="...">
                    List of<br/>
                    Sessions
    </a>
</div>

Now i would like to add the same slide movement effect of modern UI. I guest I need javaScript to create that. Perhaps this feature or a similar feature is included in HTML 5 or CSS. Do you know where I can find a sample?

Bastien Vandamme
  • 17,659
  • 30
  • 118
  • 200
  • I just found this but it's a tool, no real code. I would like to code this to create website : http://www.youtube.com/watch?v=5MB4PqHhEbU – Bastien Vandamme Apr 24 '13 at 11:31

2 Answers2

4

There is a plugin for jQuery called Metro JS. Maybe you can use this to create the tiles with jquery and javascript.

Jan Hommes
  • 5,122
  • 4
  • 33
  • 45
  • @David Chase: You're right. I used German grammar. Corrected my answer. – Jan Hommes Apr 24 '13 at 11:40
  • 1
    lol i mean like the Apple saying ["There's app for the that"](http://www.cnn.com/2010/TECH/mobile/10/12/app.for.that/index.html), i am saying "there's a plugin for that" nothing to do with your grammer :) – David Chase Apr 24 '13 at 12:24
2

Anyone looking at this now should check out MetroUI - it follows a very similar methodology to Twitter Bootstrap and is very easy to use and produces really nice results.

It's also:

Developed with the advice of Microsoft to build the user interface

So you get something really true to Windows 8

Harry Mustoe-Playfair
  • 1,369
  • 16
  • 29