add simple grid system

assets/js/components/Pageviews.js

@@ -35,7 +35,7 @@ class Pageviews extends Component {
   render() {
     const tableRows = this.state.records.map( (p, i) => (
       <tr>
-        <td>{i+1}</td>
+        <td class="muted">{i+1}</td>
         <td><a href={p.Path}>{p.Path}</a></td>
         <td>{p.Count}</td>
         <td>{p.CountUnique}</td>
@@ -43,7 +43,7 @@ class Pageviews extends Component {
     ));
 
     return (
-      <div class="block block-float">
+      <div class="block">
         <h3>Pageviews</h3>
         <table class="table pageviews">
           <thead>

assets/js/components/Table.js

@@ -39,7 +39,7 @@ class Table extends Component {
   render() {
     const tableRows = this.state.records.map( (p, i) => (
       <tr>
-        <td>{i+1}</td>
+        <td class="muted">{i+1}</td>
         <td>{p.Label}</td>
         <td>{p.Count}</td>
         <td>{Math.round(p.Percentage)}%</td>
@@ -47,7 +47,7 @@ class Table extends Component {
     ));
 
     return (
-      <div class="block block-float">
+      <div class="block">
         <h3>{this.props.title}</h3>
         <table>
           <thead>

assets/js/pages/dashboard.js

@@ -20,7 +20,7 @@ class Dashboard extends Component {
   render() {
     return (<div class="container">
         <header class="header cf">
-          <h1 class="pull-left">Ana <small>open web analytics</small></h1>
+          <h1 class="pull-left">Ana <small>&middot; open web analytics</small></h1>
           <div class="pull-right">
             <LogoutButton onSuccess={this.props.onLogout} />
           </div>
@@ -30,12 +30,25 @@ class Dashboard extends Component {
           <DatePicker period={this.state.period} onChoose={(p) => { this.setState({ period: p })}} />
         </div>
         <Graph period={this.state.period} />
-        <div>
-          <Pageviews period={this.state.period} />
-          <Table period={this.state.period} endpoint="languages" title="Languages" headers={["#", "Language", "Count", "%"]} />
-          <Table period={this.state.period} endpoint="screen-resolutions" title="Screen Resolutions" headers={["#", "Screen Resolution", "Count", "%"]} />
-          <Table period={this.state.period} endpoint="countries" title="Countries" headers={["#", "Country", "Count", "%"]} />
-          <Table period={this.state.period} endpoint="browsers" title="Browsers" headers={["#", "Browser", "Count", "%"]} />
+        <div class="row">
+          <div class="col-4">
+            <Pageviews period={this.state.period} />
+          </div>
+          <div class="col-2">
+            <Table period={this.state.period} endpoint="languages" title="Languages" headers={["#", "Language", "Count", "%"]} />
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-2">
+            <Table period={this.state.period} endpoint="screen-resolutions" title="Screen Resolutions" headers={["#", "Resolution", "Count", "%"]} />
+          </div>
+          <div class="col-2">
+            <Table period={this.state.period} endpoint="countries" title="Countries" headers={["#", "Country", "Count", "%"]} />
+          </div>
+          <div class="col-2">
+            <Table period={this.state.period} endpoint="browsers" title="Browsers" headers={["#", "Browser", "Count", "%"]} />
+          </div>
+
         </div>
     </div>)
   }

assets/sass/_grid.scss

@@ -0,0 +1,55 @@
+$col-width: 100 / 6;
+
+@media( min-width: 680px ) {
+  .row {
+    margin-left: -10px;
+    margin-right: -10px;
+
+    &:before,
+    &:after {
+        content: " ";
+        display: table;
+    }
+
+    &:after {
+        clear: both;
+    }
+  }
+
+  .col,
+  .col-1,
+  .col-2,
+  .col-3,
+  .col-4,
+  .col-5,
+  .col-6 {
+    float: left;
+    padding-left: 10px;
+    padding-right: 10px;
+    box-sizing: border-box;
+  }
+
+  .col-1 {
+    width: $col-width + 0%;
+  }
+
+  .col-2 {
+    width: $col-width * 2 + 0%;
+  }
+
+  .col-3 {
+    width: $col-width * 3 + 0%;
+  }
+
+  .col-4 {
+    width: $col-width * 4 + 0%;
+  }
+
+  .col-5 {
+    width: $col-width * 5 + 0%;
+  }
+
+  .col-6 {
+    width: 100%;
+  }
+}

assets/sass/_util.scss

@@ -29,3 +29,7 @@
 .clear {
   clear: both;
 }
+
+.muted {
+  color: #888;
+}

assets/sass/styles.scss

@@ -1,10 +1,11 @@
 @import "normalize";
 @import "util";
+@import "grid";
 
 body {
   font-family: Arial, Verdana, sans-serif;
   font-size: 15px;
-  color: #333;
+  color: #444;
   background: #f5f5f5;
 }
 
@@ -22,6 +23,10 @@ h1, h2, h3 {
 table {
   border-collapse: collapse;
 
+  th {
+    color: #222;
+  }
+
   th, td {
     border: 1px solid #eee;
     padding: 4px 8px;