Padarom Padarom - 4 years ago 113
CSS Question

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:

Example

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.

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download