diff --git a/_includes/components/nav-bar.webc b/_includes/components/nav-bar.webc
new file mode 100644
index 0000000..2b214b7
--- /dev/null
+++ b/_includes/components/nav-bar.webc
@@ -0,0 +1,177 @@
+<style webc:scoped>
+  ol,
+  ul {
+    padding: 0;
+    margin: 0;
+  }
+  
+  /* Main menu */
+  .no-js .menu__btn {
+    display: none;
+  }
+
+  .menu__btn {
+    display: block;
+    width: 100%;
+    padding: 0;
+    font: inherit;
+    color: #fff;
+    background: #2a2a2a;
+    border: 0;
+    outline: 0;
+  }
+
+  .menu__btn-title {
+    position: relative;
+    display: block;
+    padding: 10px 15px;
+    padding: .625rem .9375rem;
+    font-weight: 700;
+    text-align: right;
+    text-transform: uppercase;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -o-user-select: none;
+    user-select: none;
+  }
+
+  :focus>.menu__btn-title {
+    box-shadow: inset 0 0 1px 3px #e22d30;
+  }
+
+  button:not(:-moz-focusring):focus>.menu__btn-title {
+    box-shadow: none;
+  }
+
+  .menu__btn:focus,
+  .menu__btn-title:focus {
+    outline: 0;
+  }
+
+  .js .menu__btn--active {
+    color: #e22d30;
+  }
+
+  .menu__list {
+    list-style: none;
+    background: #2a2a2a;
+  }
+
+  .menu__item:hover {
+    background: #e22d30;
+  }
+
+  .menu__item:first-child {
+    border: 0;
+  }
+
+  .menu__item--active {
+    background: #e22d30;
+  }
+
+  .menu__link {
+    display: block;
+    padding: 10px 15px;
+    padding: .625rem .9375rem;
+    font-weight: 700;
+    color: #fff;
+    text-transform: uppercase;
+  }
+
+  .menu__link:hover {
+    color: #fff;
+  }
+
+  .js .menu__list {
+    position: absolute;
+    z-index: 1;
+    width: 100%;
+    visibility: hidden;
+    -webkit-transform: scaleY(0);
+    transform: scaleY(0);
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+  }
+
+  .js .menu__list--active {
+    visibility: visible;
+    border-top: 1px solid rgba(255, 255, 255, .1);
+    border-bottom: 1px solid rgba(255, 255, 255, .1);
+    -webkit-transform: scaleY(1);
+    transform: scaleY(1);
+  }
+
+  .menu__list--transition {
+    transition: visibility .15s ease, transform .15s ease, -webkit-transform .15s ease;
+  }
+
+  @media screen and (min-width: 767px) {
+    .menu {
+      border-bottom: 5px solid #e22d30;
+    }
+
+    .menu__btn {
+      display: none;
+    }
+
+    .menu__list,
+    .js .menu__list {
+      position: relative;
+      display: -webkit-flex;
+      display: flex;
+      -webkit-flex-wrap: wrap;
+      flex-wrap: wrap;
+      visibility: visible;
+      border: 0;
+      -webkit-transform: none;
+      transform: none;
+    }
+
+    .menu__item {
+      border-left: 1px solid rgba(255, 255, 255, .1);
+    }
+  }
+
+</style>
+
+<nav class="menu">
+  <ul class="menu__list">
+    <li class="menu__item">
+      <a class="menu__link" href="/docs/getting-started/">
+
+        <span class="menu__text">Getting started</span>
+
+      </a>
+    </li>
+    <li class="menu__item">
+      <a class="menu__link" href="/docs/customization/">
+
+        <span class="menu__text">Customization</span>
+
+      </a>
+    </li>
+    <li class="menu__item">
+      <a class="menu__link" href="/docs/faq/">
+
+        <span class="menu__text">FAQ</span>
+
+      </a>
+    </li>
+    <li class="menu__item">
+      <a class="menu__link" href="/post/basic-elements/">
+
+        <span class="menu__text">Basic Elements</span>
+
+      </a>
+    </li>
+    <li class="menu__item">
+      <a class="menu__link" href="/about/">
+
+        <span class="menu__text">About</span>
+
+      </a>
+    </li>
+  </ul>
+</nav>
diff --git a/_includes/components/side-bar.webc b/_includes/components/side-bar.webc
new file mode 100644
index 0000000..65ff313
--- /dev/null
+++ b/_includes/components/side-bar.webc
@@ -0,0 +1 @@
+<p>side-bar</p>
diff --git a/_includes/components/site-footer.webc b/_includes/components/site-footer.webc
new file mode 100644
index 0000000..dc960eb
--- /dev/null
+++ b/_includes/components/site-footer.webc
@@ -0,0 +1 @@
+<p>site-footer</p>
diff --git a/_includes/components/site-header.webc b/_includes/components/site-header.webc
new file mode 100644
index 0000000..8f142d2
--- /dev/null
+++ b/_includes/components/site-header.webc
@@ -0,0 +1,2 @@
+<h1>site-header</h1>
+<h2>subtitle!</h2>
diff --git a/_includes/layouts/base.webc b/_includes/layouts/base.webc
index 09a9b67..ca5ed18 100644
--- a/_includes/layouts/base.webc
+++ b/_includes/layouts/base.webc
@@ -1,6 +1,8 @@
 <!doctype html>
 <html :lang="en-us">
 
+<!-- Hello world! -->
+
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -8,21 +10,42 @@
   <!--- Uncomment this if you'd like folks to know that you used Eleventy to build your site! --->
   <meta name="generator" :content="eleventy.generator">
 
+  <!--- These will be picked up and bundled by eleventy  --->
+  <link rel="stylesheet" href="../vars.css">
+
+  <style>
+    body {
+      margin: 0;
+      font-family: "Open Sans", Helvetica, Arial, sans-serif;
+      font-size: 14px;
+      font-size: .875rem;
+      line-height: 1.6;
+      word-wrap: break-word;
+      background: #f7f7f7;
+      -webkit-font-smoothing: antialiased;
+    }
+
+    .container {
+      width:95%;
+      margin: auto;
+      background: white;
+    }
+  </style>
+
   <!--- Build and embed the bundles needed for each page --->
   <style @raw="getBundle('css')" webc:keep></style>
   <script @raw="getBundle('js')" webc:keep></script>
 </head>
 
 <body>
-
   <main id="skip">
     <div class="container">
+      <site-header></site-header>
+      <nav-bar></nav-bar>
       <template @raw="content" webc:nokeep></template>
+      <site-footer></site-footer>
     </div>
   </main>
-
-  <footer></footer>
-
 </body>
 
 </html>