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;
-  margin: 20px 0;
+  background: #fff;
   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 {
-    margin-right: 8px;
-  }
+.btn-toolbar {
+  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,55 +1,54 @@
-.s2-example + pre,
-.s2-event-log + pre {
-  margin: -15px -15px 15px;
-  border-radius: 0;
-  border-width: 0 0 1px;
-}
+// Examples
+//
+// Styles for the Select2 examples, largely copied
+// from Bootstrap's docs styles.
+//
+// @see https://github.com/twbs/bootstrap/blob/master/docs/assets/css/src/docs.css#L533
 
-@media (min-width: 768px) {
-	.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;
+.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: "Event Log";
+    content: "Example";
     position: absolute;
     top: 15px;
     left: 15px;
     font-size: 12px;
     font-weight: bold;
-    color: #BBB;
+    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;
+  }
 }
 
-.s2-example {
-  position: relative;
-  padding: 45px 15px 15px;
+// 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;
-  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;
+  padding: 45px 15px 15px;
+	position: relative;
 
   &:after {
-    content: "Example";
+    content: "Event Log";
     position: absolute;
     top: 15px;
     left: 15px;
@@ -59,27 +58,33 @@
     text-transform: uppercase;
     letter-spacing: 1px;
   }
+
+  @media (min-width: 768px) {
+    margin-left: 0;
+    margin-right: 0;
+    margin-top: -15px;
+    border-width: 1px;
+    border-color: #eee;
+    box-shadow: none;
+  }
 }
 
-@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-example + pre,
+.s2-event-log + pre {
+  margin: -15px -15px 15px;
+  border-radius: 0;
+  border-width: 0 0 1px;
 
-	.s2-event-log {
-	  margin-left: 0;
-	  margin-right: 0;
-	  margin-top: -15px;
-	  border-width: 1px;
-	  border-color: #eee;
-	  box-shadow: none;
-	}
+  @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 {
-    margin-bottom: 0;
+  @media (min-width: 768px) {
+    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,36 +1,31 @@
-.notice-previous {
-  background: #f6f6f6;
-  color: #666;
-  border-bottom: 1px solid #eee;
-  padding: 15px 20px;
-}
+// Homepage-specific styles
 
-.s2-docs-home .jumbotron {
-  margin-bottom: 0;
-  color: #000;
-  h1 {
+.s2-docs-home {
+  .jumbotron {
+    margin-bottom: 0;
     color: #000;
-    margin-top: 20px;
-  }
-}
 
-#lead {
-	text-align: center;
-	max-width: 800px;
-	margin: 0 auto 40px;
-}
+    h1 {
+      color: #000;
+      margin-top: 20px;
+    }
+  }
 
-.s2-docs-featurette {
-  color: #777;
-  text-align: center;
-  padding: 15px 0;
+  .lead {
+    text-align: center;
+    max-width: 800px;
+    margin: 0 auto 40px;
+  }
 
-  .fa {
-    font-size: 28px;
-    color: #777;
+  .notice-previous {
+    background: #f6f6f6;
+    color: #666;
+    border-bottom: 1px solid #eee;
+    padding: 15px 20px;
   }
 
-  h4 {
-    margin: 30px 0 15px;
+  .half-rule {
+    width: 100px;
+    margin: 40px auto;
   }
 }

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 {
-  padding-left: 12px;
-  color: #bebebe;
-  line-height: 18px;
+
+  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
- *
- * Scrollspy and affixed enhanced navigation to highlight sections and secondary
- * sections of docs content.
- */
-
-/* By default it's not affixed in mobile views, so undo that */
-.s2-docs-sidebar.affix {
-  position: static;
-}
-
-@media (min-width: 768px) {
-  .s2-docs-sidebar {
-    padding-left: 20px;
-  }
-}
+// Side navigation
+//
+// Scrollspy and affixed enhanced navigation to
+// highlight sections and secondary sections of docs content`.
 
-/* First level of nav */
+// First level of nav
 .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) {
+    padding-left: 20px;
+  }
 }
 
-/* All levels of nav */
+// 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) */
-.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 */
+// 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 {
+  @media (min-width: 768px) {
     display: block;
   }
 }

docs/_sass/_social.scss

@@ -1,31 +1,34 @@
-/*
- * Social buttons
- *
- * Twitter and GitHub social action buttons (for homepage and footer).
- */
+// Social buttons
+//
+// Twitter and GitHub social action buttons.
 
 .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;
+
+  li {
+    display: inline-block;
+    padding: 5px 8px;
+    line-height: 1;
+  }
+
+  .twitter-follow-button {
+    width: 225px !important;
+  }
+
+  .twitter-share-button {
+    width: 98px !important;
+  }
 }
-.s2-docs-social-buttons li {
-  display: inline-block;
-  padding: 5px 8px;
-  line-height: 1;
-}
-.s2-docs-social-buttons .twitter-follow-button {
-  width: 225px !important;
-}
-.s2-docs-social-buttons .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";
-
-.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;
-}
+@import "typography"

docs/index.html

@@ -32,61 +32,64 @@ slug: home
 
   <hr class="half-rule">
 
-  <div class="row s2-docs-featurette">
-    <div class="col-sm-4">
-      <i class="fa fa-language"></i>
-      <h4>In your language</h4>
-      <p>
-        Select2 comes with support for
-        <a href="examples.html#rtl">RTL environments</a>,
-        <a href="examples.html#diacritics">searching with diacritics</a> and
-        <a href="examples.html#language">over 40 languages</a> built-in.
-      </p>
-    </div>
 
-    <div class="col-sm-4">
-      <i class="fa fa-database"></i>
-      <h4>Remote data support</h4>
-      <p>
-        <a href="examples.html#data-ajax">Using AJAX</a> you can efficiently
-        search large lists of items.
-      </p>
-    </div>
+  <div class="s2-docs-featurette">
+    <div class="row">
+      <div class="col-sm-4">
+        <i class="fa fa-language"></i>
+        <h4>In your language</h4>
+        <p>
+          Select2 comes with support for
+          <a href="examples.html#rtl">RTL environments</a>,
+          <a href="examples.html#diacritics">searching with diacritics</a> and
+          <a href="examples.html#language">over 40 languages</a> built-in.
+        </p>
+      </div>
 
-    <div class="col-sm-4">
-      <i class="fa fa-paint-brush"></i>
-      <h4>Fits in with your theme</h4>
-      <p>
-        Fully skinnable, CSS built with Sass and an
-        <a href="https://github.com/fk/select2-bootstrap-theme">optional theme for Bootstrap 3</a>.
-      </p>
-    </div>
-  </div>
+      <div class="col-sm-4">
+        <i class="fa fa-database"></i>
+        <h4>Remote data support</h4>
+        <p>
+          <a href="examples.html#data-ajax">Using AJAX</a> you can efficiently
+          search large lists of items.
+        </p>
+      </div>
 
-  <div class="row s2-docs-featurette">
-    <div class="col-sm-4">
-      <i class="fa fa-plug"></i>
-      <h4>Fully extensible</h4>
-      <p>
-        The <a href="announcements-4.0.html#plugin-system">plugin system</a>
-        allows you to easily customize Select2 to work exactly how you want it
-        to.
-      </p>
+      <div class="col-sm-4">
+        <i class="fa fa-paint-brush"></i>
+        <h4>Fits in with your theme</h4>
+        <p>
+          Fully skinnable, CSS built with Sass and an
+          <a href="https://github.com/fk/select2-bootstrap-theme">optional theme for Bootstrap 3</a>.
+        </p>
+      </div>
     </div>
 
-    <div class="col-sm-4">
-      <i class="fa fa-tag"></i>
-      <h4>Dynamic item creation</h4>
-      <p>
-        Allow users to type in a new option and
-        <a href="examples.html#tags">add it on the fly</a>.
-      </p>
-    </div>
+    <div class="row">
+      <div class="col-sm-4">
+        <i class="fa fa-plug"></i>
+        <h4>Fully extensible</h4>
+        <p>
+          The <a href="announcements-4.0.html#plugin-system">plugin system</a>
+          allows you to easily customize Select2 to work exactly how you want it
+          to.
+        </p>
+      </div>
+
+      <div class="col-sm-4">
+        <i class="fa fa-tag"></i>
+        <h4>Dynamic item creation</h4>
+        <p>
+          Allow users to type in a new option and
+          <a href="examples.html#tags">add it on the fly</a>.
+        </p>
+      </div>
 
-    <div class="col-sm-4">
-      <i class="fa fa-html5"></i>
-      <h4>Full browser support</h4>
-      <p>Support for both modern and legacy browsers is built-in, even including Internet Explorer 8.</p>
+      <div class="col-sm-4">
+        <i class="fa fa-html5"></i>
+        <h4>Full browser support</h4>
+        <p>Support for both modern and legacy browsers is built-in, even including Internet Explorer 8.</p>
+      </div>
     </div>
   </div>