move community website to middleman

2017-11-13 14:23:59 +01:00 · 2017-11-13 14:23:59 +01:00 · 1d3dd207c0
commit 1d3dd207c0
parent abdea5d6bb
342 changed files with 10276 additions and 7514 deletions
--- a/.gitignore
+++ b/.gitignore
@ -6,6 +6,7 @@ dist/
 npm-debug.log*
 yarn-error.log
 docs/_site
+docs/build
 docs/.sass-cache/
 dist-es5-module/
 yarn.lock
--- a/.ruby-version
+++ b/.ruby-version
@ -0,0 +1 @@
+2.3.1
--- a/docs/Gemfile
+++ b/docs/Gemfile
@ -1,18 +1,39 @@
-# Ruby Gems for building and testing Bootstrap
-# Run `grunt update-gemfile-lock` to update to the latest compatible versions
-
+# If you do not have OpenSSL installed, change
+# the following line to use 'http://'
 source 'https://rubygems.org'

-group :development, :test do
-  gem 'jekyll'
-  gem 'jekyll-haml'
-  gem 'rouge'
-  gem 'sass'
-  gem 'guard'
-  gem 'nokogiri'
-  gem 'jekyll-contentblocks'
-  gem 'guard-jekyll-plus'
-  gem 'guard-livereload'
-  gem 'guard-bundler', require: false
-  gem 'eventmachine', '1.2.3'
-end
+# For faster file watcher updates on Windows:
+gem 'wdm', '~> 0.1.0', platforms: [:mswin, :mingw]
+
+# Windows does not come with time zone data
+gem 'tzinfo-data', platforms: [:mswin, :mingw, :jruby]
+
+gem 'rake'
+
+# Middleman Gems
+gem 'middleman', '>= 4.0.0'
+gem 'middleman-livereload'
+gem 'middleman-syntax'
+gem 'middleman-autoprefixer'
+gem 'middleman-s3_sync', github: 'fredjean/middleman-s3_sync', ref: '8c4e57a'
+gem 'middleman-minify-html'
+gem 'sprockets', '4.0.0.beta4'
+gem 'middleman-sprockets'
+gem 'sprockets-es6'
+gem 'redcarpet', '>= 3.3.4'
+gem 'nokogiri'
+gem 'sassc'
+gem 'kramdown', '>= 1.12.0'
+gem 'pry-byebug'
+gem 'rb-readline'
+gem 'mime-types'
+gem 'highlight', :require => 'simplabs/highlight' # TODO: Replace with rouge
+gem 'htmlentities'
+gem 'better_errors'
+gem 'binding_of_caller'
+gem 'octokit'
+gem 'google-api-client', '0.8.6'
+gem 'algoliasearch'
+gem 'middleman-vcs-time'
+gem 'hashie', '3.4.6'
+gem 'haml', '4.0.7'
--- a/docs/Gemfile.lock
+++ b/docs/Gemfile.lock
@ -1,116 +1,293 @@
+GIT
+  remote: git://github.com/fredjean/middleman-s3_sync.git
+  revision: 8c4e57a67048a3bafa4529c8f46184d33996e52b
+  ref: 8c4e57a
+  specs:
+    middleman-s3_sync (4.0.3)
+      ansi (~> 1.5.0)
+      fog-aws (>= 0.1.1)
+      map
+      middleman-cli
+      middleman-core (>= 4.0.0)
+      mime-types (~> 3.1)
+      parallel
+      ruby-progressbar
+      unf
+
 GEM
  remote: https://rubygems.org/
  specs:
+    activesupport (5.0.6)
+      concurrent-ruby (~> 1.0, >= 1.0.2)
+      i18n (~> 0.7)
+      minitest (~> 5.1)
+      tzinfo (~> 1.1)
    addressable (2.5.2)
      public_suffix (>= 2.0.2, < 4.0)
+    algoliasearch (1.16.0)
+      httpclient (~> 2.8.3)
+      json (>= 1.5.1)
+    ansi (1.5.0)
+    autoparse (0.3.3)
+      addressable (>= 2.3.1)
+      extlib (>= 0.9.15)
+      multi_json (>= 1.0.0)
+    autoprefixer-rails (7.1.5)
+      execjs
+    babel-source (5.8.35)
+    babel-transpiler (0.7.0)
+      babel-source (>= 4.0, < 6)
+      execjs (~> 2.0)
+    backports (3.9.1)
+    better_errors (2.3.0)
+      coderay (>= 1.0.0)
+      erubi (>= 1.0.0)
+      rack (>= 0.9.0)
+    binding_of_caller (0.7.2)
+      debug_inspector (>= 0.0.1)
+    builder (3.2.3)
+    byebug (9.1.0)
    coderay (1.1.2)
-    colorator (1.1.0)
+    coffee-script (2.4.1)
+      coffee-script-source
+      execjs
+    coffee-script-source (1.12.2)
+    compass-import-once (1.0.5)
+      sass (>= 3.2, < 3.5)
+    concurrent-ruby (1.0.5)
+    contracts (0.13.0)
+    debug_inspector (0.0.3)
+    dotenv (2.2.1)
    em-websocket (0.5.1)
      eventmachine (>= 0.12.9)
      http_parser.rb (~> 0.6.0)
-    eventmachine (1.2.3)
+    erubi (1.6.1)
+    erubis (2.7.0)
+    eventmachine (1.2.5)
+    excon (0.59.0)
+    execjs (2.7.0)
+    extlib (0.9.16)
+    faraday (0.13.1)
+      multipart-post (>= 1.2, < 3)
+    fast_blank (1.0.0)
+    fastimage (2.1.0)
    ffi (1.9.18)
+    fog-aws (1.4.1)
+      fog-core (~> 1.38)
+      fog-json (~> 1.0)
+      fog-xml (~> 0.1)
+      ipaddress (~> 0.8)
+    fog-core (1.45.0)
+      builder
+      excon (~> 0.58)
+      formatador (~> 0.2)
+    fog-json (1.0.2)
+      fog-core (~> 1.0)
+      multi_json (~> 1.10)
+    fog-xml (0.1.3)
+      fog-core
+      nokogiri (>= 1.5.11, < 2.0.0)
    formatador (0.2.5)
-    forwardable-extended (2.6.0)
-    guard (2.14.1)
-      formatador (>= 0.2.4)
-      listen (>= 2.7, < 4.0)
-      lumberjack (~> 1.0)
-      nenv (~> 0.1)
-      notiffany (~> 0.0)
-      pry (>= 0.9.12)
-      shellany (~> 0.0)
-      thor (>= 0.18.1)
-    guard-bundler (2.1.0)
-      bundler (~> 1.0)
-      guard (~> 2.2)
-      guard-compat (~> 1.1)
-    guard-compat (1.2.1)
-    guard-jekyll-plus (2.0.2)
-      guard (~> 2.10, >= 2.10.3)
-      guard-compat (~> 1.1)
-      jekyll (>= 1.0.0)
-    guard-livereload (2.5.2)
-      em-websocket (~> 0.5)
-      guard (~> 2.8)
-      guard-compat (~> 1.0)
-      multi_json (~> 1.8)
-    haml (5.0.4)
-      temple (>= 0.8.0)
+    google-api-client (0.8.6)
+      activesupport (>= 3.2)
+      addressable (~> 2.3)
+      autoparse (~> 0.3)
+      extlib (~> 0.9)
+      faraday (~> 0.9)
+      googleauth (~> 0.3)
+      launchy (~> 2.4)
+      multi_json (~> 1.10)
+      retriable (~> 1.4)
+      signet (~> 0.6)
+    googleauth (0.5.3)
+      faraday (~> 0.12)
+      jwt (~> 1.4)
+      logging (~> 2.0)
+      memoist (~> 0.12)
+      multi_json (~> 1.11)
+      os (~> 0.9)
+      signet (~> 0.7)
+    haml (4.0.7)
      tilt
+    hamster (3.0.0)
+      concurrent-ruby (~> 1.0)
+    hashie (3.4.6)
+    highlight (2.0.0)
+    htmlcompressor (0.2.0)
+    htmlentities (4.3.4)
    http_parser.rb (0.6.0)
-    jekyll (3.6.0)
-      addressable (~> 2.4)
-      colorator (~> 1.0)
-      jekyll-sass-converter (~> 1.0)
-      jekyll-watch (~> 1.1)
-      kramdown (~> 1.14)
-      liquid (~> 4.0)
-      mercenary (~> 0.3.3)
-      pathutil (~> 0.9)
-      rouge (>= 1.7, < 3)
-      safe_yaml (~> 1.0)
-    jekyll-contentblocks (1.2.0)
-      jekyll
-    jekyll-haml (0.1.5)
-      haml (>= 3.0.0)
-      jekyll (>= 3.3.0)
-    jekyll-sass-converter (1.5.0)
-      sass (~> 3.4)
-    jekyll-watch (1.5.0)
-      listen (~> 3.0, < 3.1)
+    httpclient (2.8.3)
+    i18n (0.7.0)
+    ipaddress (0.8.3)
+    json (2.1.0)
+    jwt (1.5.6)
    kramdown (1.15.0)
-    liquid (4.0.0)
+    launchy (2.4.3)
+      addressable (~> 2.3)
    listen (3.0.8)
      rb-fsevent (~> 0.9, >= 0.9.4)
      rb-inotify (~> 0.9, >= 0.9.7)
-    lumberjack (1.0.12)
-    mercenary (0.3.6)
+    little-plugger (1.1.4)
+    logging (2.2.2)
+      little-plugger (~> 1.1)
+      multi_json (~> 1.10)
+    map (6.6.0)
+    memoist (0.16.0)
    method_source (0.9.0)
+    middleman (4.2.1)
+      coffee-script (~> 2.2)
+      compass-import-once (= 1.0.5)
+      haml (>= 4.0.5)
+      kramdown (~> 1.2)
+      middleman-cli (= 4.2.1)
+      middleman-core (= 4.2.1)
+      sass (>= 3.4.0, < 4.0)
+    middleman-autoprefixer (2.8.0)
+      autoprefixer-rails (>= 7.0.1, < 8.0.0)
+      middleman-core (>= 3.3.3)
+    middleman-cli (4.2.1)
+      thor (>= 0.17.0, < 2.0)
+    middleman-core (4.2.1)
+      activesupport (>= 4.2, < 5.1)
+      addressable (~> 2.3)
+      backports (~> 3.6)
+      bundler (~> 1.1)
+      contracts (~> 0.13.0)
+      dotenv
+      erubis
+      execjs (~> 2.0)
+      fast_blank
+      fastimage (~> 2.0)
+      hamster (~> 3.0)
+      hashie (~> 3.4)
+      i18n (~> 0.7.0)
+      listen (~> 3.0.0)
+      memoist (~> 0.14)
+      padrino-helpers (~> 0.13.0)
+      parallel
+      rack (>= 1.4.5, < 3)
+      sass (>= 3.4)
+      servolux
+      tilt (~> 2.0)
+      uglifier (~> 3.0)
+    middleman-livereload (3.4.6)
+      em-websocket (~> 0.5.1)
+      middleman-core (>= 3.3)
+      rack-livereload (~> 0.3.15)
+    middleman-minify-html (3.4.1)
+      htmlcompressor (~> 0.2.0)
+      middleman-core (>= 3.2)
+    middleman-sprockets (4.1.1)
+      middleman-core (~> 4.0)
+      sprockets (>= 3.0)
+    middleman-syntax (3.0.0)
+      middleman-core (>= 3.2)
+      rouge (~> 2.0)
+    middleman-vcs-time (0.0.5)
+      middleman-core (~> 4.0)
+    mime-types (3.1)
+      mime-types-data (~> 3.2015)
+    mime-types-data (3.2016.0521)
    mini_portile2 (2.3.0)
+    minitest (5.10.3)
    multi_json (1.12.2)
-    nenv (0.3.0)
+    multipart-post (2.0.0)
    nokogiri (1.8.1)
      mini_portile2 (~> 2.3.0)
-    notiffany (0.1.1)
-      nenv (~> 0.1)
-      shellany (~> 0.0)
-    pathutil (0.16.0)
-      forwardable-extended (~> 2.6)
+    octokit (4.7.0)
+      sawyer (~> 0.8.0, >= 0.5.3)
+    os (0.9.6)
+    padrino-helpers (0.13.3.4)
+      i18n (~> 0.6, >= 0.6.7)
+      padrino-support (= 0.13.3.4)
+      tilt (>= 1.4.1, < 3)
+    padrino-support (0.13.3.4)
+      activesupport (>= 3.1)
+    parallel (1.12.0)
    pry (0.11.1)
      coderay (~> 1.1.0)
      method_source (~> 0.9.0)
+    pry-byebug (3.5.0)
+      byebug (~> 9.1)
+      pry (~> 0.10)
    public_suffix (3.0.0)
+    rack (2.0.3)
+    rack-livereload (0.3.16)
+      rack
+    rake (12.1.0)
    rb-fsevent (0.10.2)
    rb-inotify (0.9.10)
      ffi (>= 0.5.0, < 2)
+    rb-readline (0.5.5)
+    redcarpet (3.4.0)
+    retriable (1.4.1)
    rouge (2.2.1)
-    safe_yaml (1.0.4)
-    sass (3.5.2)
-      sass-listen (~> 4.0.0)
-    sass-listen (4.0.0)
-      rb-fsevent (~> 0.9, >= 0.9.4)
-      rb-inotify (~> 0.9, >= 0.9.7)
-    shellany (0.0.1)
-    temple (0.8.0)
+    ruby-progressbar (1.9.0)
+    sass (3.4.25)
+    sassc (1.11.4)
+      bundler
+      ffi (~> 1.9.6)
+      sass (>= 3.3.0)
+    sawyer (0.8.1)
+      addressable (>= 2.3.5, < 2.6)
+      faraday (~> 0.8, < 1.0)
+    servolux (0.13.0)
+    signet (0.7.3)
+      addressable (~> 2.3)
+      faraday (~> 0.9)
+      jwt (~> 1.5)
+      multi_json (~> 1.10)
+    sprockets (4.0.0.beta4)
+      concurrent-ruby (~> 1.0)
+      rack (> 1, < 3)
+    sprockets-es6 (0.9.2)
+      babel-source (>= 5.8.11)
+      babel-transpiler
+      sprockets (>= 3.0.0)
    thor (0.20.0)
+    thread_safe (0.3.6)
    tilt (2.0.8)
+    tzinfo (1.2.3)
+      thread_safe (~> 0.1)
+    uglifier (3.2.0)
+      execjs (>= 0.3.0, < 3)
+    unf (0.1.4)
+      unf_ext
+    unf_ext (0.0.7.4)

 PLATFORMS
  ruby

 DEPENDENCIES
-  eventmachine (= 1.2.3)
-  guard
-  guard-bundler
-  guard-jekyll-plus
-  guard-livereload
-  jekyll
-  jekyll-contentblocks
-  jekyll-haml
+  algoliasearch
+  better_errors
+  binding_of_caller
+  google-api-client (= 0.8.6)
+  haml (= 4.0.7)
+  hashie (= 3.4.6)
+  highlight
+  htmlentities
+  kramdown (>= 1.12.0)
+  middleman (>= 4.0.0)
+  middleman-autoprefixer
+  middleman-livereload
+  middleman-minify-html
+  middleman-s3_sync!
+  middleman-sprockets
+  middleman-syntax
+  middleman-vcs-time
+  mime-types
  nokogiri
-  rouge
-  sass
+  octokit
+  pry-byebug
+  rake
+  rb-readline
+  redcarpet (>= 3.3.4)
+  sassc
+  sprockets (= 4.0.0.beta4)
+  sprockets-es6
+  tzinfo-data
+  wdm (~> 0.1.0)

 BUNDLED WITH
-   1.16.0.pre.3
+   1.15.1
--- a/docs/Guardfile
+++ b/docs/Guardfile
@ -1,20 +0,0 @@
-guard 'jekyll-plus', :serve => true do
-  watch /.*/
-  ignore /^_site/
-end
-
-guard 'livereload', port: '35731' do
-  watch /^.*/
-end
-
-guard :bundler do
-  require 'guard/bundler'
-  require 'guard/bundler/verify'
-  helper = Guard::Bundler::Verify.new
-
-  files = ['Gemfile']
-  files += Dir['*.gemspec'] if files.any? { |f| helper.uses_gemspec?(f) }
-
-  # Assume files are symlinked from somewhere
-  files.each { |file| watch(helper.real_path(file)) }
-end
--- a/docs/Makefile
+++ b/docs/Makefile
@ -0,0 +1,12 @@
+all: install
+	bundle exec middleman server
+
+install:
+	bundle install
+
+build:
+	npm install
+	rm -rf build
+	bundle exec middleman build
+
+.PHONY: build
--- a/docs/Rakefile
+++ b/docs/Rakefile
@ -0,0 +1,50 @@
+require 'dotenv'
+require 'yaml'
+require_relative './lib/google_analytics_downloader.rb'
+
+Dotenv.load('.env')
+
+task :build do
+  sh "STAGE=#{ENV['STAGE'] || 'beta'} bundle exec middleman build"
+end
+
+task :s3_sync do
+  sh "STAGE=#{ENV['STAGE'] || 'beta'} bundle exec middleman s3_sync"
+end
+
+task :purge_cache do
+  stage = ENV['STAGE'] || 'beta'
+  # if stage == 'production'
+    sh <<-SHELL
+      curl -X DELETE "https://api.cloudflare.com/client/v4/zones/#{ENV['CLOUDFLARE_ZONE']}/purge_cache" \
+        -H "X-Auth-Email: #{ENV['CLOUDFLARE_AUTH_EMAIL']}" \
+        -H "X-Auth-Key: #{ENV['CLOUDFLARE_AUTH_KEY']}" \
+        -H "Content-Type: application/json" \
+        --data '{"tags":["algoliaweb-doc--#{stage}"]}'
+    SHELL
+  # else
+  #   puts "Not in production, not purging cache"
+  # end
+end
+
+task :deploy do
+  Rake::Task[:build].invoke
+  Rake::Task[:s3_sync].invoke
+  Rake::Task[:purge_cache].invoke
+end
+
+task :production do
+  ENV['STAGE'] = 'production'
+end
+
+task :beta do
+  ENV['STAGE'] = 'beta'
+end
+
+task :download_google_analytics_data do
+  file = File.expand_path(File.join(__FILE__, '..', 'app_data', 'google_analytics.yml'))
+  File.open(file, 'w') do |f|
+    f << GoogleAnalyticsDownloader.fetch.to_yaml
+  end
+end
+
--- a/docs/_config.yml
+++ b/docs/_config.yml
@ -1,41 +0,0 @@
-# Site settings
-baseurl: "/docsearch" # the subpath of your site, e.g. /blog/
-host: 0.0.0.0
-
-# OpenGraph / Twitter
-title: DocSearch
-description: "Algolia DocSearch is the easiest way to add a nice search experience to your documentation. Just send us your URL, and we'll send you the implementation code."
-tagline: DocSearch
-card_image: https://community.algolia.com/docsearch/img/docsearch-social.png
-twitter_username: algolia
-github_username: algolia
-
-# Navigation
-navigation:
-  -
-    text: Documentation
-    url: /documentation/
-  -
-    text: About
-    url: /about/
-
-# Build settings
-kramdown:
-  input: GFM
-  hard_wrap: false
-
-  auto_ids:       true
-  footnote_nr:    1
-  entity_output:  as_char
-  smart_quotes:   lsquo,rsquo,ldquo,rdquo
-  syntax_highlighter: coderay
-
-  coderay_wrap: div
-  coderay_line_numbers: nil
-  coderay_css: style
-
-# Assets
-sass:
-  sass_dir: css
-
-exclude: [node_modules]
--- a/docs/_data/showcase.yml
+++ b/docs/_data/showcase.yml
@ -1,94 +0,0 @@
- name: Stripe
-  url: "https://stripe.com/docs"
-  gif: "./img/showcase/example-stripe.gif"
-  logo: "./img/showcase/logo-stripe.png"
-
- name: Bootstrap
-  url: "https://getbootstrap.com/docs/4.0"
-  gif: "./img/showcase/example-bootstrap.gif"
-  logo: "./img/showcase/logo-bootstrap.png"
-
- name: Vue
-  url: "http://vuejs.org/guide/"
-  gif: "./img/showcase/example-vuejs.gif"
-  logo: "./img/showcase/logo-vuejs.png"
-
- name: React
-  url: "https://reactjs.org"
-  gif: "./img/showcase/example-react.gif"
-  logo: "./img/showcase/logo-react.png"
-
- name: React Native
-  url: "https://facebook.github.io/react-native/"
-  gif: "./img/showcase/example-reactnative.gif"
-  logo: "./img/showcase/logo-react.png"
-
- name: Docusaurus
-  url: "https://docusaurus.io/"
-  gif: "./img/showcase/example-docusaurus.gif"
-  logo: "./img/showcase/logo-docusaurus.png"
-
- name: Cordova
-  url: "http://cordova.apache.org/"
-  gif: "./img/showcase/example-cordova.gif"
-  logo: "./img/showcase/logo-cordova.png"
-  
- name: Babel.js
-  url: "https://babeljs.io/"
-  gif: "./img/showcase/example-babel.gif"
-  logo: "./img/showcase/logo-babel.png"
-
- name: Apiary
-  url: "http://help.apiary.io/"
-  gif: "./img/showcase/example-apiary.gif"
-  logo: "./img/showcase/logo-apiary.png"
-
- name: Flow
-  url: "https://flow.org/en/docs/"
-  gif: "./img/showcase/example-flow.gif"
-  logo: "./img/showcase/logo-flow.png"
-
- name: Moment.js
-  url: "https://momentjs.com/docs/"
-  gif: "./img/showcase/example-momentjs.gif"
-  logo: "./img/showcase/logo-momentjs.png"
-
- name: Ant Design
-  url: "https://ant.design/docs/react/introduce"
-  gif: "./img/showcase/example-ant-design.gif"
-  logo: "./img/showcase/logo-ant-design.png"
-
- name: Gitlab
-  url: "https://docs.gitlab.com/"
-  gif: "./img/showcase/example-gitlab.gif"
-  logo: "./img/showcase/logo-gitlab.png"
-
- name: Symfony
-  url: "https://symfony.com/doc/current/"
-  gif: "./img/showcase/example-symfony.gif"
-  logo: "./img/showcase/logo-symfony.png"
-
- name: PM2
-  url: "http://pm2.keymetrics.io/docs/usage/cluster-mode/"
-  gif: "./img/showcase/example-pm2.gif"
-  logo: "./img/showcase/logo-pm2.png"
-
- name: Hugo
-  url: "http://gohugo.io/documentation/"
-  gif: "./img/showcase/example-hugo.gif"
-  logo: "./img/showcase/logo-hugo.png"
-
- name: Fasltane
-  url: "https://docs.fastlane.tools/"
-  gif: "./img/showcase/example-fastlane.gif"
-  logo: "./img/showcase/logo-fastlane.png"
-
- name: Jekyll
-  url: "https://jekyllrb.com/"
-  gif: "./img/showcase/example-jekyll.gif"
-  logo: "./img/showcase/logo-jekyll.png"
-
- name: Gatsby
-  url: "https://www.gatsbyjs.org/"
-  gif: "./img/showcase/example-gatsby.gif"
-  logo: "./img/showcase/logo-gatsby.png"
--- a/docs/_includes/footer.html
+++ b/docs/_includes/footer.html
@ -1,36 +0,0 @@
-<div id='footer'>
-  <div class='credits pos-rel z-10'>
-    <div class=" pos-rel z-10">
-      <p>
-        Code licensed under
-        <a href='https://github.com/algolia/docsearch/blob/master/LICENSE'>MIT</a>
-        <br>
-        <a href='https://github.com/algolia/docsearch'>Github</a> -
-        <a href='https://github.com/algolia/docsearch/issues'>Issues</a> -
-        <a href='https://www.algolia.com/policies/privacy'>Privacy policy</a>
-      </p>
-      <div class="spacer32"></div>
-    </div>
-    <div class='container pos-rel'>
-      <div class='row'>
-        <div class='col-md-12 text-center'>
-          <a href='/'>
-            <img src='https://www.algolia.com/static_assets/images/flat2/algolia/algolia-logo_badge-598a1fe6.svg' width='40'>
-          </a>
-        </div>
-      </div>
-      <div class='spacer40'></div>
-    </div>
-  </div>
-</div>
-<svg style='display: none'>
-  <symbol>
-    <path d='M26.806 29.012a16.312 16.312 0 0 1-10.427 3.746C7.33 32.758 0 25.425 0 16.378 0 7.334 7.333 0 16.38 0c9.045 0 16.378 7.333 16.378 16.38 0 3.96-1.406 7.593-3.746 10.426L39.547 37.34c.607.608.61 1.59-.004 2.203a1.56 1.56 0 0 1-2.202.004L26.808 29.012zm-10.427.627c7.32 0 13.26-5.94 13.26-13.26 0-7.325-5.94-13.26-13.26-13.26-7.325 0-13.26 5.935-13.26 13.26 0 7.32 5.935 13.26 13.26 13.26z' fill-rule='evenodd'></path>
-  </symbol>
-  <symbol>
-    <path d='M34.852 15.725l-8.624-9.908L24.385 3.7 28.62.014l1.84 2.116 13.1 15.05 1.606 1.846-1.61 1.844-13.1 15.002-1.845 2.114-4.23-3.692 1.85-2.114 9.465-10.84h-24.66v-5.615h23.817zm-26.774 0h-.002 2.96v5.614H0v-5.615h8.078z' fill-rule='evenodd'></path>
-  </symbol>
-  <symbol id='icon-copy' viewbox='0 0 708.8 717' xmlns='http://www.w3.org/2000/svg'>
-    <path d='M658.8 158H490.2c-13.3 0-26 5.3-35.4 14.6l-4.6 4.6V25c0-13.8-11.2-25-25-25H235.6c-6.6 0-13 2.6-17.7 7.3L7.3 218C2.6 222.6 0 229 0 235.6V541c0 13.8 11.2 25 25 25h227.8v101c0 27.6 22.4 50 50 50h356c27.6 0 50-22.4 50-50V208c0-27.6-22.4-50-50-50zm-204 85.4V360H338.2l116.6-116.6zm-253-149.2V209H87L201.8 94.2zM50 516V259h176.8c13.8 0 25-11.2 25-25V50h148.4v177.3L267.5 360c-9.4 9.4-14.6 22.1-14.6 35.4V516H50zm608.8 151h-356V410h177c13.8 0 25-11.2 25-25V208h154v459z'></path>
-  </symbol>
-</svg>
--- a/docs/_includes/newsletter-mc.html
+++ b/docs/_includes/newsletter-mc.html
@ -1,22 +0,0 @@
-<!-- Begin MailChimp Signup Form -->
-<div id="mc_embed_signup">
-  <form action="//algolia.us3.list-manage.com/subscribe/post?u=f7b8acc6ec97794a08484ca9b&amp;id=285b80e148" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" novalidate>
-    <div id="mc_embed_signup_scroll">
-      <h3>Sign up for our newsletter</h3>
-      <div class="spacer20"></div>
-      <div class="input-group">
-        <span class="input-group-addon" id="sizing-addon1"><i class="fa fa-envelope-o"></i></span>
-        <input type="email" value="" name="EMAIL" class="form-control" id="mce-EMAIL" placeholder="Email Address">
-        <span class="input-group-btn">
-          <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary">
-        </span>
-      </div>
-      <div id="mce-responses" class="clear">
-        <div class="response" id="mce-error-response" style="display:none"></div>
-        <div class="response" id="mce-success-response" style="display:none"></div>
-      </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
-      <div style="position: absolute; left: -5000px;"><input type="text" name="b_f7b8acc6ec97794a08484ca9b_285b80e148" tabindex="-1" value=""></div>
-    </div>
-  </form>
-</div>
-<!--End mc_embed_signup-->
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@ -1,74 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    <!-- Standard -->
-    <title>{% if page.title %}{{ page.title }} - {% endif %}{{ site.title }}</title>
-    <meta name="description" content="{{ site.description }}">
-
-    <!-- Twitter Card -->
-    <meta name='twitter:card' content='summary_large_image'>
-    <meta name='twitter:site' content='{{ site.twitter_username }}'>
-    <meta name='twitter:title' content='{{ site.tagline }}'>
-    <meta name='twitter:description' content="{{ site.description }}">
-    <meta name='twitter:image:src' content='{{ site.card_image }}'>
-    <meta name='twitter:domain' content='community.algolia.com'>
-    <meta name="twitter:label1" content="Speed">
-    <meta name="twitter:data1" content="Blazing Fast ⚡⚡⚡">
-    <meta name="twitter:label2" content="Price">
-    <meta name="twitter:data2" content="FREE!">
-
-    <!-- OpenGraph -->
-    <meta property='og:title' content='{{ site.tagline }}'>
-    <meta property='og:site_name' content='Algolia Community'>
-    <meta property='og:url' content='https://community.algolia.com/docsearch/'>
-    <meta property='og:description' content="{{ site.description }}">
-    <meta property='og:image' content='{{ site.card_image }}'>
-    <meta property="og:locale" content="en_US">
-    <meta property="og:type" content="website">
-
-    <!-- Favicons -->
-    <!--[if IE]><link rel="shortcut icon" href="{{ "/img/favicon.png" | prepend: site.baseurl }}"><![endif]-->
-    <link rel="icon" href="{{ "/img/favicon.png" | prepend: site.baseurl }}">
-
-    <link rel="stylesheet" media="screen" href="{{ "/css/main.css" | prepend: site.baseurl }}" />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css">
-  </head>
-    <body class="{{page.className}} {{page.title}}">
-
-    {% include header.html %}
-
-    {{ content }}
-
-{%if page.noFooter == null %}
-    {% include footer.html %}
-{% endif %}
-
-{% if site.env == 'development' %}
-    <script>
-      document.write('\x3Cscript src="//' + window.location.hostname +':35731/livereload.js">\x3C/script>');
-    </script>
-{% endif %}
-
-    <script src="//cdn.jsdelivr.net/jquery/2.1/jquery.min.js"></script>
-    <script src="{{ "/js/communityHeader.js" | prepend: site.baseurl }}"></script>
-    <script>
-      var a = new communityHeader({
-        apiKey: '25626fae796133dc1e734c6bcaaeac3c',
-        indexName: 'docsearch',
-        inputSelector: '#searchbox',
-        autocompleteOptions: {
-          debug: false
-        }
-      },"lazy");
-    </script>
-
-  {% include marketing.html %}
-
-  {% contentblock site-footer %}
-  </body>
-
-</html>
--- a/docs/_layouts/page.html
+++ b/docs/_layouts/page.html
@ -1,13 +0,0 @@
---
-layout: default
---
-
-<div class="container main-content m800 m-l-r-auto {{page.className}}">
-  <header class="page-header">
-    <h1 class="page-title">{{ page.title }}</h1>
-  </header>
-  <article class="page-content">
-    {{ content }}
-  </article>
-  <div class="spacer80"></div>
-</div>
--- a/docs/_plugins/environment_variables.rb
+++ b/docs/_plugins/environment_variables.rb
@ -1,9 +0,0 @@
-module Jekyll
-  class EnvironmentVariablesGenerator < Generator
-
-    def generate(site)
-      site.config['env'] = ENV['JEKYLL_ENV'] || 'development'
-    end
-
-  end
-end
--- a/docs/_plugins/ext.rb
+++ b/docs/_plugins/ext.rb
@ -1,2 +0,0 @@
-require "rubygems"
-require "jekyll-contentblocks"
--- a/docs/_plugins/haml.rb
+++ b/docs/_plugins/haml.rb
@ -1,40 +0,0 @@
-require 'jekyll-haml'
-
-module Jekyll
-
-  class HamlPartialTag < Liquid::Tag
-    def initialize(tag_name, file, tokens)
-      super
-      @file = file.strip
-    end
-
-    def render(context)
-      includes_dir = File.join(context.registers[:site].source, '_includes')
-
-      if File.symlink?(includes_dir)
-        return "Includes directory '#{includes_dir}' cannot be a symlink"
-      end
-
-      if @file !~ /^[a-zA-Z0-9_\/\.-]+$/ || @file =~ /\.\// || @file =~ /\/\./
-        return "Include file '#{@file}' contains invalid characters or sequences"
-      end
-
-      return "File must have \".haml\" extension" if @file !~ /\.haml$/
-
-      Dir.chdir(includes_dir) do
-        choices = Dir['**/*'].reject { |x| File.symlink?(x) }
-        if choices.include?(@file)
-          source     = File.read(@file)
-          conversion = ::Haml::Engine.new(source).render
-          partial    = Liquid::Template.parse(conversion)
-          return partial.render!(context).gsub(/\s+/, ' ')
-        else
-          "Included file '#{@file}' not found in _includes directory"
-        end
-      end
-    end
-  end
-
-end
-
-Liquid::Template.register_tag('haml', Jekyll::HamlPartialTag)
--- a/docs/_plugins/svg.rb
+++ b/docs/_plugins/svg.rb
@ -1,16 +0,0 @@
-module Jekyll
-
-  class SvgTag < Liquid::Tag
-    def initialize(tag_name, svg, tokens)
-      super
-      @svg = svg.strip
-    end
-
-    def render(context)
-      # make sure the SVG is on a single line to be HAML compliant
-      File.read(@svg).strip.gsub("\n", ' ')
-    end
-  end
-end
-
-Liquid::Template.register_tag('svg', Jekyll::SvgTag)
--- a/docs/_redirects
+++ b/docs/_redirects
@ -1,2 +0,0 @@
-# for netlify PR deploys
-/ /docsearch 301
--- a/docs/algolia-aerial/README.md
+++ b/docs/algolia-aerial/README.md
@ -0,0 +1,20 @@
+# algolia-aerial
+Aerial.css package
+
+## Definition
+This project aims to provide a coherent and unified design system for algolia employees.
+This design system is also known as Aerial.
+
+## Documentation
+Go to https://aerialcss.algolia.com to read the full documentation
+
+## Usage
+
+To start using aerial.css, simply do `npm install algolia-aerial` or `yarn add algolia-aerial`
+
+then go to your main css / sass file, and add :
+
+```css
+@import './node_modules/algolia-aerial/dist/aerial.css';
+```
+
--- a/docs/algolia-aerial/package.json
+++ b/docs/algolia-aerial/package.json
@ -0,0 +1,34 @@
+{
+  "scripts": {
+    "start": "webpack --config webpack.config.js && yarn optimize",
+    "optimize": "cleancss dist/aerial-source.css -o dist/aerial.css && yarn done",
+    "done": "echo '✨ Bundle done ✅' && du -h dist/aerial-source.css && du -h dist/aerial.css && yarn pj-version",
+    "pj-version": "npm --loglevel silent run vars",
+    "vars": "env | grep npm_package_version"
+  },
+  "devDependencies": {
+    "extract-text-webpack-plugin": "^3.0.0",
+    "node-sass": "^4.5.3",
+    "sass-loader": "^6.0.6",
+    "webpack": "^3.5.4",
+    "webpack-auto-inject-version": "^1.0.0",
+    "webpack-livereload-plugin": "^0.11.0"
+  },
+  "name": "algolia-aerial",
+  "version": "1.2.6",
+  "description": "algolia-aerial package",
+  "main": "webpack.config.js",
+  "author": "Lucas Bonomi <@LukyVj> (http://lucasbonomi.com)",
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://github.com/algolia/algolia-aerial.git"
+  },
+  "dependencies": {
+    "clean-css-cli": "^4.1.6",
+    "css-loader": "^0.28.4",
+    "file-loader": "^0.11.2",
+    "style-loader": "^0.18.2",
+    "url-loader": "^0.5.9"
+  }
+}
--- a/docs/algolia-aerial/src/stylesheet/aerial.sass
+++ b/docs/algolia-aerial/src/stylesheet/aerial.sass
@ -0,0 +1,24 @@
+/*! Aerial.css [AIV]v{version} - {date}[/AIV] */
+*
+  box-sizing: border-box
+
+@import 'modules/base'
+@import 'modules/mixins'
+
+// AERIAL.CSS
+@import 'partials/bootstrap'
+@import 'partials/fonts'
+
+@import 'components/scaffolding'
+@import 'components/buttons'
+@import 'components/cards'
+@import 'components/code'
+@import 'components/type'
+@import 'components/tables'
+@import 'components/forms'
+@import 'components/input-groups'
+@import 'components/alerts'
+
+
+@import 'partials/colors'
+@import 'partials/helpers'
--- a/docs/algolia-aerial/src/stylesheet/components/_alerts.sass
+++ b/docs/algolia-aerial/src/stylesheet/components/_alerts.sass
@ -0,0 +1,30 @@
+.alert
+  border-radius: 6px
+  padding: 16px 24px
+
+.alert.alert-danger
+  background-color: rgba(255,79,129,0.1)
+  border: solid 1px rgba(255,79,129,0.2)
+  color: #ff4f81 !important
+
+.alert.alert-danger p
+  color: #ff4f81 !important
+
+.alert.alert-info
+  background-color: rgba(0,174,255,0.1)
+  border: solid 1px rgba(0,174,255,0.2)
+  color: #00aeff !important
+
+.alert.alert-info a
+  color: #007ab3 !important
+  text-decoration: underline
+
+.alert.alert-warning
+  background-color: rgba(255,193,104,0.25)
+  border: solid 1px rgba(255,193,104,0.4)
+  color: #c57c14 !important
+
+.alert.alert-success
+  background-color: rgba($shamrock,0.1)
+  border: solid 1px rgba($shamrock, 0.4)
+  color: $shamrock !important
--- a/docs/algolia-aerial/src/stylesheet/components/_buttons.sass
+++ b/docs/algolia-aerial/src/stylesheet/components/_buttons.sass
@ -0,0 +1,219 @@
+.btn
+  display: inline-block
+  // For input.btn
+  font-weight: $btn-font-weight
+  text-align: center
+  vertical-align: middle
+  touch-action: manipulation
+  cursor: pointer
+  background-image: none
+  // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
+  border: 1px solid transparent
+  white-space: nowrap
+  +user-select(none)
+  padding: 0 20px
+  display: inline-block
+  border-radius: 50px
+  font-size: 16px
+  font-weight: 400
+  height: 40px
+  line-height: 40px
+  border: none
+  box-sizing: border-box
+  position: relative
+  transition: background .2s, box-shadow .2s
+
+  &:active,
+  &.active
+    outline: 0
+    background-image: none
+    +box-shadow(inset 0 3px 5px rgba(0, 0, 0, 0.125))
+
+    &:focus,
+    &.focus
+      +tab-focus
+  &:hover,
+  &:focus,
+  &.focus
+    color: $btn-default-color
+
+  &:hover, &:focus, &:active, &.active
+    outline: 0 !important
+    box-shadow: none
+    text-decoration: none
+
+  &.disabled,
+  &[disabled],
+  fieldset[disabled] &
+    cursor: $cursor-disabled
+    pointer-events: none
+    // Future-proof disabling of clicks
+    +opacity(0.65)
+    +box-shadow(none)
+
+  @media (max-width: $screen-sm)
+    font-size: 14px
+
+  .icon:before
+    position: relative
+    top: 2px
+
+
+.btn-static-default
+  border: 2px solid $tertiary-color
+  color: $text-color
+  background-color: transparent
+  line-height: 36px
+  &:hover, &:focus
+    color: $text-color
+    background-color: rgba($tertiary-color,.3)
+
+
+.btn-static-primary
+  border: none
+  color: #fff
+  background-image: linear-gradient(284deg, $java, $shamrock)
+  &:hover, &:focus
+    color: white
+    background-image: linear-gradient(284deg, $java, $shamrock)
+  &:active, &.active
+    background-image: linear-gradient(284deg, darken($java, 4%), darken($shamrock, 4%))
+
+  &.btn-shadow
+    box-shadow: 0 2px 6px 0 rgba($shamrock, 0.4)
+    &:hover, &:focus
+      box-shadow: 0 4px 12px rgba($shamrock, 0.4)
+
+
+.btn-static-secondary
+  border: none
+  color: #fff
+  background-image: linear-gradient(80deg, $algolia-blue, $royal-blue)
+  &:hover, &:focus
+    color: white
+    background-image: linear-gradient(80deg, $algolia-blue, $royal-blue)
+  &:active, &.active
+    background-image: linear-gradient(80deg, darken($algolia-blue, 4%), darken($royal-blue, 4%))
+  &.btn-shadow
+    box-shadow: 0 2px 6px 0 rgba($royal-blue, 0.4)
+    &:hover, &:focus
+      box-shadow: 0 4px 12px rgba($royal-blue, 0.4)
+
+
+
+.btn-static-tertiary
+  border: none
+  color: #fff
+  background-image: linear-gradient(112deg, $radical-red, $bittersweet)
+  &:hover, &:focus
+    color: white
+    background-image: linear-gradient(112deg, $radical-red, $bittersweet)
+  &:active, &.active
+    background-image: linear-gradient(112deg, darken($radical-red, 4%), darken($bittersweet, 4%))
+  &.btn-shadow
+    box-shadow: 0 2px 6px 0 rgba($bittersweet, 0.4)
+    &:hover, &:focus
+      box-shadow: 0 4px 12px rgba($bittersweet, 0.4)
+
+/*! This button is generated on build and colored with $theme-color.
+  Think about changing the color of it to fit to your needs.*/
+.btn-static-theme
+  border: none
+  color: $bunting
+  background-color: $theme-color
+  &:hover, &:focus
+    color: $deep-cove
+    background-color: darken($theme-color, 10%)
+  &:active, &.active
+    background-image: darken($theme-color, 10%)
+  &.btn-shadow
+    box-shadow: 0 2px 6px 0 rgba($koromiko, 0.4)
+    &:hover, &:focus
+      box-shadow: 0 4px 12px rgba($koromiko, 0.4)
+
+  svg
+    width: 16px
+    height: 16px
+    vertical-align: middle
+    margin-left: 0.5em
+
+    use
+      fill: $bunting
+
+
+.btn-static-inverse
+  color: white
+  &:hover, &:focus, &:active, &.active
+    color: white
+
+
+
+.btn-static-dark
+  color: $white
+  background-color: $deep-cove
+  background-image: linear-gradient(283deg, $deep-cove, $bunting)
+  border-color: $deep-cove
+  &:hover, &:focus
+    color: $white
+    background-color: $bunting
+    border-color: $bunting
+  &.btn-shadow
+    box-shadow: 0 2px 6px 0 rgba($bunting, 0.4)
+    &:hover, &:focus
+      box-shadow: 0 4px 12px rgba($bunting, 0.4)
+
+  &:active, &.active
+    background-image:  linear-gradient(283deg, darken($deep-cove, 10%), darken($bunting, 10%))
+
+.btn-static-white
+  color: $bunting
+  background-color: $white
+  border-color: $white
+  &:hover, &:focus
+    color: $bunting
+
+
+.btn-static-enterprise
+  color: $white
+  background-color: $deep-cove
+  border: solid 2px $shamrock
+  line-height: 36px
+
+  &:hover, &:focus
+    color: white
+    background-color: $shamrock
+    border-color: $shamrock
+
+
+// Circles
+.btn-circle
+  width: 42px
+  height: 42px
+  padding: 0
+  line-height: 42px
+
+
+
+// Shadows
+.btn-static-shadow-dark
+  box-shadow: 0 2px 6px 0 rgba($deep-cove, 0.5)
+  &:hover, &:focus
+    box-shadow: 0 4px 12px rgba($deep-cove, 0.5)
+
+
+.btn-static-default,
+.btn-static-primary,
+.btn-static-secondary,
+.btn-static-tertiary,
+.btn-static-inverse,
+.btn-static-dark,
+.btn-static-enterprise
+  &:active, &.active,
+  &.btn-shadow:active, .btn-shadow.active,
+  &.btn-static-shadow-dark:active, .btn-static-shadow-dark.active
+    box-shadow: inset 0 0 4px 2px rgba(#050f2c, 0.3)
+
+
+// Sizes
+.btn-lg
+  min-width: 210px
--- a/docs/algolia-aerial/src/stylesheet/components/_cards.sass
+++ b/docs/algolia-aerial/src/stylesheet/components/_cards.sass
@ -0,0 +1,184 @@
+
+.al-card
+  background-color: $white
+  box-shadow: 0 2px 6px 0 rgba($deep-cove, 0.4)
+  padding: 40px 24px
+  position: relative
+  border-radius: 4px
+
+  &.small-card
+    .card-title,
+    .card-icon,
+    .card-text
+      vertical-align: middle
+
+    .card-title
+      color: $bunting
+      font-size: 16px
+      font-weight: 800
+      padding: 0
+      margin: 0
+      opacity: 0.8
+      margin-bottom: 8px
+      text-transform: none
+
+    .card-icon svg
+      width: 72px
+
+    .card-text
+      font-size: 16px
+      line-height: 24px
+      color: $bunting
+      opacity: 0.7
+
+  &.cover-card
+    height: 240px
+    margin: 0 auto 24px
+    width: 240px
+    border-radius: 5px
+    overflow: hidden
+
+    .card-background
+      width: 100%
+      height: 100%
+      position: absolute
+      transition: transform 0.3s ease
+      top: 50%
+      left: 50%
+      transform: translate(-50%, -50%)
+
+      &:after
+        position: absolute
+        display: block
+        content: ''
+        width: 100%
+        height: 100%
+        top: 0
+        left: 0
+        background: rgba($deep-cove, 0.5)
+        transition: opacity 0.3s ease
+
+    .card-icon
+      position: absolute
+      z-index: 12
+      top: 50%
+      left: 50%
+      transform: translate(-50%, -50%)
+      transition: transform 0.3s ease
+
+// Card border
+.card-border,
+.card-border-quote
+  position: relative
+
+  .card-border-line
+    position: absolute
+    top: 0
+    left: 0
+    height: 5px
+    width: 100%
+    border-top-left-radius: 6px
+    border-top-right-radius: 6px
+
+.card-border
+  height: 100%
+
+
+// Card border with media ( img, videos )
+.card-border-media
+  overflow: hidden
+  min-height: 200px
+
+  .card-header
+    width: 100%
+    height: 100%
+    height: 228px
+    overflow: hidden
+    position: relative
+
+    img
+      width: 100%
+      height: 100%
+      opacity: 0.8
+      will-change: opacity, mix-blend-mode
+      border-top-left-radius: 6px
+      border-top-right-radius: 6px
+
+      @supports (mix-blend-mode: soft-light)
+        mix-blend-mode: soft-light
+        transition: opacity 0.2s ease, mix-blend-mode 0.2s ease
+
+      @supports (not (mix-blend-mode: soft-light))
+        opacity: 0.6
+
+      @supports (not (object-fit: cover))
+        height: auto
+        position: absolute
+        top: 50%
+        transform: translateY(-50%)
+
+      @supports (object-fit: cover)
+        object-fit: cover
+        object-position: center center
+
+  .card-separator
+    height: 5px
+    width: 100%
+
+
+
+  &.card-border-media-effect
+    .card-header img
+      filter: grayscale(100%)
+    &:hover .card-header img
+      filter: grayscale(0)
+      @supports (mix-blend-mode: soft-light)
+        mix-blend-mode: unset
+        opacity: 1
+
+
+// Card border quotes
+.card-border-quote
+
+  .card-container
+    &:before
+      content: ''
+      display: block
+      width: 14px
+      height: 14px
+      background: transparent
+      position: absolute
+      left: 0
+      right: 0
+      margin: auto
+      bottom: -10px
+      border-radius: 100px
+      box-shadow: 0 4px 20px rgba($bunting,0.08), 0 2px 9px 0 rgba($bunting,0.07), 0 4px 18px rgba($bunting,0.07)
+      z-index: -1
+    &:after
+      content: ''
+      display: block
+      width: 18px
+      height: 18px
+      background: #fff
+      position: absolute
+      left: 0
+      right: 0
+      margin: auto
+      bottom: -9px
+      transform: rotate(-45deg)
+
+
+  .quote-author
+
+  .avatar
+    position: relative
+    width: 42px
+    height: 42px
+    border-radius: 100px
+    float: left
+    margin-right: 8px
+  .author-infos
+    width: calc(100% - 42px - 8px)
+    float: left
+    > span
--- a/docs/algolia-aerial/src/stylesheet/components/_code.sass
+++ b/docs/algolia-aerial/src/stylesheet/components/_code.sass
@ -0,0 +1,45 @@
+code,
+kbd,
+pre,
+samp
+  font-family: $font-family-monospace
+
+code
+  padding: 2px 4px
+  font-size: 90%
+  color: $code-color
+  background-color: $code-bg
+  border-radius: $border-radius-base
+
+kbd
+  padding: 2px 4px
+  font-size: 90%
+  color: $kbd-color
+  background-color: $kbd-bg
+  border-radius: $border-radius-small
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25)
+  kbd
+    padding: 0
+    font-size: 100%
+    font-weight: bold
+    box-shadow: none
+
+pre
+  display: block
+  padding: ($line-height-computed - 1) / 2
+  margin: 0 0 $line-height-computed / 2
+  font-size: $font-size-base - 1
+  line-height: $line-height-base
+  word-break: break-all
+  word-wrap: break-word
+  color: $pre-color
+  background-color: $pre-bg
+  border: 1px solid $pre-border-color
+  border-radius: $border-radius-base
+  code
+    padding: 0
+    font-size: inherit
+    color: inherit
+    white-space: pre-wrap
+    background-color: transparent
+    border-radius: 0
--- a/docs/algolia-aerial/src/stylesheet/components/_forms.sass
+++ b/docs/algolia-aerial/src/stylesheet/components/_forms.sass
@ -0,0 +1,110 @@
+fieldset
+  padding: 0
+  margin: 0
+  border: 0
+  min-width: 0
+
+legend
+  display: block
+  width: 100%
+  padding: 0
+  margin-bottom: $line-height-computed
+  font-size: $font-size-base * 1.5
+  line-height: inherit
+  color: $legend-color
+  border: 0
+  border-bottom: 1px solid $legend-border-color
+
+label
+  display: inline-block
+  max-width: 100%
+  margin-bottom: 5px
+  font-weight: bold
+
+
+input[type="search"]
+  +box-sizing(border-box)
+
+input[type="radio"],
+input[type="checkbox"]
+  margin: 4px 0 0
+  margin-top: 1px \9
+  line-height: normal
+
+input[type="file"]
+  display: block
+
+input[type="range"]
+  display: block
+  width: 100%
+
+select[multiple],
+select[size]
+  height: auto
+
+input[type="file"]:focus,
+input[type="radio"]:focus,
+input[type="checkbox"]:focus
+  +tab-focus
+
+output
+  display: block
+  padding-top: $padding-base-vertical + 1
+  font-size: $font-size-base
+  line-height: $line-height-base
+  color: $input-color
+
+
+.form-control
+  display: block
+  width: 100%
+  height: $input-height-base
+  padding: $padding-base-vertical $padding-base-horizontal
+  font-size: $font-size-base
+  line-height: $line-height-base
+  color: $input-color
+  background-color: $input-bg
+  background-image: none
+  border: 1px solid $input-border
+  border-radius: $input-border-radius
+  +box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.075))
+  +transition(border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s)
+  +form-control-focus
+  +placeholder
+
+  &[disabled],
+  &[readonly],
+  fieldset[disabled] &
+    cursor: $cursor-disabled
+    background-color: $input-bg-disabled
+    opacity: 1
+
+textarea.form-control
+  height: auto
+
+
+input[type="search"]
+  -webkit-appearance: none
+
+
+@media screen and (-webkit-min-device-pixel-ratio: 0)
+  input[type="date"],
+  input[type="time"],
+  input[type="datetime-local"],
+  input[type="month"]
+    line-height: $input-height-base
+  input[type="date"].input-sm,
+  input[type="time"].input-sm,
+  input[type="datetime-local"].input-sm,
+  input[type="month"].input-sm
+    line-height: $input-height-small
+  input[type="date"].input-lg,
+  input[type="time"].input-lg,
+  input[type="datetime-local"].input-lg,
+  input[type="month"].input-lg
+    line-height: $input-height-large
+
+
+.form-group
+  margin-bottom: 15px
+
--- a/docs/algolia-aerial/src/stylesheet/components/_input-groups.scss
+++ b/docs/algolia-aerial/src/stylesheet/components/_input-groups.scss
@ -0,0 +1,144 @@
+
+.input-group .form-control {
+    height: 40px;
+    border-radius: 20px;
+}
+.input-group {
+
+  display: table;
+
+
+  &[class*="col-"] {
+    float: none;
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .form-control {
+    position: relative;
+    z-index: 2;
+
+    float: left;
+
+    width: 100%;
+    margin-bottom: 0;
+
+    &:focus {
+      z-index: 3;
+    }
+  }
+}
+
+.input-group-lg > .form-control,
+.input-group-lg > .input-group-addon,
+.input-group-lg > .input-group-btn > .btn {
+  @extend .input-lg;
+}
+.input-group-sm > .form-control,
+.input-group-sm > .input-group-addon,
+.input-group-sm > .input-group-btn > .btn {
+  @extend .input-sm;
+}
+
+
+.input-group-addon,
+.input-group-btn,
+.input-group .form-control {
+  display: table-cell;
+
+  &:not(:first-child):not(:last-child) {
+    border-radius: 0;
+  }
+}
+.input-group-addon,
+.input-group-btn {
+  width: 1%;
+  white-space: nowrap;
+
+}
+
+.input-group-addon {
+  padding: $padding-base-vertical $padding-base-horizontal;
+  font-size: $font-size-base;
+  font-weight: normal;
+  line-height: 1;
+  color: $input-color;
+  text-align: center;
+  background-color: $input-group-addon-bg;
+  border: 1px solid $input-group-addon-border-color;
+  border-radius: $input-border-radius;
+
+  &.input-sm {
+    padding: $padding-small-vertical $padding-small-horizontal;
+    font-size: $font-size-small;
+    border-radius: $input-border-radius-small;
+  }
+  &.input-lg {
+    padding: $padding-large-vertical $padding-large-horizontal;
+    font-size: $font-size-large;
+    border-radius: $input-border-radius-large;
+  }
+
+  input[type="radio"],
+  input[type="checkbox"] {
+    margin-top: 0;
+  }
+}
+
+.input-group .form-control:first-child,
+.input-group-addon:first-child,
+.input-group-btn:first-child > .btn,
+.input-group-btn:first-child > .btn-group > .btn,
+.input-group-btn:first-child > .dropdown-toggle,
+.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
+.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
+  @include border-right-radius(0);
+}
+.input-group-addon:first-child {
+  border-right: 0;
+}
+.input-group .form-control:last-child,
+.input-group-addon:last-child,
+.input-group-btn:last-child > .btn,
+.input-group-btn:last-child > .btn-group > .btn,
+.input-group-btn:last-child > .dropdown-toggle,
+.input-group-btn:first-child > .btn:not(:first-child),
+.input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
+  @include border-left-radius(0);
+}
+.input-group-addon:last-child {
+  border-left: 0;
+}
+
+.input-group-btn {
+  position: relative;
+  font-size: 0;
+  white-space: nowrap;
+  display: block;
+
+  > .btn {
+    position: relative;
+    + .btn {
+      margin-left: -1px;
+    }
+    &:hover,
+    &:focus,
+    &:active {
+      z-index: 2;
+    }
+  }
+
+  &:first-child {
+    > .btn,
+    > .btn-group {
+      margin-right: -1px;
+    }
+  }
+  &:last-child {
+    > .btn,
+    > .btn-group {
+      z-index: 2;
+      margin-left: -1px;
+    }
+  }
+}
--- a/docs/algolia-aerial/src/stylesheet/components/_scaffolding.sass
+++ b/docs/algolia-aerial/src/stylesheet/components/_scaffolding.sass
@ -0,0 +1,50 @@
+*
+  +box-sizing(border-box)
+
+*:before,
+*:after
+  +box-sizing(border-box)
+
+
+html
+  font-size: 10px
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
+
+body
+  font-family: $font-family-base
+  font-size: $font-size-base
+  line-height: $line-height-base
+  color: $text-color
+  background-color: $body-bg
+
+input,
+button,
+select,
+textarea
+  font-family: inherit
+  font-size: inherit
+  line-height: inherit
+
+
+a
+  color: $link-color
+  text-decoration: none
+  &:hover,
+  &:focus
+    color: $link-hover-color
+    text-decoration: $link-hover-decoration
+  &:focus
+    +tab-focus
+
+figure
+  margin: 0
+
+img
+  vertical-align: middle
+
+hr
+  margin-top: $line-height-computed
+  margin-bottom: $line-height-computed
+  border: 0
+  border-top: 1px solid $hr-border
+
--- a/docs/algolia-aerial/src/stylesheet/components/_tables.sass
+++ b/docs/algolia-aerial/src/stylesheet/components/_tables.sass
@ -0,0 +1,46 @@
+table
+  background-color: $table-bg
+
+caption
+  padding-top: $table-cell-padding
+  padding-bottom: $table-cell-padding
+  color: $text-muted
+  text-align: left
+
+th
+  text-align: left
+
+
+.table
+  width: 100%
+  max-width: 100%
+  margin-bottom: $line-height-computed
+
+  > thead,
+  > tbody,
+  > tfoot
+    > tr
+      > th,
+      > td
+        padding: $table-cell-padding
+        line-height: $line-height-base
+        vertical-align: top
+        border-top: 1px solid $table-border-color
+
+  > thead > tr > th
+    vertical-align: bottom
+    border-bottom: 2px solid $table-border-color
+
+  > caption + thead,
+  > colgroup + thead,
+  > thead:first-child
+    > tr:first-child
+      > th,
+      > td
+        border-top: 0
+
+  > tbody + tbody
+    border-top: 2px solid $table-border-color
+
+  .table
+    background-color: $body-bg
--- a/docs/algolia-aerial/src/stylesheet/components/_type.sass
+++ b/docs/algolia-aerial/src/stylesheet/components/_type.sass
@ -0,0 +1,118 @@
+
+
+
+h1, h2, h3, h4, h5, h6,
+.h1, .h2, .h3, .h4, .h5, .h6
+  font-family: $headings-font-family
+  font-weight: $headings-font-weight
+  line-height: $headings-line-height
+  color: $headings-color
+  small,
+  .small
+    font-weight: normal
+    line-height: 1
+    color: $headings-small-color
+
+h1, .h1,
+h2, .h2,
+h3, .h3
+  margin-top: $line-height-computed
+  margin-bottom: $line-height-computed / 2
+  small,
+  .small
+    font-size: 65%
+
+h4, .h4,
+h5, .h5,
+h6, .h6
+  margin-top: $line-height-computed / 2
+  margin-bottom: $line-height-computed / 2
+  small,
+  .small
+    font-size: 75%
+
+h1, .h1
+  font-size: $font-size-h1
+
+h2, .h2
+  font-size: $font-size-h2
+
+h3, .h3
+  font-size: $font-size-h3
+
+h4, .h4
+  font-size: $font-size-h4
+
+h5, .h5
+  font-size: $font-size-h5
+
+h6, .h6
+  font-size: $font-size-h6
+
+
+p
+  margin: 0 0 10px
+
+
+small,
+.small
+  font-size: floor(100% * $font-size-small / $font-size-base)
+
+mark,
+.mark
+  background-color: $state-warning-bg
+  padding: .2em
+
+
+ul,
+ol
+  margin-top: 0
+  margin-bottom: $line-height-computed / 2
+  ul,
+  ol
+    margin-bottom: 0
+
+dl
+  margin-top: 0
+  margin-bottom: $line-height-computed
+
+dt,
+dd
+  line-height: $line-height-base
+
+dt
+  font-weight: bold
+
+dd
+  margin-left: 0
+
+
+abbr[title],
+abbr[data-original-title]
+  cursor: help
+  border-bottom: 1px dotted $abbr-border-color
+
+blockquote
+  padding: $line-height-computed / 2 $line-height-computed
+  margin: 0 0 $line-height-computed
+  font-size: $blockquote-font-size
+  border-left: 5px solid $blockquote-border-color
+  p,
+  ul,
+  ol
+    &:last-child
+      margin-bottom: 0
+  footer,
+  small,
+  .small
+    display: block
+    font-size: 80%
+    line-height: $line-height-base
+    color: $blockquote-small-color
+    &:before
+      content: '\2014 \00A0'
+
+address
+  margin-bottom: $line-height-computed
+  font-style: normal
+  line-height: $line-height-base
--- a/docs/algolia-aerial/src/stylesheet/modules/_base.sass
+++ b/docs/algolia-aerial/src/stylesheet/modules/_base.sass
@ -0,0 +1,151 @@
+
+//fonts
+$light: 300
+$regular: 400
+$medium: 500
+$bold: 600
+
+//colors
+$white: white
+$black: black
+
+//V2
+$purple-heart: rgb(142,67,231)
+$mulberry: rgb(184,69,146)
+$radical-red: rgb(255,79,129)
+$bittersweet: rgb(255,108,95)
+$koromiko: rgb(255,193,104)
+$shamrock: rgb(45,222,152)
+$java: rgb(28,199,208)
+$algolia-blue: rgb(0,174,255)
+$royal-blue: rgb(51,105,231)
+
+$bunting: rgb(62,57,107)
+$titan-white: rgb(248,250,255)
+$logan: rgb(157,157,189)
+$deep-cove: rgb(5,15,44)
+
+$port-gore: rgb(58, 69, 112)
+$east-bay: rgb(73, 85, 136)
+$portage: rgb(137, 148, 198)
+$blue-bell: rgb(166, 176, 216)
+
+$ghost: rgb(196, 200, 216)
+$athens-gray: rgb(238, 240, 247)
+
+$theme-color: #fecf50
+
+$primary-color: $bunting
+$secondary-color: $titan-white
+$tertiary-color: $portage
+
+// BOOTSTRAP
+$gray-darker: lighten(#000, 13.5%)
+$gray-dark: lighten(#000, 20%)
+$gray: lighten(#000, 33.5%)
+$gray-light: lighten(#000, 46.7%)
+$gray-lighter: lighten(#000, 93.5%)
+
+$brand-primary: $algolia-blue
+$brand-secondary: #FA3870
+$brand-success: $shamrock
+
+$brand-info: $algolia-blue
+$brand-warning: $koromiko
+$brand-danger: $radical-red
+
+$font-size-base: 15px
+$font-size-h1: 36px
+$font-size-h2: 30px
+$font-size-h3: 18px
+$font-size-h4: 12px
+$font-size-h5: 1em
+$font-size-h6: 1em
+$line-height-base: 1.6
+
+$body-bg: $white
+$text-color: $bunting
+
+$text-muted: $portage
+
+$border-radius-base: 3px
+$border-radius-large: 3px
+$border-radius-small: 3px
+
+$link-color: $brand-primary
+$link-hover-color: darken($link-color, 15%)
+
+//fonts
+$font-family-base: 'Montserrat', Helvetica, Arial, sans-serif
+$headings-font-family: $font-family-base
+$font-stack: $font-family-base
+$paragraphs-font-family: 'Open Sans', helvetica, sans-serif
+$headings-small-color: darken($tertiary-color,10%)
+
+//Buttons
+$btn-font-weight: normal
+//default
+$btn-default-color: #777
+$btn-default-bg: $white
+$btn-default-border: #ccc
+//primary
+$btn-primary-color: $white
+$btn-primary-bg: $brand-primary
+$btn-primary-border: darken($btn-primary-bg, 5%)
+//success
+$btn-success-color: $white
+$btn-success-bg: $brand-success
+$btn-success-border: darken($btn-success-bg, 5%)
+//info
+$btn-info-color: $white
+$btn-info-bg: $brand-info
+$btn-info-border: darken($btn-info-bg, 5%)
+//warning
+$btn-warning-color: $white
+$btn-warning-bg: $brand-warning
+$btn-warning-border: darken($btn-warning-bg, 5%)
+//danger
+$btn-danger-color: $white
+$btn-danger-bg: $brand-danger
+$btn-danger-border: darken($btn-danger-bg, 5%)
+//link
+$btn-link-disabled-color: $gray-light
+$input-bg-disabled: $gray-lighter
+
+//Panels
+$panel-bg: $white
+
+//** Border color for elements within panels
+$panel-inner-border: lighten($tertiary-color,20%)
+$panel-footer-bg: lighten($secondary-color, 10%)
+
+$panel-default-text: $gray-dark
+$panel-default-border: $white
+$panel-default-heading-bg: $white
+
+//forms
+$input-group-addon-bg: lighten($secondary-color,3%)
+$input-border: lighten($gray,30%)
+
+//tables
+$table-border-color: $secondary-color
+$table-bg-accent: lighten($secondary-color,5%)
+
+//tooltip
+$tooltip-bg: $primary-color
+$tooltip-opacity: 1
+
+//popover
+$popover-max-width: 300px
+
+//Cards
+$card-border-transition: all 240ms ease-in-out
+
+
+//code
+$pre-bg: $bunting
+$pre-color: #C2CCCC
+
+
+// Searchboxes
+$searchbox-landing: (input-width: 300px, input-height: 50px, border-width: 2px, border-radius: 25px, input-border-color: #cccccc, input-focus-border-color: #ff2e83, input-background: white, input-focus-background: white, font-size: 14px, placeholder-color: #bbbbbb, icon: sbx-icon-search-18, icon-size: 30px, icon-position: left, icon-color: #ff2e83, icon-background: white, icon-background-opacity: 0, icon-clear: sbx-icon-clear-5, icon-clear-size: 18px)
--- a/docs/algolia-aerial/src/stylesheet/modules/_mixins.sass
+++ b/docs/algolia-aerial/src/stylesheet/modules/_mixins.sass
@ -0,0 +1,230 @@
+
+//illus retina
+@mixin at2x($path, $ext: "png", $w: auto, $h: auto)
+  background-image: url(image_path($path + "." + $ext))
+  background-repeat: no-repeat
+  $at2x_path: $path + "@2x" + "." + $ext
+  @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5)
+    background-image: url(image_path($at2x_path))
+    background-size: $w $h
+
+@mixin text-truncate
+  overflow: hidden
+  text-overflow: ellipsis
+  white-space: nowrap
+
+//vertical alignment
+@mixin vertical-align($position: relative)
+  transform: translateY(-50%)
+  position: $position
+  top: 50%
+
+@mixin horizontal-align($position)
+  position: $position
+  left: 50%
+  transform: translateX(-50%)
+
+@mixin center($position)
+  position: $position
+  left: 50%
+  top: 50%
+  transform: translate(-50%, -50%)
+
+// Responsive
+// Responsive Breakpoints
+@mixin big-min-mq
+  @media (min-width: $screen-lg)
+    @content
+
+@mixin big-mq
+  @media (max-width: $screen-lg)
+    @content
+
+@mixin medium-mq
+  @media (max-width: $screen-md)
+    @content
+
+@mixin small-mq
+  @media (max-width: $screen-sm)
+    @content
+
+@mixin mobile-mq
+  @media (max-width: $screen-xs)
+    @content
+
+// Placeholder
+@mixin placeholder
+  &::-webkit-input-placeholder
+    @content
+  &:-moz-placeholder
+    @content
+  &::-moz-placeholder
+    @content
+  &:-ms-input-placeholder
+    @content
+
+//BEM helpers
+@mixin block($block)
+  #{$block}
+    @content
+
+@mixin element($element)
+  &__#{$element}
+    @content
+
+@mixin modifier($modifier)
+  &--#{$modifier}
+    @content
+
+
+@mixin diagonal($rotation, $background, $height, $pos: after)
+  &:#{$pos}
+    content: ''
+    display: block
+    position: absolute
+    width: 100%
+    height: $height
+    background: #{$background}
+    transform: skewY($rotation)
+    z-index: 0
+
+    @media (min-width: $screen-lg)
+      transform: skewY($rotation/2)
+
+    @content
+
+@mixin clearfix()
+  &:before,
+  &:after
+    content: " "
+    display: table
+
+  &:after
+    clear: both
+
+
+@function even-px($value)
+  @if type-of($value) == "number"
+    @if unitless($value)
+      $value: $value * 1px
+    @else if unit($value) == "em"
+      $value: $value / 1em * 16px
+    @else if unit($value) == "pts"
+      $value: $value * 1.3333 * 1px
+    @else if unit($value) == "%"
+      $value: $value * 16 / 100% * 1px
+    $value: round($value)
+    @if $value % 2 != 0
+      $value: $value + 1
+    @return $value
+
+=searchbox($font-size: 90%, $input-width: 350px, $input-height: $font-size * 2.4, $border-width: 1px, $border-radius: $input-height / 2, $input-border-color: #cccccc, $input-focus-border-color: #1ec9ea, $input-background: #f8f8f8, $input-focus-background: white, $placeholder-color: #aaaaaa, $icon: "sbx-icon-search-1", $icon-size: $input-height / 1.6, $icon-position: left, $icon-color: #888888, $icon-background: $input-focus-border-color, $icon-background-opacity: 0.1, $icon-clear: "sbx-icon-clear-1", $icon-clear-size: $font-size / 1.1)
+  display: inline-block
+  position: relative
+  width: $input-width
+  height: even-px($input-height)
+  white-space: nowrap
+  box-sizing: border-box
+  font-size: $font-size
+  &__wrapper
+    width: 100%
+    height: 100%
+  &__input
+    display: inline-block
+    transition: box-shadow .4s ease, background .4s ease
+    border: 0
+    border-radius: even-px($border-radius)
+    box-shadow: inset 0 0 0 $border-width $input-border-color
+    background: $input-background
+    padding: 0
+    padding-right: if($icon-position == "right", even-px($input-height) + even-px($icon-clear-size) + 8px, even-px($input-height * 0.8)) + if($icon-background-opacity == 0, 0, even-px($font-size))
+    padding-left: if($icon-position == "right", even-px($font-size / 2) + even-px($border-radius / 2), even-px($input-height) + if($icon-background-opacity == 0, 0, even-px($font-size * 1.2)))
+    width: 100%
+    height: 100%
+    vertical-align: middle
+    white-space: normal
+    font-size: inherit
+    appearance: none
+    &::-webkit-search-decoration,
+    &::-webkit-search-cancel-button,
+    &::-webkit-search-results-button,
+    &::-webkit-search-results-decoration
+      display: none
+    &:hover
+      box-shadow: inset 0 0 0 $border-width darken($input-border-color, 10%)
+    &:focus,
+    &:active
+      outline: 0
+      box-shadow: inset 0 0 0 $border-width $input-focus-border-color
+      background: $input-focus-background
+    &::placeholder
+      color: $placeholder-color
+  &__submit
+    position: absolute
+    top: 0
+    @if $icon-position == "right"
+      right: 0
+      left: inherit
+    @else
+      right: inherit
+      left: 0
+    margin: 0
+    border: 0
+    border-radius: if($icon-position == "right", 0 $border-radius $border-radius 0, $border-radius 0 0 $border-radius)
+    background-color: rgba($icon-background, $icon-background-opacity)
+    padding: 0
+    width: even-px($input-height) + if($icon-background-opacity == 0, 0, even-px($font-size / 2))
+    height: 100%
+    vertical-align: middle
+    text-align: center
+    font-size: inherit
+    user-select: none
+    // Helper for vertical alignement of the icon
+    &::before
+      display: inline-block
+      margin-right: -4px
+      height: 100%
+      vertical-align: middle
+      content: ''
+    &:hover,
+    &:active
+      cursor: pointer
+    &:focus
+      outline: 0
+    svg
+      width: even-px($icon-size)
+      height: even-px($icon-size)
+      vertical-align: middle
+      fill: $icon-color
+  &__reset
+    display: none
+    position: absolute
+    top: (even-px($input-height) - even-px($icon-clear-size)) / 2 - 4px
+    right: if($icon-position == "right", even-px($input-height) + if($icon-background-opacity == 0, 0, even-px($font-size)), (even-px($input-height) - even-px($icon-clear-size)) / 2 - 4px)
+    margin: 0
+    border: 0
+    background: none
+    cursor: pointer
+    padding: 0
+    font-size: inherit
+    user-select: none
+    fill: rgba(black, 0.5)
+    &:focus
+      outline: 0
+    svg
+      display: block
+      margin: 4px
+      width: even-px($icon-clear-size)
+      height: even-px($icon-clear-size)
+  &__input:valid ~ &__reset
+    display: block
+    animation-name: sbx-reset-in
+    animation-duration: .15s
+  @at-root
+    @keyframes sbx-reset-in
+      0%
+        transform: translate3d(-20%, 0, 0)
+        opacity: 0
+      100%
+        transform: none
+        opacity: 1
--- a/docs/algolia-aerial/src/stylesheet/partials/_bootstrap.sass
+++ b/docs/algolia-aerial/src/stylesheet/partials/_bootstrap.sass
@ -0,0 +1,11 @@
+@import "../modules/_base"
+
+// Core variables and mixins
+@import "../vendors/bootstrap/variables"
+@import "../vendors/bootstrap/mixins"
+// Reset and dependencies
+@import "../vendors/bootstrap/normalize"
+// Core CSS
+@import "../vendors/bootstrap/grid"
+// Utility classes
+@import "../vendors/bootstrap/responsive-utilities"
--- a/docs/algolia-aerial/src/stylesheet/partials/_colors.sass
+++ b/docs/algolia-aerial/src/stylesheet/partials/_colors.sass
@ -0,0 +1,124 @@
+/* foreground colors */
+.color-white
+  color: $white !important
+.color-titan
+  color: $titan-white !important
+.color-primary
+  color: $brand-primary !important
+.color-secondary
+  color: $brand-secondary !important
+.color-purple-heart
+  color: $purple-heart !important
+.color-mulberry
+  color: $mulberry !important
+.color-radical-red
+  color: $radical-red !important
+.color-bittersweet
+  color: $bittersweet !important
+.color-koromiko
+  color: $koromiko !important
+.color-shamrock
+  color: $shamrock !important
+.color-java
+  color: $java !important
+.color-algolia-blue
+  color: $algolia-blue !important
+.color-royal-blue
+  color: $royal-blue !important
+.color-bunting
+  color: $bunting !important
+.color-deep-cove
+  color: $deep-cove !important
+
+.color-port-gore
+  color: $port-gore !important
+.color-east-bay
+  color: $east-bay !important
+.color-portage
+  color: $portage !important
+.color-blue-bell
+  color: $blue-bell !important
+.color-ghost
+  color: $ghost !important
+.color-athens-gray
+  color: $athens-gray !important
+.color-logan
+  color: $logan !important
+
+.color-current
+  color: currentColor !important
+
+
+.fill-dark
+  background-color: $primary-color !important
+.fill-white
+  background-color: $white !important
+.fill-titan
+  background-color: $titan-white !important
+.fill-purple-heart
+  background-color: $purple-heart !important
+.fill-mulberry
+  background-color: $mulberry !important
+.fill-radical-red
+  background-color: $radical-red !important
+.fill-bittersweet
+  background-color: $bittersweet !important
+.fill-koromiko
+  background-color: $koromiko !important
+.fill-shamrock
+  background-color: $shamrock !important
+.fill-java
+  background-color: $java !important
+.fill-algolia-blue
+  background-color: $algolia-blue !important
+.fill-royal-blue
+  background-color: $royal-blue !important
+.fill-deep-cove
+  background-color: $deep-cove !important
+.fill-bunting
+  background-color: $bunting !important
+.fill-port-gore
+  background-color: $port-gore !important
+.fill-east-bay
+  background-color: $east-bay !important
+.fill-portage
+  background-color: $portage !important
+.fill-blue-bell
+  background-color: $blue-bell !important
+.fill-ghost
+  background-color: $ghost !important
+.fill-athens-gray
+  background-color: $athens-gray !important
+.fill-logan
+  background-color: $logan !important
+
+
+.gradient-primary,
+.gradient-green
+  background-image: linear-gradient(320deg, $shamrock, mix($shamrock,$java)) !important
+
+.gradient-secondary,
+.gradient-blue
+  background-image: linear-gradient(256deg, $algolia-blue, $royal-blue) !important
+
+.gradient-tertiary,
+.gradient-pink
+  background-image: linear-gradient(256deg, $bittersweet, $radical-red) !important
+
+.gradient-orange
+  background-image: linear-gradient(256deg, $koromiko, $bittersweet)
+
+.gradient-purple
+  background-image: linear-gradient(269deg, #8e43e6, #b84592)
+
+.gradient-light-blue
+  background-image: linear-gradient(269deg, $algolia-blue, $java)
+
+.gradient-blue-purple
+  background-image: linear-gradient(103deg, $royal-blue, $purple-heart)
+
+.gradient-dark
+  background-image: linear-gradient(283deg, $deep-cove, $bunting)
+
+.gradient-white
+  background-image: linear-gradient(0deg, $titan-white, #ffffff)
--- a/docs/algolia-aerial/src/stylesheet/partials/_fonts.sass
+++ b/docs/algolia-aerial/src/stylesheet/partials/_fonts.sass
@ -0,0 +1,15 @@
+@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800')
+@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,700,900')
+
+
+h1, h2, h3, h4
+  font-family: $headings-font-family
+
+
+/*! The paragraphs also use Montserrat on the website, except on the documentation and other exceptions */
+p
+  font-size: 15px
+  font-family: $headings-font-family
+
+strong
+  font-family: $headings-font-family
--- a/docs/algolia-aerial/src/stylesheet/partials/_helpers.sass
+++ b/docs/algolia-aerial/src/stylesheet/partials/_helpers.sass
@ -0,0 +1,698 @@
+/**
+ *spacer
+ */
+@mixin spacer
+  width: 100%
+  font-size: 0
+  margin: 0
+  padding: 0
+  border: 0
+  display: block
+
+
+.spacer8
+  +spacer
+  height: 8px
+.spacer16
+  +spacer
+  height: 16px
+.spacer24
+  +spacer
+  height: 24px
+.spacer32
+  +spacer
+  height: 32px
+.spacer40
+  +spacer
+  height: 40px
+.spacer48
+  +spacer
+  height: 48px
+.spacer56
+  +spacer
+  height: 56px
+.spacer64
+  +spacer
+  height: 64px
+.spacer80
+  +spacer
+  height: 80px
+.spacer120
+  +spacer
+  height: 120px
+
+
+/**
+ *width
+ */
+.w100
+  width: 100px
+.w150
+  width: 150px
+.w200
+  width: 200px
+.w100p
+  width: 100%
+.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
+ */
+.h80
+  height: 80px
+.h100
+  height: 100px
+.h200
+  height: 200px
+.h300
+  height: 300px
+.h400
+  height: 400px
+.h500
+  height: 500px
+.h600
+  height: 600px
+.h700
+  height: 700px
+.h800
+  height: 800px
+.hfull
+  height: 100%
+
+/**
+ * positions
+ */
+.pos-rel
+  position: relative
+.pos-stc
+  position: static
+.pos-abt
+  position: absolute
+.pos-fix
+  position: fixed
+
+/**
+ * Indexing
+ */
+.z-1
+  z-index: 1
+.z-2
+  z-index: 2
+.z-3
+  z-index: 3
+.z-4
+  z-index: 4
+.z-5
+  z-index: 5
+.z-10
+  z-index: 10
+.z-20
+  z-index: 20
+.z-100
+  z-index: 100
+
+
+/**
+ *font size
+ */
+.text-heading
+  font-size: 56px
+
+.text-xxl
+  font-size: 40px
+
+.text-xl
+  font-size: 32px
+
+.text-lg
+  font-size: 24px
+
+.text-bg
+  font-size: 20px
+
+.text-regular
+  font-size: 15px
+
+.text-sm
+  font-size: 12px
+
+.text-xsm
+  font-size: 10px
+
+.text-xs
+  font-size: 8px
+
+
+/**
+ *font weight
+ */
+.text-thin
+  font-weight: 300
+.text-normal
+  font-weight: 400
+.text-demi
+  font-weight: 500
+p.text-demi
+  font-weight: 600
+.text-bold
+  font-weight: 700
+.text-bolder
+  font-weight: 900
+p.text-bolder
+  font-weight: 800
+
+/**
+ *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
+
+.b-n
+  border: none !important
+
+
+/**
+ * Radius
+ */
+.radius6
+  border-radius: 6px
+.radius100p
+  border-radius: 100%
+
+
+/**
+ *padding
+ */
+.padder
+  padding: 0 15px
+.p-mini
+  padding: 5px
+.p-small
+  padding: 10px
+.p-large
+  padding: 20px
+.p-xlarge
+  padding: 30px
+
+.p-t-mini
+  padding-top: 5px
+.p-t-small
+  padding-top: 10px
+.p-t-large
+  padding-top: 20px
+.p-t-xlarge
+  padding-top: 30px
+
+.p-b-mini
+  padding-bottom: 5px
+.p-b-small
+  padding-bottom: 10px
+.p-b-large
+  padding-bottom: 20px
+.p-b-xlarge
+  padding-bottom: 30px
+
+.p-l-small
+  padding-left: 10px
+.p-l-large
+  padding-left: 20px
+.p-l-xlarge
+  padding-left: 30px
+.p-r-small
+  padding-right: 10px
+.p-r-large
+  padding-right: 20px
+.p-r-xlarge
+  padding-right: 30px
+.p-l-xxlarge
+  padding-left: 60px
+.p-r-xxlarge
+  padding-right: 60px
+
+.no-padding
+  padding: 0 !important
+.no-p-l
+  padding-left: 0
+.no-p-r
+  padding-right: 0
+.no-p-t
+  padding-top: 0 !important
+.no-p-b
+  padding-bottom: 0
+
+/**
+ *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-xlarge
+  margin-bottom: 30px
+.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
+
+.no-margin
+  margin: 0 !important
+
+/**
+ * text
+ */
+// Alignment
+.text-left
+  text-align: left
+
+.text-right
+  text-align: right
+
+.text-center
+  text-align: center
+
+.text-justify
+  text-align: justify
+
+// Contextual colors
+.text-muted
+  color: $text-muted
+.vertical-align-middle
+  display: inline-block !important
+  vertical-align: middle !important
+.vertical-align-bottom
+  display: inline-block !important
+  vertical-align: bottom !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
+.lower-case
+  text-transform: lowercase
+.upper-case
+  text-transform: uppercase
+.capital-case
+  text-transform: capitalize
+.hidden-text
+  text-indent: -9999px
+  color: transparent
+
+/**
+ * Line height
+ */
+.line-h-regular
+  line-height: 1.5
+
+.line-h-small
+  line-height: 1.2
+
+/**
+ *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
+.headline
+  border-bottom: 5px solid $black
+  margin-top: 0
+  line-height: 45px
+
+.no-line
+  border-width: 0
+.no-border
+  border-color: transparent !important
+.no-radius
+  border-radius: 0
+.block
+  display: block
+.inline
+  display: inline-block
+.pull-left
+  float: left
+.pull-right
+  float: right
+.pull-none
+  float: none
+.pull-in
+  margin-right: -15px
+  margin-left: -15px
+.line-v
+  border-left: 1px solid #dddddd
+  padding-left: 20px
+.line-v-right
+  border-right: 1px solid #dddddd
+  padding-right: 20px
+
+
+/**
+ * Flexbox
+ */
+.flex-container
+  display: flex
+
+.flex-dir-col
+  flex-flow: column wrap
+  &-reverse
+    flex-flow: column-reverse wrap
+
+.flex-dir-row
+  flex-flow: row wrap
+  &-reverse
+    flex-flow: row-reverse wrap
+
+/**
+ * Flex space setting
+ */
+.flex-space-around
+  justify-content: space-around
+
+.flex-space-between
+  justify-content: space-between
+
+.flex-align-center
+  align-items: center
+
+/**
+ * Flex item size
+ */
+.flex-it-4
+  flex: 0 1 25%
+
+_:-ms-input-placeholder, :root .flex-it-4
+  -ms-flex-preferred-size: 21% !important
+
+.flex-it-3
+  flex: 0 1 33.33%
+
+_:-ms-input-placeholder, :root .flex-it-3
+  -ms-flex-preferred-size: 29% !important
+
+.flex-it-2
+  flex: 0 1 50%
+
+_:-ms-input-placeholder, :root .flex-it-2
+  -ms-flex-preferred-size: 48% !important
+  @supports ( not ( mix-blend-mode: luminosity))
+    flex: 0 1 49.95%
+
+
+.flex-it-1
+  flex: 0 1 100%
+
+// Responsive flex classes
+@media (min-width: 1200px)
+  .flex-it-1-lg
+    flex: 0 1 100%
+
+  .flex-it-2-lg
+    flex: 0 1 50%
+  _:-ms-input-placeholder, :root .flex-it-2-lg
+    -ms-flex-preferred-size: 48% !important
+    @supports ( not ( mix-blend-mode: luminosity))
+      flex: 0 1 49.95%
+
+  .flex-it-3-lg
+    flex: 0 1 33.33%
+  _:-ms-input-placeholder, :root .flex-it-3-lg
+    -ms-flex-preferred-size: 29% !important
+
+  .flex-it-4-lg
+    flex: 0 1 25%
+  _:-ms-input-placeholder, :root .flex-it-4-lg
+      -ms-flex-preferred-size: 21% !important
+
+@media (max-width: 768px)
+  .flex-it-1-sm
+    flex: 0 1 100%
+
+  .flex-it-2-sm
+    flex: 0 1 50%
+  _:-ms-input-placeholder, :root .flex-it-2-sm
+    -ms-flex-preferred-size: 48% !important
+    @supports ( not ( mix-blend-mode: luminosity))
+      flex: 0 1 49.95%
+
+  .flex-it-3-sm
+    flex: 0 1 33.33%
+  _:-ms-input-placeholder, :root .flex-it-3-sm
+    -ms-flex-preferred-size: 29% !important
+
+  .flex-it-4-sm
+    flex: 0 1 25%
+  _:-ms-input-placeholder, :root .flex-it-4-sm
+    -ms-flex-preferred-size: 21% !important
+
+/**
+ * others
+ */
+.unscroll
+  overflow: hidden !important
+
+.clickable
+  cursor: pointer
+
+.rotate-45
+  transform: rotate(45deg)
+
+.content-box
+  box-sizing: content-box
+
+.faded
+  opacity: .3
+
+.op0
+  opacity: 0
+
+.line-through
+  text-decoration: line-through
+
+.no-decoration
+  text-decoration: none
+
+
+/**
+ * Centering
+ */
+.v-center
+  position: absolute
+  top: 50%
+  transform: translateY(-50%)
+
+.h-center
+  position: absolute
+  left: 50%
+  transform: translateX(-50%)
+
+.vh-center
+  position: absolute
+  top: 50%
+  left: 50%
+  transform: translate(-50%,-50%)
+
+
+/**
+ * Hidden utilities
+ */
+.hidden-sm
+  @media (max-width: $screen-sm)
+    display: none !important
+
+.visible-sm
+  @media (max-width: $screen-sm)
+    display: block !important
+
+.hidden
+  display: none !important
+  visibility: hidden !important
+
+/**
+ * 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
+
+
+
+/**
+ * Lists
+ */
+.list-none
+  list-style: none
+
+/**
+ * Clearfix
+ */
+.cf:before,
+.cf:after
+  content: " "
+  display: table
+
+
+.cf:after
+  clear: both
+
+/**
+ * For IE 6/7 only
+ * Include this rule to trigger hasLayout and contain floats.
+ */
+.cf
+  *zoom: 1
+
+
+/**
+ * Shadows
+ */
+
+.elevation0
+  box-shadow: 0 5px 15px 0 rgba(112, 128, 175, 0.2)
+
+.elevation1
+  box-shadow: 0 10px 40px 0 rgba($bunting,0.07), 0 2px 9px 0 rgba($bunting,0.06)
+
+.elevation2
+  box-shadow: 0 16px 32px 0 rgba($bunting, 0.2)
+
+// Placeholders
+%elevation1
+  box-shadow: 0 10px 40px 0 rgba($bunting,0.07), 0 2px 9px 0 rgba($bunting,0.06)
+
+/**
+ * For inputs
+ */
+.apn
+  -webkit-appearance: none
+  -moz-appearance: none
+  appearance: none
+
+.otn
+  outline: none
+
+/**
+ * To use with gradient for text
+ */
+.gradient-text
+  -webkit-background-clip: text
+  -webkit-text-fill-color: transparent
--- a/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/_grid.scss
+++ b/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/_grid.scss
--- a/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/_mixins.scss
+++ b/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/_mixins.scss
@ -0,0 +1,39 @@
+// Mixins
+// --------------------------------------------------
+
+// Utilities
+@import "mixins/hide-text";
+@import "mixins/opacity";
+@import "mixins/image";
+@import "mixins/labels";
+@import "mixins/reset-filter";
+@import "mixins/resize";
+@import "mixins/responsive-visibility";
+@import "mixins/size";
+@import "mixins/tab-focus";
+@import "mixins/text-emphasis";
+@import "mixins/text-overflow";
+@import "mixins/vendor-prefixes";
+
+// Components
+@import "mixins/alerts";
+@import "mixins/buttons";
+@import "mixins/panels";
+@import "mixins/pagination";
+@import "mixins/list-group";
+@import "mixins/nav-divider";
+@import "mixins/forms";
+@import "mixins/progress-bar";
+@import "mixins/table-row";
+
+// Skins
+@import "mixins/background-variant";
+@import "mixins/border-radius";
+@import "mixins/gradients";
+
+// Layout
+@import "mixins/clearfix";
+@import "mixins/center-block";
+@import "mixins/nav-vertical-align";
+@import "mixins/grid-framework";
+@import "mixins/grid";
--- a/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/_normalize.scss
+++ b/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/_normalize.scss
@ -0,0 +1,427 @@
+/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
+
+//
+// 1. Set default font family to sans-serif.
+// 2. Prevent iOS text size adjust after orientation change, without disabling
+//    user zoom.
+//
+
+html {
+  font-family: sans-serif; // 1
+  -ms-text-size-adjust: 100%; // 2
+  -webkit-text-size-adjust: 100%; // 2
+}
+
+//
+// Remove default margin.
+//
+
+body {
+  margin: 0;
+}
+
+// HTML5 display definitions
+// ==========================================================================
+
+//
+// Correct `block` display not defined for any HTML5 element in IE 8/9.
+// Correct `block` display not defined for `details` or `summary` in IE 10/11
+// and Firefox.
+// Correct `block` display not defined for `main` in IE 11.
+//
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+
+//
+// 1. Correct `inline-block` display not defined in IE 8/9.
+// 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+//
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block; // 1
+  vertical-align: baseline; // 2
+}
+
+//
+// Prevent modern browsers from displaying `audio` without controls.
+// Remove excess height in iOS 5 devices.
+//
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+//
+// Address `[hidden]` styling not present in IE 8/9/10.
+// Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
+//
+
+[hidden],
+template {
+  display: none;
+}
+
+// Links
+// ==========================================================================
+
+//
+// Remove the gray background color from active links in IE 10.
+//
+
+a {
+  background-color: transparent;
+}
+
+//
+// Improve readability when focused and also mouse hovered in all browsers.
+//
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+// Text-level semantics
+// ==========================================================================
+
+//
+// Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+//
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+//
+// Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+//
+
+b,
+strong {
+  font-weight: bold;
+}
+
+//
+// Address styling not present in Safari and Chrome.
+//
+
+dfn {
+  font-style: italic;
+}
+
+//
+// Address variable `h1` font-size and margin within `section` and `article`
+// contexts in Firefox 4+, Safari, and Chrome.
+//
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+//
+// Address styling not present in IE 8/9.
+//
+
+mark {
+  background: #ff0;
+  color: #000;
+}
+
+//
+// Address inconsistent and variable font size in all browsers.
+//
+
+small {
+  font-size: 80%;
+}
+
+//
+// Prevent `sub` and `sup` affecting `line-height` in all browsers.
+//
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+// Embedded content
+// ==========================================================================
+
+//
+// Remove border when inside `a` element in IE 8/9/10.
+//
+
+img {
+  border: 0;
+}
+
+//
+// Correct overflow not hidden in IE 9/10/11.
+//
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+// Grouping content
+// ==========================================================================
+
+//
+// Address margin not present in IE 8/9 and Safari.
+//
+
+figure {
+  margin: 1em 40px;
+}
+
+//
+// Address differences between Firefox and other browsers.
+//
+
+hr {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  height: 0;
+}
+
+//
+// Contain overflow in all browsers.
+//
+
+pre {
+  overflow: auto;
+}
+
+//
+// Address odd `em`-unit font size rendering in all browsers.
+//
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+// Forms
+// ==========================================================================
+
+//
+// Known limitation: by default, Chrome and Safari on OS X allow very limited
+// styling of `select`, unless a `border` property is set.
+//
+
+//
+// 1. Correct color not being inherited.
+//    Known issue: affects color of disabled elements.
+// 2. Correct font properties not being inherited.
+// 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+//
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit; // 1
+  font: inherit; // 2
+  margin: 0; // 3
+}
+
+//
+// Address `overflow` set to `hidden` in IE 8/9/10/11.
+//
+
+button {
+  overflow: visible;
+}
+
+//
+// Address inconsistent `text-transform` inheritance for `button` and `select`.
+// All other form control elements do not inherit `text-transform` values.
+// Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+// Correct `select` style inheritance in Firefox.
+//
+
+button,
+select {
+  text-transform: none;
+}
+
+//
+// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+//    and `video` controls.
+// 2. Correct inability to style clickable `input` types in iOS.
+// 3. Improve usability and consistency of cursor style between image-type
+//    `input` and others.
+//
+
+button,
+html input[type="button"], // 1
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button; // 2
+  cursor: pointer; // 3
+}
+
+//
+// Re-set default cursor for disabled elements.
+//
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+//
+// Remove inner padding and border in Firefox 4+.
+//
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+//
+// Address Firefox 4+ setting `line-height` on `input` using `!important` in
+// the UA stylesheet.
+//
+
+input {
+  line-height: normal;
+}
+
+//
+// It's recommended that you don't attempt to style these elements.
+// Firefox's implementation doesn't respect box-sizing, padding, or width.
+//
+// 1. Address box sizing set to `content-box` in IE 8/9/10.
+// 2. Remove excess padding in IE 8/9/10.
+//
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box; // 1
+  padding: 0; // 2
+}
+
+//
+// Fix the cursor style for Chrome's increment/decrement buttons. For certain
+// `font-size` values of the `input`, it causes the cursor style of the
+// decrement button to change from `default` to `text`.
+//
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+//
+// 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+// 2. Address `box-sizing` set to `border-box` in Safari and Chrome
+//    (include `-moz` to future-proof).
+//
+
+input[type="search"] {
+  -webkit-appearance: textfield; // 1
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box; // 2
+  box-sizing: content-box;
+}
+
+//
+// Remove inner padding and search cancel button in Safari and Chrome on OS X.
+// Safari (but not Chrome) clips the cancel button when the search input has
+// padding (and `textfield` appearance).
+//
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+//
+// Define consistent border, margin, and padding.
+//
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+//
+// 1. Correct `color` not being inherited in IE 8/9/10/11.
+// 2. Remove padding so people aren't caught out if they zero out fieldsets.
+//
+
+legend {
+  border: 0; // 1
+  padding: 0; // 2
+}
+
+//
+// Remove default vertical scrollbar in IE 8/9/10/11.
+//
+
+textarea {
+  overflow: auto;
+}
+
+//
+// Don't inherit the `font-weight` (applied by a rule above).
+// NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+//
+
+optgroup {
+  font-weight: bold;
+}
+
+// Tables
+// ==========================================================================
+
+//
+// Remove most spacing between table cells.
+//
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}
--- a/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/_responsive-utilities.scss
+++ b/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/_responsive-utilities.scss
@ -0,0 +1,177 @@
+//
+// Responsive: Utility classes
+// --------------------------------------------------
+
+
+// IE10 in Windows (Phone) 8
+//
+// Support for responsive views via media queries is kind of borked in IE10, for
+// Surface/desktop in split view and for Windows Phone 8. This particular fix
+// must be accompanied by a snippet of JavaScript to sniff the user agent and
+// apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at
+// our Getting Started page for more information on this bug.
+//
+// For more information, see the following:
+//
+// Issue: https://github.com/twbs/bootstrap/issues/10497
+// Docs: http://getbootstrap.com/getting-started/#support-ie10-width
+// Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
+// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
+
+@-ms-viewport {
+  width: device-width;
+}
+
+
+// Visibility utilities
+// Note: Deprecated .visible-xs, .visible-sm, .visible-md, and .visible-lg as of v3.2.0
+
+@include responsive-invisibility('.visible-xs');
+@include responsive-invisibility('.visible-sm');
+@include responsive-invisibility('.visible-md');
+@include responsive-invisibility('.visible-lg');
+
+.visible-xs-block,
+.visible-xs-inline,
+.visible-xs-inline-block,
+.visible-sm-block,
+.visible-sm-inline,
+.visible-sm-inline-block,
+.visible-md-block,
+.visible-md-inline,
+.visible-md-inline-block,
+.visible-lg-block,
+.visible-lg-inline,
+.visible-lg-inline-block {
+  display: none !important;
+}
+
+@media (max-width: $screen-xs-max) {
+  @include responsive-visibility('.visible-xs');
+}
+.visible-xs-block {
+  @media (max-width: $screen-xs-max) {
+    display: block !important;
+  }
+}
+.visible-xs-inline {
+  @media (max-width: $screen-xs-max) {
+    display: inline !important;
+  }
+}
+.visible-xs-inline-block {
+  @media (max-width: $screen-xs-max) {
+    display: inline-block !important;
+  }
+}
+
+@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+  @include responsive-visibility('.visible-sm');
+}
+.visible-sm-block {
+  @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+    display: block !important;
+  }
+}
+.visible-sm-inline {
+  @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+    display: inline !important;
+  }
+}
+.visible-sm-inline-block {
+  @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+    display: inline-block !important;
+  }
+}
+
+@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
+  @include responsive-visibility('.visible-md');
+}
+.visible-md-block {
+  @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
+    display: block !important;
+  }
+}
+.visible-md-inline {
+  @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
+    display: inline !important;
+  }
+}
+.visible-md-inline-block {
+  @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
+    display: inline-block !important;
+  }
+}
+
+@media (min-width: $screen-lg-min) {
+  @include responsive-visibility('.visible-lg');
+}
+.visible-lg-block {
+  @media (min-width: $screen-lg-min) {
+    display: block !important;
+  }
+}
+.visible-lg-inline {
+  @media (min-width: $screen-lg-min) {
+    display: inline !important;
+  }
+}
+.visible-lg-inline-block {
+  @media (min-width: $screen-lg-min) {
+    display: inline-block !important;
+  }
+}
+
+@media (max-width: $screen-xs-max) {
+  @include responsive-invisibility('.hidden-xs');
+}
+
+@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+  @include responsive-invisibility('.hidden-sm');
+}
+
+@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
+  @include responsive-invisibility('.hidden-md');
+}
+
+@media (min-width: $screen-lg-min) {
+  @include responsive-invisibility('.hidden-lg');
+}
+
+
+// Print utilities
+//
+// Media queries are placed on the inside to be mixin-friendly.
+
+// Note: Deprecated .visible-print as of v3.2.0
+
+@include responsive-invisibility('.visible-print');
+
+@media print {
+  @include responsive-visibility('.visible-print');
+}
+.visible-print-block {
+  display: none !important;
+
+  @media print {
+    display: block !important;
+  }
+}
+.visible-print-inline {
+  display: none !important;
+
+  @media print {
+    display: inline !important;
+  }
+}
+.visible-print-inline-block {
+  display: none !important;
+
+  @media print {
+    display: inline-block !important;
+  }
+}
+
+@media print {
+  @include responsive-invisibility('.hidden-print');
+}
--- a/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/_variables.scss
+++ b/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/_variables.scss
@ -0,0 +1,864 @@
+// When true, asset path helpers are used, otherwise the regular CSS `url()` is used.
+// When there no function is defined, `fn('')` is parsed as string that equals the right hand side
+// NB: in Sass 3.3 there is a native function: function-exists(twbs-font-path)
+$bootstrap-sass-asset-helper: (twbs-font-path("") != unquote('twbs-font-path("")')) !default;
+
+//
+// Variables
+// --------------------------------------------------
+
+
+//== Colors
+//
+//## Gray and brand colors for use across Bootstrap.
+
+$gray-base:              #000 !default;
+$gray-darker:            lighten($gray-base, 13.5%) !default; // #222
+$gray-dark:              lighten($gray-base, 20%) !default;   // #333
+$gray:                   lighten($gray-base, 33.5%) !default; // #555
+$gray-light:             lighten($gray-base, 46.7%) !default; // #777
+$gray-lighter:           lighten($gray-base, 93.5%) !default; // #eee
+
+$brand-primary:         darken(#428bca, 6.5%) !default;
+$brand-success:         #5cb85c !default;
+$brand-info:            #5bc0de !default;
+$brand-warning:         #f0ad4e !default;
+$brand-danger:          #d9534f !default;
+
+
+//== Scaffolding
+//
+//## Settings for some of the most global styles.
+
+//** Background color for `<body>`.
+$body-bg:               #fff !default;
+//** Global text color on `<body>`.
+$text-color:            $gray-dark !default;
+
+//** Global textual link color.
+$link-color:            $brand-primary !default;
+//** Link hover color set via `darken()` function.
+$link-hover-color:      darken($link-color, 15%) !default;
+//** Link hover decoration.
+$link-hover-decoration: underline !default;
+
+
+//== Typography
+//
+//## Font, line-height, and color for body text, headings, and more.
+
+$font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif !default;
+$font-family-serif:       Georgia, "Times New Roman", Times, serif !default;
+//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
+$font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace !default;
+$font-family-base:        $font-family-sans-serif !default;
+
+$font-size-base:          14px !default;
+$font-size-large:         ceil(($font-size-base * 1.25)) !default; // ~18px
+$font-size-small:         ceil(($font-size-base * 0.85)) !default; // ~12px
+
+$font-size-h1:            floor(($font-size-base * 2.6)) !default; // ~36px
+$font-size-h2:            floor(($font-size-base * 2.15)) !default; // ~30px
+$font-size-h3:            ceil(($font-size-base * 1.7)) !default; // ~24px
+$font-size-h4:            ceil(($font-size-base * 1.25)) !default; // ~18px
+$font-size-h5:            $font-size-base !default;
+$font-size-h6:            ceil(($font-size-base * 0.85)) !default; // ~12px
+
+//** Unit-less `line-height` for use in components like buttons.
+$line-height-base:        1.428571429 !default; // 20/14
+//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
+$line-height-computed:    floor(($font-size-base * $line-height-base)) !default; // ~20px
+
+//** By default, this inherits from the `<body>`.
+$headings-font-family:    inherit !default;
+$headings-font-weight:    500 !default;
+$headings-line-height:    1.1 !default;
+$headings-color:          inherit !default;
+
+
+//== Iconography
+//
+//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
+
+//** Load fonts from this directory.
+
+// [converter] Asset helpers such as Sprockets and Node.js Mincer do not resolve relative paths
+$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/") !default;
+
+//** File name for all font files.
+$icon-font-name:          "glyphicons-halflings-regular" !default;
+//** Element ID within SVG icon file.
+$icon-font-svg-id:        "glyphicons_halflingsregular" !default;
+
+
+//== Components
+//
+//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
+
+$padding-base-vertical:     6px !default;
+$padding-base-horizontal:   12px !default;
+
+$padding-large-vertical:    10px !default;
+$padding-large-horizontal:  16px !default;
+
+$padding-small-vertical:    5px !default;
+$padding-small-horizontal:  10px !default;
+
+$padding-xs-vertical:       1px !default;
+$padding-xs-horizontal:     5px !default;
+
+$line-height-large:         1.33 !default;
+$line-height-small:         1.5 !default;
+
+$border-radius-base:        4px !default;
+$border-radius-large:       6px !default;
+$border-radius-small:       3px !default;
+
+//** Global color for active items (e.g., navs or dropdowns).
+$component-active-color:    #fff !default;
+//** Global background color for active items (e.g., navs or dropdowns).
+$component-active-bg:       $brand-primary !default;
+
+//** Width of the `border` for generating carets that indicator dropdowns.
+$caret-width-base:          4px !default;
+//** Carets increase slightly in size for larger components.
+$caret-width-large:         5px !default;
+
+
+//== Tables
+//
+//## Customizes the `.table` component with basic values, each used across all table variations.
+
+//** Padding for `<th>`s and `<td>`s.
+$table-cell-padding:            8px !default;
+//** Padding for cells in `.table-condensed`.
+$table-condensed-cell-padding:  5px !default;
+
+//** Default background color used for all tables.
+$table-bg:                      transparent !default;
+//** Background color used for `.table-striped`.
+$table-bg-accent:               #f9f9f9 !default;
+//** Background color used for `.table-hover`.
+$table-bg-hover:                #f5f5f5 !default;
+$table-bg-active:               $table-bg-hover !default;
+
+//** Border color for table and cell borders.
+$table-border-color:            #ddd !default;
+
+
+//== Buttons
+//
+//## For each of Bootstrap's buttons, define text, background and border color.
+
+$btn-font-weight:                normal !default;
+
+$btn-default-color:              #333 !default;
+$btn-default-bg:                 #fff !default;
+$btn-default-border:             #ccc !default;
+
+$btn-primary-color:              #fff !default;
+$btn-primary-bg:                 $brand-primary !default;
+$btn-primary-border:             darken($btn-primary-bg, 5%) !default;
+
+$btn-success-color:              #fff !default;
+$btn-success-bg:                 $brand-success !default;
+$btn-success-border:             darken($btn-success-bg, 5%) !default;
+
+$btn-info-color:                 #fff !default;
+$btn-info-bg:                    $brand-info !default;
+$btn-info-border:                darken($btn-info-bg, 5%) !default;
+
+$btn-warning-color:              #fff !default;
+$btn-warning-bg:                 $brand-warning !default;
+$btn-warning-border:             darken($btn-warning-bg, 5%) !default;
+
+$btn-danger-color:               #fff !default;
+$btn-danger-bg:                  $brand-danger !default;
+$btn-danger-border:              darken($btn-danger-bg, 5%) !default;
+
+$btn-link-disabled-color:        $gray-light !default;
+
+
+//== Forms
+//
+//##
+
+//** `<input>` background color
+$input-bg:                       #fff !default;
+//** `<input disabled>` background color
+$input-bg-disabled:              $gray-lighter !default;
+
+//** Text color for `<input>`s
+$input-color:                    $gray !default;
+//** `<input>` border color
+$input-border:                   #ccc !default;
+
+// TODO: Rename `$input-border-radius` to `$input-border-radius-base` in v4
+//** Default `.form-control` border radius
+$input-border-radius:            $border-radius-base !default;
+//** Large `.form-control` border radius
+$input-border-radius-large:      $border-radius-large !default;
+//** Small `.form-control` border radius
+$input-border-radius-small:      $border-radius-small !default;
+
+//** Border color for inputs on focus
+$input-border-focus:             #66afe9 !default;
+
+//** Placeholder text color
+$input-color-placeholder:        #999 !default;
+
+//** Default `.form-control` height
+$input-height-base:              ($line-height-computed + ($padding-base-vertical * 2) + 2) !default;
+//** Large `.form-control` height
+$input-height-large:             (ceil($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default;
+//** Small `.form-control` height
+$input-height-small:             (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default;
+
+$legend-color:                   $gray-dark !default;
+$legend-border-color:            #e5e5e5 !default;
+
+//** Background color for textual input addons
+$input-group-addon-bg:           $gray-lighter !default;
+//** Border color for textual input addons
+$input-group-addon-border-color: $input-border !default;
+
+//** Disabled cursor for form controls and buttons.
+$cursor-disabled:                not-allowed !default;
+
+
+//== Dropdowns
+//
+//## Dropdown menu container and contents.
+
+//** Background for the dropdown menu.
+$dropdown-bg:                    #fff !default;
+//** Dropdown menu `border-color`.
+$dropdown-border:                rgba(0,0,0,.15) !default;
+//** Dropdown menu `border-color` **for IE8**.
+$dropdown-fallback-border:       #ccc !default;
+//** Divider color for between dropdown items.
+$dropdown-divider-bg:            #e5e5e5 !default;
+
+//** Dropdown link text color.
+$dropdown-link-color:            $gray-dark !default;
+//** Hover color for dropdown links.
+$dropdown-link-hover-color:      darken($gray-dark, 5%) !default;
+//** Hover background for dropdown links.
+$dropdown-link-hover-bg:         #f5f5f5 !default;
+
+//** Active dropdown menu item text color.
+$dropdown-link-active-color:     $component-active-color !default;
+//** Active dropdown menu item background color.
+$dropdown-link-active-bg:        $component-active-bg !default;
+
+//** Disabled dropdown menu item background color.
+$dropdown-link-disabled-color:   $gray-light !default;
+
+//** Text color for headers within dropdown menus.
+$dropdown-header-color:          $gray-light !default;
+
+//** Deprecated `$dropdown-caret-color` as of v3.1.0
+$dropdown-caret-color:           #000 !default;
+
+
+//-- Z-index master list
+//
+// Warning: Avoid customizing these values. They're used for a bird's eye view
+// of components dependent on the z-axis and are designed to all work together.
+//
+// Note: These variables are not generated into the Customizer.
+
+$zindex-navbar:            1000 !default;
+$zindex-dropdown:          1000 !default;
+$zindex-popover:           1060 !default;
+$zindex-tooltip:           1070 !default;
+$zindex-navbar-fixed:      1030 !default;
+$zindex-modal:             1040 !default;
+
+
+//== Media queries breakpoints
+//
+//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
+
+// Extra small screen / phone
+//** Deprecated `$screen-xs` as of v3.0.1
+$screen-xs:                  480px !default;
+//** Deprecated `$screen-xs-min` as of v3.2.0
+$screen-xs-min:              $screen-xs !default;
+//** Deprecated `$screen-phone` as of v3.0.1
+$screen-phone:               $screen-xs-min !default;
+
+// Small screen / tablet
+//** Deprecated `$screen-sm` as of v3.0.1
+$screen-sm:                  768px !default;
+$screen-sm-min:              $screen-sm !default;
+//** Deprecated `$screen-tablet` as of v3.0.1
+$screen-tablet:              $screen-sm-min !default;
+
+// Medium screen / desktop
+//** Deprecated `$screen-md` as of v3.0.1
+$screen-md:                  992px !default;
+$screen-md-min:              $screen-md !default;
+//** Deprecated `$screen-desktop` as of v3.0.1
+$screen-desktop:             $screen-md-min !default;
+
+// Large screen / wide desktop
+//** Deprecated `$screen-lg` as of v3.0.1
+$screen-lg:                  1200px !default;
+$screen-lg-min:              $screen-lg !default;
+//** Deprecated `$screen-lg-desktop` as of v3.0.1
+$screen-lg-desktop:          $screen-lg-min !default;
+
+// So media queries don't overlap when required, provide a maximum
+$screen-xs-max:              ($screen-sm-min - 1) !default;
+$screen-sm-max:              ($screen-md-min - 1) !default;
+$screen-md-max:              ($screen-lg-min - 1) !default;
+
+
+//== Grid system
+//
+//## Define your custom responsive grid.
+
+//** Number of columns in the grid.
+$grid-columns:              12 !default;
+//** Padding between columns. Gets divided in half for the left and right.
+$grid-gutter-width:         30px !default;
+// Navbar collapse
+//** Point at which the navbar becomes uncollapsed.
+$grid-float-breakpoint:     $screen-sm-min !default;
+//** Point at which the navbar begins collapsing.
+$grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default;
+
+
+//== Container sizes
+//
+//## Define the maximum width of `.container` for different screen sizes.
+
+// Small screen / tablet
+$container-tablet:             (720px + $grid-gutter-width) !default;
+//** For `$screen-sm-min` and up.
+$container-sm:                 $container-tablet !default;
+
+// Medium screen / desktop
+$container-desktop:            (940px + $grid-gutter-width) !default;
+//** For `$screen-md-min` and up.
+$container-md:                 $container-desktop !default;
+
+// Large screen / wide desktop
+$container-large-desktop:      (1140px + $grid-gutter-width) !default;
+//** For `$screen-lg-min` and up.
+$container-lg:                 $container-large-desktop !default;
+
+
+//== Navbar
+//
+//##
+
+// Basics of a navbar
+$navbar-height:                    50px !default;
+$navbar-margin-bottom:             $line-height-computed !default;
+$navbar-border-radius:             $border-radius-base !default;
+$navbar-padding-horizontal:        floor(($grid-gutter-width / 2)) !default;
+$navbar-padding-vertical:          (($navbar-height - $line-height-computed) / 2) !default;
+$navbar-collapse-max-height:       340px !default;
+
+$navbar-default-color:             #777 !default;
+$navbar-default-bg:                #f8f8f8 !default;
+$navbar-default-border:            darken($navbar-default-bg, 6.5%) !default;
+
+// Navbar links
+$navbar-default-link-color:                #777 !default;
+$navbar-default-link-hover-color:          #333 !default;
+$navbar-default-link-hover-bg:             transparent !default;
+$navbar-default-link-active-color:         #555 !default;
+$navbar-default-link-active-bg:            darken($navbar-default-bg, 6.5%) !default;
+$navbar-default-link-disabled-color:       #ccc !default;
+$navbar-default-link-disabled-bg:          transparent !default;
+
+// Navbar brand label
+$navbar-default-brand-color:               $navbar-default-link-color !default;
+$navbar-default-brand-hover-color:         darken($navbar-default-brand-color, 10%) !default;
+$navbar-default-brand-hover-bg:            transparent !default;
+
+// Navbar toggle
+$navbar-default-toggle-hover-bg:           #ddd !default;
+$navbar-default-toggle-icon-bar-bg:        #888 !default;
+$navbar-default-toggle-border-color:       #ddd !default;
+
+
+// Inverted navbar
+// Reset inverted navbar basics
+$navbar-inverse-color:                      lighten($gray-light, 15%) !default;
+$navbar-inverse-bg:                         #222 !default;
+$navbar-inverse-border:                     darken($navbar-inverse-bg, 10%) !default;
+
+// Inverted navbar links
+$navbar-inverse-link-color:                 lighten($gray-light, 15%) !default;
+$navbar-inverse-link-hover-color:           #fff !default;
+$navbar-inverse-link-hover-bg:              transparent !default;
+$navbar-inverse-link-active-color:          $navbar-inverse-link-hover-color !default;
+$navbar-inverse-link-active-bg:             darken($navbar-inverse-bg, 10%) !default;
+$navbar-inverse-link-disabled-color:        #444 !default;
+$navbar-inverse-link-disabled-bg:           transparent !default;
+
+// Inverted navbar brand label
+$navbar-inverse-brand-color:                $navbar-inverse-link-color !default;
+$navbar-inverse-brand-hover-color:          #fff !default;
+$navbar-inverse-brand-hover-bg:             transparent !default;
+
+// Inverted navbar toggle
+$navbar-inverse-toggle-hover-bg:            #333 !default;
+$navbar-inverse-toggle-icon-bar-bg:         #fff !default;
+$navbar-inverse-toggle-border-color:        #333 !default;
+
+
+//== Navs
+//
+//##
+
+//=== Shared nav styles
+$nav-link-padding:                          10px 15px !default;
+$nav-link-hover-bg:                         $gray-lighter !default;
+
+$nav-disabled-link-color:                   $gray-light !default;
+$nav-disabled-link-hover-color:             $gray-light !default;
+
+//== Tabs
+$nav-tabs-border-color:                     #ddd !default;
+
+$nav-tabs-link-hover-border-color:          $gray-lighter !default;
+
+$nav-tabs-active-link-hover-bg:             $body-bg !default;
+$nav-tabs-active-link-hover-color:          $gray !default;
+$nav-tabs-active-link-hover-border-color:   #ddd !default;
+
+$nav-tabs-justified-link-border-color:            #ddd !default;
+$nav-tabs-justified-active-link-border-color:     $body-bg !default;
+
+//== Pills
+$nav-pills-border-radius:                   $border-radius-base !default;
+$nav-pills-active-link-hover-bg:            $component-active-bg !default;
+$nav-pills-active-link-hover-color:         $component-active-color !default;
+
+
+//== Pagination
+//
+//##
+
+$pagination-color:                     $link-color !default;
+$pagination-bg:                        #fff !default;
+$pagination-border:                    #ddd !default;
+
+$pagination-hover-color:               $link-hover-color !default;
+$pagination-hover-bg:                  $gray-lighter !default;
+$pagination-hover-border:              #ddd !default;
+
+$pagination-active-color:              #fff !default;
+$pagination-active-bg:                 $brand-primary !default;
+$pagination-active-border:             $brand-primary !default;
+
+$pagination-disabled-color:            $gray-light !default;
+$pagination-disabled-bg:               #fff !default;
+$pagination-disabled-border:           #ddd !default;
+
+
+//== Pager
+//
+//##
+
+$pager-bg:                             $pagination-bg !default;
+$pager-border:                         $pagination-border !default;
+$pager-border-radius:                  15px !default;
+
+$pager-hover-bg:                       $pagination-hover-bg !default;
+
+$pager-active-bg:                      $pagination-active-bg !default;
+$pager-active-color:                   $pagination-active-color !default;
+
+$pager-disabled-color:                 $pagination-disabled-color !default;
+
+
+//== Jumbotron
+//
+//##
+
+$jumbotron-padding:              30px !default;
+$jumbotron-color:                inherit !default;
+$jumbotron-bg:                   $gray-lighter !default;
+$jumbotron-heading-color:        inherit !default;
+$jumbotron-font-size:            ceil(($font-size-base * 1.5)) !default;
+
+
+//== Form states and alerts
+//
+//## Define colors for form feedback states and, by default, alerts.
+
+$state-success-text:             #3c763d !default;
+$state-success-bg:               #dff0d8 !default;
+$state-success-border:           darken(adjust-hue($state-success-bg, -10), 5%) !default;
+
+$state-info-text:                #31708f !default;
+$state-info-bg:                  #d9edf7 !default;
+$state-info-border:              darken(adjust-hue($state-info-bg, -10), 7%) !default;
+
+$state-warning-text:             #8a6d3b !default;
+$state-warning-bg:               #fcf8e3 !default;
+$state-warning-border:           darken(adjust-hue($state-warning-bg, -10), 5%) !default;
+
+$state-danger-text:              #a94442 !default;
+$state-danger-bg:                #f2dede !default;
+$state-danger-border:            darken(adjust-hue($state-danger-bg, -10), 5%) !default;
+
+
+//== Tooltips
+//
+//##
+
+//** Tooltip max width
+$tooltip-max-width:           200px !default;
+//** Tooltip text color
+$tooltip-color:               #fff !default;
+//** Tooltip background color
+$tooltip-bg:                  #000 !default;
+$tooltip-opacity:             .9 !default;
+
+//** Tooltip arrow width
+$tooltip-arrow-width:         5px !default;
+//** Tooltip arrow color
+$tooltip-arrow-color:         $tooltip-bg !default;
+
+
+//== Popovers
+//
+//##
+
+//** Popover body background color
+$popover-bg:                          #fff !default;
+//** Popover maximum width
+$popover-max-width:                   276px !default;
+//** Popover border color
+$popover-border-color:                rgba(0,0,0,.2) !default;
+//** Popover fallback border color
+$popover-fallback-border-color:       #ccc !default;
+
+//** Popover title background color
+$popover-title-bg:                    darken($popover-bg, 3%) !default;
+
+//** Popover arrow width
+$popover-arrow-width:                 10px !default;
+//** Popover arrow color
+$popover-arrow-color:                 $popover-bg !default;
+
+//** Popover outer arrow width
+$popover-arrow-outer-width:           ($popover-arrow-width + 1) !default;
+//** Popover outer arrow color
+$popover-arrow-outer-color:           fade_in($popover-border-color, 0.05) !default;
+//** Popover outer arrow fallback color
+$popover-arrow-outer-fallback-color:  darken($popover-fallback-border-color, 20%) !default;
+
+
+//== Labels
+//
+//##
+
+//** Default label background color
+$label-default-bg:            $gray-light !default;
+//** Primary label background color
+$label-primary-bg:            $brand-primary !default;
+//** Success label background color
+$label-success-bg:            $brand-success !default;
+//** Info label background color
+$label-info-bg:               $brand-info !default;
+//** Warning label background color
+$label-warning-bg:            $brand-warning !default;
+//** Danger label background color
+$label-danger-bg:             $brand-danger !default;
+
+//** Default label text color
+$label-color:                 #fff !default;
+//** Default text color of a linked label
+$label-link-hover-color:      #fff !default;
+
+
+//== Modals
+//
+//##
+
+//** Padding applied to the modal body
+$modal-inner-padding:         15px !default;
+
+//** Padding applied to the modal title
+$modal-title-padding:         15px !default;
+//** Modal title line-height
+$modal-title-line-height:     $line-height-base !default;
+
+//** Background color of modal content area
+$modal-content-bg:                             #fff !default;
+//** Modal content border color
+$modal-content-border-color:                   rgba(0,0,0,.2) !default;
+//** Modal content border color **for IE8**
+$modal-content-fallback-border-color:          #999 !default;
+
+//** Modal backdrop background color
+$modal-backdrop-bg:           #000 !default;
+//** Modal backdrop opacity
+$modal-backdrop-opacity:      .5 !default;
+//** Modal header border color
+$modal-header-border-color:   #e5e5e5 !default;
+//** Modal footer border color
+$modal-footer-border-color:   $modal-header-border-color !default;
+
+$modal-lg:                    900px !default;
+$modal-md:                    600px !default;
+$modal-sm:                    300px !default;
+
+
+//== Alerts
+//
+//## Define alert colors, border radius, and padding.
+
+$alert-padding:               15px !default;
+$alert-border-radius:         $border-radius-base !default;
+$alert-link-font-weight:      bold !default;
+
+$alert-success-bg:            $state-success-bg !default;
+$alert-success-text:          $state-success-text !default;
+$alert-success-border:        $state-success-border !default;
+
+$alert-info-bg:               $state-info-bg !default;
+$alert-info-text:             $state-info-text !default;
+$alert-info-border:           $state-info-border !default;
+
+$alert-warning-bg:            $state-warning-bg !default;
+$alert-warning-text:          $state-warning-text !default;
+$alert-warning-border:        $state-warning-border !default;
+
+$alert-danger-bg:             $state-danger-bg !default;
+$alert-danger-text:           $state-danger-text !default;
+$alert-danger-border:         $state-danger-border !default;
+
+
+//== Progress bars
+//
+//##
+
+//** Background color of the whole progress component
+$progress-bg:                 #f5f5f5 !default;
+//** Progress bar text color
+$progress-bar-color:          #fff !default;
+//** Variable for setting rounded corners on progress bar.
+$progress-border-radius:      $border-radius-base !default;
+
+//** Default progress bar color
+$progress-bar-bg:             $brand-primary !default;
+//** Success progress bar color
+$progress-bar-success-bg:     $brand-success !default;
+//** Warning progress bar color
+$progress-bar-warning-bg:     $brand-warning !default;
+//** Danger progress bar color
+$progress-bar-danger-bg:      $brand-danger !default;
+//** Info progress bar color
+$progress-bar-info-bg:        $brand-info !default;
+
+
+//== List group
+//
+//##
+
+//** Background color on `.list-group-item`
+$list-group-bg:                 #fff !default;
+//** `.list-group-item` border color
+$list-group-border:             #ddd !default;
+//** List group border radius
+$list-group-border-radius:      $border-radius-base !default;
+
+//** Background color of single list items on hover
+$list-group-hover-bg:           #f5f5f5 !default;
+//** Text color of active list items
+$list-group-active-color:       $component-active-color !default;
+//** Background color of active list items
+$list-group-active-bg:          $component-active-bg !default;
+//** Border color of active list elements
+$list-group-active-border:      $list-group-active-bg !default;
+//** Text color for content within active list items
+$list-group-active-text-color:  lighten($list-group-active-bg, 40%) !default;
+
+//** Text color of disabled list items
+$list-group-disabled-color:      $gray-light !default;
+//** Background color of disabled list items
+$list-group-disabled-bg:         $gray-lighter !default;
+//** Text color for content within disabled list items
+$list-group-disabled-text-color: $list-group-disabled-color !default;
+
+$list-group-link-color:         #555 !default;
+$list-group-link-hover-color:   $list-group-link-color !default;
+$list-group-link-heading-color: #333 !default;
+
+
+//== Panels
+//
+//##
+
+$panel-bg:                    #fff !default;
+$panel-body-padding:          15px !default;
+$panel-heading-padding:       10px 15px !default;
+$panel-footer-padding:        $panel-heading-padding !default;
+$panel-border-radius:         $border-radius-base !default;
+
+//** Border color for elements within panels
+$panel-inner-border:          #ddd !default;
+$panel-footer-bg:             #f5f5f5 !default;
+
+$panel-default-text:          $gray-dark !default;
+$panel-default-border:        #ddd !default;
+$panel-default-heading-bg:    #f5f5f5 !default;
+
+$panel-primary-text:          #fff !default;
+$panel-primary-border:        $brand-primary !default;
+$panel-primary-heading-bg:    $brand-primary !default;
+
+$panel-success-text:          $state-success-text !default;
+$panel-success-border:        $state-success-border !default;
+$panel-success-heading-bg:    $state-success-bg !default;
+
+$panel-info-text:             $state-info-text !default;
+$panel-info-border:           $state-info-border !default;
+$panel-info-heading-bg:       $state-info-bg !default;
+
+$panel-warning-text:          $state-warning-text !default;
+$panel-warning-border:        $state-warning-border !default;
+$panel-warning-heading-bg:    $state-warning-bg !default;
+
+$panel-danger-text:           $state-danger-text !default;
+$panel-danger-border:         $state-danger-border !default;
+$panel-danger-heading-bg:     $state-danger-bg !default;
+
+
+//== Thumbnails
+//
+//##
+
+//** Padding around the thumbnail image
+$thumbnail-padding:           4px !default;
+//** Thumbnail background color
+$thumbnail-bg:                $body-bg !default;
+//** Thumbnail border color
+$thumbnail-border:            #ddd !default;
+//** Thumbnail border radius
+$thumbnail-border-radius:     $border-radius-base !default;
+
+//** Custom text color for thumbnail captions
+$thumbnail-caption-color:     $text-color !default;
+//** Padding around the thumbnail caption
+$thumbnail-caption-padding:   9px !default;
+
+
+//== Wells
+//
+//##
+
+$well-bg:                     #f5f5f5 !default;
+$well-border:                 darken($well-bg, 7%) !default;
+
+
+//== Badges
+//
+//##
+
+$badge-color:                 #fff !default;
+//** Linked badge text color on hover
+$badge-link-hover-color:      #fff !default;
+$badge-bg:                    $gray-light !default;
+
+//** Badge text color in active nav link
+$badge-active-color:          $link-color !default;
+//** Badge background color in active nav link
+$badge-active-bg:             #fff !default;
+
+$badge-font-weight:           bold !default;
+$badge-line-height:           1 !default;
+$badge-border-radius:         10px !default;
+
+
+//== Breadcrumbs
+//
+//##
+
+$breadcrumb-padding-vertical:   8px !default;
+$breadcrumb-padding-horizontal: 15px !default;
+//** Breadcrumb background color
+$breadcrumb-bg:                 #f5f5f5 !default;
+//** Breadcrumb text color
+$breadcrumb-color:              #ccc !default;
+//** Text color of current page in the breadcrumb
+$breadcrumb-active-color:       $gray-light !default;
+//** Textual separator for between breadcrumb elements
+$breadcrumb-separator:          "/" !default;
+
+
+//== Carousel
+//
+//##
+
+$carousel-text-shadow:                        0 1px 2px rgba(0,0,0,.6) !default;
+
+$carousel-control-color:                      #fff !default;
+$carousel-control-width:                      15% !default;
+$carousel-control-opacity:                    .5 !default;
+$carousel-control-font-size:                  20px !default;
+
+$carousel-indicator-active-bg:                #fff !default;
+$carousel-indicator-border-color:             #fff !default;
+
+$carousel-caption-color:                      #fff !default;
+
+
+//== Close
+//
+//##
+
+$close-font-weight:           bold !default;
+$close-color:                 #000 !default;
+$close-text-shadow:           0 1px 0 #fff !default;
+
+
+//== Code
+//
+//##
+
+$code-color:                  #c7254e !default;
+$code-bg:                     #f9f2f4 !default;
+
+$kbd-color:                   #fff !default;
+$kbd-bg:                      #333 !default;
+
+$pre-bg:                      #f5f5f5 !default;
+$pre-color:                   $gray-dark !default;
+$pre-border-color:            #ccc !default;
+$pre-scrollable-max-height:   340px !default;
+
+
+//== Type
+//
+//##
+
+//** Horizontal offset for forms and lists.
+$component-offset-horizontal: 180px !default;
+//** Text muted color
+$text-muted:                  $gray-light !default;
+//** Abbreviations and acronyms border color
+$abbr-border-color:           $gray-light !default;
+//** Headings small color
+$headings-small-color:        $gray-light !default;
+//** Blockquote small color
+$blockquote-small-color:      $gray-light !default;
+//** Blockquote font size
+$blockquote-font-size:        ($font-size-base * 1.25) !default;
+//** Blockquote border color
+$blockquote-border-color:     $gray-lighter !default;
+//** Page header border color
+$page-header-border-color:    $gray-lighter !default;
+//** Width of horizontal description list titles
+$dl-horizontal-offset:        $component-offset-horizontal !default;
+//** Horizontal line color.
+$hr-border:                   $gray-lighter !default;
--- a/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_alerts.scss
+++ b/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_alerts.scss
--- a/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_background-variant.scss
+++ b/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_background-variant.scss
@ -0,0 +1,11 @@
+// Contextual backgrounds
+
+// [converter] $parent hack
+@mixin bg-variant($parent, $color) {
+  #{$parent} {
+    background-color: $color;
+  }
+  a#{$parent}:hover {
+    background-color: darken($color, 10%);
+  }
+}
--- a/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_border-radius.scss
+++ b/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_border-radius.scss
--- a/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_buttons.scss
+++ b/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_buttons.scss
@ -0,0 +1,56 @@
+// Button variants
+//
+// Easily pump out default styles, as well as :hover, :focus, :active,
+// and disabled options for all buttons
+
+@mixin button-variant($color, $background, $border) {
+  color: $color;
+  background-color: $background;
+  border-color: $border;
+
+  &:hover,
+  &:focus,
+  &.focus,
+  &:active,
+  &.active,
+  .open > &.dropdown-toggle {
+    color: $color;
+    background-color: darken($background, 10%);
+        border-color: darken($border, 12%);
+  }
+  &:active,
+  &.active,
+  .open > &.dropdown-toggle {
+    background-image: none;
+  }
+  &.disabled,
+  &[disabled],
+  fieldset[disabled] & {
+    &,
+    &:hover,
+    &:focus,
+    &.focus,
+    &:active,
+    &.active {
+      background-color: $background;
+          border-color: $border;
+
+      &.btn-primary {
+        color: #fff;
+      }
+    }
+  }
+
+  .badge {
+    color: $background;
+    background-color: $color;
+  }
+}
+
+// Button sizes
+@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
+  padding: $padding-vertical $padding-horizontal;
+  font-size: $font-size;
+  line-height: $line-height;
+  border-radius: $border-radius;
+}
--- a/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_center-block.scss
+++ b/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_center-block.scss
--- a/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_clearfix.scss
+++ b/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_clearfix.scss
--- a/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_forms.scss
+++ b/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_forms.scss
--- a/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_gradients.scss
+++ b/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_gradients.scss
--- a/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_grid-framework.scss
+++ b/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_grid-framework.scss
@ -0,0 +1,81 @@
+// Framework grid generation
+//
+// Used only by Bootstrap to generate the correct number of grid classes given
+// any value of `$grid-columns`.
+
+// [converter] This is defined recursively in LESS, but Sass supports real loops
+@mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}") {
+  @for $i from (1 + 1) through $grid-columns {
+    $list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";
+  }
+  #{$list} {
+    position: relative;
+    // Prevent columns from collapsing when empty
+    min-height: 1px;
+    // Inner gutter via padding
+    padding-left:  ($grid-gutter-width / 2);
+    padding-right: ($grid-gutter-width / 2);
+  }
+}
+
+
+// [converter] This is defined recursively in LESS, but Sass supports real loops
+@mixin float-grid-columns($class, $i: 1, $list: ".col-#{$class}-#{$i}") {
+  @for $i from (1 + 1) through $grid-columns {
+    $list: "#{$list}, .col-#{$class}-#{$i}";
+  }
+  #{$list} {
+    float: left;
+  }
+}
+
+
+@mixin calc-grid-column($index, $class, $type) {
+  @if ($type == width) and ($index > 0) {
+    .col-#{$class}-#{$index} {
+      width: percentage(($index / $grid-columns));
+    }
+  }
+  @if ($type == push) and ($index > 0) {
+    .col-#{$class}-push-#{$index} {
+      left: percentage(($index / $grid-columns));
+    }
+  }
+  @if ($type == push) and ($index == 0) {
+    .col-#{$class}-push-0 {
+      left: auto;
+    }
+  }
+  @if ($type == pull) and ($index > 0) {
+    .col-#{$class}-pull-#{$index} {
+      right: percentage(($index / $grid-columns));
+    }
+  }
+  @if ($type == pull) and ($index == 0) {
+    .col-#{$class}-pull-0 {
+      right: auto;
+    }
+  }
+  @if ($type == offset) {
+    .col-#{$class}-offset-#{$index} {
+      margin-left: percentage(($index / $grid-columns));
+    }
+  }
+}
+
+// [converter] This is defined recursively in LESS, but Sass supports real loops
+@mixin loop-grid-columns($columns, $class, $type) {
+  @for $i from 0 through $columns {
+    @include calc-grid-column($i, $class, $type);
+  }
+}
+
+
+// Create grid for specific class
+@mixin make-grid($class) {
+  @include float-grid-columns($class);
+  @include loop-grid-columns($grid-columns, $class, width);
+  @include loop-grid-columns($grid-columns, $class, pull);
+  @include loop-grid-columns($grid-columns, $class, push);
+  @include loop-grid-columns($grid-columns, $class, offset);
+}
--- a/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_grid.scss
+++ b/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_grid.scss
@ -0,0 +1,122 @@
+// Grid system
+//
+// Generate semantic grid columns with these mixins.
+
+// Centered container element
+@mixin container-fixed($gutter: $grid-gutter-width) {
+  margin-right: auto;
+  margin-left: auto;
+  padding-left:  ($gutter / 2);
+  padding-right: ($gutter / 2);
+  @include clearfix;
+}
+
+// Creates a wrapper for a series of columns
+@mixin make-row($gutter: $grid-gutter-width) {
+  margin-left:  ($gutter / -2);
+  margin-right: ($gutter / -2);
+  @include clearfix;
+}
+
+// Generate the extra small columns
+@mixin make-xs-column($columns, $gutter: $grid-gutter-width) {
+  position: relative;
+  float: left;
+  width: percentage(($columns / $grid-columns));
+  min-height: 1px;
+  padding-left:  ($gutter / 2);
+  padding-right: ($gutter / 2);
+}
+@mixin make-xs-column-offset($columns) {
+  margin-left: percentage(($columns / $grid-columns));
+}
+@mixin make-xs-column-push($columns) {
+  left: percentage(($columns / $grid-columns));
+}
+@mixin make-xs-column-pull($columns) {
+  right: percentage(($columns / $grid-columns));
+}
+
+// Generate the small columns
+@mixin make-sm-column($columns, $gutter: $grid-gutter-width) {
+  position: relative;
+  min-height: 1px;
+  padding-left:  ($gutter / 2);
+  padding-right: ($gutter / 2);
+
+  @media (min-width: $screen-sm-min) {
+    float: left;
+    width: percentage(($columns / $grid-columns));
+  }
+}
+@mixin make-sm-column-offset($columns) {
+  @media (min-width: $screen-sm-min) {
+    margin-left: percentage(($columns / $grid-columns));
+  }
+}
+@mixin make-sm-column-push($columns) {
+  @media (min-width: $screen-sm-min) {
+    left: percentage(($columns / $grid-columns));
+  }
+}
+@mixin make-sm-column-pull($columns) {
+  @media (min-width: $screen-sm-min) {
+    right: percentage(($columns / $grid-columns));
+  }
+}
+
+// Generate the medium columns
+@mixin make-md-column($columns, $gutter: $grid-gutter-width) {
+  position: relative;
+  min-height: 1px;
+  padding-left:  ($gutter / 2);
+  padding-right: ($gutter / 2);
+
+  @media (min-width: $screen-md-min) {
+    float: left;
+    width: percentage(($columns / $grid-columns));
+  }
+}
+@mixin make-md-column-offset($columns) {
+  @media (min-width: $screen-md-min) {
+    margin-left: percentage(($columns / $grid-columns));
+  }
+}
+@mixin make-md-column-push($columns) {
+  @media (min-width: $screen-md-min) {
+    left: percentage(($columns / $grid-columns));
+  }
+}
+@mixin make-md-column-pull($columns) {
+  @media (min-width: $screen-md-min) {
+    right: percentage(($columns / $grid-columns));
+  }
+}
+
+// Generate the large columns
+@mixin make-lg-column($columns, $gutter: $grid-gutter-width) {
+  position: relative;
+  min-height: 1px;
+  padding-left:  ($gutter / 2);
+  padding-right: ($gutter / 2);
+
+  @media (min-width: $screen-lg-min) {
+    float: left;
+    width: percentage(($columns / $grid-columns));
+  }
+}
+@mixin make-lg-column-offset($columns) {
+  @media (min-width: $screen-lg-min) {
+    margin-left: percentage(($columns / $grid-columns));
+  }
+}
+@mixin make-lg-column-push($columns) {
+  @media (min-width: $screen-lg-min) {
+    left: percentage(($columns / $grid-columns));
+  }
+}
+@mixin make-lg-column-pull($columns) {
+  @media (min-width: $screen-lg-min) {
+    right: percentage(($columns / $grid-columns));
+  }
+}
--- a/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_hide-text.scss
+++ b/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_hide-text.scss
@ -0,0 +1,21 @@
+// CSS image replacement
+//
+// Heads up! v3 launched with with only `.hide-text()`, but per our pattern for
+// mixins being reused as classes with the same name, this doesn't hold up. As
+// of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`.
+//
+// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
+
+// Deprecated as of v3.0.1 (will be removed in v4)
+@mixin hide-text() {
+  font: #{0/0} a;
+  color: transparent;
+  text-shadow: none;
+  background-color: transparent;
+  border: 0;
+}
+
+// New mixin to use as of v3.0.1
+@mixin text-hide() {
+  @include hide-text;
+}
--- a/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_image.scss
+++ b/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_image.scss
--- a/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_labels.scss
+++ b/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_labels.scss
--- a/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_list-group.scss
+++ b/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_list-group.scss
@ -0,0 +1,31 @@
+// List Groups
+
+@mixin list-group-item-variant($state, $background, $color) {
+  .list-group-item-#{$state} {
+    color: $color;
+    background-color: $background;
+
+    // [converter] extracted a& to a.list-group-item-#{$state}
+  }
+
+  a.list-group-item-#{$state} {
+    color: $color;
+
+    .list-group-item-heading {
+      color: inherit;
+    }
+
+    &:hover,
+    &:focus {
+      color: $color;
+      background-color: darken($background, 5%);
+    }
+    &.active,
+    &.active:hover,
+    &.active:focus {
+      color: #fff;
+      background-color: $color;
+      border-color: $color;
+    }
+  }
+}
--- a/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_nav-divider.scss
+++ b/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_nav-divider.scss
--- a/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_nav-vertical-align.scss
+++ b/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_nav-vertical-align.scss
--- a/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_opacity.scss
+++ b/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_opacity.scss
@ -0,0 +1,8 @@
+// Opacity
+
+@mixin opacity($opacity) {
+  opacity: $opacity;
+  // IE8 filter
+  $opacity-ie: ($opacity * 100);
+  filter: #{alpha(opacity=$opacity-ie)};
+}
--- a/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_pagination.scss
+++ b/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_pagination.scss
@ -0,0 +1,23 @@
+// Pagination
+
+@mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $border-radius) {
+  > li {
+    > a,
+    > span {
+      padding: $padding-vertical $padding-horizontal;
+      font-size: $font-size;
+    }
+    &:first-child {
+      > a,
+      > span {
+        @include border-left-radius($border-radius);
+      }
+    }
+    &:last-child {
+      > a,
+      > span {
+        @include border-right-radius($border-radius);
+      }
+    }
+  }
+}
--- a/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_panels.scss
+++ b/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_panels.scss
--- a/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_progress-bar.scss
+++ b/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_progress-bar.scss
--- a/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_reset-filter.scss
+++ b/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_reset-filter.scss
--- a/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_resize.scss
+++ b/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_resize.scss
--- a/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_responsive-visibility.scss
+++ b/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_responsive-visibility.scss
@ -0,0 +1,21 @@
+// Responsive utilities
+
+//
+// More easily include all the states for responsive-utilities.less.
+// [converter] $parent hack
+@mixin responsive-visibility($parent) {
+  #{$parent} {
+    display: block !important;
+  }
+  table#{$parent}  { display: table; }
+  tr#{$parent}     { display: table-row !important; }
+  th#{$parent},
+  td#{$parent}     { display: table-cell !important; }
+}
+
+// [converter] $parent hack
+@mixin responsive-invisibility($parent) {
+  #{$parent} {
+    display: none !important;
+  }
+}
--- a/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_size.scss
+++ b/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_size.scss
--- a/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_tab-focus.scss
+++ b/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_tab-focus.scss
--- a/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_table-row.scss
+++ b/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_table-row.scss
--- a/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_text-emphasis.scss
+++ b/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_text-emphasis.scss
@ -0,0 +1,11 @@
+// Typography
+
+// [converter] $parent hack
+@mixin text-emphasis-variant($parent, $color) {
+  #{$parent} {
+    color: $color;
+  }
+  a#{$parent}:hover {
+    color: darken($color, 10%);
+  }
+}
--- a/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_text-overflow.scss
+++ b/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_text-overflow.scss
--- a/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_vendor-prefixes.scss
+++ b/docs/algolia-aerial/src/stylesheet/vendors/bootstrap/mixins/_vendor-prefixes.scss
@ -0,0 +1,222 @@
+// Vendor Prefixes
+//
+// All vendor mixins are deprecated as of v3.2.0 due to the introduction of
+// Autoprefixer in our Gruntfile. They will be removed in v4.
+
+// - Animations
+// - Backface visibility
+// - Box shadow
+// - Box sizing
+// - Content columns
+// - Hyphens
+// - Placeholder text
+// - Transformations
+// - Transitions
+// - User Select
+
+
+// Animations
+@mixin animation($animation) {
+  -webkit-animation: $animation;
+       -o-animation: $animation;
+          animation: $animation;
+}
+@mixin animation-name($name) {
+  -webkit-animation-name: $name;
+          animation-name: $name;
+}
+@mixin animation-duration($duration) {
+  -webkit-animation-duration: $duration;
+          animation-duration: $duration;
+}
+@mixin animation-timing-function($timing-function) {
+  -webkit-animation-timing-function: $timing-function;
+          animation-timing-function: $timing-function;
+}
+@mixin animation-delay($delay) {
+  -webkit-animation-delay: $delay;
+          animation-delay: $delay;
+}
+@mixin animation-iteration-count($iteration-count) {
+  -webkit-animation-iteration-count: $iteration-count;
+          animation-iteration-count: $iteration-count;
+}
+@mixin animation-direction($direction) {
+  -webkit-animation-direction: $direction;
+          animation-direction: $direction;
+}
+@mixin animation-fill-mode($fill-mode) {
+  -webkit-animation-fill-mode: $fill-mode;
+          animation-fill-mode: $fill-mode;
+}
+
+// Backface visibility
+// Prevent browsers from flickering when using CSS 3D transforms.
+// Default value is `visible`, but can be changed to `hidden`
+
+@mixin backface-visibility($visibility){
+  -webkit-backface-visibility: $visibility;
+     -moz-backface-visibility: $visibility;
+          backface-visibility: $visibility;
+}
+
+// Drop shadows
+//
+// Note: Deprecated `.box-shadow()` as of v3.1.0 since all of Bootstrap's
+// supported browsers that have box shadow capabilities now support it.
+
+@mixin box-shadow($shadow...) {
+  -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
+          box-shadow: $shadow;
+}
+
+// Box sizing
+@mixin box-sizing($boxmodel) {
+  -webkit-box-sizing: $boxmodel;
+     -moz-box-sizing: $boxmodel;
+          box-sizing: $boxmodel;
+}
+
+// CSS3 Content Columns
+@mixin content-columns($column-count, $column-gap: $grid-gutter-width) {
+  -webkit-column-count: $column-count;
+     -moz-column-count: $column-count;
+          column-count: $column-count;
+  -webkit-column-gap: $column-gap;
+     -moz-column-gap: $column-gap;
+          column-gap: $column-gap;
+}
+
+// Optional hyphenation
+@mixin hyphens($mode: auto) {
+  word-wrap: break-word;
+  -webkit-hyphens: $mode;
+     -moz-hyphens: $mode;
+      -ms-hyphens: $mode; // IE10+
+       -o-hyphens: $mode;
+          hyphens: $mode;
+}
+
+// Placeholder text
+@mixin placeholder($color: $input-color-placeholder) {
+  // Firefox
+  &::-moz-placeholder {
+    color: $color;
+    opacity: 1; // See https://github.com/twbs/bootstrap/pull/11526
+  }
+  &:-ms-input-placeholder { color: $color; } // Internet Explorer 10+
+  &::-webkit-input-placeholder  { color: $color; } // Safari and Chrome
+}
+
+// Transformations
+@mixin scale($ratio...) {
+  -webkit-transform: scale($ratio);
+      -ms-transform: scale($ratio); // IE9 only
+       -o-transform: scale($ratio);
+          transform: scale($ratio);
+}
+
+@mixin scaleX($ratio) {
+  -webkit-transform: scaleX($ratio);
+      -ms-transform: scaleX($ratio); // IE9 only
+       -o-transform: scaleX($ratio);
+          transform: scaleX($ratio);
+}
+@mixin scaleY($ratio) {
+  -webkit-transform: scaleY($ratio);
+      -ms-transform: scaleY($ratio); // IE9 only
+       -o-transform: scaleY($ratio);
+          transform: scaleY($ratio);
+}
+@mixin skew($x, $y) {
+  -webkit-transform: skewX($x) skewY($y);
+      -ms-transform: skewX($x) skewY($y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
+       -o-transform: skewX($x) skewY($y);
+          transform: skewX($x) skewY($y);
+}
+@mixin translate($x, $y) {
+  -webkit-transform: translate($x, $y);
+      -ms-transform: translate($x, $y); // IE9 only
+       -o-transform: translate($x, $y);
+          transform: translate($x, $y);
+}
+@mixin translate3d($x, $y, $z) {
+  -webkit-transform: translate3d($x, $y, $z);
+          transform: translate3d($x, $y, $z);
+}
+@mixin rotate($degrees) {
+  -webkit-transform: rotate($degrees);
+      -ms-transform: rotate($degrees); // IE9 only
+       -o-transform: rotate($degrees);
+          transform: rotate($degrees);
+}
+@mixin rotateX($degrees) {
+  -webkit-transform: rotateX($degrees);
+      -ms-transform: rotateX($degrees); // IE9 only
+       -o-transform: rotateX($degrees);
+          transform: rotateX($degrees);
+}
+@mixin rotateY($degrees) {
+  -webkit-transform: rotateY($degrees);
+      -ms-transform: rotateY($degrees); // IE9 only
+       -o-transform: rotateY($degrees);
+          transform: rotateY($degrees);
+}
+@mixin perspective($perspective) {
+  -webkit-perspective: $perspective;
+     -moz-perspective: $perspective;
+          perspective: $perspective;
+}
+@mixin perspective-origin($perspective) {
+  -webkit-perspective-origin: $perspective;
+     -moz-perspective-origin: $perspective;
+          perspective-origin: $perspective;
+}
+@mixin transform-origin($origin) {
+  -webkit-transform-origin: $origin;
+     -moz-transform-origin: $origin;
+      -ms-transform-origin: $origin; // IE9 only
+          transform-origin: $origin;
+}
+
+
+// Transitions
+
+@mixin transition($transition...) {
+  -webkit-transition: $transition;
+       -o-transition: $transition;
+          transition: $transition;
+}
+@mixin transition-property($transition-property...) {
+  -webkit-transition-property: $transition-property;
+          transition-property: $transition-property;
+}
+@mixin transition-delay($transition-delay) {
+  -webkit-transition-delay: $transition-delay;
+          transition-delay: $transition-delay;
+}
+@mixin transition-duration($transition-duration...) {
+  -webkit-transition-duration: $transition-duration;
+          transition-duration: $transition-duration;
+}
+@mixin transition-timing-function($timing-function) {
+  -webkit-transition-timing-function: $timing-function;
+          transition-timing-function: $timing-function;
+}
+@mixin transition-transform($transition...) {
+  -webkit-transition: -webkit-transform $transition;
+     -moz-transition: -moz-transform $transition;
+       -o-transition: -o-transform $transition;
+          transition: transform $transition;
+}
+
+
+// User select
+// For selecting text on the page
+
+@mixin user-select($select) {
+  -webkit-user-select: $select;
+     -moz-user-select: $select;
+      -ms-user-select: $select; // IE10+
+          user-select: $select;
+}
--- a/docs/algolia-aerial/webpack.config.js
+++ b/docs/algolia-aerial/webpack.config.js
@ -0,0 +1,59 @@
+const path = require('path');
+const ExtractTextPlugin =  require('extract-text-webpack-plugin');
+const WebpackAutoInject = require('webpack-auto-inject-version');
+
+module.exports = {
+  entry: './src/stylesheet/aerial.sass',
+  output: {
+    path: path.join(__dirname, './dist/'),
+    filename: 'aerial-source.css'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.sass$/,
+        use: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: ['css-loader','sass-loader']
+        })
+      },
+      {
+        test: /\.(ttf|eot|woff|woff2|svg)$/,
+        loader: 'file-loader',
+        options: {
+          name: 'fonts/[name].[ext]',
+        }
+      }
+    ]
+  },
+  plugins: [
+    new ExtractTextPlugin('aerial-source.css'), // css file will override generated js file
+    new WebpackAutoInject({
+        NAME: 'AIV custom name',
+        SHORT: 'CUSTOM',
+        SILENT: false,
+        PACKAGE_JSON_PATH: './package.json',
+        components: {
+          AutoIncreaseVersion: false,
+          InjectAsComment: true,
+          InjectByTag: true
+        },
+        componentsOptions: {
+          AutoIncreaseVersion: {
+            runInWatchMode: false // it will increase version with every single build!
+          },
+          InjectAsComment: {
+            tag: 'Version: {version} - {date}',
+            dateFormat: 'h:MM:ss TT'
+          },
+          InjectByTag: {
+            fileRegex: /\.+/,
+            dateFormat: 'h:MM:ss TT'
+          }
+        },
+        LOGS_TEXT: {
+          AIS_START: 'DEMO AIV started'
+        }
+      })
+    ]
+  }
--- a/docs/algolia-frontend-components/.babelrc
+++ b/docs/algolia-frontend-components/.babelrc
@ -0,0 +1,9 @@
+{
+  "presets": [
+    ["env", {
+      "targets": {
+        "browsers": ["last 2 versions", "safari >= 7"]
+      }
+    }]
+  ]
+}
--- a/docs/algolia-frontend-components/.npmignore
+++ b/docs/algolia-frontend-components/.npmignore
@ -0,0 +1,2 @@
+/node_modules/
+/components/**/*.data.json
--- a/docs/algolia-frontend-components/README.md
+++ b/docs/algolia-frontend-components/README.md
@ -0,0 +1,28 @@
+## Algolia front end components
+
+This project was created so that we can more easily update our components across all of our websites and avoid issues with consistency. 
+
+### Why this approach
+
+We have a lot of different websites running, a lot of community projects where our components are functionaly and design wise the same, yet we see offsets in CSS and changes to HTML structure which prove hard to maintain. There is no single source of truth for our components and thus we are seeing various different implementations and styles. In the future we want to avoid this and move faster. Changing a header on all of our websites should not take a week's time, but it should be as simple as pulling the components repository, rebuilding the components and re-deploying the websites. No manual cleaning of old CSS, copy/pasting html etc.
+
+### How does it work?
+The package uses javascript to generate custom content inside your component. All you need to specify is the data for that package to render and include it in your project.
+
+Each component has a `<component>.example.json` file which you can simply rename to `<component>.data.json` to have it use the json file.
+
+
+### Usage
+
+Depending on your build process you can have a few different use cases.
+
+### Build the components
+
+Depending on the build tool, there a few use cases of how you can import components.
+
+## @TODO write best practice for different build steps
+
+
+
+
+
--- a/docs/algolia-frontend-components/build/assets.js
+++ b/docs/algolia-frontend-components/build/assets.js
@ -0,0 +1,47 @@
+
+const fs = require('fs');
+const path = require('path');
+const chalk = require('chalk');
+const IMG_DIR = path.resolve(__dirname, './../images');
+
+let assets = {}
+
+if(!process.browser && !process.env.webpack) {
+  assets = {
+    algoliaLogo : fs.readFileSync(IMG_DIR + '/algolia-logo-darkbg.svg', 'utf8').toString(),
+    communityLogo : fs.readFileSync(IMG_DIR + '/algolia-community-dark.svg', 'utf8').toString(),
+    searchIcon : fs.readFileSync(IMG_DIR + '/search-icon.svg', 'utf8').toString(),
+    searchCloseIcon : fs.readFileSync(IMG_DIR + '/search-close-icon.svg', 'utf8').toString(),
+    iconSeparator : fs.readFileSync(IMG_DIR + '/icon-separator.svg', 'utf8').toString(),
+    InstantSearchReact : fs.readFileSync(IMG_DIR + '/react-instantsearch.svg', 'utf8').toString(),
+    instantSearchAndroid : fs.readFileSync(IMG_DIR + '/instantsearch-android.svg', 'utf8').toString(),
+    shopify : fs.readFileSync(IMG_DIR + '/shopify.svg', 'utf8').toString(),
+    wordpress : fs.readFileSync(IMG_DIR + '/wordpress.svg', 'utf8').toString()
+  }
+} else if(process.env.webpack){
+  assets = {
+    algoliaLogo : fs.readFileSync(IMG_DIR + '/algolia-logo-darkbg.svg', 'utf8').toString(),
+    communityLogo : fs.readFileSync(IMG_DIR + '/algolia-community-dark.svg', 'utf8').toString(),
+    searchIcon : fs.readFileSync(IMG_DIR + '/search-icon.svg', 'utf8').toString(),
+    searchCloseIcon : fs.readFileSync(IMG_DIR + '/search-close-icon.svg', 'utf8').toString(),
+    iconSeparator : fs.readFileSync(IMG_DIR + '/icon-separator.svg', 'utf8').toString(),
+    InstantSearchReact : fs.readFileSync(IMG_DIR + '/react-instantsearch.svg', 'utf8').toString(),
+    instantSearchAndroid : fs.readFileSync(IMG_DIR + '/instantsearch-android.svg', 'utf8').toString(),
+    shopify : fs.readFileSync(IMG_DIR + '/shopify.svg', 'utf8').toString(),
+    wordpress : fs.readFileSync(IMG_DIR + '/wordpress.svg', 'utf8').toString()
+  }
+} else if(process.env.NODE) {
+  assets = {
+    algoliaLogo : fs.readFileSync(IMG_DIR + '/algolia-logo-darkbg.svg', 'utf8').toString(),
+    communityLogo : fs.readFileSync(IMG_DIR + '/algolia-community-dark.svg', 'utf8').toString(),
+    searchIcon : fs.readFileSync(IMG_DIR + '/search-icon.svg', 'utf8').toString(),
+    searchCloseIcon : fs.readFileSync(IMG_DIR + '/search-close-icon.svg', 'utf8').toString(),
+    iconSeparator : fs.readFileSync(IMG_DIR + '/icon-separator.svg', 'utf8').toString(),
+    InstantSearchReact : fs.readFileSync(IMG_DIR + '/react-instantsearch.svg', 'utf8').toString(),
+    instantSearchAndroid : fs.readFileSync(IMG_DIR + '/instantsearch-android.svg', 'utf8').toString(),
+    shopify : fs.readFileSync(IMG_DIR + '/shopify.svg', 'utf8').toString(),
+    wordpress : fs.readFileSync(IMG_DIR + '/wordpress.svg', 'utf8').toString()
+  }
+}
+
+module.exports = assets;
--- a/docs/algolia-frontend-components/build/build.js
+++ b/docs/algolia-frontend-components/build/build.js
@ -0,0 +1,146 @@
+const fs = require('fs');
+const path = require('path');
+const glob = require('glob');
+const chalk = require('chalk');
+const ProgressBar = require('progress');
+const sass = require('node-sass');
+const babel = require('babel-core');
+const assets = require('./assets');
+
+const log = console.log;
+
+const COMPONENT_DIR = path.resolve(__dirname, './../components');
+const IMG_DIR = path.resolve(__dirname, './../images');
+const DIST_DIR = path.resolve(__dirname, './../dist/');
+const jshtmlglob = COMPONENT_DIR + "/**/*.html.js";
+const cssglob = COMPONENT_DIR + "/**/*.scss";
+const jsglob = COMPONENT_DIR + "/**/*.js";
+const scssResolvePath = path.resolve(__dirname, '/stylesheets');
+
+const outputMode = [...process.argv].indexOf('--erb') > 0 ? ".erb" : ".html";
+
+const bar = new ProgressBar(`${chalk.green('building')} [:bar]`, { total: 40 });
+
+const timer = setInterval(function() {
+  bar.tick();
+  if (bar.complete) {
+    clearInterval(timer);
+  }
+}, 100);
+
+const buildAssets = new Promise((resolve, reject) => {
+
+  fs.mkdir(DIST_DIR, function(e) {
+    if (!e || (e && e.code === 'EEXIST')) {} else {
+      console.log(e);
+    }
+  });
+
+  const jsPromise = glob(jsglob, (err, files) => {
+    const fl = files.length - 1;
+    files.forEach((file, i) => {
+      if (file.indexOf('.html.js') > 0) {
+        return
+      }
+      const componentName = file.split('/')
+        .filter((item, i, arr) => i === arr.length - 1)
+        .map(name => {
+
+          // Write filename with '_' prefix 
+          // for middleman partials use case
+          return '_' + name.split('.')[0];
+        })[0];
+
+      const fileName = DIST_DIR + '/' + componentName + '.js';
+      let jsCode = fs.readFileSync(file, "utf8");
+      const removeExports = /(^module\.exports.*)/gm
+      jsCode = jsCode.replace(removeExports, "");
+
+      const transpiled = babel.transform(jsCode, {
+        env: "production",
+        presets: ["es2015"]
+      });
+
+      fs.writeFileSync(fileName, transpiled.code);
+
+    });
+  });
+
+  const htmlPromise = new Promise((resolve, reject) => {
+
+    glob(jshtmlglob, (err, files) => {
+      const fl = files.length - 1;
+      log(chalk.white('Start building algolia components'));
+      log(chalk.white('Output to ', chalk.bold.underline(DIST_DIR)));
+
+      files.forEach((file, i) => {
+        // Get component name from /path/to/file
+        const componentName = file.split('/')
+          .filter((item, i, arr) => i === arr.length - 1)
+          .map(name => {
+
+            // Write filename with '_' prefix 
+            // for middleman partials use case
+            return '_' + name.split('.')[0];
+          })[0];
+
+        log(chalk.white('Building partial ->'), chalk.bold(componentName));
+
+        // Filename with path to dist dir
+        const fileName = DIST_DIR + '/' + componentName + outputMode;
+        // Require component
+        const component = require(file);
+        // Call it's render function
+        const html = component({}, assets);
+
+        // Write file
+        fs.writeFileSync(fileName, html);
+        if (i === fl) {
+          resolve({ message: 'Finished html assets' });
+        }
+      });
+    });
+  });
+
+  const cssPromise = new Promise((resolve, reject) => {
+
+    glob(cssglob, (err, files) => {
+      const fl = files.length - 1;
+      files.forEach((file, i) => {
+        const componentName = file.split('/')
+          .filter((item, i, arr) => i === arr.length - 1)
+          .map(name => {
+
+            // Write filename with '_' prefix 
+            // for middleman partials use case
+            return '_' + name.split('.')[0];
+          })[0];
+
+        const cssContent = fs.readFileSync(file, "utf8");
+
+        const result = sass.render({
+          file: file,
+          includePaths: [scssResolvePath]
+        }, (err, result) => {
+          if (err) { reject(err) }
+
+          fs.writeFileSync(DIST_DIR + '/' + componentName + '.css', result.css.toString());
+        });
+        if (i === fl) {
+          resolve({ message: 'Finished CSS assets' });
+        }
+      })
+    });
+  });
+
+  Promise.all([htmlPromise, cssPromise]).then((data) => {
+    resolve('completed');
+  });
+});
+
+
+buildAssets.then(data => {
+  bar.complete = true;
+})
+
+module.exports = buildAssets;
--- a/docs/algolia-frontend-components/build/development.js
+++ b/docs/algolia-frontend-components/build/development.js
@ -0,0 +1,15 @@
+const fs = require('fs');
+const path = require('path');
+const glob = require('glob');
+const buildAssets = require('./build.js');
+
+const COMPONENT_DIR = path.resolve(__dirname, './../components');
+const FILE_GLOB = COMPONENT_DIR + "/**/*";
+
+glob(FILE_GLOB, (err, files) => {
+  files.forEach(file => {
+    fs.watch(file, (eventType, filename) => {
+      buildAssets();
+    });
+  })
+});
--- a/docs/algolia-frontend-components/build/index.html
+++ b/docs/algolia-frontend-components/build/index.html
@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Document</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />
+  <script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<body>
+
+${require('./../components/communityHeader/communityHeader.html.js')({
+  menu:{
+    community: {
+      "dropdownItems": [
+      {
+        "name": "React InstantSearch",
+        "url": "https://community.algolia.com/instantsearch.js/react",
+        "logo": "wordpress",
+        "backgroundColor": "linear-gradient(to bottom left, #2C5EE2 0%, #17204F 150%)"
+      },
+      {
+        "name": "instantsearch.js",
+        "url": "https://community.algolia.com/instantsearch.js/",
+        "logo": "https://community.algolia.com/img/logo-is.svg",
+        "backgroundColor": "#385D72"
+      },{
+          "name": "Shopify",
+          "url": "https://community.algolia.com/shopify",
+          "logo": "shopify",
+          "backgroundColor": "linear-gradient(to bottom left, #29D98D, #03A8F6 450%)"
+      },
+      {
+        "name": "Helper.js",
+        "url": "https://community.algolia.com/algoliasearch-helper-js/",
+        "logo": "https://community.algolia.com/img/logo-helper.svg",
+        "backgroundColor": "#FDBD57"
+      },{
+        "name": "wordpress",
+        "url": "https://community.algolia.com/wordpress",
+        "logo": "https://community.algolia.com/wordpress/img/icons/wp-icon.svg",
+        "backgroundColor": "linear-gradient(to bottom right, #4041B2, #516ED1)"
+      },
+      ]
+    }
+  },
+  sideMenu:[
+    { name: "Test", dropdownItems: [ {name: "test" },{name: "test2" }]},
+    { name: "Test", dropdownItems: [ {name: "test" },{name: "test2" }]},
+    { name: "Github", image:" <img src='https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png'/>", dropdownItems: [ {name: "Magento 1"}, {name: "Magento2"}]}
+  ]
+}, assets)}
+
+</body>
+</html>
--- a/docs/algolia-frontend-components/build/preview.js
+++ b/docs/algolia-frontend-components/build/preview.js
@ -0,0 +1,12 @@
+
+import base from './../stylesheets/_base.scss';
+import css from './../components/communityHeader/communityHeader.scss';
+import communityHeader from './../components/communityHeader/communityHeader';
+
+window.addEventListener('load', () => {
+  var header = new communityHeader({
+    apiKey: '52641df1ce4919ba42eb84595f4825c7',
+    indexName: 'wordpress_algolia',
+    inputSelector: '#searchbox'
+  });
+});
--- a/docs/algolia-frontend-components/build/serve.js
+++ b/docs/algolia-frontend-components/build/serve.js
@ -0,0 +1,81 @@
+const webpack = require('webpack');
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const server = require('webpack-dev-server');
+
+process.env.webpack = true;
+
+let a = require('./../build/assets');
+
+const plugins = [
+  new webpack.HotModuleReplacementPlugin(),
+  new HtmlWebpackPlugin({
+    template: path.join(process.cwd(), '/build/index.html'),
+    inject: true,
+  }),
+  new webpack.DefinePlugin({
+    'assets': JSON.stringify(a)
+  }),
+]
+
+const config = {
+  entry: [
+    path.join(process.cwd(),'build/preview.js')
+  ],
+
+  output: {
+    path: path.resolve(process.cwd(), '/'),
+    publicPath: '/',
+    filename: '[name].js'
+  },
+
+  module: {
+
+    rules: [
+      {
+        test: /\.(js)$/,
+        exclude: [
+          /node_modules/
+        ],
+        loader: 'babel-loader',
+      }, 
+      { 
+        test: /\.svg$/,
+        use: 'raw-loader'
+      },
+      {
+        test: /\.scss$/,
+        use: [ {loader:'style-loader'}, {loader: 'css-loader'}, {loader:'sass-loader'}]
+      },
+      {
+        test: /\.html$/,
+        use: [
+          {loader: 'html-loader', options: { interpolate: true}}
+        ]
+      },
+      {
+        test: /\.json$/,
+        loader: 'json-loader',
+      }
+    ]
+  },
+
+  resolve: {
+    modules: ['.', 'node_modules', process.cwd()],
+    extensions: [
+      '.js',
+      '.scss',
+      '.svg'
+    ]
+  },
+
+  plugins: plugins,
+
+  devServer: {
+    historyApiFallback: true,
+    hot: true,
+    inline: true
+  },
+}
+
+module.exports = config;
--- a/docs/algolia-frontend-components/components/communityHeader/communityHeader.example.json
+++ b/docs/algolia-frontend-components/components/communityHeader/communityHeader.example.json
@ -0,0 +1,69 @@
+{
+  "menu": {
+    "community": {
+      "style": "widelist",
+      "view": "integrations",
+      "label": "",
+      "caret": "",
+      "dropdownItems": [{
+        "name": "React InstantSearch",
+        "url": "https://community.algolia.com/instantsearch.js/react",
+        "logo": "InstantSearchReact",
+        "backgroundColor": "linear-gradient(to bottom left, #2C5EE2 0%, #17204F 150%)"
+      }, {
+        "name": "Wordpress",
+        "url": "https://community.algolia.com/wordpress",
+        "logo": "https://community.algolia.com/wordpress/img/icons/wp-icon.svg",
+        "backgroundColor": "linear-gradient(to bottom right, #4041B2, #516ED1)"
+      }, {
+        "name": "Autocomplete.js",
+        "url": "https://github.com/algolia/autocomplete.js",
+        "logo": "https://community.algolia.com/img/illus-autocomplete.svg",
+        "backgroundColor": "#00587f"
+      }, {
+        "name": "instantsearch.js",
+        "url": "https://community.algolia.com/instantsearch.js/",
+        "logo": "https://community.algolia.com/img/logo-is.svg",
+        "backgroundColor": "#385D72"
+      }, {
+        "name": "Helper.js",
+        "url": "https://community.algolia.com/algoliasearch-helper-js/",
+        "logo": "https://community.algolia.com/img/logo-helper.svg",
+        "backgroundColor": "#FDBD57"
+      }, {
+        "name": "Magento",
+        "url": "https://community.algolia.com/magento/",
+        "logo": "https://res.cloudinary.com/hilnmyskv/image/upload/v1477318624/magento-icon-white.svg",
+        "backgroundColor": "linear-gradient(to bottom right, #ed9259, #e76d22)"
+      }]
+    },
+    "project": {
+      "view": "links",
+      "label": "Shopify plugin",
+      "logo": "",
+      "caret": "",
+      "dropdownItems": []
+    }
+  },
+  "mobileMenu": [{
+    "name": "Install",
+    "url": "",
+    "image": "",
+    "target": ""
+  }],
+  "sideMenu": [{
+    "name": "Install",
+    "url": "https://community.algolia.com/shopify/try.html",
+    "image": "",
+    "target": "",
+    "dropdownItems": []
+  }],
+  "docSearch": {
+    "input_selector": "searchbox",
+    "input_selector_placeholder": "Search the docs",
+    "input_mobile_selector": "mobile-searchbox",
+    "input_search_icon": "<img src='/images/icons/search-icon.svg'/>",
+    "input_cancel_icon": "<img src='/images/icons/cancel-icon.svg'/>",
+    "input_open_on_init": false
+  }
+}
--- a/docs/algolia-frontend-components/components/communityHeader/communityHeader.html.js
+++ b/docs/algolia-frontend-components/components/communityHeader/communityHeader.html.js
@ -0,0 +1,228 @@
+let data = {};
+const merge = require('deepmerge');
+let assets = require('./../../build/assets');
+
+try {
+  data = require('./communityHeader.data.json');
+} catch (e) {
+  data = require('./communityHeader.example.json');
+}
+
+/**
+ * Render item template
+ * @param  {[type]} t [template item]
+ * @return {[String]} [rendered template]
+ */
+const renderDropdownItem = (done, t, assets) => {
+  const isSvgTile = assets[t.logo] ? assets[t.logo] : false;
+  return done += `
+  <li>
+    <div class="dropdown-item">
+      <a href="${t.url || "#"}" ${t.target ? `target=${t.target}`: ""}>
+        ${isSvgTile ? `<span class="item-icon" style="background: ${t.backgroundColor}">${isSvgTile}</svg></span>` : `<span class="item-icon" style="background: ${t.backgroundColor}"><img src="${t.logo || ""}" alt="${t.name || ""}"/></span>`}
+        <h4>${t.name}</h4>
+      </a>
+    </div>
+  </li>`;
+}
+
+const renderDropdownList = (data, assets) => {
+
+  let entireList = "";
+
+  Object.keys(data).forEach(list => {
+    const listItem = data[list];
+    const listArray = listItem.dropdownItems;
+    let listString = `
+    <div class="algc-dropdownroot__section">
+      <div class="algc-dropdownroot__content" data-dropdown-content="${listItem.view.toLowerCase()}">
+      <ul class="algc-dropdownroot__${listItem.style || 'widelist'}">`;
+
+    listString += listArray.reduce((prev, next, i) => renderDropdownItem(prev, next, assets), "");
+    listString +=
+      `</ul>
+        <div class="algc-dropdownroot__footer">
+          <a href="https://discourse.algolia.com/?utm_medium=social-owned&utm_source=communityHeader">
+            <span style="font-weight:bold;">Community Forum</span>
+          </a>
+        </div>
+        </div>
+        </div>`;
+
+    entireList += listString;
+  });
+  return entireList;
+}
+
+const renderMenu = ({ label, type, dropdownItems, logo, view, url, target }) => {
+    const link = (!dropdownItems || dropdownItems.length === 0) ? "#" : url
+    return `
+    <li class="algc-navigation__li">
+      <a class='algc-badge algc-navigation__navitem' href='${url} ${target ? `target=${target}`: ""}'
+       data-dropdown="${ view.toLowerCase() }" data-enabledropdown="${ dropdownItems.length > 0 }">
+            <svg class="algc-arrowseparator" viewBox="0 0 18 35" xmlns="http://www.w3.org/2000/svg"><g id="Symbols" fill="none" fill-rule="evenodd"><g id="community/header" fill="#3369E6"><g id="Group-13"><g id="Group-2"><path id="Combined-Shape-Copy" d="M1.8537 34.7643l15.5597-17.268L1.8537 0H0l15.5597 17.4964L0 34.7644z"/></g></g></g></g></svg>
+            ${logo !== "" ? logo : ""}
+            ${label ? `<span>${ label }</span>`: ""}
+      </a>
+    </li>`
+}
+
+const renderMenuList = (data) => {
+  let entireList = "";
+  const listItem = data["project"];
+  entireList += renderMenu(listItem);
+
+  return entireList;
+}
+
+const renderDocSearch = (docSearch, assets) => {
+  if(!docSearch) return ""
+
+  return `
+    <div class='algc-menu__search'>
+      <div class='algc-menu__search--holder${docSearch.input_open_on_init ? ` open` : ""}'>
+        <div class='algc-search__input algc-search__input--docsearch'>
+          <input id='${docSearch.input_selector}' placeholder='${docSearch.input_selector_placeholder}' type='search'>
+          <button id='search'>
+            ${assets['searchIcon']}
+          </button>
+          <button id='cancel'>
+            ${assets['searchCloseIcon']}
+          </button>
+        </div>
+      </div>
+    </div>`;
+}
+
+const renderRightList = (sideList) => {
+  if(!sideList.length) return;
+  let markup = "<ul class='algc-menu__list'>"
+
+  markup += sideList.reduce((prev,next) => renderRightListItem(prev,next),"");
+  markup += "</ul>"
+
+  return markup;
+}
+
+const renderRightListItem = (prev, data) => {
+  if(data.image){
+    return prev += `
+      <li class="algc-menu__list__item ${data.dropdownItems && data.dropdownItems.length ? "algc-menu--hassublist" : ""}">
+        <a href="${data.url || "#"}"
+          ${data.target ? `target=${data.target}`: ""}
+          class="${data.dropdownItems && data.dropdownItems.length ? "algc-menu--sublistlink" : ""}">
+          ${data.image}
+          ${ renderGlyph(data) }
+        </a>
+        ${renderSubList(data.dropdownItems)}
+      </li>`;
+  } else {
+    return prev += `
+      <li class="algc-menu__list__item ${data.dropdownItems && data.dropdownItems.length ? "algc-menu--hassublist" : ""}">
+        <a href="${data.url || "#"}" ${data.target ? `target=${data.target}`: ""} class="${data.dropdownItems && data.dropdownItems.length ? "algc-menu--sublistlink" : ""}">
+          ${data.name}
+          ${ renderGlyph(data) }
+        </a>
+        ${renderSubList(data.dropdownItems)}
+      </li>`
+  }
+}
+
+const renderGlyph = (data) => {
+  if(data.dropdownItems && data.dropdownItems.length){
+    return '<span class="algc-glyph">▼</span>'
+  } else {
+    return "";
+  }
+}
+
+const renderSubList = (subList) => {
+  if(!subList || !subList.length) return "";
+  let markup = "<ul class='algc-menu__sublist'>";
+  markup += subList.reduce((prev,next) => renderSubListItem(prev,next),"");
+  markup += "</ul>";
+
+  return markup;
+}
+
+const renderSubListItem = (prev, data) => {
+  return prev += `
+    <li>
+      <a href="${data.url || "#"}" ${data.target ? `target=${data.target}`: ""}>${data.name}</a>
+    </li>
+  `
+}
+
+const renderMobileMenu = (sideList) => {
+  if(!sideList.length) return;
+  let markup = "<div class='algc-mobilemenu'><div class='algc-mobilemenuwrapper'><ul class='algc-mobilemenulist'>"
+  markup += sideList.reduce((prev,next) => renderMobileMenuItem(prev,next),"");
+  markup += "</ul></div></div>"
+  return markup;
+}
+
+const renderMobileMenuItem = (prev, data) => {
+  if(data.image){
+     return prev += `
+      <li class="algc-mobilemenu__item">
+        <a href="${data.url || "#"}" ${data.target ? `target=${data.target}`: ""}>
+          ${data.image}
+          ${data.name ? data.name : ""}
+        </a>
+      </li>`;
+  } else {
+    return prev += `
+      <li class="algc-mobilemenu__item">
+        <a href="${data.url || "#"}" ${data.target ? `target=${data.target}`: ""}>
+          ${data.name}
+        </a>
+      </li>`
+  }
+}
+
+module.exports = function(paramData = {}, assetParams = {}){
+  const d = merge(data, paramData);
+  const a = merge(assets, assetParams);
+  return `<!-- Start community header -->
+    <nav class='algc-navigation'>
+      <div class='algc-navigation__container'>
+        <div class='algc-mainmenu'>
+          <ul class='algc-navigation__brands'>
+            <li class='algc-navigation__li algc-navigation__li--algolia'>
+              <a href='https://www.algolia.com/'>
+                ${a['algoliaLogo']}
+              </a>
+            </li>
+            <li class='algc-navigation__li algc-navigation__li--community'>
+              <a href='https://community.algolia.com/' data-enabledropdown="true" data-dropdown="integrations">
+                <svg class="algc-arrowseparator" viewBox="0 0 18 35" xmlns="http://www.w3.org/2000/svg"><g id="Symbols" fill="none" fill-rule="evenodd"><g id="community/header" fill="#3369E6"><g id="Group-13"><g id="Group-2"><path id="Combined-Shape-Copy" d="M1.8537 34.7643l15.5597-17.268L1.8537 0H0l15.5597 17.4964L0 34.7644z"/></g></g></g></g></svg>
+                ${a['communityLogo']}
+                ${a['iconSeparator']}
+              </a>
+            </li>
+            ${renderMenuList(d.menu)}
+          </ul>
+
+          <div class='algc-navigation__menu'>
+            ${renderDocSearch(d.docSearch, a)}
+            ${renderRightList(d.sideMenu)}
+            <button class='algc-openmobile'><span></span></button>
+          </div>
+          
+          <div class='algc-navigation__dropdown-holder'>
+            <div class='algc-dropdownroot notransition'>
+              <div class='algc-dropdownroot__dropdownbg'></div>
+              <div class='algc-dropdownroot__dropdownarrow'></div>
+              <div class='algc-dropdownroot__dropdowncontainer'>
+                ${renderDropdownList(d.menu, a)}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      ${renderMobileMenu(d.mobileMenu)}
+
+    </nav>
+    <!-- End community_header --> `;
+}
--- a/docs/algolia-frontend-components/components/communityHeader/communityHeader.js
+++ b/docs/algolia-frontend-components/components/communityHeader/communityHeader.js
@ -0,0 +1,280 @@
+/**
+ * Main header function with docsearch
+ * @param  {Object} docSearch config
+ */
+
+class communityHeader {
+
+  constructor(docSearchCredentials, docSearch) {
+    this.docSearchCredentials = docSearchCredentials;
+    this.docSearch = docSearch || null;
+
+    this.menuState = {
+      isOpen: false,
+      isOpenMobile: false
+    }
+
+    this.INIT_VAL = {
+      WIDTH: 490,
+      HEIGHT: 360
+    }
+
+    this.disableTransitionTimeout;
+
+    this.searchIcon = document.querySelector('#search');
+    this.cancelIcon = document.querySelector('#cancel');
+    this.searchInputContainer = document.querySelector('.algc-search__input');
+    this.searchContainer = this.searchInputContainer ? this.searchInputContainer.parentNode : null;
+    this.navRoot = document.querySelector('.algc-dropdownroot');
+    this.dropdownRoot = document.querySelector('.algc-navigation__dropdown-holder');
+    this.navItems = document.querySelectorAll('a[data-enabledropdown="true"]');
+    this.navContainer = document.querySelector('.algc-dropdownroot__dropdowncontainer');
+    this.menuContainer = document.querySelector('.algc-navigation__container');
+    this.navBg = document.querySelector('.algc-dropdownroot__dropdownbg');
+    this.navArrow = document.querySelector('.algc-dropdownroot__dropdownarrow');
+    this.dropDownContainer = document.querySelector('.algc-dropdownroot__dropdowncontainer');
+    this.menuTriggers = document.querySelectorAll('[data-enabledropdown="true"]');
+    this.mobileMenuButton = document.querySelector('.algc-openmobile ');
+    this.mobileMenu = document.querySelector('.algc-mobilemenu');
+    this.subList = document.querySelectorAll('.algc-menu--sublistlink');
+    this.subListHolders = [...this.subList].map(node => node.parentNode);
+    this.menuDropdowns = {};
+
+    [].forEach.call(document.querySelectorAll('[data-dropdown-content]'), (item) => {
+      this.menuDropdowns[item.dataset.dropdownContent] = {
+        parent: item.parentNode,
+        content: item
+      }
+    });
+
+    this.shouldInitDocSearch = this.shouldInitDocSearch.bind(this);
+    this.docSearchInit = this.checkDocSearch(docSearch);
+    this.enableDocSearch = this.verifyDocSearchParams(docSearchCredentials);
+    this.hasDocSearchRendered = document.querySelector('.algc-navigation .algc-search__input--docsearch');
+    this.triggerMenu = this.triggerMenu.bind(this);
+    this.shouldTriggerMenu = this.shouldTriggerMenu.bind(this);
+    this.closeMenu = this.closeMenu.bind(this);
+    this.toggleMobileMenu = this.toggleMobileMenu.bind(this);
+    this.docSearchToggling = this.docSearchToggling.bind(this);
+    this.initDocSearchStrategy = this.initDocSearchStrategy.bind(this);
+    this.openSublist = this.openSublist.bind(this);
+    this.closeSubLists = this.closeSubLists.bind(this);
+    this.bindListeners = this.bindListeners.bind(this);
+
+    this.calculatePosition = this.calculatePosition.bind(this);
+
+    this.verifyDocSearchParams();
+    this.shouldInitDocSearch();
+    this.initDocSearchStrategy();
+    this.bindListeners();
+  }
+
+  calculatePosition(sourceNode) {
+    const box = sourceNode.getBoundingClientRect();
+    const realWidth = sourceNode.offsetWidth;
+    const realHeight = sourceNode.offsetHeight;
+
+    return {
+      left: box.left,
+      top: box.top,
+      width: box.width,
+      height: box.height,
+      realWidth: realWidth,
+      realHeight: realHeight,
+      center: box.left + box.width / 2
+    }
+  }
+
+  shouldInitDocSearch() {
+    if (!this.enableDocSearch && this.hasDocSearchRendered) {
+      throw new Error('You need to pass docSearch: { apiKey, indexName, inputSelector } to communityHeader function in order to initialise docSearch');
+    }
+  }
+
+  checkDocSearch(docSearch = false) {
+    if (docSearch) return docSearch;
+
+    if (typeof window.docsearch === "function" || typeof docsearch === "function") {
+      return docsearch;
+    }
+  }
+
+  verifyDocSearchParams(docSearchCredentials) {
+    return (docSearchCredentials &&
+      docSearchCredentials.apiKey &&
+      docSearchCredentials.indexName &&
+      docSearchCredentials.inputSelector) ? true : false;
+  }
+
+  triggerMenu(event) {
+
+    const dropdown = event.target.dataset.dropdown;
+    const newTarget = this.menuDropdowns[dropdown].content;
+    const newContent = this.menuDropdowns[dropdown].parent;
+
+    const navItem = this.calculatePosition(event.target);
+    const newTargetCoordinates = this.calculatePosition(newTarget);
+    const menuContainerOffset = this.calculatePosition(this.menuContainer);
+    let leftDistance;
+
+    const scaleFactors = {
+      X: newTargetCoordinates.realWidth / this.INIT_VAL.WIDTH,
+      Y: newTargetCoordinates.realHeight / this.INIT_VAL.HEIGHT
+    }
+
+    leftDistance = (navItem.center - menuContainerOffset.left) + "px";
+
+    if(menuContainerOffset.left < 20){
+      leftDistance = "calc(50% - 36px)"
+    }
+
+    this.navBg.style.cssText = `
+      transform: translateX(${leftDistance}) scale(${scaleFactors.X}, ${scaleFactors.Y})`;
+
+    this.navArrow.style.cssText = `
+      transform: translateX(${leftDistance}) rotate(45deg)`;
+
+    this.dropDownContainer.style.cssText = `
+      transform: translateX(${leftDistance});
+      width: ${newTargetCoordinates.realWidth}px;
+      height: ${newTargetCoordinates.realHeight + 10}px;`;
+
+    this.dropdownRoot.style.pointerEvents = "auto";
+
+    Object.keys(this.menuDropdowns).forEach(key => {
+      if (key === dropdown) {
+        this.menuDropdowns[key].parent.classList.add('active');
+      } else {
+        this.menuDropdowns[key].parent.classList.remove('active');
+      }
+    })
+
+    if (!this.menuState.isOpen) {
+      setTimeout(() => {
+        this.navRoot.className = "algc-dropdownroot activeDropdown";
+      }, 50);
+    }
+
+    window.clearTimeout(this.disableTransitionTimeout);
+    this.menuState.isOpen = true;
+  }
+
+  shouldTriggerMenu(event) {
+    if(this.menuState.isOpen) { 
+      this.triggerMenu(event);
+    } else {
+      this.triggerMenuTimeout = setTimeout(()=>{
+        this.triggerMenu(event);
+      }, 200);
+    }
+  }
+
+  closeMenu(event) {
+    window.clearTimeout(this.triggerMenuTimeout);
+    this.menuState.isOpen = false;
+    this.disableTransitionTimeout = setTimeout(() => {
+      this.dropdownRoot.style.pointerEvents = "none";
+      this.navRoot.className = "algc-dropdownroot notransition"
+    }, 50);
+  }
+
+  toggleMobileMenu(event) {
+    this.mobileMenuButton.classList.toggle('algc-openmobile--open');
+    this.mobileMenu.classList.toggle('algc-mobilemenu--open');
+  }
+
+  // Search
+  docSearchToggling() {
+    this.searchInput = document.querySelector(this.docSearchCredentials.inputSelector);
+    const openSearchInput = () => {
+      this.searchContainer.classList.add('open');
+      this.searchInput.focus();
+    }
+
+    const closeSearchInput = () => {
+      this.searchInput.blur();
+      this.searchContainer.classList.remove('open');
+    }
+
+    const emptySearchInput = () => {
+      if (this.searchInput.value !== '') {
+        this.searchInput.value = '';
+      } else {
+        closeSearchInput();
+      }
+    }
+    this.searchInput.setAttribute('value', '');
+    this.searchIcon.addEventListener('click', openSearchInput);
+    this.cancelIcon.addEventListener('click', emptySearchInput);
+  };
+
+  initDocSearch() {
+    this.docSearchToggling();
+    this.docSearchInit(this.docSearchCredentials);
+  }
+
+  initDocSearchStrategy() {
+    if (this.enableDocSearch && typeof this.docSearchInit === "function") {
+      this.initDocSearch();
+
+    } else if (this.docSearch === "lazy") {
+
+      const docSearchScript = document.createElement('script');
+      docSearchScript.type = 'text/javascript';
+      docSearchScript.async = true;
+      document.body.appendChild(docSearchScript);
+
+      docSearchScript.onload = () => {
+        this.docSearchInit = docsearch;
+        this.initDocSearch();
+      };
+
+      docSearchScript.src = "https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js";
+    }
+  }
+
+  openSublist(node) {
+    const parent = node.parentNode;
+    this.subListHolders.forEach(holder => {
+      if (holder === parent && !parent.classList.contains('open')) {
+        holder.classList.add('open');
+      } else {
+        holder.classList.remove('open');
+      }
+    })
+  }
+
+  closeSubLists(event) {
+    this.subListHolders.forEach(holder => holder.classList.remove('open'));
+  }
+
+  bindListeners() {
+    var that = this;
+    this.subList.forEach(link => {
+      link.addEventListener('click', function(event){
+        event.preventDefault();
+        event.stopPropagation();
+        that.openSublist(this);
+      });
+    });
+
+    this.menuTriggers.forEach(item => {
+      item.addEventListener('mouseenter', this.shouldTriggerMenu);
+      item.addEventListener('focus', this.triggerMenu);
+    });
+
+    this.navItems.forEach(item => {
+      item.addEventListener('mouseleave', this.closeMenu);
+    });
+
+    this.navContainer.addEventListener('mouseenter', () => {
+      clearTimeout(this.disableTransitionTimeout);
+    });
+
+    this.mobileMenuButton.addEventListener('click', this.toggleMobileMenu);
+    document.addEventListener('click', this.closeSubLists);
+    document.querySelector('.algc-dropdownroot__dropdowncontainer').addEventListener('mouseleave', this.closeMenu);
+  }
+}
+
+module.exports = communityHeader
--- a/docs/algolia-frontend-components/components/communityHeader/communityHeader.scss
+++ b/docs/algolia-frontend-components/components/communityHeader/communityHeader.scss
@ -0,0 +1,957 @@
+@import "./../../stylesheets/_variables.scss";
+@import "./../../stylesheets/_functions.scss";
+@import "./../../stylesheets/_mixins.scss";
+
+$nav-height: 56px;
+$nav-z-index: 50;
+$nav-background: $deep-cove;
+$nav-background-medium: mix($nav-background, #fff, 96%);
+$nav-background-light: mix($nav-background, #fff, 92%);
+
+.algc-navigation {
+  top: 0;
+  left: 0;
+  width: 100%;
+  color: #fff;
+  padding: 0 1em;
+  z-index: $z-top;
+  position: fixed;
+  perspective: 2000px;
+  transform-style: preserve-3d;
+  background: $nav-background;
+  font-size: 1em;
+  will-change: transform;
+
+  @media (max-width: $breakpoint-sm){
+    padding: 0 .5em;
+  }
+
+  .algc-mainmenu {
+    position: relative;
+  }
+
+  .algc-navigation__container{
+    margin: 0 auto;
+    max-width: $container-max-width;
+  }
+
+  a {
+    text-decoration: none;
+  }
+}
+
+.algc-navigation__brands {
+  height: $nav-height;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  float: left;
+  font-weight: $light;
+  display: flex;
+  align-items:center;
+  z-index: $z-1;
+  position: relative;
+
+  a {
+    text-decoration: none;
+    color: $white;
+
+    &:hover {
+      color: $white;
+    }
+  }
+
+  &:hover,
+  &:visited {
+    color: white;
+  }
+
+  img,svg {
+    max-width: none;
+    vertical-align: middle;
+  }
+
+  @media (max-width: $breakpoint-md) {
+    font-size: .8em;
+  }
+
+  .algc-navigation__li {
+    float: left;
+    text-align: center;
+    min-height: 33px;
+    display: flex;
+    align-items: center;
+
+    @media (min-width: $breakpoint-md) and (max-width: $breakpoint-lg) {
+
+      &:nth-child(2) {
+        padding-left: 0;
+
+        img,svg {
+          margin-left: 0px;
+        }
+
+        .algc-arrowseparator {
+          margin-left: 4px;
+        }
+      }
+    }
+
+    @media (max-width: $breakpoint-lg) {
+
+      &:nth-child(2) {
+        a { padding-left: 0; }
+        .algc-arrowseparator { display: none; }
+      }
+    }
+
+    @media (max-width: $breakpoint-sm) {
+
+      &:nth-child(2) {
+        width: 30px;
+        overflow: hidden;
+      }
+    }
+  }
+
+  a {
+    position: relative;
+    display: block;
+    padding-right: 12px;
+
+    @media (max-width: $breakpoint-lg) {
+      padding: 0 1.2em;
+    }
+
+    @media (max-width: $breakpoint-sm) {
+      padding: 0 .8em
+    }
+  }
+
+  .algc-navigation__li--algolia {
+
+    a {
+      padding-left: 0;
+    }
+    
+    .algolia-logo {
+      width: auto;
+      height: 23px;
+    }
+
+    @media (max-width: $breakpoint-lg) {
+      display: none;
+    }
+  }
+
+  .algc-navigation__li--community {
+
+    a {
+      height: 33px;
+    }
+
+    .algolia-community-logo{
+      width: auto;
+      height: 30px;
+    }
+  }
+}
+
+//---------------------------
+//  Dropdown starts here
+//---------------------------
+.algc-navigation__dropdown-holder {
+  position: absolute;
+  top: $nav-height - 14px;
+  left: 25px;
+  max-width: 490px;
+  width: 100%;
+  height: 800px;
+  -webkit-perspective: 500px;
+  perspective: 500px;
+  pointer-events: none;
+  font-size: 1.2em;
+
+  @media (max-width: $breakpoint-sm) {
+    left:0;
+    max-width: 100%;
+  }
+}
+
+.algc-dropdownroot {
+  top: 4px;
+  width: 100%;
+  position: absolute;
+  opacity: 0;
+  transform-origin: 50% -50px;
+  transition-property: transform, opacity;
+  transition-duration: .25s;
+  will-change: transform, opacity;
+  pointer-events: none;
+  z-index: $z-top;
+  transform: rotateX(-15deg) translate(-50%, 0%);
+
+  &.notransition {
+
+    .algc-dropdownroot__dropdowncontainer,
+    .algc-dropdownroot__dropdownbg,
+    .algc-dropdownroot__section,
+    .algc-dropdownroot__dropdownarrow {
+      transition: none;
+    }
+  }
+
+  &.activeDropdown {
+    opacity: 1;
+    transform: translate(-50%, 0);
+    pointer-events: all;
+
+    .algc-dropdownroot__dropdownbg {
+      opacity: 1;
+      transform: none;
+      transform-origin: 50% 0;
+    }
+  }
+
+  .algc-dropdownroot__dropdownbg {
+    left: 0;
+    top: 10px;
+    box-shadow: 0 50px 100px rgba(50, 50, 93, .1), 0 15px 35px rgba(50, 50, 93, .15), 0 5px 15px rgba(0, 0, 0, .1);
+    border-radius: 4px;
+    transform-origin: 50% 0;
+    background-color: #FFF;
+    transition-property: transform, opacity;
+    transition-duration: .25s;
+    position: absolute;
+    width: 490px;
+    height: 360px;
+    will-change: transform, opacity;
+  }
+
+  .algc-dropdownroot__dropdownarrow {
+    left: 50%;
+    top: 6px;
+    background-color: #FFF;
+    box-shadow: -3px -3px 5px rgba(82, 95, 127, .04);
+    will-change: transform, opacity;
+    transition-property: transform, opacity;
+    transition-duration: .25s;
+    transform: rotate(45deg) translate(-50%, 0);
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    border-radius: 2px;
+    pointer-events: none;
+  }
+
+  .algc-dropdownroot__dropdowncontainer {
+    margin: 0 auto;
+    position: relative;
+    overflow: hidden;
+    will-change: transform, width, height;
+    transition-property: transform, width, height;
+    transition-duration: .25s;
+  }
+  
+  @media (max-width: $breakpoint-sm){
+
+    transform: translate(0,0) rotateX(-15deg);
+
+    &.activeDropdown {
+      transform: rotateX(0deg) translate(0,0) !important;
+    }
+
+    .algc-dropdownroot__dropdownbg {
+      width: 100%;
+    }
+
+    .algc-dropdownroot__widelist {
+      width: 100%;
+    }
+
+    .algc-dropdownroot__content {
+      width: 100% !important;
+    }
+
+    .algc-dropdownroot__section {
+      width:100%;
+    }
+
+    .algc-dropdownroot__dropdowncontainer {
+      width: 100% !important;
+      max-width: 100%;
+      transform: translate(0,0) !important;
+    }
+  }
+}
+
+
+.algc-dropdownroot__section {
+  position: absolute;
+  left: 0;
+  top: 0;
+  opacity: 0;
+  will-change: transform, opacity;
+  transition-property: transform, opacity;
+  transition-duration: .25s;
+
+  &.active {
+    opacity: 1;
+    transform: translateX(0);
+    z-index: $z-1
+  }
+
+  &.right {
+    transform: translateX(150px);
+  }
+
+  &.left {
+    transform: translateX(-150px);
+  }
+
+  .algc-dropdownroot__content {
+    position: absolute;
+    top: 10px;
+    left: 0;
+    background: #fff;
+    border-radius: 4px;
+    overflow: hidden;
+  }
+}
+
+.algc-dropdownroot__widelist {
+  display: flex;
+  flex-wrap: wrap;
+  list-style-type: none;
+  padding: 0;
+  width: 450px;
+  padding: em(10) em(20);
+  margin: 0;
+  background-color: $titan-white;
+
+  li {
+    flex: 50%;
+    border-radius: 3px;
+    margin: .5em auto;
+    
+    a {
+      display: flex;
+      flex-wrap: wrap;
+      flex-direction: row;
+      align-items: center;
+      color: #333333;
+      background-color: $titan-white;
+      border-radius: 4px;
+      transition: background 160ms ease;
+
+      &:hover {
+        color: darken(#333333, 10%);
+        background-color: $athens-gray;
+      }
+    }
+
+    h4 {
+      text-align: center;
+      text-align: left;
+      margin: 0;
+      font-size: $text-sm;
+    }
+
+    .item-icon {
+      width: 42px;
+      height: 42px;
+      margin: 8px;
+      border-radius: 4px;
+      text-align:center;
+      position: relative;
+
+      img,
+      svg {
+        max-width: 60%;
+        transition: transform 0.2s ease 0.15s;
+      }
+    }
+
+    svg,
+    img {
+      position: absolute;
+      left: 50%;
+      top:50%;
+      max-width: 32px;
+      width: 100%;
+      height: auto;
+      transform: translate(-50%,-50%);
+    }
+  }
+}
+
+.algc-dropdownroot__footer {
+  text-align: center;
+  font-size: $text-sm;
+  transition: filter 0.2s ease, opacity 0.2s ease;
+  will-change: filter, opacity;
+
+  a {
+    padding: .8em 0;
+    display: block;
+    color: $nav-background;
+    opacity: 0.8;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  img,
+  svg {
+    vertical-align: middle;
+  }
+}
+
+.algc-dropdownroot__links {
+
+  list-style-type: none;
+  padding: em(10) em(20);
+  display: flex;
+  flex-wrap: wrap;
+  width: 290px;
+  margin: 0;
+
+  li {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    flex: 1 0 50%;
+    padding: em(10) em(10);
+
+    p {
+      margin: 0;
+    }
+
+    img,
+    svg {
+      margin-right: 5px;
+      height: 20px;
+      width: 20px;
+    }
+  }
+}
+
+.algc-navigation__menu {
+  float: right;
+  height: $nav-height;
+  line-height: $nav-height;
+  font-weight: $light;
+  z-index: $z-2;
+
+  .algc-menu__list {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    width: auto;
+    float: left;
+    position: relative;
+    z-index: $z-1;
+
+    a {
+      text-decoration: none;
+      color: $white;
+    }
+
+    @media (max-width: $breakpoint-md) {
+      display: none;
+    }
+
+    &__item {
+      position: relative;
+      height: $nav-height;
+      line-height: $nav-height;
+      display: inline-block;
+      float: left;
+
+      img,
+      svg {
+        height: $text-lg;
+        width: auto;
+      }
+
+      a {
+        padding: 0 .5em 0 .5em;
+        display: flex;
+        align-items: center;
+        height: 100%;
+      }
+    }
+
+    .algc-glyph {
+      margin-left: 1em;
+      font-size: .4em;
+    }
+
+    .algc-menu__list__item.algc-menu--hassublist.open {
+
+      .algc-menu__sublist {
+        opacity: 1;
+        transform: translate(0, 0);
+        pointer-events: auto;
+        transition: .25s;
+      }
+    }
+  }
+
+  .algc-menu__sublist {
+    pointer-events: none;
+    padding: 0;
+    position: absolute;
+    right: 0;
+    top:100%;
+    background-color: white;
+    list-style-type: none;
+    background-color: #FFF;
+    border-radius: 3px;
+    box-shadow: 0 1px 4px 0 rgba(31, 59, 93, 0.5);
+    font-size: 14px;
+    opacity:0;
+    transition: .14s;
+    transform: translate(0, 6px);
+    will-change: opacity, transform;
+    text-align: left;
+
+    &:before{
+      content: "";
+      position: absolute;
+      right: 16px;
+      top: -4px;
+      height: 12px;
+      width: 12px;
+      border-radius: 3px;
+      transform: rotate(45deg);
+      background-color: #FFF;
+    }
+
+    li:not(:last-child) {
+      border-bottom: solid 1px #eee;
+    }
+
+    li a {
+      text-transform: none;
+      margin: 0;
+      width: 100%;
+      border: none;
+      display: block;
+      padding: 1em 2em;
+      clear: both;
+      font-weight: normal;
+      line-height: 1.42857;
+      color: #333333;
+      white-space: nowrap;
+      font-size: 1em;
+
+      &:hover {
+        color: darken(#333333, 10%);
+        background-color: #f9f9f9;
+      }
+    }
+  }
+}
+
+.algc-mobilemenu{
+  display: block;
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 100%;
+  max-width: 200px;
+  padding: 64px $text-sm 0 $text-sm;
+  height: 100vh;
+  background-color: $deep-cove;
+  text-align: right;
+  font-weight: $light;
+  transform: translate(100%, 0);
+  transition: transform 140ms ease-out,
+              opacity 140ms 100ms ease-out;
+  opacity: 0;
+  will-change: transform;
+
+  a {
+    color: $white;
+  }
+  
+  &:before{
+    width:100%;
+    height:100vh;
+    position: absolute;
+    content: "";
+    left:0;
+    top: 0;
+    box-shadow: 0 0 36px 3px rgba(0, 0, 0, 0.2);
+    z-index: $z--1;
+  }  
+
+  &:after {
+    width: 100%;
+    height: 100%;
+    max-height: 40px;  
+    bottom:0;
+    left:0;
+    position: fixed;
+    content: "";
+    background-image: -webkit-linear-gradient(bottom, transparent 0%,rgba(5,15,44,1) 100%);
+  }
+
+  &--open {
+    opacity: 1;
+    transition: 360ms cubic-bezier(0.19, 1, 0.22, 1);
+    transform: translate(0, 0);
+  }
+
+  @media (min-width: $breakpoint-md) {
+    display: none;
+  }
+
+  .algc-mobilemenulist {
+    list-style-type: none;
+    padding: 0 0 40px 0;
+    margin-bottom: 0;
+    position: absolute;
+    top:74px;
+    right:0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+  }
+  
+  .algc-mobilemenu__item {
+    line-height: 2.6;
+    position: relative;
+
+    &:after {
+      bottom: 0;
+      width:100%;
+      height: 1px;
+      position: absolute;
+      content: "";
+      display: block;
+      background: linear-gradient(76deg, rgba(28,199,208,0.01) 0%,rgba(28,199,208,0) 18%, rgba(28,199,208,0.49) 46%,rgba(80,191,221,.7) 93%,rgba(125,185,232,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+    }
+
+    &:last-child {
+
+      &:after {
+        background-color: trasparent;
+      }
+    }
+  }
+
+  a {
+    padding: 0 $text-xs;
+    display: flex; 
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  img, svg {
+    height: 1em;
+    margin-right: .4em;
+  }
+}
+
+// Docsearch input
+.algc-menu__search {
+  width: auto;
+  padding: 0 12px;
+  height: $nav-height;
+  display: inline-block;
+  float: left;
+  font-size: $text-sm;
+
+  &--holder {
+    position: relative;
+    width: 32px;
+    height: $nav-height;
+  }
+
+  .algc-search__input {
+
+    button {
+      appearance: none;
+      border: none;
+      background: transparent;
+      position: absolute;
+      z-index: $z-1;
+      top: 50%;
+      bottom: 0;
+      margin: 0;
+      outline: none;
+      display: none;
+      width: 1.6em;
+      height: 1.6em;
+      transition: transform 0.28s ease;
+      transform: translate(0,-50%);
+      cursor: pointer;
+      transform: translate(0,-50%);
+
+      img,
+      svg {
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        width: 100%;
+        height: auto;
+        max-width: 16px;
+        max-height: $nav-height;
+        vertical-align: middle;
+        position: absolute;
+        margin: auto;
+        pointer-events: all;
+        transition: opacity 0.28s ease 0.15s;
+
+        @media (max-width: $breakpoint-sm) {
+          margin-top: 2px;
+        }
+
+        use {
+          fill: #fff
+        }
+      }
+
+      &#search {
+        z-index: $z-2;
+        display: block;
+      }
+
+      &#cancel {
+        z-index: $z-1;
+        display: block;
+        pointer-events: none;
+        opacity: 0;
+        right: -.35em;
+        transition: 40ms ease;
+        transform: translate(0, -40%) scale(.7);
+
+        img,
+        svg {
+          width: 12px;
+          top: 50%;
+          transform: translate(0,-50%);
+        }
+      }
+    }
+
+    // DOCSEARCH RELATED
+    input[type=search] {
+      padding: 0;
+      margin: 0 0 0 2.4em;
+      appearance: none;
+      background: transparent;
+      width: 32px;
+      max-height: 32px;
+      border: 1px solid transparent;
+      position: relative;
+      left: 0;
+      z-index: $z-1;
+      cursor: pointer;
+      transition: background 0.28s ease, transform 0.28s ease, width 0.28s ease;
+      padding: 8px;
+      outline: none;
+      font-weight: $light;
+      border-radius: 3px;
+      padding-left: 1.8em;
+      color: #fff;
+      line-height: 1.3em;
+      padding-right: 1.4em;
+    }
+  }
+
+  &--holder.open {
+    // DOCSEARCH RELATED
+    input[type="search"] {
+      background-color: rgba(white, 0.2);
+      width: 300px;
+      transform: translate(-300px);
+      outline: none;
+      cursor: auto;
+
+      #searchbox {
+        background-color: inherit !important;
+      }
+
+      @media (max-width: $breakpoint-xl){
+        transform: translate(-180px);
+        width: 180px;
+      }
+
+      @media (max-width: $breakpoint-md) and (orientation: landscape) {
+        transform: translate(-240px);
+        width: 240px;
+      }
+
+      @media (max-width: $breakpoint-sm) {
+        transform: translate(-140px);
+        width: 140px;
+      }
+
+      @media (max-width: 370px) {
+        transform: translate(-110px);
+        width: 110px;
+      }
+
+      @include placeholder {
+        color: rgba(#ffffff, 0.3);
+      }
+    }
+
+    button#search {
+      transform: translate(calc(-300px + 4em), -50%);
+
+      @media (max-width: 1180px){
+        transform: translate(calc(-180px + 4em), -50%);
+      }
+
+      @media (max-width: $breakpoint-md) and (orientation: landscape) {
+        transform: translate(calc(-240px + 4em), -50%);
+      }
+
+      @media (max-width: $breakpoint-sm) {
+        transform: translate(calc(-140px + 4em), -50%);
+      }
+
+      @media (max-width: 370px) {
+        transform: translate(calc(-110px + 4em), -50%)
+      }
+    }
+
+    button#cancel {
+      transition: 300ms 300ms ease;
+      pointer-events: auto;
+      opacity: 1;
+    }
+  }
+}
+
+.algolia-autocomplete {
+  position: inherit !important;
+  display: initial !important;
+
+  input#searchbox,
+  input[type="search"] {
+    vertical-align: middle !important;
+    -webkit-appearance: none;
+    appearance: none;
+    font-size: 16px;
+
+    @media (min-width: $breakpoint-sm) {
+      margin-top: -2px;
+    }
+  }
+
+  .ds-dropdown-menu {
+    top: $nav-height - 10px !important;
+    left: -438px !important;
+    right: inherit !important;
+    line-height: 26px !important;
+    font-size: $text-lg;
+
+    @media (max-width: $breakpoint-sm) {
+      margin-top: 0;
+      top: $nav-height !important;
+      left:0 !important;
+      right:0 !important;
+      width: 100% !important;
+      position:fixed !important;
+      min-width: 0 !important;
+      border-radius: 0;
+
+      &:before {
+        display: none;
+      }
+
+      [class^=ds-dataset-] {
+        border-radius: 0;
+        border-left: 0;
+        border-right: 0;
+        border-top: 0;
+      }
+
+      .algolia-docsearch-suggestion--subcategory-column {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        padding-right: 14px;
+        overflow: hidden;
+      }
+    }
+  }
+}
+
+.algc-openmobile {
+  height: 40px;
+  width: 40px;
+  vertical-align: middle;
+  position: relative;
+  z-index: $z-1;
+  cursor: pointer;
+  z-index: $z-3;
+  background-color: $deep-cove;
+  border: none;
+
+  &:focus {
+    outline: none;
+  }
+
+  @media (min-width: $breakpoint-md) {
+    display: none;
+  }
+  
+  span {
+    height: 2px;
+    width: 62%;
+    top:50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    transition: 140ms ease-out;
+    background-color: rgba($white, .88);
+    position: absolute;
+
+    &:before,
+    &:after {
+      content: "";
+      width: 100%;
+      height: 2px;
+      background-color: inherit;
+      position: absolute;
+      transition: 130ms ease-out;
+      transform: translate(-50%,-50%);
+    }
+    
+    &:before {
+      transform-origin: left center;
+      margin-top: -4px;
+    }
+
+    &:after{
+      transform-origin: left center;
+      margin-top: 6px;
+    }
+  }
+
+  &--open {
+
+    span {
+      transition: 130ms ease-out;
+      transform: translate(-70%,-50%);
+
+      &:before,
+      &:after{
+        transition: 130ms ease-out;
+        transform: translate(-20%,-50%);
+      }
+    }
+  }
+}
+
+.algc-arrowseparator {
+  height: 33px;
+  margin-right: 16px;
+}
+
--- a/docs/algolia-frontend-components/images/algolia-community-dark.svg
+++ b/docs/algolia-frontend-components/images/algolia-community-dark.svg
--- a/docs/algolia-frontend-components/images/algolia-logo-darkbg.svg
+++ b/docs/algolia-frontend-components/images/algolia-logo-darkbg.svg
--- a/docs/algolia-frontend-components/images/icon-separator.svg
+++ b/docs/algolia-frontend-components/images/icon-separator.svg
@ -0,0 +1,4 @@
+<svg width="12" height="7" role="img" arial-labelledby="algc-icon-separator-alt" viewBox="0 0 12 7" xmlns="http://www.w3.org/2000/svg">
+  <title id="algc-icon-separator-alt">menu with dropdown</title>
+  <path d="M6.458 3.58L2.81.37C2.344-.04 1.634.01 1.225.477c-.41.468-.362 1.18.105 1.59L5.51 5.74s.537.375 1.05.356c.515-.02.984-.433.984-.433l4.072-3.596c.467-.41.515-1.12.107-1.59C11.315.01 10.605-.04 10.138.37l-3.68 3.21z" fill="#FFF" fill-rule="evenodd" />
+</svg>
--- a/docs/algolia-frontend-components/images/instantsearch-android.svg
+++ b/docs/algolia-frontend-components/images/instantsearch-android.svg
@ -0,0 +1 @@
+<svg viewBox="0 0 124 117" xmlns="http://www.w3.org/2000/svg"><title>InstantSearch Android</title><path d="M85.47 60.44c.212-1.2-.06-2.452-.702-3.403l-9.572-14.19c3.495-3.65 5.836-8.34 6.72-13.36C84.343 15.738 75.552 2.705 62.272.364 48.99-1.98 36.274 7.26 33.85 21.013c-2.426 13.75 6.364 26.783 19.644 29.124 4.848.855 9.896.178 14.395-1.98l9.577 14.154c.635.987 1.675 1.68 2.836 1.886 2.39.42 4.73-1.28 5.167-3.755zM53.696 85.99c.863-.863 2.043-1.358 3.19-1.378l17.115-.298c.985-4.955 3.485-9.563 7.09-13.167 9.873-9.874 25.59-10.148 35.125-.613 9.536 9.535 9.262 25.252-.612 35.126-9.874 9.874-25.59 10.148-35.126.613-3.48-3.48-5.822-8.003-6.633-12.927l-17.09.273c-1.172.046-2.336-.408-3.17-1.24-1.716-1.717-1.665-4.61.112-6.388zm-4.167-31.53c.294 1.185.11 2.45-.464 3.445l-8.56 14.824c3.742 3.396 6.404 7.91 7.637 12.857 3.378 13.55-4.482 27.162-17.566 30.425C17.492 119.27 4.162 110.94.783 97.39-2.595 83.842 5.265 70.23 18.35 66.968c4.776-1.19 9.858-.868 14.497.972l8.567-14.788c.566-1.03 1.554-1.793 2.698-2.08 2.354-.586 4.81.948 5.417 3.386zM86.817 78.37c-6.27 6.27-6.444 16.3-.39 22.355 6.055 6.054 16.084 5.88 22.353-.39 6.27-6.27 6.446-16.3.39-22.353-6.053-6.055-16.082-5.88-22.352.39zM39.475 88.605C37.33 80 28.825 74.686 20.515 76.757 12.208 78.83 7.193 87.515 9.338 96.117c2.145 8.604 10.65 13.92 18.96 11.848 8.308-2.07 13.323-10.758 11.178-19.36zm32.815-60.84c-1.54 8.73-9.655 14.627-18.087 13.14C45.77 39.417 40.16 31.102 41.7 22.37c1.54-8.732 9.655-14.627 18.088-13.14 8.432 1.486 14.04 9.802 12.502 18.534z" fill="#FFF" fill-rule="evenodd"/></svg>
--- a/docs/algolia-frontend-components/images/react-instantsearch.svg
+++ b/docs/algolia-frontend-components/images/react-instantsearch.svg
@ -0,0 +1 @@
+<svg viewBox="0 0 127 113" xmlns="http://www.w3.org/2000/svg"><title>React InstantSearch</title><path d="M51.438 52.172l-2.907-1.68-2.565 4.442c-1.52-.485-3.137-.746-4.816-.746-8.75 0-15.84 7.098-15.84 15.852 0 8.755 7.09 15.853 15.84 15.853 8.747 0 15.837-7.098 15.837-15.853 0-4.66-2.008-8.85-5.206-11.75l2.564-4.435 1.936-3.336-5.81-3.37-1.936 3.337 2.904 1.685zm19.292 14.51c1.54-7.14 7.885-12.494 15.482-12.494 8.75 0 15.84 7.098 15.84 15.852 0 8.755-7.09 15.853-15.84 15.853-7.597 0-13.943-5.353-15.482-12.495h-5.128v-6.715h5.128zm3.256-17.848l2.904-1.686-2.58-4.444c3.19-2.9 5.193-7.085 5.193-11.738 0-8.755-7.09-15.853-15.838-15.853s-15.84 7.098-15.84 15.853c0 8.754 7.092 15.853 15.84 15.853 1.685 0 3.31-.265 4.833-.753L71.07 50.5l1.86 3.316 5.858-3.287-1.874-3.34-2.928 1.644zm-5.46 48.817c9.465 7.297 18.232 9.824 23.72 6.652 4.93-2.854 7.322-10.372 6.404-21.197l6.692-.567c1.114 13.135-2.072 23.14-9.732 27.576-8.57 4.954-20.363 1.55-32.23-7.96-11.87 9.51-23.664 12.914-32.234 7.96-7.658-4.436-10.844-14.44-9.73-27.576l6.692.567c-.918 10.825 1.475 18.343 6.4 21.195 5.49 3.174 14.26.647 23.724-6.65-2.332-2.213-4.648-4.65-6.925-7.297l5.09-4.38c2.316 2.69 4.656 5.127 6.982 7.295 2.325-2.168 4.664-4.604 6.98-7.296l5.09 4.38c-2.276 2.647-4.593 5.085-6.924 7.3zM28.243 30.393c4.176-1.31 8.71-2.38 13.53-3.183l1.103 6.623c-4.92.82-9.467 1.933-13.557 3.273.776 3.706 1.885 7.634 3.337 11.715l-6.326 2.252c-1.41-3.96-2.532-7.827-3.363-11.545-10.185 4.496-16.25 10.552-16.25 16.62 0 5.608 5.14 11.386 14.597 15.885l-2.885 6.064C6.88 72.603 0 64.87 0 56.146 0 46.57 8.354 38.27 21.75 32.733c-1.89-14.33 1.134-25.656 9.416-30.45 7.857-4.593 18.53-2.077 29.646 6l-3.948 5.433c-9.196-6.682-17.264-8.584-22.32-5.63-5.25 3.04-7.485 11.27-6.3 22.306zm69.23 6.708c-4.098-1.34-8.655-2.452-13.586-3.266l1.094-6.626c4.834.798 9.38 1.87 13.567 3.178 1.182-11.033-1.055-19.263-6.312-22.306-5.045-2.948-13.113-1.046-22.31 5.636L65.98 8.283C77.094.206 87.766-2.31 95.612 2.275c8.29 4.8 11.314 16.124 9.427 30.45 13.376 5.528 21.718 13.83 21.718 23.42 0 8.724-6.882 16.458-18.43 21.95l-2.884-6.063c9.457-4.5 14.598-10.277 14.598-15.886 0-6.08-6.053-12.138-16.218-16.626-.83 3.72-1.954 7.588-3.365 11.552l-6.328-2.25c1.453-4.084 2.562-8.014 3.34-11.722zM61.79 73.398h3.812v-6.715h-3.81v6.715zm-20.64 5.78c-5.04 0-9.124-4.09-9.124-9.138 0-5.047 4.085-9.137 9.123-9.137 5.036 0 9.122 4.09 9.122 9.137 0 5.048-4.086 9.138-9.123 9.138zm45.062 0c5.038 0 9.123-4.09 9.123-9.138 0-5.047-4.085-9.137-9.123-9.137-5.037 0-9.122 4.09-9.122 9.137 0 5.048 4.085 9.138 9.122 9.138zM63.665 40.103c-5.038 0-9.123-4.09-9.123-9.137 0-5.047 4.085-9.137 9.123-9.137 5.037 0 9.123 4.09 9.123 9.136 0 5.047-4.086 9.137-9.123 9.137z" fill="#FFF" fill-rule="evenodd"/></svg>
--- a/docs/algolia-frontend-components/images/search-close-icon.svg
+++ b/docs/algolia-frontend-components/images/search-close-icon.svg
@ -0,0 +1,4 @@
+<svg role="img" aria-labelledby="algc-top-search-close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 13">
+  <title id="algc-top-search-close">Close search input</title>
+  <path d="M5.274 6.5L.614 1.84 0 1.225 1.226 0l.613.613 4.66 4.66 4.66-4.66.614-.613L13 1.226l-.613.613-4.66 4.66 4.66 4.66.613.614L11.774 13l-.613-.613-4.66-4.66-4.66 4.66-.614.613L0 11.774l.613-.613" fill="#FFF" fill-rule="evenodd" />
+</svg>
--- a/docs/algolia-frontend-components/images/search-icon.svg
+++ b/docs/algolia-frontend-components/images/search-icon.svg
@ -0,0 +1,4 @@
+<svg role="img" aria-labelledby="algc-top-search-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15">
+  <title id="algc-top-search-icon">Open search input</title>
+  <path d="M10.052 10.88c-1.1.91-2.483 1.406-3.91 1.403C2.75 12.283 0 9.533 0 6.14 0 2.75 2.75 0 6.142 0c3.392 0 6.14 2.75 6.14 6.142 0 1.485-.526 2.847-1.403 3.91l3.95 3.95c.227.227.228.596-.002.826-.228.227-.597.228-.826 0l-3.95-3.95zm-3.91.234c2.745 0 4.972-2.227 4.972-4.972 0-2.747-2.227-4.972-4.972-4.972-2.747 0-4.972 2.225-4.972 4.972 0 2.745 2.225 4.972 4.972 4.972z" fill="#FFF" fill-rule="evenodd" />
+</svg>
--- a/docs/algolia-frontend-components/images/shopify.svg
+++ b/docs/algolia-frontend-components/images/shopify.svg
@ -0,0 +1 @@
+<svg viewBox="0 0 95 108" xmlns="http://www.w3.org/2000/svg"><title>Algolia Shopify integration</title><path d="M82.996 20.982c-.074-.542-.548-.842-.94-.875-.392-.033-8.675-.646-8.675-.646S67.63 13.75 67 13.12c-.632-.632-1.866-.44-2.345-.3l-3.22.995c-1.92-5.53-5.312-10.61-11.278-10.61-.164 0-.334.006-.504.016C47.955.974 45.854 0 44.038 0 30.14 0 23.5 17.373 21.417 26.202c-5.4 1.674-9.236 2.863-9.726 3.017-3.013.945-3.108 1.04-3.504 3.88C7.886 35.25 0 96.247 0 96.247l61.46 11.515 33.3-7.204S83.07 21.523 82.996 20.982zm-24.96-6.118l-5.2 1.61c.003-.367.004-.728.004-1.122 0-3.437-.477-6.203-1.242-8.397 3.074.386 5.122 3.883 6.44 7.91zm-10.25-7.228c.853 2.142 1.41 5.215 1.41 9.363 0 .21-.003.405-.004.6-3.383 1.05-7.058 2.186-10.74 3.327 2.067-7.982 5.944-11.836 9.333-13.29zm-4.13-3.908c.6 0 1.204.203 1.782.6-4.454 2.097-9.228 7.376-11.244 17.917l-8.49 2.63c2.36-8.04 7.97-21.147 17.95-21.147zm6.5 34.78L46.048 50.72s-3.6-1.92-8.008-1.92c-6.465 0-6.79 4.06-6.79 5.08 0 5.58 14.54 7.717 14.54 20.783 0 10.28-6.52 16.9-15.31 16.9-10.55 0-15.946-6.566-15.946-6.566l2.824-9.333s5.546 4.76 10.226 4.76c3.057 0 4.3-2.406 4.3-4.165 0-7.278-11.93-7.603-11.93-19.56 0-10.063 7.225-19.802 21.805-19.802 5.62 0 8.395 1.61 8.395 1.61z" fill="#FFF" fill-rule="evenodd"/></svg>
--- a/docs/algolia-frontend-components/images/wordpress.svg
+++ b/docs/algolia-frontend-components/images/wordpress.svg
@ -0,0 +1 @@
+<svg width="51" height="52" viewBox="0 0 51 52" xmlns="http://www.w3.org/2000/svg"><title>icon-wordpress</title><path d="M26.055.81C16.215.79 6.953 6.626 2.703 15.862l11.95.028V17.2c-3.68-.442-3.355 1.47-2.834 3.497l7.845 19.663L25.43 26.84l-2.646-6.334c-.96-1.697-.982-3.58-4.916-3.402l.056-1.205 17.528.042v1.35c-2.052.12-4.523-.517-3.214 3.687l7.09 18.622 3.876-10.872c1.27-4.557.074-8.937-1.434-13.232-.84-2.88-.447-5.287 3.312-6.242C39.344 3.4 32.572.82 26.055.81zM49.895 18L38.53 47.625c3.14-2.72 6.357-3.708 10.295-11.23 2.62-6.255 2.35-12.05 1.07-18.393zm-48.395.48C.39 27.227.492 29.788 3.238 36.93c3.58 6.84 6.354 8.28 10.294 10.963L1.5 18.483zm25 11.096l-8.423 20.32c5.91 1.687 11.2 1.476 16.043-.4l-7.62-19.92z" fill="#FFF" fill-rule="evenodd"/></svg>
--- a/docs/algolia-frontend-components/index.js
+++ b/docs/algolia-frontend-components/index.js
@ -0,0 +1,5 @@
+const htmlRender = {
+  communityHeader: require('./components/communityHeader/communityHeader.html.js')
+}
+
+module.exports = htmlRender;
--- a/docs/algolia-frontend-components/javascripts.js
+++ b/docs/algolia-frontend-components/javascripts.js
@ -0,0 +1,5 @@
+const javascripts = {
+  communityHeader: require('./components/communityHeader/communityHeader.js')
+}
+
+module.exports = javascripts;
--- a/docs/algolia-frontend-components/package.json
+++ b/docs/algolia-frontend-components/package.json
@ -0,0 +1,43 @@
+{
+  "name": "algolia-frontend-components",
+  "version": "0.0.34",
+  "description": "Algolia components",
+  "main": "index.js",
+  "scripts": {
+    "clean": "rm -rf dist",
+    "watch": "node build/development.js --erb",
+    "build": "npm run clean --silent && node build/build.js --silent",
+    "build:erb": "npm run clean --silent && node build/build.js --erb",
+    "serve": "webpack-dev-server --config build/serve.js"
+  },
+  "author": "Jonas Badalic",
+  "license": "ISC",
+  "dependencies": {
+    "babel-cli": "^6.23.0",
+    "babel-core": "^6.23.1",
+    "babel-polyfill": "^6.23.0",
+    "babel-preset-env": "^1.1.9",
+    "babel-preset-es2015": "^6.22.0",
+    "chalk": "^1.1.3",
+    "deepmerge": "^1.3.2",
+    "glob": "^7.1.1",
+    "node-sass": "^4.5.0",
+    "path": "^0.12.7",
+    "progress": "^1.1.8",
+    "webpack": "^2.2.1",
+    "webpack-dev-server": "^2.4.1"
+  },
+  "devDependencies": {
+    "babel-loader": "^6.4.0",
+    "css-loader": "^0.26.2",
+    "extract-loader": "^0.1.0",
+    "file-loader": "^0.10.1",
+    "html-loader": "^0.4.5",
+    "html-webpack-plugin": "^2.28.0",
+    "json-loader": "^0.5.4",
+    "raw-loader": "^0.5.1",
+    "sass-loader": "^6.0.2",
+    "style-loader": "^0.13.2",
+    "url-loader": "^0.5.8"
+  }
+}
--- a/docs/algolia-frontend-components/stylesheets/_base.scss
+++ b/docs/algolia-frontend-components/stylesheets/_base.scss
@ -0,0 +1,6 @@
+* {
+  box-sizing: border-box;
+}
+body {
+  margin: 0;
+}
--- a/docs/algolia-frontend-components/stylesheets/_functions.scss
+++ b/docs/algolia-frontend-components/stylesheets/_functions.scss
@ -0,0 +1,15 @@
+
+@function str-replace($string, $search, $replace: '') {
+  $index: str-index($string, $search);
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+  @return $string;
+}
+
+@function em($pixels, $context: $browser-context) {
+  @return #{$pixels/$context}em;
+}
+
+
+
--- a/docs/algolia-frontend-components/stylesheets/_mixins.scss
+++ b/docs/algolia-frontend-components/stylesheets/_mixins.scss
@ -0,0 +1,29 @@
+
+@mixin arrowSeparatorLeft($color, $stroke: false) {
+  &:before {
+    content: '';
+    display: block;
+    position: absolute;
+    z-index: 10;
+    height: 110%;
+    width: 40px;
+    top: -5%;
+    left: -6px;
+
+    @if $stroke != false {
+      background: url("data:image/svg+xml;utf8,<svg  viewBox=\'0 0 31 62\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\'><title>Rectangle</title><defs><path id=\'b\' d=\'M6 1l23 30L6 61H0V1z\'/><filter x=\'-50%\' y=\'-50%\' width=\'200%\' height=\'200%\' filterUnits=\'objectBoundingBox\' id=\'a\'><feOffset dx=\'1\' in=\'SourceAlpha\' result=\'shadowOffsetOuter1\'/><feGaussianBlur stdDeviation=\'.5\' in=\'shadowOffsetOuter1\' result=\'shadowBlurOuter1\'/><feColorMatrix values=\'0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0\' in=\'shadowBlurOuter1\'/></filter></defs><g fill=\'#{str-replace(#{$color}, '#','%23')}\' stroke=\'#{str-replace(#{$stroke}, '#','%23')}\' stroke-width=\'2\' fill-rule=\'evenodd\'><use filter=\'url(%23a)\' xlink:href=\'%23b\'/><use xlink:href=\'%23b\'/></g></svg>")no-repeat;
+      } @else {
+      background: url("data:image/svg+xml;utf8,<svg  viewBox=\'0 0 31 62\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\'><title>Rectangle</title><defs><path id=\'b\' d=\'M6 1l23 30L6 61H0V1z\'/><filter x=\'-50%\' y=\'-50%\' width=\'200%\' height=\'200%\' filterUnits=\'objectBoundingBox\' id=\'a\'><feOffset dx=\'1\' in=\'SourceAlpha\' result=\'shadowOffsetOuter1\'/><feGaussianBlur stdDeviation=\'.5\' in=\'shadowOffsetOuter1\' result=\'shadowBlurOuter1\'/><feColorMatrix values=\'0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0\' in=\'shadowBlurOuter1\'/></filter></defs><g fill=\'#{str-replace(#{$color}, '#','%23')}\' fill-rule=\'evenodd\'><use filter=\'url(%23a)\' xlink:href=\'%23b\'/><use xlink:href=\'%23b\'/></g></svg>")no-repeat;
+      }
+  }
+}
+
+@mixin placeholder {
+  $placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input";
+  @each $placeholder in $placeholders {
+    &:#{$placeholder}-placeholder {
+      @content;
+    }
+  }
+}
+
--- a/docs/algolia-frontend-components/stylesheets/_variables.scss
+++ b/docs/algolia-frontend-components/stylesheets/_variables.scss
@ -0,0 +1,158 @@
+
+// font sizes
+$text-xxl: 3.125em;
+$text-xl : 2em;
+$text-lg : 1.25em;
+$text-sm : .75em;
+$text-xs : .625em;
+
+// breakpoints
+$breakpoint-xl: 1200px;
+$breakpoint-lg: 992px;
+$breakpoint-md: 768px;
+$breakpoint-sm: 576px;
+$breakpoint-xs: 576px;
+
+// z-index layers
+$z--1: -10;
+$z-1: 10;
+$z-2: 50;
+$z-3: 100;
+$z-top: 9999;
+
+//containers
+$container-max-width: 1160px;
+
+//fonts;
+$browser-context: 16;
+$light: 300;
+$regular: 400;
+$bold: 600;
+
+//colors;
+$white: white;
+$black: black;
+
+//V2;
+$purple-heart: rgb(142, 67, 231);
+$mulberry: rgb(184, 69, 146);
+$radical-red: rgb(255, 79, 129);
+$bittersweet: rgb(255, 108, 95);
+$koromiko: rgb(255, 193, 104);
+$shamrock: rgb(45, 222, 152);
+$java: rgb(28, 199, 208);
+$algolia-blue: rgb(0, 174, 255);
+$royal-blue: rgb(51, 105, 231);
+$bunting: rgb(24, 35, 89);
+$titan-white: rgb(247, 247, 255);
+$logan: rgb(157, 157, 189);
+$deep-cove: rgb(5, 15, 44);
+$highlight-color: #f6624e;
+$cabaret: #E7486B;
+$rouge: #9C4274;
+$sea-green: #13C4A5;
+$blue-green: #10A4B8;
+$violet: #8A63B3;
+$chambray: #3B5295;
+$sunset-orange: #F6624E;
+$saffron-mango: #FDBD57;
+$red-pink: #fb366e;
+$plum: #65133a;
+$light-navy: #184a80;
+$primary-color: $bunting;
+$secondary-color: $titan-white;
+$tertiary-color: $logan;
+$athens-gray: #EEF0F7;
+$titan-white: #F7F7FF;
+$portage: #8995C7;
+
+$cloudy-blue: #c4c8d7;
+$cloudy-blue-2: #a6b0d8;
+$cloudy-blue-3: #8995C7;
+$summertime: mix($radical-red, $bittersweet, 50%);
+
+//header;
+$header-height: 60px;
+//BootStrap;
+$gray-darker: lighten(#000, 13.5%);
+/* #222 */
+$gray-dark: lighten(#000, 20%);
+/* #333 */
+
+$gray: lighten(#000, 33.5%);
+/* #555 */
+
+$gray-light: lighten(#000, 46.7%);
+/* #777 */
+
+$gray-lighter: lighten(#000, 93.5%);
+/* #eee */
+
+$brand-primary: $algolia-blue;
+$brand-secondary: #FA3870;
+$brand-success: $shamrock;
+$brand-info: $algolia-blue;
+$brand-warning: $koromiko;
+$brand-danger: $radical-red;
+$body-bg: $white;
+$text-color: $bunting;
+$text-muted: $logan;
+$border-radius-base: 3px;
+$border-radius-large: 3px;
+$border-radius-small: 3px;
+$link-color: $brand-primary;
+$link-hover-color: darken($link-color, 15%);
+//fonts;
+$font-family-base: "Open Sans", Helvetica,Arial,sans-serif;
+$headings-font-family: Raleway, "Times New Roman",Times,serif;
+$headings-font-weight: $light;
+$headings-small-color: darken($tertiary-color, 10%);
+//Buttons;
+$btn-font-weight: normal;
+//default;
+$btn-default-color: #777;
+$btn-default-bg: $white;
+$btn-default-border: #ccc;
+//primary;
+$btn-primary-color: $white;
+$btn-primary-bg: $brand-primary;
+$btn-primary-border: darken($btn-primary-bg, 5%);
+//success;
+$btn-success-color: $white;
+$btn-success-bg: $brand-success;
+$btn-success-border: darken($btn-success-bg, 5%);
+//info;
+$btn-info-color: $white;
+$btn-info-bg: $brand-info;
+$btn-info-border: darken($btn-info-bg, 5%);
+//warning;
+$btn-warning-color: $white;
+$btn-warning-bg: $brand-warning;
+$btn-warning-border: darken($btn-warning-bg, 5%);
+//danger;
+$btn-danger-color: $white;
+$btn-danger-bg: $brand-danger;
+$btn-danger-border: darken($btn-danger-bg, 5%);
+//link;
+$btn-link-disabled-color: $gray-light;
+$input-bg-disabled: $gray-lighter;
+//Panels;
+$panel-bg: $white;
+//** Border color for elements within panels;
+$panel-inner-border: lighten($tertiary-color, 20%);
+$panel-footer-bg: lighten($secondary-color, 10%);
+$panel-default-text: $gray-dark;
+$panel-default-border: $white;
+$panel-default-heading-bg: $white;
+//forms;
+$input-group-addon-bg: lighten($secondary-color, 3%);
+$input-border: lighten($gray, 30%);
+//tables;
+$table-border-color: $secondary-color;
+$table-bg-accent: lighten($secondary-color, 5%);
+//tooltip;
+$tooltip-bg: $primary-color;
+$tooltip-opacity: 1;
+//code;
+$pre-bg: $bunting;
+$pre-color: #C2CCCC;
--- a/Show more
+++ b/Show more
				`@ -0,0 +1 @@`
				<svg viewBox="0 0 124 117" xmlns="http://www.w3.org/2000/svg"><title>InstantSearch Android</title><path d="M85.47 60.44c.212-1.2-.06-2.452-.702-3.403l-9.572-14.19c3.495-3.65 5.836-8.34 6.72-13.36C84.343 15.738 75.552 2.705 62.272.364 48.99-1.98 36.274 7.26 33.85 21.013c-2.426 13.75 6.364 26.783 19.644 29.124 4.848.855 9.896.178 14.395-1.98l9.577 14.154c.635.987 1.675 1.68 2.836 1.886 2.39.42 4.73-1.28 5.167-3.755zM53.696 85.99c.863-.863 2.043-1.358 3.19-1.378l17.115-.298c.985-4.955 3.485-9.563 7.09-13.167 9.873-9.874 25.59-10.148 35.125-.613 9.536 9.535 9.262 25.252-.612 35.126-9.874 9.874-25.59 10.148-35.126.613-3.48-3.48-5.822-8.003-6.633-12.927l-17.09.273c-1.172.046-2.336-.408-3.17-1.24-1.716-1.717-1.665-4.61.112-6.388zm-4.167-31.53c.294 1.185.11 2.45-.464 3.445l-8.56 14.824c3.742 3.396 6.404 7.91 7.637 12.857 3.378 13.55-4.482 27.162-17.566 30.425C17.492 119.27 4.162 110.94.783 97.39-2.595 83.842 5.265 70.23 18.35 66.968c4.776-1.19 9.858-.868 14.497.972l8.567-14.788c.566-1.03 1.554-1.793 2.698-2.08 2.354-.586 4.81.948 5.417 3.386zM86.817 78.37c-6.27 6.27-6.444 16.3-.39 22.355 6.055 6.054 16.084 5.88 22.353-.39 6.27-6.27 6.446-16.3.39-22.353-6.053-6.055-16.082-5.88-22.352.39zM39.475 88.605C37.33 80 28.825 74.686 20.515 76.757 12.208 78.83 7.193 87.515 9.338 96.117c2.145 8.604 10.65 13.92 18.96 11.848 8.308-2.07 13.323-10.758 11.178-19.36zm32.815-60.84c-1.54 8.73-9.655 14.627-18.087 13.14C45.77 39.417 40.16 31.102 41.7 22.37c1.54-8.732 9.655-14.627 18.088-13.14 8.432 1.486 14.04 9.802 12.502 18.534z" fill="#FFF" fill-rule="evenodd"/></svg>
				`@ -0,0 +1 @@`
				<svg viewBox="0 0 127 113" xmlns="http://www.w3.org/2000/svg"><title>React InstantSearch</title><path d="M51.438 52.172l-2.907-1.68-2.565 4.442c-1.52-.485-3.137-.746-4.816-.746-8.75 0-15.84 7.098-15.84 15.852 0 8.755 7.09 15.853 15.84 15.853 8.747 0 15.837-7.098 15.837-15.853 0-4.66-2.008-8.85-5.206-11.75l2.564-4.435 1.936-3.336-5.81-3.37-1.936 3.337 2.904 1.685zm19.292 14.51c1.54-7.14 7.885-12.494 15.482-12.494 8.75 0 15.84 7.098 15.84 15.852 0 8.755-7.09 15.853-15.84 15.853-7.597 0-13.943-5.353-15.482-12.495h-5.128v-6.715h5.128zm3.256-17.848l2.904-1.686-2.58-4.444c3.19-2.9 5.193-7.085 5.193-11.738 0-8.755-7.09-15.853-15.838-15.853s-15.84 7.098-15.84 15.853c0 8.754 7.092 15.853 15.84 15.853 1.685 0 3.31-.265 4.833-.753L71.07 50.5l1.86 3.316 5.858-3.287-1.874-3.34-2.928 1.644zm-5.46 48.817c9.465 7.297 18.232 9.824 23.72 6.652 4.93-2.854 7.322-10.372 6.404-21.197l6.692-.567c1.114 13.135-2.072 23.14-9.732 27.576-8.57 4.954-20.363 1.55-32.23-7.96-11.87 9.51-23.664 12.914-32.234 7.96-7.658-4.436-10.844-14.44-9.73-27.576l6.692.567c-.918 10.825 1.475 18.343 6.4 21.195 5.49 3.174 14.26.647 23.724-6.65-2.332-2.213-4.648-4.65-6.925-7.297l5.09-4.38c2.316 2.69 4.656 5.127 6.982 7.295 2.325-2.168 4.664-4.604 6.98-7.296l5.09 4.38c-2.276 2.647-4.593 5.085-6.924 7.3zM28.243 30.393c4.176-1.31 8.71-2.38 13.53-3.183l1.103 6.623c-4.92.82-9.467 1.933-13.557 3.273.776 3.706 1.885 7.634 3.337 11.715l-6.326 2.252c-1.41-3.96-2.532-7.827-3.363-11.545-10.185 4.496-16.25 10.552-16.25 16.62 0 5.608 5.14 11.386 14.597 15.885l-2.885 6.064C6.88 72.603 0 64.87 0 56.146 0 46.57 8.354 38.27 21.75 32.733c-1.89-14.33 1.134-25.656 9.416-30.45 7.857-4.593 18.53-2.077 29.646 6l-3.948 5.433c-9.196-6.682-17.264-8.584-22.32-5.63-5.25 3.04-7.485 11.27-6.3 22.306zm69.23 6.708c-4.098-1.34-8.655-2.452-13.586-3.266l1.094-6.626c4.834.798 9.38 1.87 13.567 3.178 1.182-11.033-1.055-19.263-6.312-22.306-5.045-2.948-13.113-1.046-22.31 5.636L65.98 8.283C77.094.206 87.766-2.31 95.612 2.275c8.29 4.8 11.314 16.124 9.427 30.45 13.376 5.528 21.718 13.83 21.718 23.42 0 8.724-6.882 16.458-18.43 21.95l-2.884-6.063c9.457-4.5 14.598-10.277 14.598-15.886 0-6.08-6.053-12.138-16.218-16.626-.83 3.72-1.954 7.588-3.365 11.552l-6.328-2.25c1.453-4.084 2.562-8.014 3.34-11.722zM61.79 73.398h3.812v-6.715h-3.81v6.715zm-20.64 5.78c-5.04 0-9.124-4.09-9.124-9.138 0-5.047 4.085-9.137 9.123-9.137 5.036 0 9.122 4.09 9.122 9.137 0 5.048-4.086 9.138-9.123 9.138zm45.062 0c5.038 0 9.123-4.09 9.123-9.138 0-5.047-4.085-9.137-9.123-9.137-5.037 0-9.122 4.09-9.122 9.137 0 5.048 4.085 9.138 9.122 9.138zM63.665 40.103c-5.038 0-9.123-4.09-9.123-9.137 0-5.047 4.085-9.137 9.123-9.137 5.037 0 9.123 4.09 9.123 9.136 0 5.047-4.086 9.137-9.123 9.137z" fill="#FFF" fill-rule="evenodd"/></svg>
				`@ -0,0 +1 @@`
				<svg viewBox="0 0 95 108" xmlns="http://www.w3.org/2000/svg"><title>Algolia Shopify integration</title><path d="M82.996 20.982c-.074-.542-.548-.842-.94-.875-.392-.033-8.675-.646-8.675-.646S67.63 13.75 67 13.12c-.632-.632-1.866-.44-2.345-.3l-3.22.995c-1.92-5.53-5.312-10.61-11.278-10.61-.164 0-.334.006-.504.016C47.955.974 45.854 0 44.038 0 30.14 0 23.5 17.373 21.417 26.202c-5.4 1.674-9.236 2.863-9.726 3.017-3.013.945-3.108 1.04-3.504 3.88C7.886 35.25 0 96.247 0 96.247l61.46 11.515 33.3-7.204S83.07 21.523 82.996 20.982zm-24.96-6.118l-5.2 1.61c.003-.367.004-.728.004-1.122 0-3.437-.477-6.203-1.242-8.397 3.074.386 5.122 3.883 6.44 7.91zm-10.25-7.228c.853 2.142 1.41 5.215 1.41 9.363 0 .21-.003.405-.004.6-3.383 1.05-7.058 2.186-10.74 3.327 2.067-7.982 5.944-11.836 9.333-13.29zm-4.13-3.908c.6 0 1.204.203 1.782.6-4.454 2.097-9.228 7.376-11.244 17.917l-8.49 2.63c2.36-8.04 7.97-21.147 17.95-21.147zm6.5 34.78L46.048 50.72s-3.6-1.92-8.008-1.92c-6.465 0-6.79 4.06-6.79 5.08 0 5.58 14.54 7.717 14.54 20.783 0 10.28-6.52 16.9-15.31 16.9-10.55 0-15.946-6.566-15.946-6.566l2.824-9.333s5.546 4.76 10.226 4.76c3.057 0 4.3-2.406 4.3-4.165 0-7.278-11.93-7.603-11.93-19.56 0-10.063 7.225-19.802 21.805-19.802 5.62 0 8.395 1.61 8.395 1.61z" fill="#FFF" fill-rule="evenodd"/></svg>
				`@ -0,0 +1 @@`
				<svg width="51" height="52" viewBox="0 0 51 52" xmlns="http://www.w3.org/2000/svg"><title>icon-wordpress</title><path d="M26.055.81C16.215.79 6.953 6.626 2.703 15.862l11.95.028V17.2c-3.68-.442-3.355 1.47-2.834 3.497l7.845 19.663L25.43 26.84l-2.646-6.334c-.96-1.697-.982-3.58-4.916-3.402l.056-1.205 17.528.042v1.35c-2.052.12-4.523-.517-3.214 3.687l7.09 18.622 3.876-10.872c1.27-4.557.074-8.937-1.434-13.232-.84-2.88-.447-5.287 3.312-6.242C39.344 3.4 32.572.82 26.055.81zM49.895 18L38.53 47.625c3.14-2.72 6.357-3.708 10.295-11.23 2.62-6.255 2.35-12.05 1.07-18.393zm-48.395.48C.39 27.227.492 29.788 3.238 36.93c3.58 6.84 6.354 8.28 10.294 10.963L1.5 18.483zm25 11.096l-8.423 20.32c5.91 1.687 11.2 1.476 16.043-.4l-7.62-19.92z" fill="#FFF" fill-rule="evenodd"/></svg>