use grid system for sidebar/main layout

Author: jenweber

app/styles/components/_sidebar.scss

@@ -1,27 +1,9 @@
 .sidebar {
-  position: relative;
-  z-index: 1;
-  padding: $small-spacing 0;
 
   @include media($large-screen-up) {
-    // fixed sidebar, full height
-    @include span-columns(3.5);
     margin-right: 0;
-    width: 19em;
     border-bottom: 0;
     padding: $small-spacing $base-spacing $base-spacing * 1.5;
-
-    &::before {
-      @include position(absolute, 0 0 0 -100vw);
-      content: "";
-      display: block;
-      z-index: -1;
-    }
-
-    &::after {
-      clear: both;
-      display: block;
-    }
   }
 
   @media (min-width: 1200px) {

app/templates/application.hbs

@@ -1,7 +1,7 @@
 {{#es-header}}
   {{search-input}}
 {{/es-header}}
-<main class="container margin-vertical-medium">
+<main class="container margin-vertical-medium layout-grid">
   {{outlet}}
 </main>
 {{es-footer}}

app/templates/project-version.hbs

@@ -1,4 +1,4 @@
-<aside class="sidebar">
+<aside class="sidebar col-1-large col-6">
   <ol class="toc-level-0">
     <li class="toc-level-0 large margin-bottom-small  list-unstyled" data-test-home>
       {{#link-to 'project' 'ember'}}Home{{/link-to}}
@@ -36,6 +36,6 @@
     isShowingNamespaces=(version-lt selectedProjectVersion.compactVersion '2.16')
   }}
 </aside>
-<section class="content">
+<section class="content col-6 col-5-large">
   {{outlet}}
 </section>