FLEXBOX FTW

app/styles/dependencies/elements.scss

@@ -30,3 +30,7 @@ ul, ol {
 }
 ul { list-style: none outside; }
 ol { list-style: decimal; }
+
+.icon {
+    vertical-align: middle;
+}

app/styles/layout/backlog.scss

@@ -7,10 +7,11 @@
     padding: 1em;
     margin-bottom: 2rem;
     @include clearfix;
-}
-
     .trans-button {
         margin-right: 1rem;
+        padding: 4px 0;
+        display: inline-block;
+    }
 }
 
 .new-us {

app/styles/main.scss

@@ -29,6 +29,7 @@ $prefix-for-spec:      true;
 @import 'modules/nav';
 @import 'modules/sidebar';
 @import 'modules/burndown';
+@import 'modules/backlog-table';
 
 // Responsive
 @import 'responsive/mobile';

app/styles/modules/backlog-table.scss

@@ -0,0 +1,55 @@
+.backlog-table{
+    display:flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-content: stretch;
+    align-items: center;
+    width: 100%;
+    .row {
+        display:flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        justify-content: flex-start;
+        align-content: stretch;
+        align-items: stretch;
+        width: 100%;
+        text-align: left;
+        padding: .5em 0;
+
+        @for $i from 1 through 8 {
+            .width-#{$i} {
+                flex-grow: $i;
+                flex-shrink: 0;
+                flex-basis: 50px;
+            }
+        }
+    }
+    .user-stories {
+        flex-basis: 500px;
+        input {
+            vertical-align: top;
+        }
+        span {
+            max-width: 70%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            display: inline-block;
+        }
+    }
+    .title {
+        font-family: 'DroidSans-Bold';
+        @extend .medium;
+    }
+    .sub-title {
+        font-family: 'DroidSans';
+        @extend .small;
+        background: $whitish;
+        border-bottom: 2px solid $grayer;
+    }
+    .table-main {
+        @extend .small;
+        border-bottom: 1px solid $grayLight;
+    }
+}

app/views/modules/backlog-table.jade

@@ -1,23 +1,33 @@
-section.table.backlog
+section.backlog-table
-  header
+  div.row.title
-    div.row
+    div.user-stories.width-4 User Stories
-      div.user-stories.width-6 User Stories
     div.status.width-2 Status
-      div.points.width-2 Points
+    div.points.width-1 Points
-    div.row.sub-header
+    div.points.width-1
-      div.width-8
+  div.row.sub-title
-      div.status.width-1 Front
+    div.user-stories.width-4
-      div.points.width-1 Total
+    div.status.width-2
-  body
+    div.points.width-1 Front
-    div.row
+    div.points.width-1 Back
-      div.user-stories.width-6 User Stories
+  div.row.table-main
+    div.user-stories.width-4
       input(type="checkbox", name="", id="")
       span Crear el perfil de usuario Senior en el admin
       a(href="", title="Edit")
-          span.ico(data-icon="edit") Edit
+      span.icon.icon-edit
       a(href="", title="Delete")
-          span.ico(data-icon="delete") Delete
+      span.icon.icon-delete
-      div.status.width-2
+    div.status.width-2 Status
-        span Ready for test
+    div.points.width-1 Front
-      div.status.width-1 3points
+    div.points.width-1 Back
-      div.points.width-1 8points
+  div.row.table-main
+    div.user-stories.width-4
+      input(type="checkbox", name="", id="")
+      span Crear el perfil de usuario Senior en el admin
+      a(href="", title="Edit")
+      span.icon.icon-edit
+      a(href="", title="Delete")
+      span.icon.icon-delete
+    div.status.width-2 Status
+    div.points.width-1 Front
+    div.points.width-1 Back