Basic layout styling

src/components/App/style.scss

@@ -1 +1,39 @@
+@import '~variables';
+
+html {
+    box-sizing: border-box;
+}
+
+*, *:before, *:after {
+    box-sizing: inherit;
+}
+
+body {
+    margin: 0;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.gurubot2 {
+    display: flex;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    flex-flow: column;
+
+    .main-header {
+        flex: 0 0 auto;
+        background: $color-primary;
+        padding: 1em;
+
+        h1 {
+            margin: 0;
+        }
+    }
+
+    .main-body {
+        display: flex;
+        flex: 1;
+        padding: 1em;
+    }
+}
 

src/containers/CrudList/style.scss

@@ -1,10 +1,25 @@
 @import '~variables';
 
 .crud-list-wrapper {
+    display: flex;
+    flex: 0 0 50%;
+    flex-flow: column;
+
     &.loading {
         .body {
             opacity: $opacity-pending;
         }
     }
+
+    .head {
+        .title {
+            margin: 0;
+        }
+    }
+
+    .body {
+        margin: 0.5em 1em 0.5em 0;
+        overflow-y: auto;
+    }
 }
 

src/sass/variables.scss

@@ -1,4 +1,7 @@
 $color-grey-md: #999;
 
+$color-primary: #ffaf28;
+$color-secondary: #2a0072;
+
 $opacity-pending: 0.4;