added website code for containerd.io

Signed-off-by: Patrick Chanezon <patlist@chanezon.com>
2017-03-15 13:14:10 -07:00 · 2017-03-15 13:14:10 -07:00 · ecc0cc14c6
commit ecc0cc14c6
parent 92c7ed08b4
55 changed files with 3824 additions and 0 deletions
--- a/docs/.dockerignore
+++ b/docs/.dockerignore
@ -0,0 +1,5 @@
+.dockerignore
+.git
+.gitignore
+Dockerfile
+docker-compose.yml
--- a/docs/.gitignore
+++ b/docs/.gitignore
@ -0,0 +1,8 @@
+**/.DS_Store
+**/desktop.ini
+.bundle/**
+.jekyll-metadata
+_site/**
+.sass-cache/**
+CNAME
+Gemfile.lock
--- a/docs/Dockerfile
+++ b/docs/Dockerfile
@ -0,0 +1,3 @@
+FROM nginx
+
+COPY _site /usr/share/nginx/html
--- a/docs/README.md
+++ b/docs/README.md
@ -0,0 +1,10 @@
+# Containerd website
+
+The containerd website is built using Jekyll and published to Github pages.
+
+In order to build and test locally:
+```
+docker run -v "$PWD":/usr/src/app -p "4000:4000" starefossen/github-pages
+```
+Then browser to localhost:4000 to see the rendered site. The site autorefreshes when you modify files locally.
+
--- a/docs/_config.yml
+++ b/docs/_config.yml
@ -0,0 +1,23 @@
+markdown: kramdown
+kramdown:
+  input: GFM
+  html_to_native: true
+  hard_wrap: false
+  syntax_highlighter: rouge
+incremental: true
+permalink: pretty
+safe: false
+lsi: false
+exclude: [README.md]
+
+gems:
+  - jekyll-redirect-from
+  - jekyll-seo-tag
+
+defaults:
+  -
+    scope:
+      path: ""
+      type: "pages"
+    values:
+      layout: default
--- a/docs/_includes/footer.html
+++ b/docs/_includes/footer.html
@ -0,0 +1,21 @@
+  <div class="footer">
+    <div class="footer-links">
+      {% include links.html %}
+    </div>
+    <div class="copyright">
+      Copyright (c) 2016, Docker Inc.
+    </div>
+  </div>
+  <script src="/style/js/jquery-2.1.4.min.js"></script>
+  <script src="/style/js/highlight.min.js"></script>
+  <script src="/style/js/main.js"></script>
+  <script>
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+    ga('create', 'UA-71407002-1', 'auto');
+    ga('send', 'pageview');
+  </script>  
+  </body>
+</html>
--- a/docs/_includes/header.html
+++ b/docs/_includes/header.html
@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>{{ page.title }}</title>
+    <link rel="icon" type="image/png" href="/images/favicon-16x16.png" sizes="16x16">
+    <link href="/style/css/flexboxgrid.css" type="text/css" rel="stylesheet" media="screen,projection"/>
+    <link href="/style/css/main.css" type="text/css" rel="stylesheet" media="screen,projection"/>
+    <link href="/style/css/tomorrow-night.css" type="text/css" rel="stylesheet" media="screen,projection"/><link href="https://fonts.googleapis.com/css?family=Lato:300,400|Raleway:400,700i,800" rel="stylesheet">
+  </head>
+  <body>
+    <div class="container">
--- a/docs/_includes/links.html
+++ b/docs/_includes/links.html
@ -0,0 +1,3 @@
+      <div class="link">
+        <a href="https://github.com/docker/containerd"><img src="/images/GitHub-Mark-Light-64px.png"/></a>
+      </div>
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@ -0,0 +1,15 @@
+{% include header.html %}
+
+<div class="navbar white">
+  <div class="name"><a href="/">containerd<span class="org">By Docker</span></a></div>
+  <div class="actions">
+      {% include links.html %}
+  </div>
+</div>
+<div class="content">
+  <div class="wrapper-details">
+    {{ content }}
+  </div>
+</div>
+
+{% include footer.html %}
--- a/docs/_layouts/home.html
+++ b/docs/_layouts/home.html
@ -0,0 +1,18 @@
+{% include header.html %}
+
+<div class="hero">
+  <div class="navbar">
+    <div class="name"><a href="/">containerd</a></div>
+    <div class="actions">
+      {% include links.html %}
+    </div>
+  </div>
+  <p class="definition"><strong>containerd</strong> <span>| kənˈtānər D |</span><br> - an industry-standard container runtime<br>with an emphasis on <i>simplicity</i>,<br><i>robustness</i> and <i>portability</i>.</p>
+</div>
+<div class="content">
+  <div class="wrapper-details">
+      {{ content }}
+  </div>
+</div>
+
+{% include footer.html %}
--- a/docs/dockercon-summit.md
+++ b/docs/dockercon-summit.md
@ -1,3 +1,8 @@
+---
+title: Dockercon 2017 Summit
+layout: home
+---
+
 # Dockercon 2017 Summit

 This year at Dockercon US 2017 we will be having a containerd Summit on Thursday morning the week of the conference.  
--- a/docs/hooks/pre_build
+++ b/docs/hooks/pre_build
@ -0,0 +1,10 @@
+#!/bin/bash
+echo "=> Building the binary"
+docker run --privileged \
+  -v $(pwd):/usr/src/app  \
+  -v /var/run/docker.sock:/var/run/docker.sock \
+  starefossen/github-pages jekyll build
+echo $(pwd)
+ls -la
+ls -la _site
+
--- a/docs/images/GitHub-Mark-Light-64px.png
+++ b/docs/images/GitHub-Mark-Light-64px.png
--- a/docs/images/a.png
+++ b/docs/images/a.png
--- a/docs/images/b.png
+++ b/docs/images/b.png
--- a/docs/images/bg10.jpg
+++ b/docs/images/bg10.jpg
--- a/docs/images/bg10.png
+++ b/docs/images/bg10.png
--- a/docs/images/bg5.png
+++ b/docs/images/bg5.png
--- a/docs/images/bg6.png
+++ b/docs/images/bg6.png
--- a/docs/images/bg8.png
+++ b/docs/images/bg8.png
--- a/docs/images/bg9.png
+++ b/docs/images/bg9.png
--- a/docs/images/c.png
+++ b/docs/images/c.png
--- a/docs/images/chart-a.png
+++ b/docs/images/chart-a.png
--- a/docs/images/chart-a.svg
+++ b/docs/images/chart-a.svg
--- a/docs/images/chart-b.png
+++ b/docs/images/chart-b.png
--- a/docs/images/chart-c.png
+++ b/docs/images/chart-c.png
--- a/docs/images/chart-d.png
+++ b/docs/images/chart-d.png
--- a/docs/images/chart-e.png
+++ b/docs/images/chart-e.png
--- a/docs/images/chart-f.png
+++ b/docs/images/chart-f.png
--- a/docs/images/chart-g.png
+++ b/docs/images/chart-g.png
--- a/docs/images/containerd-and-docker.png
+++ b/docs/images/containerd-and-docker.png
--- a/docs/images/containerd-architecture.png
+++ b/docs/images/containerd-architecture.png
--- a/docs/images/containerd-hight-level-architecture.png
+++ b/docs/images/containerd-hight-level-architecture.png
--- a/docs/images/containerd-in-container-ecosystem.png
+++ b/docs/images/containerd-in-container-ecosystem.png
--- a/docs/images/containerd-in-docker-today.png
+++ b/docs/images/containerd-in-docker-today.png
--- a/docs/images/containerd-in-docker-tomorrow.png
+++ b/docs/images/containerd-in-docker-tomorrow.png
--- a/docs/images/containerd-runc-oci.png
+++ b/docs/images/containerd-runc-oci.png
--- a/docs/images/containerd.png
+++ b/docs/images/containerd.png
--- a/docs/images/containerkit-architecture.png
+++ b/docs/images/containerkit-architecture.png
--- a/docs/images/favicon-16x16.png
+++ b/docs/images/favicon-16x16.png
--- a/docs/images/logo-open-container.png
+++ b/docs/images/logo-open-container.png
--- a/docs/images/runc-terminal.png
+++ b/docs/images/runc-terminal.png
--- a/docs/images/sub.png
+++ b/docs/images/sub.png
--- a/docs/index.md
+++ b/docs/index.md
@ -0,0 +1,115 @@
+---
+title: containerd
+layout: home
+---
+
+## News
+
+* [Sign up for containerd Summit at DockerCon in April](dockercon-summit)
+* [March 15th: Docker to donate containerd to the Cloud Native Computing Foundation](https://blog.docker.com/2017/03/docker-donates-containerd-to-cncf/)
+* [February 28th: containerd Summit recap](https://blog.docker.com/2017/02/containerd-summit-recap-slides-videos-meeting-notes/)
+* [January 4th: containerd Livestream recap](https://blog.docker.com/2017/01/containerd-livestream-recap)
+
+## About containerd
+
+containerd is an industry-standard core container runtime with an emphasis on simplicity, robustness and portability. It is available as a daemon for Linux and Windows, which can manage the complete container lifecycle of its host system: image transfer and storage, container execution and supervision, low-level storage and network attachments, etc..
+
+containerd is designed to be embedded into a larger system, rather than being used directly by developers or end-users.
+
+containerd includes a daemon exposing gRPC API over a local UNIX socket. The API is a low-level one designed for higher layers to wrap and extend. It also includes a barebone CLI (`ctr`) designed specifically for development and debugging purpose. It uses [runC](https://github.com/opencontainers/runc) to run containers according to the [OCI specification](https://www.opencontainers.org/about). The code can be found on [GitHub](https://github.com/docker/containerd), and here are the [contribution guidelines](https://github.com/docker/containerd/blob/master/CONTRIBUTING.md).
+
+containerd is based on the Docker Engine’s core container runtime to benefit from its maturity and existing contributors.
+
+![Containerd High Level Architecture](/images/chart-a.png "Containerd High Level Architecture")
+
+## Features and roadmap
+
+* OCI Image Spec support
+* OCI Runtime Spec support (aka runC)
+* Image push and pull support
+* Container runtime and lifecycle support
+* Network primitives for creation, modification, and deletion of interfaces
+* Management of network namespaces containers to join existing namespaces
+* Multi-tenant supported with CAS storage for global images
+
+containerd, currently in [version 0.2.4](https://github.com/docker/containerd/releases/tag/v0.2.4), is a daemon born from extracting the container execution subset of the Docker Engine, and is [used internally by Docker since the 1.11 release](https://blog.docker.com/2016/04/docker-engine-1-11-runc/). containerd will graduate to version 1.0 once its feature scope matches the requirements above, from which it will commit to API stability as well as committing to a 1-year LTS release. Docker Engine commits to upgrading to containerd 1.0 as part of its regular release cycle.
+
+[containerd roadmap](https://github.com/docker/containerd/blob/master/ROADMAP.md) to implement these features is described in the containerd Github repository.
+
+## Architecture
+
+Containerd [architecture](https://github.com/docker/containerd/blob/master/design/architecture.md) and [API](https://github.com/docker/containerd/tree/master/api/) are described in the Github repository.
+
+![Containerd Architecture](/images/chart-b.png "Containerd High Level Architecture")
+
+## Principles and Releases
+
+Having a clearly defined scope of a project is important for ensuring consistency and focus.
+These following criteria will be used when reviewing pull requests, features, and changes for the project before being accepted.
+
+### Components
+
+Components should not have tight dependencies on each other so that they are unable to be used independently.
+The APIs for images and containers should be designed in a way that when used together the components have a natural flow but still be useful independently.
+
+An example for this design can be seen with the overlay filesystems and the container execution layer.
+The execution layer and overlay filesystems can be used independently but if you were to use both, they share a common `Mount` struct that the filesystems produce and the execution layer consumes.
+
+### Primitives
+
+containerd should expose primitives to solve problems instead of building high level abstractions in the API.
+A common example of this is how build would be implemented.
+Instead of having a build API in containerd we should expose the lower level primitives that allow things required in build to work.
+Breaking up the filesystem APIs to allow snapshots, copy functionality, and mounts allow people implementing build at the higher levels more flexibility.
+
+### Extensibility and Defaults
+
+For the various components in containerd there should be defined extension points where implementations can be swapped for alternatives.
+The best example of this is that containerd will use `runc` from OCI as the default runtime in the execution layer but other runtimes conforming to the OCI Runtime specification they can be easily added to containerd.
+
+containerd will come with a default implementation for the various components.
+These defaults will be chosen by the maintainers of the project and should not change unless better tech for that component comes out.
+Additional implementations will not be accepted into the core repository and should be developed in a separate repository not maintained by the containerd maintainers.
+
+### Releases
+
+containerd will be released with a 1.0 when feature complete with Linux and Windows parity and this version will be supported for 1 year with security and bug fixes applied and released.
+
+The upgrade path for containerd is that the 0.0.x patch releases are always backward compatible with its major and minor version.
+Minor (0.x.0) version will always be compatible with the previous minor release. i.e. 1.2.0 is backwards compatible with 1.1.0 and 1.1.0 is compatible with 1.0.0.
+There is no compatibility guarantees with upgrades from two minor relases.  i.e. 1.0.0 to 1.2.0.
+
+There are no backwards compatibility guarantees with upgrades to major versions.  i.e 1.0.0 to 2.0.0.
+Each major version will be supported for 1 year with bug fixes and security patches.
+
+## FAQ
+
+1. What is the relationship between containerd and Docker?
+
+Docker is a complete platform and programming environment for containerized applications. containerd is one of dozens of specialized components integrated into Docker. Developers and IT professionals looking to build, ship and run containerized applications should continue to use Docker. Operators and integrators looking for specialized components to swap into their platform should consider containerd.
+
+![Containerd and Docker](/images/chart-c.png "Containerd and Docker")
+
+containerd 0.2.4 used in Docker 1.12 covers only container execution and process management.
+
+![Containerd in Docker today](/images/chart-g.png "Containerd in Docker today")
+
+containerd's roadmap is to refactor the Docker Engine codebase to extract more of its logic for distribution, networking and storage on a single host into a reusable component that Docker will use, and that can be used by other container orchestration projects or hosted container services.
+
+![Containerd in Docker tomorrow](/images/chart-d.png "Containerd in Docker tomorrow")
+
+2. What is the relationship between containerd, OCI and runc?
+
+Docker [donated the OCI specification to the Linux Foundation in 2015](https://blog.docker.com/2015/06/open-container-project-foundation/), along with a reference implementation called `runc`. containerd integrates [OCI](https://www.opencontainers.org/)/[runc](https://runc.io/) into a feature-complete, production-ready core container runtime. runc is a component of containerd, the executor for containers. containerd has a wider scope than just executing containers: downloading container images, managing storage and network interfaces, calling runc with the right parameters to run containers. containerd fully leverages the Open Container Initiative’s (OCI) runtime, image format specifications and OCI reference implementation (runc) and will pursue OCI certification when it is available. Because of its massive adoption, containerd is the industry standard for implementing OCI. 
+
+![Containerd, runc and OCI](/images/chart-a.png "Containerd, runc and OCI")
+
+3. What is the relationship between containerd and container orchestration systems like Kubernetes and Mesos?
+
+Kubernetes today uses Docker directly. In a future version Kubernetes can implement container support in the Kubelet by implementing it's [Container Runtime Interface](https://github.com/kubernetes/kubernetes/blob/release-1.5/docs/devel/container-runtime-interface.md) using containerd. Mesos and other orchestration engines can leverage containerd for core container runtime functionality as well.
+
+![Containerd in the container ecosystem](/images/chart-f.png "Containerd in the container ecosystem")
+
+4. What is the relationship between containerd and cloud managed container services?
+
+See answer above: cloud managed container services can leverage containerd instead of Docker in order to provide container functionalities to their users.
--- a/docs/style/css/flexboxgrid.css
+++ b/docs/style/css/flexboxgrid.css
@ -0,0 +1,802 @@
+/*
+ *
+ * Uncomment and set these variables to customize the grid.
+ *
+ * :root {
+ *  --gutter-width: 1rem;
+ *  --outer-margin: 2rem;
+ *  --gutter-compensation: calc( var( --gutter-width / 2 ) * -1 );
+ *  --half-gutter-width: calc( var( --gutter-width / 2 ) );
+ *  --screen-xs-min: 30em;
+ *  --screen-sm-min: 48em;
+ *  --screen-md-min: 62em;
+ *  --screen-lg-min: 75em;
+ *  --container-sm: calc( 45rem + var( --gutter-width ) );
+ *  --container-md: calc( 60rem + var( --gutter-width ) );
+ *  --container-lg: calc( 70rem + var( --gutter-width ) );
+ * }
+ *
+*/
+
+@custom-media --sm-viewport only screen and (min-width: 48em);
+@custom-media --md-viewport only screen and (min-width: 62em);
+@custom-media --lg-viewport only screen and (min-width: 75em);
+
+.container-fluid {
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: var( --outer-margin, 2rem );
+  padding-left: var( --outer-margin, 2rem );
+}
+
+.row {
+  box-sizing: border-box;
+  display: flex;
+  flex: 0 1 auto;
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin-right: var( --gutter-compensation, -0.5rem );
+  margin-left: var( --gutter-compensation, -0.5rem );
+}
+
+.row.reverse {
+  flex-direction: row-reverse;
+}
+
+.col.reverse {
+  flex-direction: column-reverse;
+}
+
+.col-xs,
+.col-xs-1,
+.col-xs-2,
+.col-xs-3,
+.col-xs-4,
+.col-xs-5,
+.col-xs-6,
+.col-xs-7,
+.col-xs-8,
+.col-xs-9,
+.col-xs-10,
+.col-xs-11,
+.col-xs-12,
+.col-xs-offset-1,
+.col-xs-offset-2,
+.col-xs-offset-3,
+.col-xs-offset-4,
+.col-xs-offset-5,
+.col-xs-offset-6,
+.col-xs-offset-7,
+.col-xs-offset-8,
+.col-xs-offset-9,
+.col-xs-offset-10,
+.col-xs-offset-11,
+.col-xs-offset-12 {
+  box-sizing: border-box;
+  flex: 0 0 auto;
+  padding-right: var( --half-gutter-width, 0.5rem );
+  padding-left: var( --half-gutter-width, 0.5rem );
+}
+
+.col-xs {
+  flex-grow: 1;
+  flex-basis: 0;
+  max-width: 100%;
+}
+
+.col-xs-1 {
+  flex-basis: 8.333%;
+  max-width: 8.333%;
+}
+
+.col-xs-2 {
+  flex-basis: 16.667%;
+  max-width: 16.667%;
+}
+
+.col-xs-3 {
+  flex-basis: 25%;
+  max-width: 25%;
+}
+
+.col-xs-4 {
+  flex-basis: 33.333%;
+  max-width: 33.333%;
+}
+
+.col-xs-5 {
+  flex-basis: 41.667%;
+  max-width: 41.667%;
+}
+
+.col-xs-6 {
+  flex-basis: 50%;
+  max-width: 50%;
+}
+
+.col-xs-7 {
+  flex-basis: 58.333%;
+  max-width: 58.333%;
+}
+
+.col-xs-8 {
+  flex-basis: 66.667%;
+  max-width: 66.667%;
+}
+
+.col-xs-9 {
+  flex-basis: 75%;
+  max-width: 75%;
+}
+
+.col-xs-10 {
+  flex-basis: 83.333%;
+  max-width: 83.333%;
+}
+
+.col-xs-11 {
+  flex-basis: 91.667%;
+  max-width: 91.667%;
+}
+
+.col-xs-12 {
+  flex-basis: 100%;
+  max-width: 100%;
+}
+
+.col-xs-offset-1 {
+  margin-left: 8.333%;
+}
+
+.col-xs-offset-2 {
+  margin-left: 16.667%;
+}
+
+.col-xs-offset-3 {
+  margin-left: 25%;
+}
+
+.col-xs-offset-4 {
+  margin-left: 33.333%;
+}
+
+.col-xs-offset-5 {
+  margin-left: 41.667%;
+}
+
+.col-xs-offset-6 {
+  margin-left: 50%;
+}
+
+.col-xs-offset-7 {
+  margin-left: 58.333%;
+}
+
+.col-xs-offset-8 {
+  margin-left: 66.667%;
+}
+
+.col-xs-offset-9 {
+  margin-left: 75%;
+}
+
+.col-xs-offset-10 {
+  margin-left: 83.333%;
+}
+
+.col-xs-offset-11 {
+  margin-left: 91.667%;
+}
+
+.start-xs {
+  justify-content: flex-start;
+  text-align: start;
+}
+
+.center-xs {
+  justify-content: center;
+  text-align: center;
+}
+
+.end-xs {
+  justify-content: flex-end;
+  text-align: end;
+}
+
+.top-xs {
+  align-items: flex-start;
+}
+
+.middle-xs {
+  align-items: center;
+}
+
+.bottom-xs {
+  align-items: flex-end;
+}
+
+.around-xs {
+  justify-content: space-around;
+}
+
+.between-xs {
+  justify-content: space-between;
+}
+
+.first-xs {
+  order: -1;
+}
+
+.last-xs {
+  order: 1;
+}
+
+@media (--sm-viewport) {
+  .container {
+    width: var( --container-sm, 46rem );
+  }
+
+  .col-sm,
+  .col-sm-1,
+  .col-sm-2,
+  .col-sm-3,
+  .col-sm-4,
+  .col-sm-5,
+  .col-sm-6,
+  .col-sm-7,
+  .col-sm-8,
+  .col-sm-9,
+  .col-sm-10,
+  .col-sm-11,
+  .col-sm-12,
+  .col-sm-offset-1,
+  .col-sm-offset-2,
+  .col-sm-offset-3,
+  .col-sm-offset-4,
+  .col-sm-offset-5,
+  .col-sm-offset-6,
+  .col-sm-offset-7,
+  .col-sm-offset-8,
+  .col-sm-offset-9,
+  .col-sm-offset-10,
+  .col-sm-offset-11,
+  .col-sm-offset-12 {
+    box-sizing: border-box;
+    flex: 0 0 auto;
+    padding-right: var( --half-gutter-width, 0.5rem );
+    padding-left: var( --half-gutter-width, 0.5rem );
+  }
+
+  .col-sm {
+    flex-grow: 1;
+    flex-basis: 0;
+    max-width: 100%;
+  }
+
+  .col-sm-1 {
+    flex-basis: 8.333%;
+    max-width: 8.333%;
+  }
+
+  .col-sm-2 {
+    flex-basis: 16.667%;
+    max-width: 16.667%;
+  }
+
+  .col-sm-3 {
+    flex-basis: 25%;
+    max-width: 25%;
+  }
+
+  .col-sm-4 {
+    flex-basis: 33.333%;
+    max-width: 33.333%;
+  }
+
+  .col-sm-5 {
+    flex-basis: 41.667%;
+    max-width: 41.667%;
+  }
+
+  .col-sm-6 {
+    flex-basis: 50%;
+    max-width: 50%;
+  }
+
+  .col-sm-7 {
+    flex-basis: 58.333%;
+    max-width: 58.333%;
+  }
+
+  .col-sm-8 {
+    flex-basis: 66.667%;
+    max-width: 66.667%;
+  }
+
+  .col-sm-9 {
+    flex-basis: 75%;
+    max-width: 75%;
+  }
+
+  .col-sm-10 {
+    flex-basis: 83.333%;
+    max-width: 83.333%;
+  }
+
+  .col-sm-11 {
+    flex-basis: 91.667%;
+    max-width: 91.667%;
+  }
+
+  .col-sm-12 {
+    flex-basis: 100%;
+    max-width: 100%;
+  }
+
+  .col-sm-offset-1 {
+    margin-left: 8.333%;
+  }
+
+  .col-sm-offset-2 {
+    margin-left: 16.667%;
+  }
+
+  .col-sm-offset-3 {
+    margin-left: 25%;
+  }
+
+  .col-sm-offset-4 {
+    margin-left: 33.333%;
+  }
+
+  .col-sm-offset-5 {
+    margin-left: 41.667%;
+  }
+
+  .col-sm-offset-6 {
+    margin-left: 50%;
+  }
+
+  .col-sm-offset-7 {
+    margin-left: 58.333%;
+  }
+
+  .col-sm-offset-8 {
+    margin-left: 66.667%;
+  }
+
+  .col-sm-offset-9 {
+    margin-left: 75%;
+  }
+
+  .col-sm-offset-10 {
+    margin-left: 83.333%;
+  }
+
+  .col-sm-offset-11 {
+    margin-left: 91.667%;
+  }
+
+  .start-sm {
+    justify-content: flex-start;
+    text-align: start;
+  }
+
+  .center-sm {
+    justify-content: center;
+    text-align: center;
+  }
+
+  .end-sm {
+    justify-content: flex-end;
+    text-align: end;
+  }
+
+  .top-sm {
+    align-items: flex-start;
+  }
+
+  .middle-sm {
+    align-items: center;
+  }
+
+  .bottom-sm {
+    align-items: flex-end;
+  }
+
+  .around-sm {
+    justify-content: space-around;
+  }
+
+  .between-sm {
+    justify-content: space-between;
+  }
+
+  .first-sm {
+    order: -1;
+  }
+
+  .last-sm {
+    order: 1;
+  }
+}
+
+@media (--md-viewport) {
+  .container {
+    width: var( --container-md, 61rem );
+  }
+
+  .col-md,
+  .col-md-1,
+  .col-md-2,
+  .col-md-3,
+  .col-md-4,
+  .col-md-5,
+  .col-md-6,
+  .col-md-7,
+  .col-md-8,
+  .col-md-9,
+  .col-md-10,
+  .col-md-11,
+  .col-md-12,
+  .col-md-offset-1,
+  .col-md-offset-2,
+  .col-md-offset-3,
+  .col-md-offset-4,
+  .col-md-offset-5,
+  .col-md-offset-6,
+  .col-md-offset-7,
+  .col-md-offset-8,
+  .col-md-offset-9,
+  .col-md-offset-10,
+  .col-md-offset-11,
+  .col-md-offset-12 {
+    box-sizing: border-box;
+    flex: 0 0 auto;
+    padding-right: var( --half-gutter-width, 0.5rem );
+    padding-left: var( --half-gutter-width, 0.5rem );
+  }
+
+  .col-md {
+    flex-grow: 1;
+    flex-basis: 0;
+    max-width: 100%;
+  }
+
+  .col-md-1 {
+    flex-basis: 8.333%;
+    max-width: 8.333%;
+  }
+
+  .col-md-2 {
+    flex-basis: 16.667%;
+    max-width: 16.667%;
+  }
+
+  .col-md-3 {
+    flex-basis: 25%;
+    max-width: 25%;
+  }
+
+  .col-md-4 {
+    flex-basis: 33.333%;
+    max-width: 33.333%;
+  }
+
+  .col-md-5 {
+    flex-basis: 41.667%;
+    max-width: 41.667%;
+  }
+
+  .col-md-6 {
+    flex-basis: 50%;
+    max-width: 50%;
+  }
+
+  .col-md-7 {
+    flex-basis: 58.333%;
+    max-width: 58.333%;
+  }
+
+  .col-md-8 {
+    flex-basis: 66.667%;
+    max-width: 66.667%;
+  }
+
+  .col-md-9 {
+    flex-basis: 75%;
+    max-width: 75%;
+  }
+
+  .col-md-10 {
+    flex-basis: 83.333%;
+    max-width: 83.333%;
+  }
+
+  .col-md-11 {
+    flex-basis: 91.667%;
+    max-width: 91.667%;
+  }
+
+  .col-md-12 {
+    flex-basis: 100%;
+    max-width: 100%;
+  }
+
+  .col-md-offset-1 {
+    margin-left: 8.333%;
+  }
+
+  .col-md-offset-2 {
+    margin-left: 16.667%;
+  }
+
+  .col-md-offset-3 {
+    margin-left: 25%;
+  }
+
+  .col-md-offset-4 {
+    margin-left: 33.333%;
+  }
+
+  .col-md-offset-5 {
+    margin-left: 41.667%;
+  }
+
+  .col-md-offset-6 {
+    margin-left: 50%;
+  }
+
+  .col-md-offset-7 {
+    margin-left: 58.333%;
+  }
+
+  .col-md-offset-8 {
+    margin-left: 66.667%;
+  }
+
+  .col-md-offset-9 {
+    margin-left: 75%;
+  }
+
+  .col-md-offset-10 {
+    margin-left: 83.333%;
+  }
+
+  .col-md-offset-11 {
+    margin-left: 91.667%;
+  }
+
+  .start-md {
+    justify-content: flex-start;
+    text-align: start;
+  }
+
+  .center-md {
+    justify-content: center;
+    text-align: center;
+  }
+
+  .end-md {
+    justify-content: flex-end;
+    text-align: end;
+  }
+
+  .top-md {
+    align-items: flex-start;
+  }
+
+  .middle-md {
+    align-items: center;
+  }
+
+  .bottom-md {
+    align-items: flex-end;
+  }
+
+  .around-md {
+    justify-content: space-around;
+  }
+
+  .between-md {
+    justify-content: space-between;
+  }
+
+  .first-md {
+    order: -1;
+  }
+
+  .last-md {
+    order: 1;
+  }
+}
+
+@media (--lg-viewport) {
+  .container {
+    width: var( --container-lg, 71rem );
+  }
+
+  .col-lg,
+  .col-lg-1,
+  .col-lg-2,
+  .col-lg-3,
+  .col-lg-4,
+  .col-lg-5,
+  .col-lg-6,
+  .col-lg-7,
+  .col-lg-8,
+  .col-lg-9,
+  .col-lg-10,
+  .col-lg-11,
+  .col-lg-12,
+  .col-lg-offset-1,
+  .col-lg-offset-2,
+  .col-lg-offset-3,
+  .col-lg-offset-4,
+  .col-lg-offset-5,
+  .col-lg-offset-6,
+  .col-lg-offset-7,
+  .col-lg-offset-8,
+  .col-lg-offset-9,
+  .col-lg-offset-10,
+  .col-lg-offset-11,
+  .col-lg-offset-12 {
+    box-sizing: border-box;
+    flex: 0 0 auto;
+    padding-right: var( --half-gutter-width, 0.5rem );
+    padding-left: var( --half-gutter-width, 0.5rem );
+  }
+
+  .col-lg {
+    flex-grow: 1;
+    flex-basis: 0;
+    max-width: 100%;
+  }
+
+  .col-lg-1 {
+    flex-basis: 8.333%;
+    max-width: 8.333%;
+  }
+
+  .col-lg-2 {
+    flex-basis: 16.667%;
+    max-width: 16.667%;
+  }
+
+  .col-lg-3 {
+    flex-basis: 25%;
+    max-width: 25%;
+  }
+
+  .col-lg-4 {
+    flex-basis: 33.333%;
+    max-width: 33.333%;
+  }
+
+  .col-lg-5 {
+    flex-basis: 41.667%;
+    max-width: 41.667%;
+  }
+
+  .col-lg-6 {
+    flex-basis: 50%;
+    max-width: 50%;
+  }
+
+  .col-lg-7 {
+    flex-basis: 58.333%;
+    max-width: 58.333%;
+  }
+
+  .col-lg-8 {
+    flex-basis: 66.667%;
+    max-width: 66.667%;
+  }
+
+  .col-lg-9 {
+    flex-basis: 75%;
+    max-width: 75%;
+  }
+
+  .col-lg-10 {
+    flex-basis: 83.333%;
+    max-width: 83.333%;
+  }
+
+  .col-lg-11 {
+    flex-basis: 91.667%;
+    max-width: 91.667%;
+  }
+
+  .col-lg-12 {
+    flex-basis: 100%;
+    max-width: 100%;
+  }
+
+  .col-lg-offset-1 {
+    margin-left: 8.333%;
+  }
+
+  .col-lg-offset-2 {
+    margin-left: 16.667%;
+  }
+
+  .col-lg-offset-3 {
+    margin-left: 25%;
+  }
+
+  .col-lg-offset-4 {
+    margin-left: 33.333%;
+  }
+
+  .col-lg-offset-5 {
+    margin-left: 41.667%;
+  }
+
+  .col-lg-offset-6 {
+    margin-left: 50%;
+  }
+
+  .col-lg-offset-7 {
+    margin-left: 58.333%;
+  }
+
+  .col-lg-offset-8 {
+    margin-left: 66.667%;
+  }
+
+  .col-lg-offset-9 {
+    margin-left: 75%;
+  }
+
+  .col-lg-offset-10 {
+    margin-left: 83.333%;
+  }
+
+  .col-lg-offset-11 {
+    margin-left: 91.667%;
+  }
+
+  .start-lg {
+    justify-content: flex-start;
+    text-align: start;
+  }
+
+  .center-lg {
+    justify-content: center;
+    text-align: center;
+  }
+
+  .end-lg {
+    justify-content: flex-end;
+    text-align: end;
+  }
+
+  .top-lg {
+    align-items: flex-start;
+  }
+
+  .middle-lg {
+    align-items: center;
+  }
+
+  .bottom-lg {
+    align-items: flex-end;
+  }
+
+  .around-lg {
+    justify-content: space-around;
+  }
+
+  .between-lg {
+    justify-content: space-between;
+  }
+
+  .first-lg {
+    order: -1;
+  }
+
+  .last-lg {
+    order: 1;
+  }
+}
--- a/docs/style/css/main.css
+++ b/docs/style/css/main.css
@ -0,0 +1,469 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body {
+  background: url(../../images/bg10.jpg);
+  background-position: center;
+  background-attachment: fixed;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+}
+ol,
+ul {
+  list-style: disc;
+}
+ul li {
+  padding: 10px 0;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 2px;
+  border: 2px solid black;
+}
+td, tr, th {
+  border: 1px solid black;
+  margin: 3px;
+  padding: 3px;
+}
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Raleway', sans-serif;
+}
+.container {
+  max-width: 900px;
+  margin: 0 auto;
+}
+.navbar {
+  padding: 6rem 2rem;
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flexbox;
+  display: -ms-flex;
+  display: flex;
+  -webkit-justify-content: space-between;
+  -moz-justify-content: space-between;
+  -ms-justify-content: space-between;
+  justify-content: center;
+  flex-direction: column;
+}
+.navbar .name {
+  font-size: 2rem;
+  font-weight: 500;
+  color: white;
+  clear: both;
+  text-align: center;
+}
+.navbar .name a {
+  padding: .3rem 2rem;
+  color: rgba(255, 255, 255, 1);
+  font-size: 1.6rem;
+#  text-transform: uppercase;
+  font-family: 'Raleway', sans-serif;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.navbar .name a b {
+  font-weight: 800;color: rgba(255, 255, 255, 1);
+  border-bottom: 1px solid rgba(255, 255, 255, 1);
+}
+
+.navbar .name .org {
+  font-size: 0.8rem;
+  text-align: center;
+  margin-left: 0.5rem;
+  color: rgba(255, 255, 255, 1);
+}
+.navbar .actions {
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flexbox;
+  display: -ms-flex;
+  display: flex;
+  padding-top: 1rem;
+  padding-right: 1rem;
+  text-align: center;
+  display: block;
+}
+.navbar .actions .link {
+  margin-left: 2rem;
+  text-transform: uppercase;
+  font-size: 0.8rem;
+  display: inline;
+}
+.navbar .actions .link a {
+  color: rgba(255, 255, 255, 0.8);
+}
+.navbar .actions .link a:hover {
+  color: white;
+}
+.navbar.white {
+  background-color: white;
+}
+.navbar.white .name {
+  color: #254451;
+}
+.navbar.white .name a {
+  color: #254451;
+}
+.navbar.white .name a span.org {
+  color: #254451;
+  font-weight: normal !important;
+}
+.navbar.white .actions .link a {
+  color: #00da9c;
+}
+@media screen and (max-width: 600px) {
+  .navbar .name .org {
+    display: block;
+    margin-left: 0;
+    margin-top: 0.5rem;
+    line-height: 1rem;
+  }
+}
+.hero {
+  min-height: 600px;
+}
+.definition span{
+  opacity: .7;
+  font-weight: bold;
+}
+
+.headerlink a {
+  color: white;
+}
+
+.headerlink a:hover {
+  color: white;
+}
+
+.hero .hamster {
+  padding: 1rem 2rem 3rem 2rem;
+  text-align: center;
+}
+.hero .hamster img {
+  width: 100%;
+  max-width: 500px;
+}
+.hero h3 {
+  padding-top: 1.5rem;
+  text-align: center;
+  color: white;
+  margin-bottom: 1rem;
+}
+.hero h3 img {
+  height: 30px;
+  width: auto;
+  margin-right: 0.7rem;
+  position: relative;
+  top: 0.4rem;
+}
+.hero p {
+  color: white;
+  font-size: 1.3rem;
+  text-align: center;
+  font-weight: 300;
+  padding: 1rem 2rem 0 2rem;
+  line-height: 2rem;
+  font-family: 'Raleway', sans-serif;
+}
+
+.hero p i {
+  font-style: italic;
+  font-weight: 700;
+}
+.hero p strong {
+  font-weight: 700;
+}
+.content {
+  background-color: rgba(255, 255, 255, 0.95);
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flexbox;
+  display: -ms-flex;
+  display: flex;
+  -webkit-flex-flow: row wrap;
+  -moz-flex-flow: row wrap;
+  -ms-flex-flow: row wrap;
+  flex-flow: row wrap;
+}
+.content.blue {
+  background-color: #364449;
+  color: white;
+}
+.content.blue h2 {
+  color: white;
+}
+.content.blue p {
+  color: rgba(255, 255, 255, 0.8);
+}
+.content .wrapper-details {
+  padding: 2rem 2.5rem;
+}
+.content .details .points {
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flexbox;
+  display: -ms-flex;
+  display: flex;
+  -webkit-flex-direction: column;
+  -moz-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+.content .details .points .point {
+  padding-top: 1rem;
+  border-bottom: 1px solid #e7f4f9;
+}
+.content .details .points .point:last-child {
+  border-bottom: 0;
+}
+.content .terminal {
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flexbox;
+  display: -ms-flex;
+  display: flex;
+  -webkit-align-items: center;
+  -moz-align-items: center;
+  -ms-align-items: center;
+  align-items: center;
+  -webkit-justify-content: center;
+  -moz-justify-content: center;
+  -ms-justify-content: center;
+  justify-content: center;
+}
+.content .terminal img {
+  width: 100%;
+}
+.content img {
+  width: 100%;
+}
+.footer {
+  padding: 2rem;
+  color: white;
+}
+.footer footer-links a {
+  color: #fff;
+}
+.footer h3 {
+  text-align: center;
+  color: white;
+  margin-bottom: 0;
+}
+.footer h3 img {
+  height: 30px;
+  width: auto;
+  margin-right: 0.7rem;
+  position: relative;
+  top: 0.4rem;
+}
+.footer .footer-links {
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flexbox;
+  display: -ms-flex;
+  display: flex;
+  -webkit-justify-content: center;
+  -moz-justify-content: center;
+  -ms-justify-content: center;
+  justify-content: center;
+  margin-top: 1.5rem;
+}
+.footer .footer-links .link {
+  margin-right: 0.7rem;
+}
+.footer .footer-links .link a {
+color: rgba(255, 255, 255, 0.5);
+}
+.footer .footer-links .link a:hover {
+  color: rgba(255, 255, 255, 1);
+}
+.footer .copyright {
+  text-align: center;
+  margin-top: 1.5rem;
+  color: rgba(255, 255, 255, 0.6);
+}
+@media screen and (max-width: 960px) {
+  .details,
+  .terminal {
+    width: 100%;
+  }
+  .wrapper-terminal {
+    padding: 0 2rem 2rem 2rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .details {
+    width: 60%;
+  }
+  .terminal {
+    width: 40%;
+  }
+  .wrapper-terminal {
+    padding: 0 2rem 0 0;
+  }
+}
+p {
+  font-size: .9rem;
+  line-height: 1.5rem;
+  margin-bottom: 1rem;
+  font-family: 'Lato', sans-serif;
+}
+h2 {
+  font-size: 1.4rem;
+  font-weight: 500;
+  padding: 3rem 0;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
+  margin: 2rem 0;
+  text-transform: uppercase;
+  text-align: center;
+  color: rgba(0, 0, 0, 0.7);
+}
+h3 {
+  font-size: 1.2rem;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.81);
+  margin: 4rem 0 1rem;
+  text-transform: uppercase;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+a {
+  color: #96090d;
+  text-decoration: none;
+}
+ol li {
+  font-size: 1.2rem;
+  font-family: 'Raleway', sans-serif;
+  color: rgba(0, 0, 0, 0.81);
+  margin: 4rem 0 1rem;
+  text-transform: uppercase;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+.wrapper-details a {
+  font-weight: 800
+}
+a:hover {
+  color: #5e0608;
+}
+body {
+  font-family: "Helvetica Neue", Segoe UI, Arial, "Lucida Grande", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  font-size: 14px;
+  color: #254451;
+  background-color: #e7f4f9;
+}
--- a/docs/style/css/tomorrow-night.css
+++ b/docs/style/css/tomorrow-night.css
@ -0,0 +1,101 @@
+/* Tomorrow Night Theme */
+/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
+/* Original theme - https://github.com/chriskempson/tomorrow-theme */
+/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
+
+/* Tomorrow Comment */
+.hljs-comment {
+  color: #969896;
+}
+
+/* Tomorrow Red */
+.hljs-variable,
+.hljs-attribute,
+.hljs-tag,
+.hljs-regexp,
+.ruby .hljs-constant,
+.xml .hljs-tag .hljs-title,
+.xml .hljs-pi,
+.xml .hljs-doctype,
+.html .hljs-doctype,
+.css .hljs-id,
+.css .hljs-class,
+.css .hljs-pseudo {
+  color: #cc6666;
+}
+
+/* Tomorrow Orange */
+.hljs-number,
+.hljs-preprocessor,
+.hljs-pragma,
+.hljs-built_in,
+.hljs-literal,
+.hljs-params,
+.hljs-constant {
+  color: #de935f;
+}
+
+/* Tomorrow Yellow */
+.ruby .hljs-class .hljs-title,
+.css .hljs-rule .hljs-attribute {
+  color: #f0c674;
+}
+
+/* Tomorrow Green */
+.hljs-string,
+.hljs-value,
+.hljs-inheritance,
+.hljs-header,
+.hljs-name,
+.ruby .hljs-symbol,
+.xml .hljs-cdata {
+  color: #b5bd68;
+}
+
+/* Tomorrow Aqua */
+.hljs-title,
+.css .hljs-hexcolor {
+  color: #8abeb7;
+}
+
+/* Tomorrow Blue */
+.hljs-function,
+.python .hljs-decorator,
+.python .hljs-title,
+.ruby .hljs-function .hljs-title,
+.ruby .hljs-title .hljs-keyword,
+.perl .hljs-sub,
+.javascript .hljs-title,
+.coffeescript .hljs-title {
+  color: #81a2be;
+}
+
+/* Tomorrow Purple */
+.hljs-keyword,
+.javascript .hljs-function {
+  color: #b294bb;
+}
+
+.hljs {
+  font-family: Menlo, Monaco, Consolas, monospace;
+  -webkit-font-smoothing: subpixel-antialiased;
+  line-height: 1.2rem;
+  display: block;
+  overflow-x: auto;
+  background: #1d1f21;
+  color: #c5c8c6;
+  padding: 1rem;
+  -webkit-text-size-adjust: none;
+  border-radius: 4px;
+  margin-bottom: 1rem;
+}
+
+.coffeescript .javascript,
+.javascript .xml,
+.tex .hljs-formula,
+.xml .javascript,
+.xml .vbscript,
+.xml .css,
+.xml .hljs-cdata {
+  opacity: 0.5;
+}
--- a/docs/style/js/highlight.min.js
+++ b/docs/style/js/highlight.min.js
--- a/docs/style/js/jquery-2.1.4.min.js
+++ b/docs/style/js/jquery-2.1.4.min.js
--- a/docs/style/js/main.js
+++ b/docs/style/js/main.js
@ -0,0 +1,7 @@
+hljs.initHighlightingOnLoad();
+(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+ga('create', 'UA-71407002-1', 'auto');
+ga('send', 'pageview');
--- a/docs/style/less/flexbox.less
+++ b/docs/style/less/flexbox.less
@ -0,0 +1,135 @@
+// --------------------------------------------------
+// Flexbox LESS mixins
+// The spec: http://www.w3.org/TR/css3-flexbox
+// --------------------------------------------------
+
+// Flexbox display
+// flex or inline-flex
+.flex-display(@display: flex) {
+	display: ~"-webkit-@{display}";
+	display: ~"-moz-@{display}";
+	display: ~"-ms-@{display}box"; // IE10 uses -ms-flexbox
+	display: ~"-ms-@{display}"; // IE11
+	display: @display;
+}
+
+// The 'flex' shorthand
+// - applies to: flex items
+// <positive-number>, initial, auto, or none
+.flex(@columns: initial) {
+  -webkit-flex: @columns;
+     -moz-flex: @columns;
+      -ms-flex: @columns;
+          flex: @columns;
+}
+
+// Flex Flow Direction
+// - applies to: flex containers
+// row | row-reverse | column | column-reverse
+.flex-direction(@direction: row) {
+  -webkit-flex-direction: @direction;
+     -moz-flex-direction: @direction;
+      -ms-flex-direction: @direction;
+          flex-direction: @direction;
+}
+
+// Flex Line Wrapping
+// - applies to: flex containers
+// nowrap | wrap | wrap-reverse
+.flex-wrap(@wrap: nowrap) {
+  -webkit-flex-wrap: @wrap;
+     -moz-flex-wrap: @wrap;
+      -ms-flex-wrap: @wrap;
+          flex-wrap: @wrap;
+}
+
+// Flex Direction and Wrap
+// - applies to: flex containers
+// <flex-direction> || <flex-wrap>
+.flex-flow(@flow) {
+  -webkit-flex-flow: @flow;
+     -moz-flex-flow: @flow;
+      -ms-flex-flow: @flow;
+          flex-flow: @flow;
+}
+
+// Display Order
+// - applies to: flex items
+// <integer>
+.flex-order(@order: 0) {
+  -webkit-order: @order;
+     -moz-order: @order;
+      -ms-order: @order;
+          order: @order;
+}
+
+// Flex grow factor
+// - applies to: flex items
+// <number>
+.flex-grow(@grow: 0) {
+  -webkit-flex-grow: @grow;
+     -moz-flex-grow: @grow;
+      -ms-flex-grow: @grow;
+          flex-grow: @grow;
+}
+
+// Flex shrink
+// - applies to: flex item shrink factor
+// <number> 
+.flex-shrink(@shrink: 1) {
+  -webkit-flex-shrink: @shrink;
+     -moz-flex-shrink: @shrink;
+      -ms-flex-shrink: @shrink;
+          flex-shrink: @shrink;
+}
+
+// Flex basis
+// - the initial main size of the flex item
+// - applies to: flex itemsnitial main size of the flex item
+// <width> 
+.flex-basis(@width: auto) {
+  -webkit-flex-basis: @width;
+     -moz-flex-basis: @width;
+      -ms-flex-basis: @width;
+          flex-basis: @width;
+}
+
+// Axis Alignment
+// - applies to: flex containers
+// flex-start | flex-end | center | space-between | space-around 
+.justify-content(@justify: flex-start) {
+  -webkit-justify-content: @justify;
+     -moz-justify-content: @justify;
+      -ms-justify-content: @justify;
+          justify-content: @justify;
+}
+
+// Packing Flex Lines
+// - applies to: multi-line flex containers
+// flex-start | flex-end | center | space-between | space-around | stretch 
+.align-content(@align: stretch) {
+  -webkit-align-content: @align;
+     -moz-align-content: @align;
+      -ms-align-content: @align;
+          align-content: @align;
+}
+
+// Cross-axis Alignment
+// - applies to: flex containers
+// flex-start | flex-end | center | baseline | stretch 
+.align-items(@align: stretch) {
+  -webkit-align-items: @align;
+     -moz-align-items: @align;
+      -ms-align-items: @align;
+          align-items: @align;
+}
+
+// Cross-axis Alignment
+// - applies to: flex items
+// auto | flex-start | flex-end | center | baseline | stretch 
+.align-self(@align: auto) {
+  -webkit-align-self: @align;
+     -moz-align-self: @align;
+      -ms-align-self: @align;
+          align-self: @align;
+}
--- a/docs/style/less/layout.less
+++ b/docs/style/less/layout.less
@ -0,0 +1,237 @@
+.container {
+  max-width: 1271px;
+  margin: 0 auto;
+}
+
+.navbar {
+  padding: 1rem 2rem;
+  .flex-display();
+  .justify-content(space-between);
+  .name {
+    font-size: 2rem;
+    font-weight: 500;
+    color: white;
+    a {
+      color: white;
+    }
+    .org {
+      font-size: 0.8rem;
+      margin-left: 0.5rem;
+      color: rgba(255,255,255,0.8);
+    }
+  }
+  .actions {
+    .flex-display();
+    padding-top: 1rem;
+    padding-right: 1rem;
+    .link {
+      margin-left: 2rem;
+      text-transform: uppercase;
+      font-weight: 600;
+      font-size: 0.8rem;
+      a {
+        color: rgba(255,255,255,0.6);
+        &:hover {
+          color: white;
+        }
+      }
+    }
+  }
+  &.white {
+    background-color: white;
+    .name {
+      a {
+        color: @gray-darkest;
+      }
+      color: @gray-darkest;
+      .org {
+        color: @gray-darkest;
+      }
+    }
+    .actions {
+      .link {
+        a {
+          color: @brand-primary;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .navbar {
+    .name {
+      .org {
+        display: block;
+        margin-left: 0;
+        margin-top: 0.5rem;
+        line-height: 1rem;
+      }
+    }
+  }
+}
+
+.hero {
+  background-color: @color-gradient-start;
+  background-image: linear-gradient(-135deg, @color-gradient-start 0%, @color-gradient-end 100%);
+  .hamster {
+    padding: 1rem 2rem 3rem 2rem;
+    img {
+      width: 100%;
+      max-width: 500px;
+    }
+    text-align: center;
+  }
+  h3 {
+    padding-top: 1.5rem;
+    text-align: center;
+    color: white;
+    margin-bottom: 1rem;
+    img {
+      height: 30px;
+      width: auto;
+      margin-right: 0.7rem;
+      position: relative;
+      top: 0.4rem;
+    }
+  }
+  p {
+    strong {
+      font-weight: 700;
+    }
+    color: white;
+    font-size: 1.5rem;
+    text-align: center;
+    font-weight: 300;
+    padding: 1rem 2rem 0 2rem;
+    line-height: 2rem;
+  }
+}
+
+.content {
+  background-color: white;
+  .flex-display();
+  .flex-flow(row wrap);
+  &.blue {
+    background-color: @gray-dark;
+    color: white;
+    h2 {
+      color: white;
+    }
+    p {
+      color: rgba(255,255,255,0.8);
+    }
+  }
+  .wrapper-details {
+    padding: 2rem 2.5rem;
+  }
+  .details {
+    .points {
+      .flex-display();
+      .flex-direction(column);
+      .point {
+        padding-top: 1rem;
+        border-bottom: 1px solid @color-background;
+        &:last-child {
+          border-bottom: 0;
+        }
+      }
+    }
+  }
+  .terminal {
+    .flex-display();
+    .align-items(center);
+    .justify-content(center);
+    img {
+      width: 100%;
+    }
+  }
+}
+
+.footer {
+  background-color: @gray-darkest;
+  padding: 2rem;
+  color: white;
+  h3 {
+    text-align: center;
+    color: white;
+    margin-bottom: 0;
+    img {
+      height: 30px;
+      width: auto;
+      margin-right: 0.7rem;
+      position: relative;
+      top: 0.4rem;
+    }
+  }
+  .footer-links {
+    .flex-display();
+    .justify-content(center);
+    margin-top: 1.5rem;
+    .link {
+      margin-right: 0.7rem;
+    }
+  }
+  .copyright {
+    text-align: center;
+    margin-top: 1.5rem;
+    color: rgba(255,255,255,0.6);
+  }
+}
+
+@media screen and (max-width: 960px) {
+  .details, .terminal { 
+    width: 100%; 
+  }
+  .wrapper-terminal {
+    padding: 0 2rem 2rem 2rem;
+  }
+}
+
+@media screen and (min-width: 960px) {
+  .details {
+    width: 60%;
+  }
+  .terminal { 
+    width: 40%;
+  }
+  .wrapper-terminal {
+    padding: 0 2rem 0 0;
+  }
+}
+
+p {
+  font-size: 1.2rem;
+  line-height: 1.5rem;
+  margin-bottom: 1rem;
+}
+
+h2 {
+  font-size: 2rem;
+  font-weight: 500;
+  margin-bottom: 1rem;
+  color: @blue-dark;
+}
+
+h3 {
+  font-size: 1.2rem;
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+  color: @blue-dark;
+}
+
+a {
+  color: @brand-primary;
+  text-decoration: none;
+  &:hover {
+    color: lighten(@brand-primary, 5%);
+  }
+}
+
+body {
+  font-family: @font-regular;
+  -webkit-font-smoothing: antialiased;
+  font-size: 14px;
+  color: @gray-darkest;
+  background-color: @color-background;
+}
--- a/docs/style/less/main.less
+++ b/docs/style/less/main.less
@ -0,0 +1,4 @@
+@import "reset.less";
+@import "variables.less";
+@import "flexbox.less";
+@import "layout.less";
--- a/docs/style/less/reset.less
+++ b/docs/style/less/reset.less
@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
--- a/docs/style/less/variables.less
+++ b/docs/style/less/variables.less
@ -0,0 +1,12 @@
+@font-regular:          "Helvetica Neue", Segoe UI, Arial, "Lucida Grande", sans-serif;
+
+@brand-primary:         #00DA9C;
+
+@gray-darkest:          #254451;
+@gray-dark:             #364449;
+
+@blue-dark:             #0077A8;
+
+@color-background:      #E7F4F9;
+@color-gradient-start:  #0078C5;
+@color-gradient-end:    #004775;