diff --git a/docs/_includes/head.html b/docs/_includes/head.html
index 72a003eb..9b7f70e9 100644
--- a/docs/_includes/head.html
+++ b/docs/_includes/head.html
@@ -18,330 +18,4 @@
-
-
+
diff --git a/docs/_sass/_anchorjs.scss b/docs/_sass/_anchorjs.scss
new file mode 100644
index 00000000..e44bedc4
--- /dev/null
+++ b/docs/_sass/_anchorjs.scss
@@ -0,0 +1,21 @@
+/* anchor.js */
+.anchorjs-link {
+ float: left;
+ width: 1em;
+ height: 1em;
+ margin-left: -1.2em;
+ opacity: 0;
+ color: inherit;
+ text-align: center;
+
+ &:link,
+ &:visited {
+ text-decoration: none;
+ color: inherit;
+ }
+}
+
+.anchorjs-icon {
+ font-size: 60%;
+ vertical-align: .2em;
+}
diff --git a/docs/_sass/_jumbotron.scss b/docs/_sass/_jumbotron.scss
new file mode 100644
index 00000000..1dd971fc
--- /dev/null
+++ b/docs/_sass/_jumbotron.scss
@@ -0,0 +1,12 @@
+.jumbotron {
+ background-color: #F6F6F6;
+ border-bottom: 1px solid #eee;
+ color: #777;
+ padding-left: 0;
+ padding-right: 0;
+
+ h1 {
+ font-size: 36px;
+ color: #777;
+ }
+}
diff --git a/docs/_sass/_s2-docs-alert.sass b/docs/_sass/_s2-docs-alert.sass
new file mode 100644
index 00000000..73207719
--- /dev/null
+++ b/docs/_sass/_s2-docs-alert.sass
@@ -0,0 +1,32 @@
+.alert
+ padding: 20px
+ margin: 20px 0
+ border: 1px solid #eee
+ border-left-width: 5px
+ border-radius: 3px
+ background: #fff
+ color: #333
+
+ h4
+ margin-top: 0
+ margin-bottom: 5px
+ font-size: 18px
+
+ &-danger
+ border-left-color: #CE4844
+ h4
+ color: #CE4844
+
+ &-info
+ border-left-color: #1B809E
+ h4
+ color: #1B809E
+
+ &-warning
+ border-left-color: #AA6708
+ h4
+ color: #AA6708
+
+@media (min-width: 768px)
+ .alert
+ padding: 20px
diff --git a/docs/_sass/_s2-docs-footer.scss b/docs/_sass/_s2-docs-footer.scss
new file mode 100644
index 00000000..74543709
--- /dev/null
+++ b/docs/_sass/_s2-docs-footer.scss
@@ -0,0 +1,37 @@
+/* Footer */
+.s2-docs-footer {
+ border-top: 1px solid #E5E5E5;
+ color: #767676;
+ padding-top: 40px;
+ padding-bottom: 40px;
+ margin-top: 100px;
+ text-align: center;
+
+ &-links {
+ padding-left: 0;
+ margin-top: 20px;
+ }
+
+ &-links li {
+ display: inline;
+ padding: 0 2px;
+
+ &:after {
+ content: "·";
+ padding-left: 8px;
+ }
+ &:first-child {
+ padding-left: 0;
+ }
+ &:last-child:after {
+ content: "";
+ padding-left: 0;
+ }
+ }
+}
+
+@media (min-width: 768px) {
+ .s2-docs-footer p {
+ margin-bottom: 0;
+ }
+}
diff --git a/docs/_sass/_s2-docs-hamburger.scss b/docs/_sass/_s2-docs-hamburger.scss
new file mode 100644
index 00000000..4747efa0
--- /dev/null
+++ b/docs/_sass/_s2-docs-hamburger.scss
@@ -0,0 +1,33 @@
+/* Animated hamburger icon @see http://codepen.io/JulienMelissas/pen/LEBGLj */
+.navbar-toggle {
+ border: none;
+ background: transparent !important;
+
+ &:hover {
+ background: transparent !important;
+ }
+ .icon-bar {
+ width: 22px;
+ transition: all 0.2s;
+ }
+ .top-bar {
+ transform: rotate(45deg);
+ transform-origin: 10% 10%;
+ }
+ .middle-bar {
+ opacity: 0;
+ }
+ .bottom-bar {
+ transform: rotate(-45deg);
+ transform-origin: 10% 90%;
+ }
+ &.collapsed .top-bar {
+ transform: rotate(0);
+ }
+ &.collapsed .middle-bar {
+ opacity: 1;
+ }
+ &.collapsed .bottom-bar {
+ transform: rotate(0);
+ }
+}
diff --git a/docs/_sass/_s2-docs-layout.scss b/docs/_sass/_s2-docs-layout.scss
new file mode 100644
index 00000000..0cbe9912
--- /dev/null
+++ b/docs/_sass/_s2-docs-layout.scss
@@ -0,0 +1,8 @@
+.s2-docs-container {
+ line-height: 1.6;
+ //font-size: 16px;
+}
+
+section {
+ margin-bottom: 40px;
+}
diff --git a/docs/_sass/_s2-docs-nav.scss b/docs/_sass/_s2-docs-nav.scss
new file mode 100644
index 00000000..4d0a2449
--- /dev/null
+++ b/docs/_sass/_s2-docs-nav.scss
@@ -0,0 +1,19 @@
+.s2-docs-nav {
+ margin-bottom: 0;
+ border-color: #eee;
+ background-color: #fff;
+}
+
+.s2-docs-nav .navbar-brand {
+ font-weight: 500;
+ img {
+ margin-right: 4px;
+ }
+}
+
+.s2-docs-nav .navbar-nav > .active > a,
+.s2-docs-nav .navbar-nav > .active > a:hover,
+.s2-docs-nav .navbar-nav > .active > a:focus {
+ background-color: #f6f6f6;
+ color: #333;
+}
diff --git a/docs/_sass/_s2-docs-sidenav.scss b/docs/_sass/_s2-docs-sidenav.scss
new file mode 100644
index 00000000..b6af974e
--- /dev/null
+++ b/docs/_sass/_s2-docs-sidenav.scss
@@ -0,0 +1,170 @@
+/*
+ * 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;
+ }
+}
+
+/* First level of nav */
+.s2-docs-sidenav {
+ margin-top: 20px;
+ margin-bottom: 20px;
+}
+
+/* All levels of nav */
+.s2-docs-sidebar .nav {
+ > li > a {
+ margin-left: -1px;
+ display: block;
+ padding: 4px 20px;
+ font-size: 13px;
+ font-weight: 500;
+ color: #767676;
+ border-left: 1px solid transparent;
+ transition: color .2s, border-color .2s, border-width .2s;
+ }
+ > li > a code {
+ background-color: inherit;
+ color: inherit;
+ }
+ > li > a:hover,
+ > li > a:focus {
+ padding-left: 19px;
+ color: #428BCA;
+ text-decoration: none;
+ background-color: transparent;
+ border-left-color: #428BCA;
+ }
+ > .active > a,
+ > .active:hover > a,
+ > .active:focus > a {
+ padding-left: 18px;
+ font-weight: bold;
+ color: #428BCA;
+ background-color: transparent;
+ border-left: 2px solid #428BCA;
+ }
+
+ /* Nav: second level (shown on .active) */
+ .nav {
+ display: none; /* Hide by default, but at >768px, show it */
+ padding-bottom: 10px;
+ }
+ .nav > li > a {
+ padding-top: 1px;
+ padding-bottom: 1px;
+ padding-left: 30px;
+ font-size: 12px;
+ font-weight: normal;
+ }
+ .nav > li > a:hover,
+ .nav > li > a:focus {
+ padding-left: 30px;
+ }
+ .nav > .active > a,
+ .nav > .active:hover > a,
+ .nav > .active:focus > a {
+ padding-left: 30px;
+ font-weight: 400;
+ }
+}
+
+/* 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 */
+@media (min-width: 992px) {
+ .s2-docs-sidebar .s2-docs-sidenav {
+ padding-top: 40px;
+ transition: border-color .2s;
+ border-left: 1px solid transparent;
+ }
+
+ .s2-docs-sidebar.affix .s2-docs-sidenav {
+ border-left-color: #eee;
+ }
+
+ .s2-docs-sidebar .nav > .active > ul {
+ display: block;
+ }
+ /* Widen the fixed sidebar */
+ .s2-docs-sidebar.affix,
+ .s2-docs-sidebar.affix-bottom {
+ width: 213px;
+ }
+ .s2-docs-sidebar.affix {
+ position: fixed; /* Undo the static from mobile first approach */
+ top: 0px;
+ }
+ .s2-docs-sidebar.affix-bottom {
+ position: absolute; /* Undo the static from mobile first approach */
+ }
+ .s2-docs-sidebar.affix-bottom .s2-docs-sidenav,
+ .s2-docs-sidebar.affix .s2-docs-sidenav {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+}
+@media (min-width: 1200px) {
+ /* Widen the fixed sidebar again */
+ .s2-docs-sidebar.affix-bottom,
+ .s2-docs-sidebar.affix {
+ width: 263px;
+ }
+}
+
+
+/* Back to top (hidden on mobile) */
+.back-to-top {
+ display: none;
+ padding: 4px 10px;
+ margin-top: 10px;
+ margin-left: 10px;
+ font-size: 12px;
+ font-weight: 400;
+ color: #999;
+}
+.back-to-top:hover {
+ color: #428BCA;
+ text-decoration: none;
+}
+
+@media (min-width: 768px) {
+ .back-to-top {
+ display: block;
+ }
+}
diff --git a/docs/_sass/_s2-result-repository.sass b/docs/_sass/_s2-result-repository.sass
new file mode 100644
index 00000000..f346e39d
--- /dev/null
+++ b/docs/_sass/_s2-result-repository.sass
@@ -0,0 +1,47 @@
+.select2-result-repository
+ padding-top: 4px
+ padding-bottom: 3px
+
+ &__avatar
+ float: left
+ width: 60px
+ margin-right: 10px
+ img
+ width: 100%
+ height: auto
+ border-radius: 2px
+
+ &__meta
+ margin-left: 70px
+
+ &__title
+ color: black
+ font-weight: bold
+ word-wrap: break-word
+ line-height: 1.1
+ margin-bottom: 4px
+
+ &__forks,
+ &__stargazers
+ margin-right: 1em
+
+ &__forks,
+ &__stargazers,
+ &__watchers
+ display: inline-block
+ color: #aaa
+ font-size: 11px
+
+ &__description
+ font-size: 13px
+ color: #777
+ margin-top: 4px
+
+ .select2-results__option--highlighted &
+ &__title
+ color: white
+ &__forks,
+ &__stargazers,
+ &__description,
+ &__watchers
+ color: mix(#428BCA, white, 30%)
diff --git a/docs/css/s2-docs.scss b/docs/css/s2-docs.scss
new file mode 100644
index 00000000..91593043
--- /dev/null
+++ b/docs/css/s2-docs.scss
@@ -0,0 +1,67 @@
+---
+---
+@import "s2-result-repository";
+@import "s2-docs-sidenav";
+@import "s2-docs-hamburger";
+@import "s2-docs-layout";
+@import "s2-docs-nav";
+@import "s2-docs-footer";
+@import "s2-docs-alert";
+@import "anchorjs";
+@import "jumbotron";
+
+.btn-toolbar {
+ margin-bottom: 20px;
+}
+
+.btn-outline-inverse {
+ color: #428BCA;
+ background-color: transparent;
+ border-color: #428BCA;
+ padding: 15px 30px;
+ font-size: 20px;
+}
+
+.btn-outline-inverse .fa {
+ margin-right: 8px;
+}
+
+.btn-outline-inverse:hover {
+ color: #fff;
+ border-color: #428BCA;
+ background-color: #428BCA;
+}
+
+.version {
+ color: #999;
+}
+
+/* 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;
+}
+
+.s2-docs-headline-example {
+ font-size: 12px;
+ font-weight: 700;
+ color: #959595;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+}