--- a/views/hello_template.tpl	Sun Jul 12 18:00:57 2015 +0200
+++ b/views/hello_template.tpl	Wed Jul 15 14:06:03 2015 +0200
@@ -1,21 +1,110 @@
+<%
+    import math
+    break_tile_lines = math.ceil(len(tiles)/2)
+    tilecounter = 1
+    vp_size = 1;
+
+    if len(tiles) <= 2:
+        vp_size = "6vw"
+    elif len(tiles) >2 and len(tiles) <=4 :
+        vp_size = "5vw"
+    elif len(tiles) >4 and len(tiles) <=6 :
+        vp_size = "4vw"
+    elif len(tiles) >6 and len(tiles) <=8 :
+        vp_size = "3vw"
+    end
+%>
 
 <style>
+    *{
+        margin: 0 auto;
+        padding: 0 auto;
+    }
+
     #wrapper{
-        color: red;
+        display: table;
+        color: black;
+        background-color: #F2F2F2;
+        min-width: 100%;
+        min-height: 100%;
+        border-spacing: 10px;
     }
 
     .tile{
+        background-color: #FFFFFF;
+        display:table-cell;
+
+        width: auto;
+        height: auto;
+        border: 1px solid #999999;
+        text-align:center;
+        vertical-align: middle;
+
+        -webkit-box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.4);
+        -moz-box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.4);
+        box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.4);
+
+    }
+
+    .clear{
+        display: table-row;
+        clear: both;
+        margin: 0;
+        padding: 0;
+        height: 0;
+        overflow: hidden;
+    }
+
+    .statusmon{
+        border: 1px solid #000000;
         color: white;
+        font-size: {{vp_size}};
+        font-family: "Lucida Console", Monaco, monospace;
+    }
+
+    .chart{
+        font-size: {{vp_size}};
+        font-family: "Lucida Console", Monaco, monospace;
+    }
+
+    .active{
+        background-color: #009900;
+    }
+
+    .dead{
+        background-color: #990000;
     }
 
 </style>
 
 <div id = "wrapper">
 
+    % for tile in tiles :
+        % type = ""
+        % text = ""
+        % status = ""
+        % if tile["type"] == "mon" :
+            % type = "statusmon"
+            % text = tile["source"]
+            % if tile["status"] == "up" :
+                % status = "active"
+            % elif tile["status"] == "down" :
+                % status = "dead"
+            % end
+        % elif tile["type"] == "d3.js" :
+            % type = "chart"
+            % text = "place for a chart!"
+        % end
 
-<div class = "tile">
+        <div class = "tile {{type}} {{status}}">
+            {{text}}
+        </div>
+
+        % if tilecounter == break_tile_lines:
+            <div class = "clear"></div>
+        % end
+
+        % tilecounter += 1
+    % end
 
 </div>
-dsndsakj
-
-</div>