Add initial version of grid system forked from BS4

source/css/_docs.css

@@ -13,22 +13,14 @@ body {
   display: inline-block;
 }
 
-#wrap {
-  max-width: 60rem;
-  padding: 0 2rem;
-  margin: 2rem auto;
-  display: grid;
-  grid-template-columns: 12rem calc(100% - 12rem);
-}
-
 #nav {
   text-align: right;
+  list-style: none;
   border-right: solid 1px #ddd;
   padding-right: 1rem;
-  margin-right: 2rem;
 }
 
-#nav a {
+#nav li {
   margin: .5rem 0;
   display: block;
 }
@@ -38,6 +30,19 @@ body {
   cursor: default;
 }
 
+@media screen and (max-width: 767px) {
+  #nav {
+    border: none;
+    text-align: center;
+    margin: 0 0 2rem 0;
+  }
+
+  #nav li {
+    margin: .5rem;
+    display: inline-block;
+  }
+}
+
 #foot {
   text-align: center;
   margin: 2rem 0;
@@ -49,48 +54,6 @@ body {
   margin: .5rem 0;
 }
 
-#homepage #wrap {
-  max-width: 48rem;
-  display: block;
-}
-
-@media (max-width: 60rem) {
-  #head {
-    padding: 0 1rem;
-  }
-
-  #wrap {
-    padding: 0 1rem;
-    display: block;
-  }
-
-  #nav {
-    font-size: .9rem;
-    border: none;
-    text-align: center;
-    margin: 0 0 2rem 0;
-  }
-
-  #nav a {
-    margin: .3rem;
-    display: inline-block;
-  }
-}
-
-/* Fallback to block nav for unsupportive browsers */
-@supports (not (display: grid)) {
-  #nav {
-    border: none;
-    text-align: center;
-    margin: 0 0 2rem 0;
-  }
-
-  #nav a {
-    margin: .5rem;
-    display: inline-block;
-  }
-}
-
 h1[id]:not(:first-child),
 h2[id]:not(:first-child),
 h3[id]:not(:first-child),
@@ -117,13 +80,6 @@ a code {
   color: inherit;
 }
 
-@media (max-width: 45rem) {
-  a.bookmark {
-    width: auto;
-    margin-left: 0;
-  }
-}
-
 .browsers {
   text-align: center;
 }
@@ -134,18 +90,6 @@ a code {
   margin: 0 1rem 1rem 0;
 }
 
-/* Column helpers */
-.two-column {
-  display: grid;
-  grid-template-columns: 50% 50%;
-  margin-left: -.5rem;
-  margin-right: -.5rem;
-}
-
-.two-column .column {
-  padding: .5rem;
-}
-
 /* Sizing examples */
 .width-sizing-example {
   border: solid 1px #ddd;
@@ -197,15 +141,28 @@ a code {
 }
 
 /* Tabs example */
-.tabs-vertical-example {
-  display: grid;
-  grid-template-columns: 30% 70%;
-}
-
-.tabs-vertical-example .tabs-nav {
-  padding-right: 2rem;
-}
-
 .tabs-vertical-example .tabs-nav a {
   display: block;
 }
+
+/* Grid example */
+.grid-example {
+  margin-bottom: 1.5rem;
+}
+
+.grid-example .row .col,
+.grid-example .row [class*="col-"] {
+  background: #0074d9;
+  border: solid 1px white;
+  color: white;
+  text-align: center;
+  padding-top: .5rem;
+  padding-bottom: .5rem;
+}
+
+.grid-example .row .row .col,
+.grid-example .row .row [class*="col-"] {
+  background: tomato;
+  margin-top: .5rem;
+  margin-bottom: .5rem;
+}