Simplified Off Canvas example:

- Removed unneeded media queries to be more consistent with the rest of Bootstrap.
- Fixed unworking grid on latest 3.0 builds (BS version on this repo is outdated)
- Inluded needed bootstrap.js

1 files changed, 25 insertions, 77 deletions

diff --git a/offcanvas/offcanvas.css b/offcanvas/offcanvas.css
index 6dcd5ece1..27a075d76 100644
--- a/offcanvas/offcanvas.css
+++ b/offcanvas/offcanvas.css
@@ -1,5 +1,9 @@
+/*
+ * Style twaks
+ * --------------------------------------------------
+ */
 body {
-  padding-top: 80px;
+  padding-top: 70px;
 }
 footer {
   padding-left: 15px;
@@ -7,94 +11,38 @@ footer {
 }
 
 /*
- * Off canvas
- * -------------------------------------------------- */
-
-.row-offcanvas {
-  position: relative;
-  overflow: hidden;
-  -webkit-transition: all 0.25s ease-out;
-     -moz-transition: all 0.25s ease-out;
-          transition: all 0.25s ease-out;
-}
-.row-offcanvas.active {
-  overflow: visible;
-}
-.row-offcanvas-right .sidebar-offcanvas {
-  right: -210px; /* 60px * 3.5 = very small phones like 240x320 HTC Wildfire */
-}
-.row-offcanvas-left .sidebar-offcanvas {
-  left: -210px; /* 60px * 3.5 = very small phones like 240x320 HTC Wildfire */
-}
-.row-offcanvas-right.active {
-  right: 210px; /* 60px * 3.5 = very small phones like 240x320 HTC Wildfire */
-}
-.row-offcanvas-left.active {
-  left: 210px; /* 60px * 3.5 = very small phones like 240x320 HTC Wildfire */
-}
-.sidebar-offcanvas {
-  position: absolute;
-  top: 0;
-}
+ * Off Canvas
+ * --------------------------------------------------
+ */
+@media screen and (max-width: 768px) {
+  .row-offcanvas {
+    position: relative;
+    overflow: hidden // Needed for Internet Explorer
+    -webkit-transition: all 0.25s ease-out;
+    -moz-transition: all 0.25s ease-out;
+    transition: all 0.25s ease-out;
+  }
 
-@media screen and (max-width: 319px) {
-  /* This is here instead of being outside the media queries because when
-   * we exit "mobile land", the sidebar needs to be able to restore its
-   * originally authored ".col-lg-X" width. */
+  .row-offcanvas-right
   .sidebar-offcanvas {
-    width: 210px; /* 60px * 3.5 = very small phones like 240x320 HTC Wildfire */
+    right: -58.333333333333336%; // 6 columns
   }
-}
 
-@media screen and (min-width: 320px) and (max-width: 480px) {
-  .row-offcanvas-right .sidebar-offcanvas {
-    right: -270px; /* 60px * 4.5 = average iPhones and Android phones */
-  }
-  .row-offcanvas-left .sidebar-offcanvas {
-    left: -270px; /* 60px * 4.5 = average iPhones and Android phones */
-  }
-  .row-offcanvas-right.active {
-    right: 270px; /* 60px * 4.5 = average iPhones and Android phones */
-  }
-  .row-offcanvas-left.active {
-    left: 270px; /* 60px * 4.5 = average iPhones and Android phones */
-  }
+  .row-offcanvas-left
   .sidebar-offcanvas {
-    width: 270px; /* 60px * 4.5 = average iPhones and Android phones */
+    left: -58.333333333333336%; // 6 columns
   }
-}
 
-/* Landscape phone to tablets
- * -------------------------- */
-@media screen and (min-width: 481px) and (max-width: 767px) {
-  .row-offcanvas-right .sidebar-offcanvas {
-    right: -480px; /* 60px * 8 = Tablets and wider */
-  }
-  .row-offcanvas-left .sidebar-offcanvas {
-    left: -480px; /* 60px * 8 = Tablets and wider */
-  }
   .row-offcanvas-right.active {
-    right: 480px; /* 60px * 8 = Tablets and wider */
+    right: 58.333333333333336%; // 6 columns
   }
+
   .row-offcanvas-left.active {
-    left: 480px; /* 60px * 8 = Tablets and wider */
-  }
-  .sidebar-offcanvas {
-    width: 480px; /* 60px * 8 = Tablets and wider */
+    left: 58.333333333333336%; // 6 columns
   }
-}
 
-/* Tablets & above
- * ---------------- */
-@media screen and (min-width: 768px) {
-  .row-offcanvas {
-    position: static;
-    overflow: visible;
-  }
   .sidebar-offcanvas {
-    position: static;
-  }
-  .btn-offcanvas {
-    display: none;
+    position: absolute;
+    width: 58.333333333333336%; // 6 columns
   }
 }
\ No newline at end of file