Split website into ./docs and set ./src for code

README.md

@@ -1,5 +1,42 @@
-Documentation Search
-=========================
+# Documentation Search
+
+Add a search autocomplete to your documentation.
+
+# Usage
+
+```html
+<link rel="stylesheet" href="//cdn.jsdelivr.net/documentationsearch.js/0/documentationsearch.min.css" />
+<script src="//cdn.jsdelivr.net/documentationsearch.js/0/documentationsearch.min.js"></script>
+```
+
+```javascript
+documentationSearch({
+  apiKey: apiKey, // Mandatory
+  indexName: indexName, // Mandatory
+  inputSelector: '#search-input' // Mandatory
+});
+```
+
+# Examples
+
+- http://eslint.org/
+- https://bootstrap.algolia.com/
+- https://reactjs.algolia.com/
+- https://babeljs.algolia.com/
+
+# How do I get my `apiKey` and `indexName`?
+
+Just send us [an email](mailto:documentationsearch@algolia.com) with the url of
+the documentation you would like to search, and we'll this info back to you.
+
+# How does it work?
+
+The JavaScript library is a wrapper on top of our
+[autocomplete.js](https://github.com/algolia/autocomplete.js) library, along
+with default CSS styling of the dropdown.
+
+The indexing of the data itself is currently done by an internal tool (we will
+release it later), that runs every hour.
 
 # Development
 

css/_base.sass

@@ -1,21 +0,0 @@
-$font-family-sans-serif: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif
-$font-size-base: 14px
-
-$headings-font-family: 'Raleway'
-$headings-font-weight: 300
-
-$brand-primary: #1D96C7
-$code-color: #A3B6CB
-
-$text-color: rgba(black,.75)
-
-$anchor-offset: 100px
-$community-color: #674492
-$success-color: #58D158
-$gray-light: #F3F3F3
-$dark-blue: #0D1D30
-$light-blue: lighten($dark-blue, 70%)
-
-$secondary-color: green
-
-$navbar-height: 50px

css/_footer.sass

@@ -1,10 +0,0 @@
-footer.site-footer
-  padding-top: 2em
-  margin-top: 0
-  border-top: 1px solid $gray-lighter
-  background-color: white
-  text-align: center
-  .fa.fa-heart
-    color: #E61870
-  .input-group-addon
-    background-color: transparent

css/_header.sass

@@ -1,46 +0,0 @@
-header.site-header
-  position: fixed
-
-  top: 0
-  width: 100%
-  z-index: 99
-  background: linear-gradient(to right, rgba(#0a1724, .8) -50%, rgba(#172c4f, .5) 100%)
-  transition: background 2s ease
-  nav.navbar
-    margin-bottom: 0
-    background-color: #0B1724
-    border-radius: 0
-    border: none
-    .navbar-collapse.in
-      background-color: #0B1724 !important
-      animation: fadeInUp .2s ease-in-out
-      position: fixed
-      +position(0,0,0,0)
-      padding: 20%
-      font-size: 1.2em
-      li
-        padding-bottom: 1em
-    .navbar-brand
-      font-weight: 600
-      color: white
-      z-index: 1
-    .navbar-header
-      position: relative
-      z-index: 2
-    .navbar-toggle
-      background-color: $brand-primary
-      border: solid 1px $brand-primary
-      color: white
-      &.collapsed
-        background-color: transparent
-        border: solid 1px rgba(white,.4)
-        color: white
-    .navbar-nav
-      > li > a
-        padding-bottom: 0
-      > .active > a
-        color: #1D96C7 !important
-        background-color: transparent
-
-.main-content
-  margin-top: $navbar-height

css/_helper.sass

@@ -1,317 +0,0 @@
-//spacer
-@mixin spacer
-  width: 100%
-  font-size: 0
-  margin: 0
-  padding: 0
-  border: 0
-  display: block
-
-.spacer5
-  +spacer
-  height: 5px
-.spacer10
-  +spacer
-  height: 10px
-.spacer15
-  +spacer
-  height: 15px
-.spacer20
-  +spacer
-  height: 20px
-.spacer25
-  +spacer
-  height: 25px
-.spacer30
-  +spacer
-  height: 30px
-.spacer35
-  +spacer
-  height: 35px
-.spacer40
-  +spacer
-  height: 40px
-.spacer45
-  +spacer
-  height: 45px
-.spacer50
-  +spacer
-  height: 50px
-.spacer60
-  +spacer
-  height: 60px
-.spacer80
-  +spacer
-  height: 80px
-.spacer100
-  +spacer
-  height: 100px
-.spacer200
-  +spacer
-  height: 200px
-
-//width
-.w100
-  width: 100px
-.w150
-  width: 150px
-.w200
-  width: 200px
-.m100
-  max-width: 100px
-.m200
-  max-width: 200px
-.m300
-  max-width: 300px
-.m400
-  max-width: 400px
-.m500
-  max-width: 500px
-.m600
-  max-width: 600px
-.m700
-  max-width: 700px
-.m800
-  max-width: 800px
-.m900
-  max-width: 900px
-.m1000
-  max-width: 1000px
-.m1200
-  max-width: 1200px
-.m100p
-  max-width: 100%
-
-//height
-.h100
-  height: 100px
-.h200
-  height: 200px
-.h300
-  height: 300px
-.h500
-  height: 500px
-.hfull
-  height: 100%
-
-// positions
-.pos-rel
-  position: relative
-.pos-stc
-  position: static
-.pos-abt
-  position: absolute
-
-
-//font size
-.text-xxl
-  font-size: 50px
-.text-xl
-  font-size: 32px
-.text-lg
-  font-size: 20px
-.text-sm
-  font-size: 12px
-.text-xs
-  font-size: 10px
-
-// pull
-.pull-in
-  margin-left: -15px
-  margin-right: -15px
-.pull-out
-  margin: -15px
-
-//borders
-.b-t
-  border-top: 1px solid $secondary-color
-.b-r
-  border-right: 1px solid $secondary-color
-.b-b
-  border-bottom: 1px solid $secondary-color
-.b-l
-  border-left: 1px solid $secondary-color
-
-//padding
-.padder
-  padding: 0 15px
-.p-small
-  padding: 10px
-.p-large
-  padding: 20px
-.p-xlarge
-  padding: 30px
-.p-l-large
-  padding-left: 20px
-.p-l-xlarge
-  padding-left: 30px
-.p-r-large
-  padding-right: 20px
-.p-r-xlarge
-  padding-right: 30px
-.p-l-xxlarge
-  padding-left: 60px
-.p-r-xxlarge
-  padding-right: 60px
-
-//margin
-.m-l-r-auto
-  margin-left: auto
-  margin-right: auto
-.m-l
-  margin-left: 15px
-.m-l-none
-  margin-left: 0
-.m-l-mini
-  margin-left: 5px
-.m-l-small
-  margin-left: 10px
-.m-l-large
-  margin-left: 20px
-.m-l-n
-  margin-left: -15px
-.m-l-n-mini
-  margin-left: -5px
-.m-l-n-small
-  margin-left: -10px
-.m-l-n-large
-  margin-left: -20px
-.m-t
-  margin-top: 15px
-.m-t-none
-  margin-top: 0
-.m-t-mini
-  margin-top: 5px
-.m-t-small
-  margin-top: 10px
-.m-t-large
-  margin-top: 20px
-.m-t-n
-  margin-top: -15px
-.m-t-n-xmini
-  margin-top: -1px
-.m-t-n-mini
-  margin-top: -5px
-.m-t-n-small
-  margin-top: -10px
-.m-t-n-large
-  margin-top: -20px
-.m-r
-  margin-right: 15px
-.m-r-none
-  margin-right: 0
-.m-r-mini
-  margin-right: 5px
-.m-r-small
-  margin-right: 10px
-.m-r-large
-  margin-right: 20px
-.m-r-n
-  margin-right: -15px
-.m-r-n-mini
-  margin-right: -5px
-.m-r-n-small
-  margin-right: -10px
-.m-r-n-large
-  margin-right: -20px
-.m-b
-  margin-bottom: 15px
-.m-b-none
-  margin-bottom: 0
-.m-b-mini
-  margin-bottom: 5px
-.m-b-small
-  margin-bottom: 10px
-.m-b-large
-  margin-bottom: 20px
-.m-b-n
-  margin-bottom: -15px
-.m-b-n-mini
-  margin-bottom: -5px
-.m-b-n-small
-  margin-bottom: -10px
-.m-b-n-large
-  margin-bottom: -20px
-
-// text
-.text-justify
-  text-align: justify
-.vertical-align-middle
-  display: inline-block !important
-  vertical-align: middle !important
-.text-ellipsis
-  white-space: nowrap
-  overflow: hidden
-  max-width: 100%
-  text-overflow: ellipsis
-.text-break-word
-  word-wrap: break-word
-.nowrap
-  word-wrap: nowrap
-  white-space: nowrap
-
-//line
-.line
-  width: 100%
-  height: 1px
-  margin: 10px 0
-  font-size: 0
-  overflow: hidden
-  border-width: 0
-  background-color: $secondary-color
-.line-dashed
-  border-style: dashed
-  background: transparent
-
-.no-line
-  border-width: 0
-.no-border
-  border-color: transparent !important
-.no-radius
-  border-radius: 0
-.block
-  display: block
-.inline
-  display: inline-block
-.pull-none
-  float: none
-
-.line-v
-  border-left: 1px solid #dddddd
-  padding-left: 20px
-.line-v-right
-  border-right: 1px solid #dddddd
-  padding-right: 20px
-
-
-// others
-.clickable
-  cursor: pointer
-
-.content-box
-  @include box-sizing(content-box)
-
-.faded
-  opacity: .3
-
-// CSS for <sub> and <sup>
-sub, sup
-  font-size: 50%
-  line-height: 0
-  position: relative
-  vertical-align: baseline
-
-sup
-  top: -0.7em
-
-sub
-  bottom: -0.25em
-
-[ng\:cloak], [ng-cloak], .ng-cloak
-  display: none !important
-
-.text-white
-  color: #FFFFFF
-
-.bg-white
-  background-color: white

css/_home.sass

@@ -1,10 +0,0 @@
-html, body
-  position: relative
-  +size(100%,100%)
-  background-attachment: fixed
-
-h2
-  font-size: 1.8em
-  font-weight: normal
-  letter-spacing: 1px
-  margin-bottom: 1em

css/_mixin.sass

@@ -1,17 +0,0 @@
-@mixin position($top: null, $right: null, $bottom: null, $left: null)
-  top: $top
-  right: $right
-  bottom: $bottom
-  left: $left
-
-@mixin keyframes($animation-name)
-  @-webkit-keyframes #{$animation-name}
-    @content
-  @-moz-keyframes #{$animation-name}
-    @content
-  @-ms-keyframes #{$animation-name}
-    @content
-  @-o-keyframes #{$animation-name}
-    @content
-  @keyframes #{$animation-name}
-    @content

css/_page.sass

@@ -1,3 +0,0 @@
-.page-content
-  font-size: 1.1em
-  line-height: 1.5em

css/main.sass

@@ -1,15 +0,0 @@
----
-# this ensures Jekyll reads the file to be transformed into CSS later
-# only Main files contain this front matter, not partials.
----
-
-@import "base"
-@import "bootstrap"
-@import "mixin"
-@import "syntax-highlighting"
-@import "helper"
-
-@import "header"
-@import "home"
-@import "page"
-@import "footer"

docs/css/_base.css

@@ -0,0 +1,48 @@
+/*
+Error: Invalid CSS after "...ial, sans-serif": expected expression (e.g. 1px, bold), was ";"
+        on line 1 of _base.sass
+
+1: $font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+2: $font-size-base: 14px;
+3: 
+4: $headings-font-family: "Raleway";
+5: $headings-font-weight: 300;
+6: 
+
+Backtrace:
+_base.sass:1
+/home/tim/.rvm/gems/ruby-2.2.3/gems/sass-3.4.19/lib/sass/scss/parser.rb:1161:in `expected'
+/home/tim/.rvm/gems/ruby-2.2.3/gems/sass-3.4.19/lib/sass/script/lexer.rb:221:in `expected!'
+/home/tim/.rvm/gems/ruby-2.2.3/gems/sass-3.4.19/lib/sass/script/parser.rb:600:in `assert_done'
+/home/tim/.rvm/gems/ruby-2.2.3/gems/sass-3.4.19/lib/sass/script/parser.rb:63:in `parse'
+/home/tim/.rvm/gems/ruby-2.2.3/gems/sass-3.4.19/lib/sass/script/parser.rb:183:in `parse'
+/home/tim/.rvm/gems/ruby-2.2.3/gems/sass-3.4.19/lib/sass/script.rb:27:in `parse'
+/home/tim/.rvm/gems/ruby-2.2.3/gems/sass-3.4.19/lib/sass/engine.rb:1130:in `parse_script'
+/home/tim/.rvm/gems/ruby-2.2.3/gems/sass-3.4.19/lib/sass/engine.rb:753:in `parse_variable'
+/home/tim/.rvm/gems/ruby-2.2.3/gems/sass-3.4.19/lib/sass/engine.rb:641:in `parse_line'
+/home/tim/.rvm/gems/ruby-2.2.3/gems/sass-3.4.19/lib/sass/engine.rb:535:in `build_tree'
+/home/tim/.rvm/gems/ruby-2.2.3/gems/sass-3.4.19/lib/sass/engine.rb:554:in `block in append_children'
+/home/tim/.rvm/gems/ruby-2.2.3/gems/sass-3.4.19/lib/sass/engine.rb:553:in `each'
+/home/tim/.rvm/gems/ruby-2.2.3/gems/sass-3.4.19/lib/sass/engine.rb:553:in `append_children'
+/home/tim/.rvm/gems/ruby-2.2.3/gems/sass-3.4.19/lib/sass/engine.rb:406:in `_to_tree'
+/home/tim/.rvm/gems/ruby-2.2.3/gems/sass-3.4.19/lib/sass/engine.rb:378:in `_render_with_sourcemap'
+/home/tim/.rvm/gems/ruby-2.2.3/gems/sass-3.4.19/lib/sass/engine.rb:295:in `render_with_sourcemap'
+/home/tim/.rvm/gems/ruby-2.2.3/gems/sass-3.4.19/lib/sass/plugin/compiler.rb:490:in `update_stylesheet'
+/home/tim/.rvm/gems/ruby-2.2.3/gems/sass-3.4.19/lib/sass/plugin/compiler.rb:215:in `block in update_stylesheets'
+/home/tim/.rvm/gems/ruby-2.2.3/gems/sass-3.4.19/lib/sass/plugin/compiler.rb:209:in `each'
+/home/tim/.rvm/gems/ruby-2.2.3/gems/sass-3.4.19/lib/sass/plugin/compiler.rb:209:in `update_stylesheets'
+/home/tim/.rvm/gems/ruby-2.2.3/gems/sass-3.4.19/lib/sass/plugin.rb:82:in `update_stylesheets'
+/home/tim/.rvm/gems/ruby-2.2.3/gems/sass-3.4.19/lib/sass/exec/sass_scss.rb:361:in `watch_or_update'
+/home/tim/.rvm/gems/ruby-2.2.3/gems/sass-3.4.19/lib/sass/exec/sass_scss.rb:51:in `process_result'
+/home/tim/.rvm/gems/ruby-2.2.3/gems/sass-3.4.19/lib/sass/exec/base.rb:52:in `parse'
+/home/tim/.rvm/gems/ruby-2.2.3/gems/sass-3.4.19/lib/sass/exec/base.rb:19:in `parse!'
+/home/tim/.rvm/gems/ruby-2.2.3/gems/sass-3.4.19/bin/sass:13:in `<top (required)>'
+/home/tim/.rvm/gems/ruby-2.2.3/bin/sass:23:in `load'
+/home/tim/.rvm/gems/ruby-2.2.3/bin/sass:23:in `<main>'
+/home/tim/.rvm/gems/ruby-2.2.3/bin/ruby_executable_hooks:15:in `eval'
+/home/tim/.rvm/gems/ruby-2.2.3/bin/ruby_executable_hooks:15:in `<main>'
+*/
+body:before {
+  white-space: pre;
+  font-family: monospace;
+  content: "Error: Invalid CSS after \"...ial, sans-serif\": expected expression (e.g. 1px, bold), was \";\"\A         on line 1 of _base.sass\A \A 1: $font-family-sans-serif: \"Open Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\A 2: $font-size-base: 14px;\A 3: \A 4: $headings-font-family: \"Raleway\";\A 5: $headings-font-weight: 300;\A 6: "; }

docs/css/_base.scss

@@ -0,0 +1,23 @@
+$font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+$font-size-base: 14px;
+
+$headings-font-family: "Raleway";
+$headings-font-weight: 300;
+
+$brand-primary: #1d96c7;
+$code-color: #a3b6cb;
+
+$text-color: rgba(black, 0.75);
+
+$anchor-offset: 100px;
+$community-color: #674492;
+$success-color: #58d158;
+$gray-light: #f3f3f3;
+$dark-blue: #0d1d30;
+$light-blue: lighten($dark-blue, 70%);
+
+$secondary-color: green;
+
+$navbar-height: 50px;
+
+

docs/css/_footer.scss

@@ -0,0 +1,15 @@
+footer.site-footer {
+  padding-top: 2em;
+  margin-top: 0;
+  border-top: 1px solid $gray-lighter;
+  background-color: white;
+  text-align: center;
+  .fa.fa-heart {
+    color: #e61870;
+  }
+  .input-group-addon {
+    background-color: transparent;
+  }
+}
+
+

docs/css/_header.scss

@@ -0,0 +1,47 @@
+header.site-header {
+  position: fixed;
+
+  top: 0;
+  width: 100%;
+  z-index: 99;
+  background: linear-gradient(to right, rgba(#0a1724, .8) -50%, rgba(#172c4f, .5) 100%);
+  transition: background 2s ease;
+  nav.navbar {
+    margin-bottom: 0;
+    background-color: #0B1724;
+    border-radius: 0;
+    border: none;
+    .navbar-collapse.in {
+      background-color: #0B1724 !important;
+      animation: fadeInUp .2s ease-in-out;
+      position: fixed;
+      @include position(0,0,0,0);
+      padding: 20%;
+      font-size: 1.2em;
+      li {
+        padding-bottom: 1em; } }
+    .navbar-brand {
+      font-weight: 600;
+      color: white;
+      z-index: 1; }
+    .navbar-header {
+      position: relative;
+      z-index: 2; }
+    .navbar-toggle {
+      background-color: $brand-primary;
+      border: solid 1px $brand-primary;
+      color: white;
+      &.collapsed {
+        background-color: transparent;
+        border: solid 1px rgba(white,.4);
+        color: white; } }
+    .navbar-nav {
+      > li > a {
+        padding-bottom: 0; }
+      > .active > a {
+        color: #1D96C7 !important;
+        background-color: transparent; } } } }
+
+.main-content {
+  margin-top: $navbar-height; }
+

docs/css/_helper.scss

@@ -0,0 +1,318 @@
+//spacer
+@mixin spacer {
+  width: 100%;
+  font-size: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  display: block; }
+
+.spacer5 {
+  @include spacer;
+  height: 5px; }
+.spacer10 {
+  @include spacer;
+  height: 10px; }
+.spacer15 {
+  @include spacer;
+  height: 15px; }
+.spacer20 {
+  @include spacer;
+  height: 20px; }
+.spacer25 {
+  @include spacer;
+  height: 25px; }
+.spacer30 {
+  @include spacer;
+  height: 30px; }
+.spacer35 {
+  @include spacer;
+  height: 35px; }
+.spacer40 {
+  @include spacer;
+  height: 40px; }
+.spacer45 {
+  @include spacer;
+  height: 45px; }
+.spacer50 {
+  @include spacer;
+  height: 50px; }
+.spacer60 {
+  @include spacer;
+  height: 60px; }
+.spacer80 {
+  @include spacer;
+  height: 80px; }
+.spacer100 {
+  @include spacer;
+  height: 100px; }
+.spacer200 {
+  @include spacer;
+  height: 200px; }
+
+//width
+.w100 {
+  width: 100px; }
+.w150 {
+  width: 150px; }
+.w200 {
+  width: 200px; }
+.m100 {
+  max-width: 100px; }
+.m200 {
+  max-width: 200px; }
+.m300 {
+  max-width: 300px; }
+.m400 {
+  max-width: 400px; }
+.m500 {
+  max-width: 500px; }
+.m600 {
+  max-width: 600px; }
+.m700 {
+  max-width: 700px; }
+.m800 {
+  max-width: 800px; }
+.m900 {
+  max-width: 900px; }
+.m1000 {
+  max-width: 1000px; }
+.m1200 {
+  max-width: 1200px; }
+.m100p {
+  max-width: 100%; }
+
+//height
+.h100 {
+  height: 100px; }
+.h200 {
+  height: 200px; }
+.h300 {
+  height: 300px; }
+.h500 {
+  height: 500px; }
+.hfull {
+  height: 100%; }
+
+// positions
+.pos-rel {
+  position: relative; }
+.pos-stc {
+  position: static; }
+.pos-abt {
+  position: absolute; }
+
+
+//font size
+.text-xxl {
+  font-size: 50px; }
+.text-xl {
+  font-size: 32px; }
+.text-lg {
+  font-size: 20px; }
+.text-sm {
+  font-size: 12px; }
+.text-xs {
+  font-size: 10px; }
+
+// pull
+.pull-in {
+  margin-left: -15px;
+  margin-right: -15px; }
+.pull-out {
+  margin: -15px; }
+
+//borders
+.b-t {
+  border-top: 1px solid $secondary-color; }
+.b-r {
+  border-right: 1px solid $secondary-color; }
+.b-b {
+  border-bottom: 1px solid $secondary-color; }
+.b-l {
+  border-left: 1px solid $secondary-color; }
+
+//padding
+.padder {
+  padding: 0 15px; }
+.p-small {
+  padding: 10px; }
+.p-large {
+  padding: 20px; }
+.p-xlarge {
+  padding: 30px; }
+.p-l-large {
+  padding-left: 20px; }
+.p-l-xlarge {
+  padding-left: 30px; }
+.p-r-large {
+  padding-right: 20px; }
+.p-r-xlarge {
+  padding-right: 30px; }
+.p-l-xxlarge {
+  padding-left: 60px; }
+.p-r-xxlarge {
+  padding-right: 60px; }
+
+//margin
+.m-l-r-auto {
+  margin-left: auto;
+  margin-right: auto; }
+.m-l {
+  margin-left: 15px; }
+.m-l-none {
+  margin-left: 0; }
+.m-l-mini {
+  margin-left: 5px; }
+.m-l-small {
+  margin-left: 10px; }
+.m-l-large {
+  margin-left: 20px; }
+.m-l-n {
+  margin-left: -15px; }
+.m-l-n-mini {
+  margin-left: -5px; }
+.m-l-n-small {
+  margin-left: -10px; }
+.m-l-n-large {
+  margin-left: -20px; }
+.m-t {
+  margin-top: 15px; }
+.m-t-none {
+  margin-top: 0; }
+.m-t-mini {
+  margin-top: 5px; }
+.m-t-small {
+  margin-top: 10px; }
+.m-t-large {
+  margin-top: 20px; }
+.m-t-n {
+  margin-top: -15px; }
+.m-t-n-xmini {
+  margin-top: -1px; }
+.m-t-n-mini {
+  margin-top: -5px; }
+.m-t-n-small {
+  margin-top: -10px; }
+.m-t-n-large {
+  margin-top: -20px; }
+.m-r {
+  margin-right: 15px; }
+.m-r-none {
+  margin-right: 0; }
+.m-r-mini {
+  margin-right: 5px; }
+.m-r-small {
+  margin-right: 10px; }
+.m-r-large {
+  margin-right: 20px; }
+.m-r-n {
+  margin-right: -15px; }
+.m-r-n-mini {
+  margin-right: -5px; }
+.m-r-n-small {
+  margin-right: -10px; }
+.m-r-n-large {
+  margin-right: -20px; }
+.m-b {
+  margin-bottom: 15px; }
+.m-b-none {
+  margin-bottom: 0; }
+.m-b-mini {
+  margin-bottom: 5px; }
+.m-b-small {
+  margin-bottom: 10px; }
+.m-b-large {
+  margin-bottom: 20px; }
+.m-b-n {
+  margin-bottom: -15px; }
+.m-b-n-mini {
+  margin-bottom: -5px; }
+.m-b-n-small {
+  margin-bottom: -10px; }
+.m-b-n-large {
+  margin-bottom: -20px; }
+
+// text
+.text-justify {
+  text-align: justify; }
+.vertical-align-middle {
+  display: inline-block !important;
+  vertical-align: middle !important; }
+.text-ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  max-width: 100%;
+  text-overflow: ellipsis; }
+.text-break-word {
+  word-wrap: break-word; }
+.nowrap {
+  word-wrap: nowrap;
+  white-space: nowrap; }
+
+//line
+.line {
+  width: 100%;
+  height: 1px;
+  margin: 10px 0;
+  font-size: 0;
+  overflow: hidden;
+  border-width: 0;
+  background-color: $secondary-color; }
+.line-dashed {
+  border-style: dashed;
+  background: transparent; }
+
+.no-line {
+  border-width: 0; }
+.no-border {
+  border-color: transparent !important; }
+.no-radius {
+  border-radius: 0; }
+.block {
+  display: block; }
+.inline {
+  display: inline-block; }
+.pull-none {
+  float: none; }
+
+.line-v {
+  border-left: 1px solid #dddddd;
+  padding-left: 20px; }
+.line-v-right {
+  border-right: 1px solid #dddddd;
+  padding-right: 20px; }
+
+
+// others
+.clickable {
+  cursor: pointer; }
+
+.content-box {
+  @include box-sizing(content-box); }
+
+.faded {
+  opacity: .3; }
+
+// CSS for <sub> and <sup>
+sub, sup {
+  font-size: 50%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline; }
+
+sup {
+  top: -0.7em; }
+
+sub {
+  bottom: -0.25em; }
+
+[ng\:cloak], [ng-cloak], .ng-cloak {
+  display: none !important; }
+
+.text-white {
+  color: #FFFFFF; }
+
+.bg-white {
+  background-color: white; }
+

docs/css/_home.scss

@@ -0,0 +1,15 @@
+html, body {
+  position: relative;
+  @include size(100%,100%);
+  background-attachment: fixed; }
+
+h2 {
+  font-size: 1.8em;
+  font-weight: normal;
+  letter-spacing: 1px;
+  margin-bottom: 1em; }
+
+.showcase--image {
+  max-width: 200px;
+}
+

docs/css/_mixin.scss

@@ -0,0 +1,18 @@
+@mixin position($top: null, $right: null, $bottom: null, $left: null) {
+  top: $top;
+  right: $right;
+  bottom: $bottom;
+  left: $left; }
+
+@mixin keyframes($animation-name) {
+  @-webkit-keyframes #{$animation-name} {
+    @content; }
+  @-moz-keyframes #{$animation-name} {
+    @content; }
+  @-ms-keyframes #{$animation-name} {
+    @content; }
+  @-o-keyframes #{$animation-name} {
+    @content; }
+  @keyframes #{$animation-name} {
+    @content; } }
+

docs/css/_page.scss

@@ -0,0 +1,4 @@
+.page-content {
+  font-size: 1.1em;
+  line-height: 1.5em; }
+