Creating a metro UI like page
css, html, php, twitter-bootstrap-3
Solution
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.
Problem
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-3`, large and medium tiles use `col-md-6`. I can think of the required markup for this kind of design like this: ``` <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`, `$background`. I 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.