Creating a metro UI like page
I would like to create a design similar to the Windows 8 metro UI, like in this example image:
Each of these spans links to one subpage on my server. The URLs, contents and background-images of the tiles are all loaded from a MySQL database, so nothing is hardcoded. I am using Twitter Bootstrap for designing purposes.
There are three different possible sizes for each tile:
- large (span 1)
- medium (span 7)
- small (span 2)
I can easily deal with the medium- and small-sized tiles, as each of them only spans over one row. small tiles have the class
col-md-3col-md-6<div class='row'>
<span class='size-large col-md-6'>span 1</span>
<span>
<span class='row'>
<span class='size-small col-md-3'>span 2</span>
<span class='size-small col-md-3'>span 3</span>
</span>
<span class='row'>
<span class='size-small col-md-3'>span 4</span>
<span class='size-small col-md-3'>span 5</span>
</span>
</span>
</div>
<div class='row'>
<span class='size-small col-md-3'>span 6</span>
<span class='size-medium col-md-6'>span 7</span>
<span class='size-small col-md-3'>span 8</span>
</div>
<div class='row'>
<span class='row'>
<span class='size-medium col-md-6'>span 9</span>
</span>
<span>
<span class='size-small col-md-3'>span 11</span>
<span class='size-small col-md-3'>span 12</span>
</span>
<span class='size-large col-md-6'>span 10</span>
</div>
Everything's quite easily understandable until now. But here begins the difficult part: Creating the markup dynamically after loading the tile's data from the database.
These are the values I have:
$size$name$description$backgroundI started with this:
$width = 0;
echo "<div class='row'>";
foreach (Project::getAllTiles() as $i => $project) {
$thisWidth = 0;
list($size, $name, $description, $image) =
array($project['size'], $project['name'], $project['description'], $project['background']);
$thisWidth = $size == 'small' ? 3 : 6; // Width of this tile
$width += $thisWidth; // Width of current row
if ($width > 12) {
echo "</div><div class='row'>"; // Jump to next row
$width = 0; // Reset width of row
}
echo "<div class='col-md-$thisWidth size-$size'>";
echo $name; // Placeholder
echo "</div>";
}
echo "</div>";
This works well for small and medium sized tiles. However I can not imagine an easy way to also handle large tiles, which span over two rows. I hope someone can give me a hint on how to do this or some snippets so I can try it myself.
After more research I found a bootstrap framework that is capable of exactly what I want to achieve. Gerald Schneider suggested me to use Metro Bootstrap, which - based on my tests - wasn't really capable of multi line tiles.
Metro UI however is (working demo). I still haven't been able to figure out how to create this markup dynamically via PHP, so I will use the easier already existent Metro UI instead.