dMetro

A dynamic framework for displaying content, based on Microsoft's Metro UI.

dMetro displays content in Metro tiles of three sizes; small (1x1), medium (1x2), and large (2x2). Each tile can be customized with a title, sub-text, tags, link, and whatever else you want to write into the div (it's just HTML/CSS). Calling the function metrofy() will arrange the tiles into lines based on the specified width and height of the Metro container. The function will skip to the next line when there is not enough room in the current one, and avoid overlaps with the 2x2 tiles.

The above example in HTML just looks like:

<div class = "tile small" onclick = "onclickActionHere()">
    <img src = "assets/klk.jpg">
    <span class = "name">Kill la Kill Soundtrack</span>
    <span class = "sub">Music | 10.26.14</span>
    <span class = "tags">anime klk killlakill music soundtrack epic</span>
</div>
<div class = "tile medium" onclick = "onclickActionHere()">
    <img src = "assets/gc.png">
    <span class = "name">The Everlasting Guilty Crown</span>
    <span class = "sub">Music | 10.26.14</span>
    <span class = "tags">anime guilty crown opening egoist</span>
</div>
<div class = "tile small" onclick = "onclickActionHere()">
    <img src = "assets/aot.jpg">
    <span class = "name">Attack on Titan</span>
    <span class = "sub">Anime | 10.26.14</span>
    <span class = "tags">anime attack on titan aot</span>
</div>
<div class = "tile large dark" onclick = "onclickActionHere())">
    <img src = "assets/az.jpg">
    <span class = "name">A/Z</span>
    <span class = "sub">Music | 10.26.14</span>
    <span class = "tags">anime aldnoah zero opening</span>
</div>

Usage details and live demo to be added.

Built With

• css
• javascript