diff --git a/src/components/App.js b/src/components/App.js
index e6809a5..92190a3 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -2,12 +2,11 @@ import React from 'react'
export default (props) => {
return (
-
-
-
-
+
)
}
diff --git a/src/styles/_objects.app.scss b/src/styles/_objects.app.scss
new file mode 100644
index 0000000..24ff3d9
--- /dev/null
+++ b/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;
+}
diff --git a/src/styles/_objects.layout.scss b/src/styles/_objects.layout.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/styles/_tools.aliases.scss b/src/styles/_tools.aliases.scss
index e69de29..a8ebb3d 100644
--- a/src/styles/_tools.aliases.scss
+++ b/src/styles/_tools.aliases.scss
@@ -0,0 +1,2 @@
+$base-spacing-unit: $inuit-global-spacing-unit;
+$double-spacing-unit: $inuit-global-spacing-unit-large;
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 1dcb6e8..fa89a08 100644
--- a/src/styles/main.scss
+++ b/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';