built out layout grid and header navbar components

src/bootstrap.js

@@ -7,12 +7,10 @@ import reducers from './reducers';
 
 const createStoreWithMiddleware = applyMiddleware()(createStore);
 
-import 'bootstrap/dist/css/bootstrap.css';
 import './style/main.scss';
 
 import Layout from './components/layout';
 
-
 function main() {
   ReactDOM.render(
     <Provider store={createStoreWithMiddleware(reducers)}>

src/components/headernavbar/header.js

@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+
+class Header extends Component {
+    render() {
+        return (
+            <div className='header'>
+                <img src='http://via.placeholder.com/50x50'/>
+            </div>
+        )
+    }
+}
+
+export default Header;

src/components/headernavbar/navbar.js

@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+
+class Navbar extends Component {
+    render() {
+        return (
+            <div className='navbar'>
+
+            </div>
+        )
+    }
+}
+
+export default Navbar;

src/components/layout.js

@@ -1,10 +1,15 @@
 import React, { Component } from 'react';
 
+import Header from './headernavbar/header';
+import Navbar from './headernavbar/navbar';
+
 class Layout extends Component {
   render() {
     return (
-      <div>
+      <div className='layout'>
         {this.props.children}
+        <Header/>
+        <Navbar/>
       </div>
     );
   }

src/style/headernavbar.scss

@@ -0,0 +1,9 @@
+.header {
+    display: grid;
+    justify-content: center;
+}
+
+.navbar {
+    background-color: #333;
+    box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2);
+}

src/style/layout.scss

@@ -0,0 +1,5 @@
+.layout {
+    display: grid;
+    grid-template-rows: [header-s] 50px [header-e nav-s] 50px [nav-e content-s] 1fr [content-e];
+    grid-template-columns: [s] 1fr [e];
+}

src/style/main.scss

@@ -0,0 +1,17 @@
+
+
+html {
+    font-size: 62.5%;
+}
+
+*,
+*::after,
+*::before {
+    margin: 0;
+    padding: 0;
+    box-sizing: inherit;
+}
+
+
+@import 'layout';
+@import 'headernavbar';