Tidy and simplify CSS; add very basic documentation.

docs/_sass/_alert.scss

@@ -1,40 +1,47 @@
+// Alerts
+//
+// Modify Bootstrap's default alert styles to mimick
+// the `.bs-callout` styles from Bootstrap's docs.
+//
+// @see https://github.com/twbs/bootstrap/blob/master/docs/assets/css/src/docs.css#L711
+// @see https://github.com/twbs/bootstrap/blob/master/less/alerts.less
+
 .alert {
-  padding: 20px;
+  background: #fff;
-  margin: 20px 0;
   border: 1px solid #eee;
   border-left-width: 5px;
   border-radius: 3px;
-  background: #fff;
   color: #333;
+  margin: 20px 0;
+  padding: 20px;
 
   h4 {
+    font-size: 18px;
     margin-top: 0;
     margin-bottom: 5px;
-    font-size: 18px;
   }
 
   &-danger {
-    border-left-color: #CE4844;
+    border-left-color: #ce4844;
 
     h4 {
-      color: #CE4844;
+      color: #ce4844;
     }
   }
 
   &-info {
-    border-left-color: #1B809E;
+    border-left-color: #1b809e;
 
     h4 {
-      color: #1B809E;
+      color: #1b809e;
     }
   }
 
   &-warning {
-    border-left-color: #AA6708;
+    border-left-color: #aa6708;
 
     h4 {
-      color: #AA6708;
+      color: #aa6708;
     }
   }
 }
-

docs/_sass/_anchorjs.scss

@@ -1,4 +1,9 @@
-/* anchor.js */
+// AnchorJS Styles
+//
+// Styles for AnchorJS elements following the Bootstrap docs styles.
+//
+// @see https://github.com/twbs/bootstrap/blob/master/docs/assets/css/src/docs.css#L1599
+
 .anchorjs-link {
   float: left;
   width: 1em;
@@ -13,9 +18,26 @@
     text-decoration: none;
     color: inherit;
   }
+
+  @media (max-width: 480px) {
+    display: none;
+  }
+}
+
+*:hover > .anchorjs-link {
+  opacity: .5;
+  -webkit-transition: all .16s linear;
+       -o-transition: all .16s linear;
+          transition: all .16s linear;
+}
+
+*:hover > .anchorjs-link:hover,
+.anchorjs-link:focus {
+  opacity: 1;
 }
 
 .anchorjs-icon {
   font-size: 60%;
   vertical-align: .2em;
 }
+

docs/_sass/_buttons.scss

@@ -1,3 +1,5 @@
+// Buttons
+
 .btn-outline-inverse {
   color: #428BCA;
   background-color: transparent;
@@ -11,8 +13,8 @@
     border-color: #428BCA;
     background-color: #428BCA;
   }
+}
 
-  .fa {
+.btn-toolbar {
-    margin-right: 8px;
+  margin-bottom: 20px;
-  }
 }

docs/_sass/_code.scss

@@ -0,0 +1,16 @@
+// Code (inline and block)
+
+// Inline code within headings retain the heading's background-color
+h2 code,
+h3 code,
+h4 code {
+  background-color: inherit;
+}
+
+// Modify Bootstrap's styles for blocks of code
+pre {
+  padding: 9px 14px;
+  margin-bottom: 14px;
+  background-color: #f7f7f9;
+  border: 1px solid #e1e1e8;
+}

docs/_sass/_examples.scss

@@ -1,29 +1,51 @@
-.s2-example + pre,
+// Examples
-.s2-event-log + pre {
+//
-  margin: -15px -15px 15px;
+// Styles for the Select2 examples, largely copied
-  border-radius: 0;
+// from Bootstrap's docs styles.
-  border-width: 0 0 1px;
+//
-}
+// @see https://github.com/twbs/bootstrap/blob/master/docs/assets/css/src/docs.css#L533
 
-@media (min-width: 768px) {
+.s2-example {
-	.s2-example + pre,
-	.s2-event-log + pre {
-	  margin-top: -16px;
-	  margin-left: 0;
-	  margin-right: 0;
-	  border-width: 1px;
-	  border-bottom-left-radius: 4px;
-	  border-bottom-right-radius: 4px;
-	}
-}
-
-.s2-event-log {
-  background: #002451;
-  font-family: Menlo, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Consolas, monospace;
-	color: white;
   position: relative;
   padding: 45px 15px 15px;
   margin: 0 -15px 15px;
+  background-color: #fafafa;
+  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.05);
+  border-color: #e5e5e5 #eee #eee;
+  border-style: solid;
+  border-width: 1px 0;
+
+  &:after {
+    content: "Example";
+    position: absolute;
+    top: 15px;
+    left: 15px;
+    font-size: 12px;
+    font-weight: bold;
+    color: #bbb;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+  }
+
+  @media (min-width: 768px) {
+    margin-left: 0;
+    margin-right: 0;
+    background-color: #fff;
+    border-width: 1px;
+    border-color: #eee;
+    border-radius: 4px 4px 0 0;
+    box-shadow: none;
+  }
+}
+
+// styles for the event log in the "DOM events" section of the docs
+.s2-event-log {
+  background: #002451;
+	color: white;
+  font-family: Menlo, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Consolas, monospace;
+  margin: 0 -15px 15px;
+  padding: 45px 15px 15px;
+	position: relative;
 
   &:after {
     content: "Event Log";
@@ -36,43 +58,8 @@
     text-transform: uppercase;
     letter-spacing: 1px;
   }
-}
-
-.s2-example {
-  position: relative;
-  padding: 45px 15px 15px;
-  margin: 0 -15px 15px;
-  background-color: #FAFAFA;
-  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.05);
-  border-color: #E5E5E5 #EEE #EEE;
-  border-style: solid;
-  border-width: 1px 0;
-
-  &:after {
-    content: "Example";
-    position: absolute;
-    top: 15px;
-    left: 15px;
-    font-size: 12px;
-    font-weight: bold;
-    color: #BBB;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-  }
-}
 
   @media (min-width: 768px) {
-	.s2-example {
-	  margin-left: 0;
-	  margin-right: 0;
-	  background-color: #FFF;
-	  border-width: 1px;
-	  border-color: #eee;
-	  border-radius: 4px 4px 0 0;
-	  box-shadow: none;
-	}
-
-	.s2-event-log {
     margin-left: 0;
     margin-right: 0;
     margin-top: -15px;
@@ -82,4 +69,22 @@
   }
 }
 
+.s2-example + pre,
+.s2-event-log + pre {
+  margin: -15px -15px 15px;
+  border-radius: 0;
+  border-width: 0 0 1px;
 
+  @media (min-width: 768px) {
+    margin-top: -16px;
+    margin-left: 0;
+    margin-right: 0;
+    border-width: 1px;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+}
+
+.s2-example + .s2-event-log {
+  margin-top: -15px;
+}

docs/_sass/_featurette.scss

@@ -0,0 +1,16 @@
+// Homepage featurettes
+
+.s2-docs-featurette {
+  color: #777;
+  padding: 15px 0;
+  text-align: center;
+
+  h4 {
+    margin: 30px 0 15px;
+  }
+
+  .fa {
+    font-size: 28px;
+    color: #777;
+  }
+}

docs/_sass/_footer.scss

@@ -1,3 +1,5 @@
+// Footer
+
 .s2-docs-footer {
   border-top: 1px solid #eee;
   color: #767676;
@@ -29,10 +31,12 @@
       padding-left: 0;
     }
   }
-}
 
   @media (min-width: 768px) {
-  .s2-docs-footer p {
+    p {
       margin-bottom: 0;
     }
   }
+}
+
+

docs/_sass/_hamburger.scss

@@ -1,5 +1,10 @@
-// animated hamburger icon
+// Animated hamburger icon
+//
+// Add an animation to Bootstrap's `.navbar-toggle` hamburger icon,
+// courtesy of Julien Melissas.
+//
 // @see http://codepen.io/JulienMelissas/pen/LEBGLj
+// @see http://julienmelissas.com/animated-x-icon-for-the-bootstrap-navbar-toggle/
 
 .navbar-toggle {
   border: none;

docs/_sass/_home.scss

@@ -1,3 +1,22 @@
+// Homepage-specific styles
+
+.s2-docs-home {
+  .jumbotron {
+    margin-bottom: 0;
+    color: #000;
+
+    h1 {
+      color: #000;
+      margin-top: 20px;
+    }
+  }
+
+  .lead {
+    text-align: center;
+    max-width: 800px;
+    margin: 0 auto 40px;
+  }
+
   .notice-previous {
     background: #f6f6f6;
     color: #666;
@@ -5,32 +24,8 @@
     padding: 15px 20px;
   }
 
-.s2-docs-home .jumbotron {
+  .half-rule {
-  margin-bottom: 0;
+    width: 100px;
-  color: #000;
+    margin: 40px auto;
-  h1 {
-    color: #000;
-    margin-top: 20px;
-  }
-}
-
-#lead {
-	text-align: center;
-	max-width: 800px;
-	margin: 0 auto 40px;
-}
-
-.s2-docs-featurette {
-  color: #777;
-  text-align: center;
-  padding: 15px 0;
-
-  .fa {
-    font-size: 28px;
-    color: #777;
-  }
-
-  h4 {
-    margin: 30px 0 15px;
   }
 }

docs/_sass/_jumbotron.scss

@@ -1,3 +1,7 @@
+// Jumbotron
+//
+// Modify Bootstrap's default `.jumbotron` styles.
+
 .jumbotron {
   background-color: #F6F6F6;
   border-bottom: 1px solid #eee;

docs/_sass/_layout.scss

@@ -1,3 +1,5 @@
+// Layout
+
 .s2-docs-container {
   line-height: 1.6;
 }

docs/_sass/_nav.scss

@@ -1,3 +1,7 @@
+// Main navigation
+//
+// Styles for the top `.navbar` and its dropdowns.
+
 .s2-docs-nav {
   margin-bottom: 0;
   border-color: #eee;

docs/_sass/_prettify.scss

@@ -1,3 +1,5 @@
+// Google Code Prettify styles
+
 .com {
   color: #999;
 }
@@ -29,6 +31,7 @@
   margin-bottom: 20px;
   margin-top: 20px;
   border: 1px solid #eee;
+
   &.linenums {
     -webkit-box-shadow: inset 40px 0 0 #fbfbfb, inset 41px 0 0 #f6f6f6;
        -moz-box-shadow: inset 40px 0 0 #fbfbfb, inset 41px 0 0 #f6f6f6;
@@ -36,12 +39,13 @@
   }
 }
 
-/* Specify class=linenums on a pre to get line numbering */
+// Specify class=linenums on a pre to get line numbering
 ol.linenums {
   margin: 0 0 0 -12px;
-}
+
-ol.linenums li {
+  li {
     padding-left: 12px;
     color: #bebebe;
     line-height: 18px;
   }
+}

docs/_sass/_result-repository.scss

@@ -1,3 +1,5 @@
+// Styles accompanying the "Loading remote data" example `templateResult
+
 .select2-result-repository {
   padding-top: 4px;
   padding-bottom: 3px;

docs/_sass/_sidenav.scss

@@ -1,28 +1,24 @@
-/*
+// Side navigation
- * Side navigation
+//
- *
+// Scrollspy and affixed enhanced navigation to
- * Scrollspy and affixed enhanced navigation to highlight sections and secondary
+// highlight sections and secondary sections of docs content`.
- * sections of docs content.
- */
 
-/* By default it's not affixed in mobile views, so undo that */
+// First level of nav
-.s2-docs-sidebar.affix {
+.s2-docs-sidenav {
+  margin-top: 20px;
+  margin-bottom: 20px;
+
+  // By default it is not affixed in mobile views, so undo that
+  &.affix {
     position: static;
   }
 
   @media (min-width: 768px) {
-  .s2-docs-sidebar {
     padding-left: 20px;
   }
 }
 
-/* First level of nav */
+// All levels of nav
-.s2-docs-sidenav {
-  margin-top: 20px;
-  margin-bottom: 20px;
-}
-
-/* All levels of nav */
 .s2-docs-sidebar .nav {
   > li > a {
     margin-left: -1px;
@@ -59,9 +55,9 @@
     border-left: 2px solid #428BCA;
   }
 
-  /* Nav: second level (shown on .active) */
+  // Nav: second level (shown on .active)
   .nav {
-    display: none; /* Hide by default, but at >768px, show it */
+    display: none; // Hide by default, but at >768px, show it
     padding-bottom: 10px;
   }
 
@@ -86,36 +82,7 @@
   }
 }
 
-/* Back to top (hidden on mobile) */
+// Show and affix the side nav when space allows it
-.back-to-top,
-.s2-docs-theme-toggle {
-  display: none;
-  padding: 4px 10px;
-  margin-top: 10px;
-  margin-left: 10px;
-  font-size: 12px;
-  font-weight: 500;
-  color: #999;
-}
-
-.back-to-top:hover,
-.s2-docs-theme-toggle:hover {
-  color: #428BCA;
-  text-decoration: none;
-}
-
-.s2-docs-theme-toggle {
-  margin-top: 0;
-}
-
-@media (min-width: 768px) {
-  .back-to-top,
-  .s2-docs-theme-toggle {
-    display: block;
-  }
-}
-
-/* Show and affix the side nav when space allows it */
 @media (min-width: 992px) {
   .s2-docs-sidebar .s2-docs-sidenav {
     padding-top: 40px;
@@ -130,18 +97,25 @@
   .s2-docs-sidebar .nav > .active > ul {
     display: block;
   }
-  /* Widen the fixed sidebar */
+
+  // Widen the fixed sidebar
   .s2-docs-sidebar.affix,
   .s2-docs-sidebar.affix-bottom {
     width: 213px;
   }
+
+  // Undo the static from mobile first approach
   .s2-docs-sidebar.affix {
-    position: fixed; /* Undo the static from mobile first approach */
+
+    position: fixed;
     top: 0px;
   }
+
+  // Undo the static from mobile first approach
   .s2-docs-sidebar.affix-bottom {
-    position: absolute; /* Undo the static from mobile first approach */
+    position: absolute;
   }
+
   .s2-docs-sidebar.affix-bottom .s2-docs-sidenav,
   .s2-docs-sidebar.affix .s2-docs-sidenav {
     margin-top: 0;
@@ -150,7 +124,7 @@
 }
 
 @media (min-width: 1200px) {
-  /* Widen the fixed sidebar again */
+  // Widen the fixed sidebar again
   .s2-docs-sidebar.affix-bottom,
   .s2-docs-sidebar.affix {
     width: 263px;
@@ -171,10 +145,8 @@
     color: #428BCA;
     text-decoration: none;
   }
-}
 
   @media (min-width: 768px) {
-  .back-to-top {
     display: block;
   }
 }

docs/_sass/_social.scss

@@ -1,31 +1,34 @@
-/*
+// Social buttons
- * Social buttons
+//
- *
+// Twitter and GitHub social action buttons.
- * Twitter and GitHub social action buttons (for homepage and footer).
- */
 
 .s2-docs-social {
   margin-bottom: 20px;
   text-align: center;
 }
+
 .s2-docs-social-buttons {
   display: inline-block;
   padding-left: 0;
   margin-bottom: 0;
   list-style: none;
-}
+
-.s2-docs-social-buttons li {
+  li {
     display: inline-block;
     padding: 5px 8px;
     line-height: 1;
   }
-.s2-docs-social-buttons .twitter-follow-button {
+
+  .twitter-follow-button {
     width: 225px !important;
   }
-.s2-docs-social-buttons .twitter-share-button {
+
+  .twitter-share-button {
     width: 98px !important;
   }
-/* Style the GitHub buttons via CSS instead of inline attributes */
+}
+
+// Style the GitHub buttons via CSS instead of inline attributes
 .github-btn {
   overflow: hidden;
   border: 0;

docs/_sass/_typography.scss

@@ -0,0 +1,6 @@
+// Typography
+
+h1[id] {
+  padding-top: 20px;
+  margin-top: 0;
+}

docs/css/s2-docs.scss

@@ -3,6 +3,8 @@
 @import "result-repository";
 @import "sidenav";
 @import "hamburger";
+@import "code";
+@import "featurette";
 @import "layout";
 @import "nav";
 @import "footer";
@@ -14,32 +16,4 @@
 @import "anchorjs";
 @import "jumbotron";
 @import "prettify";
-
+@import "typography"
-.btn-toolbar {
-  margin-bottom: 20px;
-}
-
-/* Inline code within headings retain the heading's background-color */
-h2 code,
-h3 code,
-h4 code {
-  background-color: inherit;
-}
-
-h1[id] {
-  padding-top: 20px;
-  margin-top: 0;
-}
-
-/* pre */
-pre {
-  padding: 9px 14px;
-  margin-bottom: 14px;
-  background-color: #f7f7f9;
-  border: 1px solid #e1e1e8;
-}
-
-.half-rule {
-  width: 100px;
-  margin: 40px auto;
-}

docs/index.html

@@ -32,7 +32,9 @@ slug: home
 
   <hr class="half-rule">
 
-  <div class="row s2-docs-featurette">
+
+  <div class="s2-docs-featurette">
+    <div class="row">
       <div class="col-sm-4">
         <i class="fa fa-language"></i>
         <h4>In your language</h4>
@@ -63,7 +65,7 @@ slug: home
       </div>
     </div>
 
-  <div class="row s2-docs-featurette">
+    <div class="row">
       <div class="col-sm-4">
         <i class="fa fa-plug"></i>
         <h4>Fully extensible</h4>
@@ -89,6 +91,7 @@ slug: home
         <p>Support for both modern and legacy browsers is built-in, even including Internet Explorer 8.</p>
       </div>
     </div>
+  </div>
 
   <hr class="half-rule">