Basic layout using CSS Grid Layout

Closes #7

src/components/App.js

@@ -2,12 +2,11 @@ import React from 'react'
 
 export default (props) => {
   return (
-    <div className='App'>
-      <header>
-        <h1>Kasisto</h1>
-      </header>
-      <section />
-      <footer />
+    <div className='o-app'>
+      <h1 className='o-app__header u-margin-none'>Kasisto</h1>
+      <aside className='o-app__nav' />
+      <section className='o-app__content' />
+      <footer className='o-app__footer' />
     </div>
   )
 }

src/styles/_objects.app.scss

@@ -0,0 +1,32 @@
+// #APP
+/*
+ * App layout using CSS Grid Layout
+ */
+
+.o-app {
+  height: 100vh;
+  display: grid;
+  grid-gap: $base-spacing-unit;
+  grid-template-rows: $double-spacing-unit 1fr $double-spacing-unit;
+  grid-template-columns: $double-spacing-unit 1fr;
+  grid-template-areas:
+    'nav header'
+    'content content'
+    'footer footer';
+}
+
+.o-app__header {
+  grid-area: header;
+}
+
+.o-app__nav {
+  grid-area: nav;
+}
+
+.o-app__content {
+  grid-area: content;
+}
+
+.o-app__footer {
+  grid-area: footer;
+}

src/styles/_tools.aliases.scss

@@ -0,0 +1,2 @@
+$base-spacing-unit: $inuit-global-spacing-unit;
+$double-spacing-unit: $inuit-global-spacing-unit-large;

src/styles/main.scss

@@ -24,8 +24,9 @@
 @import 'elements.headings';
 
 // OBJECTS
-@import 'objects.layout';
+@import 'objects.app';
 
 // COMPONENTS
 
 // UTILITIES
+@import '~inuitcss/utilities/utilities.spacings';