Initial commits

Signed-off-by: moxiegirl <mary@blockstack.com>
6 years ago · 8bfafdddca
284 changed files with 35993 additions and 1 deletions
--- a/404.md
+++ b/404.md
@ -0,0 +1,7 @@
+---
+layout: page
+title: Feeling Lost
+permalink: /404.html
+---
+
+## The page you are looking for cannot be found. Please navigate to [homepage]({{ site.url }}).
--- a/32
+++ b/32
@ -0,0 +1,32 @@
+source "https://rubygems.org"
+ruby RUBY_VERSION
+
+# Hello! This is where you manage which Jekyll version is used to run.
+# When you want to use a different version, change it below, save the
+# file and run `bundle install`. Run Jekyll with `bundle exec`, like so:
+#
+#     bundle exec jekyll serve
+#
+# This will help ensure the proper Jekyll version is running.
+# Happy Jekylling!
+gem "jekyll", "3.4.1"
+
+# This is the default theme for new Jekyll sites. You may change this to anything you like.
+# gem "minima", "~> 2.0"
+
+# If you want to use GitHub Pages, remove the "gem "jekyll"" above and
+# uncomment the line below. To upgrade, run `bundle update github-pages`.
+# gem "github-pages", group: :jekyll_plugins
+
+# If you have any plugins, put them here!
+group :jekyll_plugins do
+   gem "jekyll-feed", "~> 0.6"
+   gem 'jekyll-paginate', '~> 1.1'
+   gem 'jekyll-seo-tag'
+   gem 'jekyll-gist'
+   gem 'jekyll-livereload'
+   gem 'jekyll-avatar'
+end
+
+# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
+gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
--- a/Gemfile.lock
+++ b/Gemfile.lock
@ -0,0 +1,88 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    addressable (2.5.2)
+      public_suffix (>= 2.0.2, < 4.0)
+    colorator (1.1.0)
+    em-websocket (0.5.1)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0.6.0)
+    eventmachine (1.2.7)
+    faraday (0.15.2)
+      multipart-post (>= 1.2, < 3)
+    ffi (1.9.25)
+    forwardable-extended (2.6.0)
+    http_parser.rb (0.6.0)
+    jekyll (3.4.1)
+      addressable (~> 2.4)
+      colorator (~> 1.0)
+      jekyll-sass-converter (~> 1.0)
+      jekyll-watch (~> 1.1)
+      kramdown (~> 1.3)
+      liquid (~> 3.0)
+      mercenary (~> 0.3.3)
+      pathutil (~> 0.9)
+      rouge (~> 1.7)
+      safe_yaml (~> 1.0)
+    jekyll-avatar (0.6.0)
+      jekyll (~> 3.0)
+    jekyll-feed (0.10.0)
+      jekyll (~> 3.3)
+    jekyll-gist (1.5.0)
+      octokit (~> 4.2)
+    jekyll-livereload (0.2.2)
+      em-websocket (~> 0.5)
+      jekyll (~> 3.0)
+    jekyll-paginate (1.1.0)
+    jekyll-sass-converter (1.5.2)
+      sass (~> 3.4)
+    jekyll-seo-tag (2.5.0)
+      jekyll (~> 3.3)
+    jekyll-watch (1.5.1)
+      listen (~> 3.0)
+    kramdown (1.17.0)
+    liquid (3.0.6)
+    listen (3.1.5)
+      rb-fsevent (~> 0.9, >= 0.9.4)
+      rb-inotify (~> 0.9, >= 0.9.7)
+      ruby_dep (~> 1.2)
+    mercenary (0.3.6)
+    multipart-post (2.0.0)
+    octokit (4.9.0)
+      sawyer (~> 0.8.0, >= 0.5.3)
+    pathutil (0.16.1)
+      forwardable-extended (~> 2.6)
+    public_suffix (3.0.2)
+    rb-fsevent (0.10.3)
+    rb-inotify (0.9.10)
+      ffi (>= 0.5.0, < 2)
+    rouge (1.11.1)
+    ruby_dep (1.5.0)
+    safe_yaml (1.0.4)
+    sass (3.5.7)
+      sass-listen (~> 4.0.0)
+    sass-listen (4.0.0)
+      rb-fsevent (~> 0.9, >= 0.9.4)
+      rb-inotify (~> 0.9, >= 0.9.7)
+    sawyer (0.8.1)
+      addressable (>= 2.3.5, < 2.6)
+      faraday (~> 0.8, < 1.0)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  jekyll (= 3.4.1)
+  jekyll-avatar
+  jekyll-feed (~> 0.6)
+  jekyll-gist
+  jekyll-livereload
+  jekyll-paginate (~> 1.1)
+  jekyll-seo-tag
+  tzinfo-data
+
+RUBY VERSION
+   ruby 2.3.3p222
+
+BUNDLED WITH
+   1.16.3
--- a/README.md
+++ b/README.md
@ -1 +1,351 @@
-# docs.blockstack
+# Docs is a premium documentation Jekyll theme
+
+Desk was developed by [Ivan Chromjak](https://ivanchromjak.com) for [jekyll.plus](https://jekyll.plus/), theme [live demo](https://docs.jekyll.plus/) available.
+
+## Features
+
+* Contact form
+* Live Search
+* Responsive videos
+* Image lightbox
+* Google maps
+* Github avatar
+* Changelog page
+* Contact form (FormSpree)
+* Pre-built pages
+* Disqus comments for posts
+* Configurable home page header images
+* Optimised for [GitHub](https://pages.github.com/) pages
+* RSS feed
+* SEO tags
+* Google Analytics
+
+
+## Installation
+
+Install the dependencies with [Bundler](http://bundler.io/):
+
+```bash
+bundle install
+```
+
+Run the following to generate your site:
+```bash
+bundle exec jekyll serve
+```
+
+You can find more on [Deployment Methods](https://jekyllrb.com/docs/deployment-methods/) page on Jekyll website.
+
+## Setup
+
+### Site and author details
+Add your site and author details in `_config.yml`:
+```yaml
+# Site title and description
+title:              Docs - Documentation Jekyll Theme
+description:        Documentation Jekyll theme.
+
+# Site base hostname & protocol, e.g. http://example.com
+url:                "https://docs.jekyll.plus"
+
+# Site logo, image or text
+brand:
+    image:          touch-icon.svg  # e.g. logo.png, upload logo image file to /assets/img/ folder
+    text:           Docs      # if the above "logo:" image variable  is not set, this text logo is displayed instead
+
+# Default author settings
+author:
+    name:       John Smith
+    github:     PressApps    # Github username for avatar
+
+# Author settings, displayed on post and doc pages if front matter references author name e.g. author: peter
+authors:
+    peter:
+        name:       Peter Brown
+        github:     PressApps    # Github username for avatar
+
+# Social icons displayed in footer
+social:
+    email:
+    website:
+    facebook:       https://www.facebook.com/
+    flickr:
+    dribbble:
+    github:
+    googleplus:
+    instagram:      https://www.instagram.com/
+    linkedin:
+    pinterest:
+    twitter:        https://twitter.com/
+    vimeo:          https://vimeo.com/
+    youtube:
+
+# Twitter share button
+twitter_username:
+
+```
+
+### Navigation Bar
+Set in the main navigation links in `_data/navigation_header.yml`:
+```yaml
+- title: About
+  url: /about/
+```
+
+### Footer
+
+Edit copyright notice in `_config.yml`:
+```yaml
+footer:
+    copyright:
+```
+
+Set in the navigation links in `_data/navigation_footer.yml`:
+```yaml
+- title: About
+  url: /about/
+```
+
+### Enabling comments (via Disqus)
+
+Optionally, if you have a Disqus account, you can tell Jekyll to use it to show a comments section below each post. To enable it, add the following lines to your Jekyll site:
+
+```yaml
+disqus:
+    shortname: my_disqus_shortname
+```
+
+You can find out more about Disqus' shortnames [here](https://help.disqus.com/customer/portal/articles/466208).
+
+Comments are enabled by default and will only appear in production, i.e., `JEKYLL_ENV=production`. If you don't want to display comments for a particular post you can disable them by adding `comments: false` to that post's YAML Front Matter.
+
+### Google Analytics
+
+To enable Google Anaytics, add the following lines to your Jekyll site:
+
+```yaml
+  google_analytics: UA-NNNNNNNN-N
+```
+
+Google Analytics will only appear in production, i.e., `JEKYLL_ENV=production`
+
+### Google Map
+
+To display Google map on contact page, add the following in your page content, replacing latitude, longitude and zoom values:
+
+```yaml
+{% include map.html latitude="40.6700" longitude="-73.9400" zoom="16" %}
+```
+
+### Contact Form (via FormSpree)
+
+Submit the form and confirm your email address at [FormSpree](https://formspree.io/). Then add the following lines to contact page YAML Front Matter, replacing the email address:
+
+```yaml
+formspree:
+    email: my_name@gmail.com
+    redirect: /thanks/
+```
+
+### Update favicon
+
+You can find the current favicon (favicon.png) inside the theme `/assets/img/` directory, just replace it with your new favicon.
+
+## Posts
+
+To create a new post, you can create a new markdown file inside the `_posts` directory by following the recommended file naming format:
+```
+YEAR-MONTH-DAY-title.MARKUP
+```
+Where `YEAR` is a four-digit number, `MONTH` and `DAY` are both two-digit numbers, and `MARKUP` is the file extension representing the format used in the file. For example, the following are examples of valid post filenames:
+
+```
+2011-12-31-new-years-eve-is-awesome.md
+2012-09-12-how-to-write-a-blog.md
+```
+
+Post requires front matter, everything in between the first and second --- are part of the YAML Front Matter, and everything after the second --- will be rendered with Markdown and show up as “Content”.
+The following is a post file with different configurations you can add as example:
+
+```yaml
+---
+layout: post
+title: How To Travel On Low Budget
+---
+```
+
+You can rebuild the site in many different ways, but the most common way is to run `bundle exec jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.
+
+To keep things more organized, add post images to `/assets/posts/` directory, and add theme images to `/assets/img/` directory.
+
+### Adding images
+To add an image to a post or page use the following codes:
+Local image from `/assets/posts/` directory:
+```yaml
+{% include image.html img="girl.jpg" alt="Alt for image" caption="Girl on a rock" %}
+```
+External wide image with lightbox:
+```yaml
+{% include image.html img="https://source.unsplash.com/TT-ROxWj9nA.jpg" lightbox="true" alt="Alt for image" caption="Image in lightbox" %}
+```
+
+### Adding table of contents
+Add the following code at the top of the post:
+```
+#### Sections in this article
+{:.no_toc}
+* TOC
+{:toc}
+```
+`{:.no_toc}` exludes `#### Sections in this article` title from indexing in table of contents
+
+### Responsive Videos
+Embed local videos:
+```html
+<video controls playsinline uk-video="automute: true">
+    <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
+    <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv" type="video/ogg">
+</video>
+```
+Embed YouTube videos:
+```html
+<iframe src="http://www.youtube.com/embed/YE7VzlLtp-4?autoplay=0&amp;showinfo=0&amp;rel=0&amp;modestbranding=1&amp;playsinline=1" width="600" height="340" frameborder="0" allowfullscreen uk-responsive uk-video="automute: true"></iframe>
+```
+
+To create a draft post, create the post file under the `_drafts` directory, and you can find more information in [Working with Drafts](https://jekyllrb.com/docs/drafts/).
+
+## Home Page
+
+To create a home page, just create a `index.md` file inside the root directory. The following is a YAML Front Matter example for a page:
+
+```yaml
+---
+layout: home
+hero:
+    title: How Can We Help?     # hero section settings
+    subtitle: Search or browse in depth articles and videos on everything Jekyll, from basic theme setup and hosting to customisation and development
+    image: imac.svg             # display small image above title
+    search: true                # enable search
+categories:
+    columns: 3                  # number of category columns; 1, 2, 3, 4
+    title: Browse Topics
+    subtitle: Get your answers fast, jump to most popular documentation content
+featured:                       # featured docs section settings
+    title: Popular Articles
+    tag: featured                   # tag used to populate featured section on home page
+section:                        # display page content
+    title: Need More?
+    subtitle: This section displays optional page content lorem ipsum
+cta:                            # call to action section
+    title: Didn't find an answer to your question?
+    subtitle: Get in touch with us for details on additional services and custom work pricing
+    button_text: Contact Us
+    button_url: /contact/
+---
+```
+
+Home page category boxes are added in `_data/navigation_home.yml`, e.g.:
+```yml
+- title: Getting Started
+  desc: Get your account up and running in just few easy steps
+  icon: settings
+  doc: usage
+
+- title: Account and Billing
+  desc: Managing your account, creating new users and exporting data
+  icon: credit-card
+  doc: drafts
+```
+
+All available icons can be found [here](https://getuikit.com/docs/icon#library).
+
+## Docs
+
+To create a document post, just create a new page inside the root directory and add the following code in content:
+```
+{% include faqs.html %}
+```
+
+Create new doc post entries in `_docs` folder, similar to creating posts, but with following front matter settings:
+
+```yml
+---
+layout: doc
+title: Category hosting Setting up new domain and page
+subtitle: This is optional doc subtitle
+tags: featured development
+author: peter
+---
+```
+
+Sidebar navigation on docs post can edited in `_data/navigation_docs.yml`:
+
+```yml
+- title: Getting Started    # Section title
+  docs:
+  - home                    # Doc file name from _docs folder
+  - quickstart
+  - installation
+  - windows
+```
+
+## Changelog page
+
+Create  new page with the following front matter:
+
+```yml
+---
+layout: changelog
+title: Changelog
+permalink: /changelog/
+---
+```
+
+Changelog enties are added in `_data/changelog.yml`:
+
+```yml
+- title: Version 0.6.0
+  label:
+  date: Aug 15, 2017
+  list:
+  - Added style support for radio and checkbox in Firefox
+  - Removed class from Section component
+```
+
+
+## Customization
+
+To modify the primary color, open `/_sass/theme/variables.scss` and replace the color values e.g.:
+
+```scss
+// Main content
+$color-main: #0F1214;
+```
+
+Further style customisation can be done in the following files:
+```
+/_sass/theme/mixins.scss
+/_sass/theme/variables.scss
+/assets/css/main.scss
+```
+
+## Development
+
+Install [UIkit](https://getuikit.com/) font end framework dependency via Npm:
+```bash
+npm install
+```
+Enable live browser reload with the following:
+```bash
+bundle exec jekyll s --livereload
+```
+
+## Credits and Sources
+
+- Google analytics https://www.google.com/analytics/
+- Google maps https://www.google.com/maps
+- UIkit front end framework https://getuikit.com/
+- Jekyll CML https://jekyllrb.com/
+
+## Support
+Customer support is provided through our Envato profile page [contact form](https://themeforest.net/user/pressapps) for up to six months from the purchase date and is provided Monday to Friday during the business week. We aim to answer all support requests daily, most are handled within 48h.
--- a/_config.yml
+++ b/_config.yml
@ -0,0 +1,116 @@
+# Welcome to Jekyll!
+#
+# This config file is meant for settings that affect your whole blog.
+# For technical reasons, this file is *NOT* reloaded automatically when you use
+# 'bundle exec jekyll serve'. If you change this file, please restart the server process.
+
+# Site title and description
+title:              Blockstack
+description:        Docs
+
+# Site subpath, e.g. /blog
+baseurl:            ""
+
+# Permalink URLs structure, for permalink style options see: https://jekyllrb.com/docs/permalinks/
+permalink:          /:title/
+
+# Site base hostname & protocol, e.g. http://example.com
+url:                "https://zbabystack.netlify.com/"
+
+
+github_editme_path: moxiegirl/docs-new/blob/master
+# if you're using Github, provide the basepath to the branch you've created for reviews, following the sample here. if not, leave this value blank.
+
+
+# Site logo, image or text
+brand:
+    image:          logo.png  # e.g. logo.png, upload logo image file to /assets/img/ folder
+    text:           Docs      # if the above "logo:" image variable  is not set, this text logo is displayed instead
+
+# Default author settings
+author:
+    name:       Blockstack
+    github:     Blockstack    # Github username for avatar
+
+# Author settings, displayed on post and doc pages if front matter references author name e.g. author: peter
+authors:
+    peter:
+        name:       Peter Brown
+        github:     PressApps    # Github username for avatar
+
+# Social icons displayed in footer
+social:
+    email:
+    website:
+    facebook:       https://www.facebook.com/
+    flickr:
+    dribbble:
+    github:
+    googleplus:
+    instagram:      https://www.instagram.com/
+    linkedin:
+    pinterest:
+    twitter:        https://twitter.com/
+    vimeo:          https://vimeo.com/
+    youtube:
+
+# Twitter share button
+twitter_username:
+
+# Default footer image settings
+footer:
+    copyright:      Blockstack
+
+# Disqus comments shortname, requires Disqus account https://disqus.com/
+disqus:
+    shortname:      # 1234
+
+# Google analytics code, get your code here https://www.google.com/analytics/
+google_analytics:
+
+# Google maps API key, get your key here: https://developers.google.com/maps/documentation/javascript/get-api-key
+google_maps_api_key:
+
+# Number of posts displayed on blog page
+paginate: 10
+
+# Blog path
+paginate_path:      "/news/:num/"
+
+# Path to post content assets directory i.e post images, pdfs etc
+post_assets:        /assets/posts/
+#keep_files:  (`/images/`)
+
+
+# Build settings
+markdown:           kramdown
+highlighter:        rouge
+
+gems:
+  - jekyll-feed
+  - jekyll-seo-tag
+  - jekyll-gist
+  - jekyll-avatar
+exclude:
+  - Gemfile
+  - Gemfile.lock
+  - node_modules
+
+sass:
+  style:            compressed
+
+collections:
+  apis:
+    output: true
+  docs:
+    output: true
+  gaia:
+    output: true
+  learn:
+    output: true
+  naming:
+    output: true
+  newinternet:
+    output: true
+  auth:
+    output: true
--- a/_data/changelog.yml
+++ b/_data/changelog.yml
@ -0,0 +1,38 @@
+# Changelog page source
+
+- title: Version 1.0.0
+  label: STABLE
+  date: Oct 21, 2017
+  list:
+  - Added Slideshow component
+  - Added style support for radio and minusbox in Firefox
+  - Removed class from Section component
+  - Allow fullscreen mode for videos in Lightbox
+  - Fixed responsive images in modal for IE11
+  - Fix Grid and Margin component for cells with no height
+  - Larger horizontal padding for form input and textarea
+
+- title: Version 1.0.0
+  label: BETA 1
+  date: Sep 01, 2017
+  list:
+  - Allow fullscreen mode for YouTube videos in Lightbox
+  - Fix icons not displaying if connected in rapid succession
+  - Fix scrollbar jumping in Switcher
+
+- title: Version 0.6.0
+  label:
+  date: Aug 15, 2017
+  list:
+  - Added style support for radio and checkbox in Firefox
+  - Removed class from Section component
+  - Add workaround to mitigate the duplicating icons issue
+  - Fixed responsive images in modal for IE11
+
+- title: Version 0.5.0
+  label:
+  date: Oct 21, 2017
+  list:
+  - Media options now support any valid media query syntax
+  - Added style support for radio and checkbox in Firefox
+  - Fix whitespace trimming in dist
--- a/_data/navigation_auth.yml
+++ b/_data/navigation_auth.yml
@ -0,0 +1,13 @@
+- title: Atlas Overview
+  docs:
+  - auth/overview
+  - auth/workings
+  - auth/compare
+
+- title: How to use
+  docs:
+  - auth/introduction
+  - auth/lookups
+  - auth/addnew
+  - auth/propagate
+  - auth/inventory
--- a/_data/navigation_docs.yml
+++ b/_data/navigation_docs.yml
@ -0,0 +1,25 @@
+- title: App Development Tutorial
+  docs:
+  - docs/about
+  - docs/decide
+  - docs/idea
+  - docs/build
+  - docs/register
+
+- title: Feature examples
+  docs:
+  - docs/tutorials/hello-blockstack
+  - docs/tutorials/multi-player-storage
+
+- title: Reference
+  docs:
+  - apis/jsdocs/index
+  - docs/faq
+  - docs/glossary
+
+- title: Contributing
+  docs:
+  - docs/contribute
+  - docs/issues
+  - docs/pullrequest
+  - docs/community
--- a/_data/navigation_footer.yml
+++ b/_data/navigation_footer.yml
@ -0,0 +1,10 @@
+# Footer navigation links
+
+- title: Blockstack.org
+  url: https://blockstack.org
+
+- title: Forums
+  url: https://forum.blockstack.org/
+
+- title: GitHub
+  url: https://github.com/blockstack
--- a/_data/navigation_gaia.yml
+++ b/_data/navigation_gaia.yml
@ -0,0 +1,18 @@
+- title: About
+  docs:
+  - gaia/overview
+  - gaia/control
+  - gaia/writeread
+  - gaia/access
+
+- title: Tutorials
+  docs:
+  - gaia/hello-gaia
+  - gaia/media
+  - gaia/sharing
+
+- title: How to
+  docs:
+  - gaia/run-hub
+  - gaia/configure
+  - gaia/test
--- a/_data/navigation_header.yml
+++ b/_data/navigation_header.yml
@ -0,0 +1,9 @@
+# Navbar menu navigation links
+- title: Blockstack.org
+  url: https://blockstack.org
+
+- title: Forums
+  url: https://forum.blockstack.org/
+
+- title: GitHub
+  url: https://github.com/blockstack
--- a/_data/navigation_home.yml
+++ b/_data/navigation_home.yml
@ -0,0 +1,31 @@
+# Categories home page navigation
+
+- title: Evaluate Blockstack
+  desc: Learn about the technology behind Blockstack. Understand the value it offers and how it provides it.
+  icon: settings
+  doc: learn/overview
+
+- title: Use the New Internet
+  desc: Learn about the New Internet and its applications. Create an identity and learn how to use it.
+  icon: settings
+  doc: newinternet/privacy
+
+- title: Build Apps and Earn Money
+  desc: Learn how to build an application that earns with Blockstack.
+  icon: settings
+  doc: docs/about
+
+- title: Use the Naming Service
+  desc: Managing your account, create new users and exporting data
+  icon: cog
+  doc: naming/overview
+
+- title: Implement Authentication
+  desc: Managing your account, creating new users and exporting data
+  icon: cog
+  doc: auth/overview
+
+- title: Implement Storage with GAIA
+  desc: Backend storage drivers and interactions between developer APIs and the Gaia service.
+  icon: cog
+  doc: gaia/overview
--- a/_data/navigation_learn.yml
+++ b/_data/navigation_learn.yml
@ -0,0 +1,23 @@
+- title: Introduction
+  docs:
+  - learn/overview
+  - learn/problems
+  - learn/tokens
+
+- title: Components
+  docs:
+  - learn/identity
+  - learn/profiles
+
+- title: Reference
+  docs:
+  - learn/faqs
+  - learn/glossary
+
+
+- title: Contributing
+  docs:
+  - learn/contribute
+  - learn/issues
+  - learn/pullrequest
+  - learn/community
--- a/_data/navigation_naming.yml
+++ b/_data/navigation_naming.yml
@ -0,0 +1,59 @@
+- title: Introduction
+  docs:
+  - naming/overview
+  - naming/why
+  - naming/architecture
+  - naming/howto
+
+- title: Tutorials
+  docs:
+  - naming/createspace
+  - naming/linkit
+  - naming/bldprofile
+  - naming/runsub
+
+- title: How to use BNS
+  docs:
+  - naming/namespaces
+  - naming/create
+  - naming/list
+  - naming/costregister
+  - naming/consensus
+
+- title: Resolve BNS Names
+  docs:
+  - naming/resolve
+  - naming/luzone
+  - naming/listnames
+  - naming/listhistory
+  - naming/luhistory
+  - naming/luhash
+
+- title: Register BNS Names
+  docs:
+  - naming/register
+  - naming/getfee
+  - naming/regname
+  - naming/gethash
+
+- title: Manage Names
+  docs:
+  - naming/mngover
+  - naming/transfer
+  - naming/update
+  - naming/revoke
+  - naming/renew
+
+- title: BNS Subdomains
+  docs:
+  - naming/subover
+  - naming/lifecycle
+  - naming/submng
+  - naming/subreg
+
+- title: BNS Forks
+  docs:
+  - naming/forkovr
+  - naming/forkset
+  - naming/did
+  - naming/encode
--- a/_data/navigation_newinternet.yml
+++ b/_data/navigation_newinternet.yml
@ -0,0 +1,18 @@
+- title: Introduction
+  docs:
+  - newinternet/overview
+  - newinternet/responsibility
+  - newinternet/privacy
+  - newinternet/community
+
+
+- title: Get started
+  docs:
+  - newinternet/browser-introduction
+  - newinternet/ids-introduction
+  - newinternet/findapps
+  - newinternet/install
+
+- title: Reference
+  docs:
+  - newinternet/glossary
--- a/_includes/contribute_code.md
+++ b/_includes/contribute_code.md
@ -0,0 +1,93 @@
+### Sections in this article
+{:.no_toc}
+* TOC
+{:toc}
+
+Good pull requests—patches, improvements, new features—are a fantastic help. They should remain focused in scope and avoid containing unrelated commits.
+
+**Please ask first** before embarking on any significant pull request (e.g. implementing features, refactoring code, porting to a different language), otherwise you risk spending a lot of time working on something that the project's developers might not want to merge into the project.
+
+Please adhere to the [coding guidelines](#code-guidelines) used throughout the project (indentation, accurate comments, etc.) and any other requirements (such as test coverage).
+
+When contributing to Blockstack's documentation, you should edit the documentation source files in [the `/app/` directory of the `master` branch](https://github.com/blockstack/blockstack-browser/tree/master/app).
+
+Adhering to the following process is the best way to get your work included in the project:
+
+1. [Fork](https://help.github.com/fork-a-repo/) the project, clone your fork,
+   and configure the remotes:
+
+   ```bash
+   # Clone your fork of the repo into the current directory
+   git clone https://github.com/<your-username>/blockstack-browser.git
+   # Navigate to the newly cloned directory
+   cd blockstack-browser
+   # Assign the original repo to a remote called "upstream"
+   git remote add upstream https://github.com/blockstack/blockstack-browser.git
+   ```
+
+2. If you cloned a while ago, get the latest changes from upstream:
+
+   ```bash
+   git checkout master
+   git pull upstream master
+   ```
+
+3. Create a new topic branch (off the main project development branch) to
+   contain your feature, change, or fix:
+
+   ```bash
+   git checkout -b <topic-branch-name>
+   ```
+
+4. Commit your changes in logical chunks. Please adhere to these [git commit
+   message guidelines](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html)
+   or your code is unlikely be merged into the main project. Use Git's
+   [interactive rebase](https://help.github.com/articles/interactive-rebase)
+   feature to tidy up your commits before making them public.
+
+5. Locally merge (or rebase) the upstream development branch into your topic branch:
+
+   ```bash
+   git pull [--rebase] upstream master
+   ```
+
+6. Push your topic branch up to your fork:
+
+   ```bash
+   git push origin <topic-branch-name>
+   ```
+
+7. [Open a Pull Request](https://help.github.com/articles/using-pull-requests/)
+    with a clear title and description against the `master` branch.
+
+**IMPORTANT**: By submitting a patch, you agree to allow the project owners to
+license your work under the terms of the [MPL-2.0 License](LICENSE.md) (if it
+includes code changes) and under the terms of the
+[Creative Commons Attribution 3.0 Unported License](docs/LICENSE.md)
+(if it includes documentation changes).
+
+
+## Code guidelines
+
+### HTML
+
+[Adhere to the Code Guide.](http://codeguide.co/#html)
+
+- Use tags and elements appropriate for an HTML5 doctype (e.g., self-closing tags).
+
+### JS
+
+- No semicolons (in client-side JS)
+- 2 spaces (no tabs)
+- strict mode
+- "Attractive"
+- Don't use jQuery (no "$" allowed)
+
+### Checking code
+
+Run `npm run dev` before committing to ensure your changes follow our coding standards.
+
+
+## License
+
+By contributing your code, you agree to license your contribution under the [MPL-2.0 License](LICENSE.md).
--- a/_includes/contribute_community.md
+++ b/_includes/contribute_community.md
@ -0,0 +1,34 @@
+### Sections in this article
+{:.no_toc}
+* TOC
+{:toc}
+
+## Community Rewards
+
+Blockstack Community Reward Program
+We’ve set up a community portal with all kinds of tasks you can complete to earn Stacks Tokens by contributing to and supporting the community - these stay in your account and convert into tokens when the network goes live. Many are really easy and they’re all fun and helpful for the community, more information here - https://contribute.blockstack.org/.
+
+
+## Blockstack on Social Media
+
+Musce libero nunc, dignissim quis turpis quis, semper vehicula dolor. Suspendisse tincidunt consequat quam, ac posuere leo dapibus id. Cras fringilla convallis elit, at eleifend mi interam.
+
+- Slack
+- Twitter
+- Telegram
+- Reddit
+
+
+## Meeting fact to face
+
+- Events Calendar
+- Meetup
+- Blockstack Community Rewards Program
+- Request Sponsorship for your Event
+
+
+## Become an evangelist
+
+Musce libero nunc, dignissim quis turpis quis, semper vehicula dolor. Suspendisse tincidunt consequat quam, ac posuere leo dapibus id. Cras fringilla convallis elit, at eleifend mi interam.
+
+Nulla non sollicitudin. Morbi sit amet laoreet ipsum, vel pretium mi. Morbi varius, tellus in accumsan blandit, elit ligula eleifend velit, luctus mattis ante nulla condimentum nulla. Etiam vestibulum risus vel arcu elementum eleifend. Cras at dolor eget urna varius faucibus tempus in elit.
--- a/_includes/contribute_issues.md
+++ b/_includes/contribute_issues.md
@ -0,0 +1,71 @@
+### Sections in this article
+{:.no_toc}
+* TOC
+{:toc}
+
+## Using the issue tracker
+
+The [issue tracker](https://github.com/blockstack/blockstack-browser/issues) is the preferred channel for [bug reports](#bug-reports), [features requests](#feature-requests) and [submitting pull requests](#pull-requests), but please respect the following
+restrictions:
+
+* Please **do not** use the issue tracker for personal support requests.  Please use the [Forum](https://forum.blockstack.org) or [Slack](https://chat.blockstack.org) as they are better places to get help.
+
+* Please **do not** derail or troll issues. Keep the discussion on topic and respect the opinions of others.
+
+* Please **do not** post comments consisting solely of "+1" or ":thumbsup:". Use [GitHub's "reactions" feature](https://github.com/blog/2119-add-reactions-to-pull-requests-issues-and-comments) instead. We reserve the right to delete comments which violate this rule.
+
+
+## Issues and labels
+
+Our bug tracker utilizes several labels to help organize and identify issues. Here's what they represent and how we use them:
+
+- `bug` - Issues where code is demonstrably a problem
+- `chore` - Issues that are not
+- `design` - Issues related to design
+- `documentation` - Issue that is specifically for addition, creation or editing of documentation
+- `enhancement` - Issues that enhance the product
+- `feature` - Issues that identify a new feature
+- `release-overview` - Overview of release
+
+For a complete look at our labels, see the [project labels page](https://github.com/blockstack/blockstack-browser/labels).
+
+
+## Bug reports
+
+A bug is a _demonstrable problem_ that is caused by the code in the repository. Good bug reports are extremely helpful, so thanks!
+
+Guidelines for bug reports:
+
+0. **Validate and lint your code** &mdash; [validate your HTML](https://html5.validator.nu) and [lint your HTML](https://github.com/twbs/bootlint) to ensure your problem isn't caused by a simple error in your own code.
+
+1. **Use the GitHub issue search** &mdash; check if the issue has already been reported.
+
+2. **Check if the issue has been fixed** &mdash; try to reproduce it using the latest `master` or development branch in the repository.
+
+3. **Isolate the problem** &mdash; ideally create a [reduced test case](https://css-tricks.com/reduced-test-cases/) and a live example. [This JS Bin](https://jsbin.com/lolome/edit?html,output) is a helpful template.
+
+
+A good bug report shouldn't leave others needing to chase you up for more information. Please try to be as detailed as possible in your report. What is your environment? What steps will reproduce the issue? What browser(s) and OS experience the problem? Do other browsers show the bug differently? What would you expect to be the outcome? All these details will help people to fix any potential bugs.
+
+Example:
+
+> Short and descriptive example bug report title
+>
+> A summary of the issue and the browser/OS environment in which it occurs. If
+> suitable, include the steps required to reproduce the bug.
+>
+> 1. This is the first step
+> 2. This is the second step
+> 3. Further steps, etc.
+>
+> `<url>` - a link to the reduced test case
+>
+> Any other information you want to share that is relevant to the issue being
+> reported. This might include the lines of code that you have identified as
+> causing the bug, and potential solutions (and your opinions on their
+> merits).
+
+
+## Feature requests
+
+Feature requests are welcome. But take a moment to find out whether your idea fits with the scope and aims of the project. It's up to *you* to make a strong case to convince the project's developers of the merits of this feature. Please provide as much detail and context as possible.
--- a/_includes/contribute_ovr.md
+++ b/_includes/contribute_ovr.md
@ -0,0 +1,27 @@
+### Sections in this article
+{:.no_toc}
+* TOC
+{:toc}
+
+Looking to contribute something to Blockstack? **Here's how you can help.**
+
+Please take a moment to review this document in order to make the contribution
+process easy and effective for everyone in the community.
+
+Following these guidelines helps to communicate that you respect the time of
+everyone involved in the Blockstack open source community. In return, the
+community will address your issue or assess patches and features as quickly as
+possible.
+
+## Who can contribute?
+
+Musce libero nunc, dignissim quis turpis quis, semper vehicula dolor. Suspendisse tincidunt consequat quam, ac posuere leo dapibus id. Cras fringilla convallis elit, at eleifend mi interam.
+
+Nulla non sollicitudin. Morbi sit amet laoreet ipsum, vel pretium mi. Morbi varius, tellus in accumsan blandit, elit ligula eleifend velit, luctus mattis ante nulla condimentum nulla. Etiam vestibulum risus vel arcu elementum eleifend. Cras at dolor eget urna varius faucibus tempus in elit.
+
+## What can you contribute?
+Nunc porta malesuada porta. Etiam tristique vestibulum dolor at ultricies. Proin hendrerit sapien sed erat fermentum, at commodo velit consectetur.
+
+{% include image.html img="image1.png" style="wide" lightbox="true" alt="Alt for image" caption="Image in lightbox" %}
+
+Etiam vestibulum risus vel arcu elementum eleifend. Cras at dolor eget urna varius faucibus tempus in elit. Cras a dui imperdiet, tempus metus quis, pharetra turpis. Phasellus at massa sit amet ante semper fermentum sed eget lectus. Quisque id dictum magna, et dapibus turpis.
--- a/_includes/disqus_comments.html
+++ b/_includes/disqus_comments.html
@ -0,0 +1,20 @@
+{% if page.comments != false and jekyll.environment == "production" %}
+
+  <div id="disqus_thread" class="uk-margin-xlarge-top"></div>
+  <script>
+    var disqus_config = function () {
+      this.page.url = '{{ page.url | absolute_url }}';
+      this.page.identifier = '{{ page.url | absolute_url }}';
+    };
+
+    (function() {
+      var d = document, s = d.createElement('script');
+
+      s.src = 'https://{{ site.disqus.shortname }}.disqus.com/embed.js';
+
+      s.setAttribute('data-timestamp', +new Date());
+      (d.head || d.body).appendChild(s);
+    })();
+  </script>
+  <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
+{% endif %}
--- a/_includes/editme.html
+++ b/_includes/editme.html
@ -0,0 +1 @@
+<a "target="_blank" href="https://github.com/{{site.github_editme_path }}{{ site.branch_url }}/{% unless page.url contains "index.html" %}{% endunless %}{{ page.path }}" class="btn btn-default githubEditButton" role="button"><span data-uk-icon="icon: pencil; ratio: 1.2"></span> Edit this page on Github</a>
--- a/_includes/footer.html
+++ b/_includes/footer.html
@ -0,0 +1,31 @@
+<footer class="uk-section uk-text-center uk-text-muted uk-link-muted">
+    <div class="uk-container uk-container-small">
+
+        <div>
+            <ul class="uk-subnav uk-flex-center">
+                {% for link in site.data.navigation_footer %}
+                    {% if link.url contains 'http' %}
+                        {% assign domain = '' %}
+                    {% else %}
+                        {% assign domain = relative_url %}
+                    {% endif %}
+                    {% if link.url == page.url %}
+                        {% assign current = ' class="uk-active"' %}
+                    {% else %}
+                        {% assign current = null %}
+                    {% endif %}
+                    {% if link.title %}
+                        <li{{ current }}><a href="{{ domain }}{{ link.url }}" {% if link.url contains 'http' %}target="_blank" {% endif %}>{{ link.title }}</a></li>
+                    {% endif %}
+                {% endfor %}
+            </ul>
+        </div>
+        <div class="uk-margin-medium">
+            <div data-uk-grid class="uk-child-width-auto uk-grid-small uk-flex-center uk-grid">
+                {% include social-networks.html %}
+            </div>
+        </div>
+        <div class="uk-margin-medium uk-text-small copyright">{{ site.footer.copyright }}</div>
+
+    </div>
+</footer>
--- a/_includes/glossary.md
+++ b/_includes/glossary.md
@ -0,0 +1,148 @@
+
+
+Commonly used terms and jargon in Blockstack
+
+## Account
+
+A field in a profile that links the name to an existing service, like Twitter or OpenBazaar.  They are listed under the `accounts` listing in a profile.
+
+Some accounts serve as social proofs, but they can contain any data the user wants.
+
+## Atlas
+
+A peer-to-peer network maintained by Blockstack Core nodes that stores each
+name's zone files and immutable data.  See [this document](atlas_network.md) for
+details.
+
+## Blockstack ID
+
+(Also called a "name").
+
+A human-readable name in Blockstack.  It is comprised only of upper and lower-case ASCII characters, numbers, as well as `-`, `_`, and `.`.  It must end with a `.`, followed by a namespace ID.  It has at least 3 characters, and at most 37 (including the `.` and the namespace ID).
+
+Anyone can register a Blockstack ID, such as through the [Blockstack Browser](https://github.com/blockstack/blockstack-browser)
+
+## Blockstack Core
+
+A server that reads a blockchain with [virtualchain](https://github.com/blockstack/blockstack-virtualchain), filters out transactions that represent name operations, and builds up a database of (name, public key, state value) triples.
+
+## Blockstack Naming Service (BNS)
+
+This is the naming protocol that Blockstack Core implements.  See [this
+document](blockstack_naming_service.md) for details.
+
+## Consensus Hash
+
+A cryptographic hash that represents a proof-of-computation by a Blockstack Core node.  Two Blockstack Core nodes have seen and processed the same name operations up to block `n` if and only if they each calculate the same consensus hash at height `n`.
+
+A Blockstack Core node only accepts a name operation if it has a previously-calculated but recent consensus hash.  Blockstack clients obtain a consensus hash from a Blockstack Core node in order to construct a name operation.
+
+## Gaia
+
+This is Blockstack's storage system.  Gaia hosts all of your app-specific data.
+
+## Gaia Hub
+
+This is a publicly-routable server that serves as an entry point for Gaia data.
+Anyone can stand up and run a Gaia hub by following [these
+instructions](https://github.com/blockstack/gaia).
+Blockstack provides a [default Gaia hub](https://gaia.blockstack.org).
+
+## Immutable Data
+
+This is the general term for chunks of data whose hash is cryptographically
+bound to a blockchain transaction.  This includes all data stored in the Atlas
+network (such as your Blockstack ID's zone file),
+as well as any data whose hash is stored in the Atlas network.
+
+## Mutable Data
+
+This is the general term for data that is (1) signed by your Blockstack ID, and
+(2) can be looked up using your Blockstack ID.  This includes all your Gaia
+data, as well as your profile.
+
+## Name
+
+See Blockstack ID.
+
+## Name Database
+
+The set of (name, public key, name state) triples that the Blockstack Core node generates by reading the blockchain.  The name state is usually the hash of a DNS zone file stored in Atlas.
+
+## Name Operation
+
+A specially-crafted transaction in the underlying blockchain that, when processed, will change each Blockstack Core's name database.  Examples include `NAME_PREORDER` (preorders a name), `NAME_REGISTRATION` (registers a name), `NAME_UPDATE` (changes a name's zonefile hash), `NAME_TRANSFER` (changes a name's public key), and `NAME_REVOKE` (locks everyone out of a name until it expires).
+
+Name operations are encoded on Bitcoin as `OP_RETURN` outputs that start with `id`, followed by a 1-byte character that identifies the particular operation.
+
+See the [wire format](wire-format.md) document for details.
+
+## Namespace
+
+Analogous to a DNS TLD, it represents a grouping of names.  All names under the same namespace have the same pricing and lifetime rules.
+
+Anyone can create a namespace, but doing so is expensive by design.  See the
+[namespace creation](namespace_creation.md) tutorial for details.
+
+## Preorder
+
+The first of two steps to acquire a name.  This operation writes the hash of both the name and the address that will own it.
+
+## Profile
+
+A signed JSON web token that describes a [Person](https://schema.org/Person), which describes the name's owner.  You can put anything you want into your profile.
+
+Additionally, profiles hold lists of social verifications and pointers to your Gaia data.
+
+## Register
+
+(1) The act of acquiring a name in Blockstack.
+
+(2) The second of two steps to create a new name entry in the name database.  Reveals the name as plaintext to the world.  Must match a recent preorder to be accepted.
+
+## Registrar
+
+An online service that lets you sign up for and manage the profiles of Blockstack IDs.
+
+## Resolver
+
+An online service that displays zonefile and profile data for a Blockstack ID.  [The Blockstack Explorer](https://explorer.blockstack.org) is a resolver.
+
+## Social proof
+
+A post in an account on an existing Web service like Twitter, Facebook, or GitHub that points back to a Blockstack ID.  Used to provide some evidence that the person who owns the Blockstack ID is also the person who owns the Web service account.
+
+Social proofs are listed in your profile.
+
+## Storage Provider
+
+This is any service that can serve your zone file, profile, or data.  In all cases, the data is signed by one of your wallet's keys, so you can use any provider without having to worry about it trying to change the data.
+
+Storage providers are accessed through a Gaia hub.  Gaia hubs ship with drivers
+that allow them to treat storage providers as dumb hard drives, which store
+signed encrypted data on the hub's behalf.
+
+Not all storage providers support writes--some of them are read-only.
+
+Supported storage providers today include:
+* Amazon S3
+* Dropbox
+* Your harddrive
+* Any HTTP/HTTPS/FTP server (read-only)
+* Any public-use Gaia hub
+* IPFS
+
+Support is being added for:
+* Google Drive
+* Microsoft OneDrive
+* Box.com
+* BitTorrent
+
+If you have a preferred storage provider, and you're a developer, please consider sending us a pull request to add support for it!
+
+## Zone file
+
+A specially-formatted file that stores routing information for a Blockstack ID.
+Blockstack clients use your zone file to find out where your preferred Gaia
+hub(s) are.  Ever Blockstack Core node stores a copy of every zone file for
+every Blockstack ID by participating in the Atlas network.
--- a/_includes/google-analytics.html
+++ b/_includes/google-analytics.html
@ -0,0 +1,11 @@
+<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', '{{ site.google_analytics }}', 'auto');
+  ga('send', 'pageview');
+
+</script>
+  
--- a/_includes/head.html
+++ b/_includes/head.html
@ -0,0 +1,14 @@
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  {% seo %}
+  <meta property="og:image" content="{% if site.brand.image contains 'http' %}{{ site.brand.image }}{% else %}{{ site.post_assets | absolute_url }}{{ site.brand.image }}{% endif %}"/>
+  <link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}">
+  <link rel="shortcut icon" type="image/png" href="{{ "assets/img/favicon.png" | relative_url }}" >
+  <link rel="alternate" type="application/rss+xml" title="{{ site.title | escape }}" href="{{ "/feed.xml" | relative_url }}">
+  <script src="{{ "/assets/js/main.js" | relative_url }}"></script>
+  {% if jekyll.environment == 'production' and site.google_analytics %}
+    {% include google-analytics.html %}
+  {% endif %}
+</head>
--- a/_includes/header.html
+++ b/_includes/header.html
@ -0,0 +1,7 @@
+<header class="uk-background-secondary">
+    <div data-uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky" class="uk-sticky uk-sticky-fixed" style="position: fixed; top: 0px; width: 1904px;">
+        <nav class="uk-navbar-container">
+            {% include navbar.html %}
+        </nav>
+    </div>
+</header>
--- a/_includes/hero.html
+++ b/_includes/hero.html
@ -0,0 +1,35 @@
+<div class="uk-section section-hero" data-uk-scrollspy="cls: uk-animation-slide-bottom-medium; repeat: true">
+    <div class="uk-container uk-container-small">
+        {% if page.hero.image %}
+        <p class="hero-image uk-text-center"><img src="{{ site.post_assets | absolute_url }}{{ page.hero.image }}" alt="Hero"></p>
+        {% endif %}
+        <!-- <h1 class="uk-heading-hero uk-text-center uk-margin-remove-top">{{ page.hero.title }}</h1> -->
+        {% if page.hero.subtitle %}<p class="subtitle uk-text-lead uk-text-center">{{ page.hero.subtitle }}</p>{% endif %}
+
+        {% if page.hero.search %}
+        <div class="hero-search">
+
+            <!-- Html Elements for Search -->
+            <div class="uk-position-relative">
+                <form class="uk-search uk-search-default uk-width-1-1" name="search-hero" onsubmit="return false;">
+                    <span data-uk-search-icon></span>
+                    <input id="hero-search" class="uk-search-input" type="search" placeholder="Search for a term, API, or topic...">
+                </form>
+                <ul id="hero-search-results" class="uk-position-absolute uk-width-1-1 uk-list"></ul>
+            </div>
+
+            <script>
+            SimpleJekyllSearch({
+                searchInput: document.getElementById('hero-search'),
+                resultsContainer: document.getElementById('hero-search-results'),
+                noResultsText: '<li>No results found</li>',
+                searchResultTemplate: '<li><a href="{url}">{title}</a></li>',
+                json: '/search.json'
+            });
+            </script>
+
+        </div>
+        {% endif %}
+
+    </div>
+</div>
--- a/_includes/image.html
+++ b/_includes/image.html
@ -0,0 +1,16 @@
+{% if include.lightbox == 'true' %}
+<figure data-uk-lightbox="animation: slide">
+    <a class="uk-inline" href="{% if include.img contains 'http' %}{{ include.img }}{% else %}{{ site.post_assets | absolute_url }}{{ include.img }}{% endif %}"{% if include.caption %} caption="{{ include.caption }}"{% endif %}>
+        <img src="{% if include.img contains 'http' %}{{ include.img }}{% else %}{{ site.post_assets | absolute_url }}{{ include.img }}{% endif %}"{% if include.alt %} alt="{{ include.alt }}"{% endif %}>
+        <div class="uk-position-center">
+            <span data-uk-overlay-icon></span>
+        </div>
+    </a>
+    {% if include.caption %}<figcaption data-uk-grid class="uk-flex-right"><span class="uk-width-auto">{{ include.caption }}</span></figcaption>{% endif %}
+</figure>
+{% else %}
+<figure>
+    <img src="{% if include.img contains 'http' %}{{ include.img }}{% else %}{{ site.post_assets | absolute_url }}{{ include.img }}{% endif %}"{% if include.alt %} alt="{{ include.alt }}"{% endif %}>
+    {% if include.caption %}<figcaption data-uk-grid class="uk-flex-right"><span class="uk-width-auto">{{ include.caption }}</span></figcaption>{% endif %}
+</figure>
+{% endif %}
--- a/_includes/map.html
+++ b/_includes/map.html
@ -0,0 +1,38 @@
+<div id="map" class="uk-width-1-1 uk-height-large uk-margin-medium-top uk-margin-medium-bottom"></div>
+<script>
+  window.mapData = {"latitude": {{ include.latitude }},"longitude": {{ include.longitude }}, "zoom": {{ include.zoom}}};
+
+  var lightStyles = [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}]
+
+  function initMap() {
+    var myOptions = {
+      scrollwheel: false,
+      //draggable: false,
+      panControl: false,
+      disableDefaultUI: true,
+      zoom: window.mapData.zoom,
+      maxZoom: window.mapData.zoom,
+      minZoom: window.mapData.zoom,
+      center: new google.maps.LatLng(window.mapData.latitude, window.mapData.longitude),
+      mapTypeId: google.maps.MapTypeId.ROADMAP,
+      styles: lightStyles
+    };
+
+    var map = new google.maps.Map(document.getElementById('map'), myOptions);
+
+    var marker = new google.maps.Marker({
+      map: map,
+      position: new google.maps.LatLng(window.mapData.latitude, window.mapData.longitude),
+      icon: {
+          url: "/assets/img/location.svg",
+          size: new google.maps.Size(28, 38),
+          scaledSize: new google.maps.Size(28, 38)
+        }
+    });
+
+    google.maps.event.addDomListener(window, 'resize', function() {
+      map.setCenter(myOptions.center);
+    });
+  }
+</script>
+<script async defer src="https://maps.googleapis.com/maps/api/js?key={{ site.google_maps_api_key }}&amp;callback=initMap"></script>
--- a/_includes/navbar.html
+++ b/_includes/navbar.html
@ -0,0 +1,52 @@
+<div class="uk-container">
+    <div data-uk-navbar>
+        <div class="uk-navbar-left">
+
+            <a class="uk-navbar-item uk-logo" href="{{ "/" | relative_url }}">{% if site.brand.image %}<img src="{{ site.post_assets | absolute_url }}{{ site.brand.image }}" alt="{{ site.brand.text | escape }}">{% else %}{{ site.brand.text | escape }}{% endif %}</a>
+
+        </div>
+        <div class="uk-navbar-right">
+            <ul class="uk-navbar-nav uk-visible@m">
+                {% for link in site.data.navigation_header %}
+                    {% if link.url contains 'http' %}
+                        {% assign domain = '' %}
+                    {% else %}
+                        {% assign domain = relative_url %}
+                    {% endif %}
+                    {% if link.url == page.url %}
+                        {% assign current = ' class="uk-active"' %}
+                    {% else %}
+                        {% assign current = null %}
+                    {% endif %}
+                    {% if link.title %}
+                        <li{{ current }}><a href="{{ domain }}{{ link.url }}" {% if link.url contains 'http' %}target="_blank" {% endif %}>{{ link.title }}</a></li>
+                    {% endif %}
+                {% endfor %}
+            </ul>
+
+            {% unless page.hero%}
+            <div>
+                <a class="uk-navbar-toggle" uk-search-icon href="#"></a>
+                <div class="uk-drop uk-background-default uk-border-rounded" uk-drop="mode: click; pos: left-center; offset: 0">
+                    <form class="uk-search uk-search-navbar uk-width-1-1" onsubmit="return false;">
+                        <input id="searchBox" class="uk-search-input" type="search" placeholder="Search..." autofocus>
+                    </form>
+                    <ul id="searchBox-results" class="uk-position-absolute uk-width-1-1 uk-list"></ul>
+                </div>
+            </div>
+            <script>
+            SimpleJekyllSearch({
+                searchInput: document.getElementById('searchBox'),
+                resultsContainer: document.getElementById('searchBox-results'),
+                noResultsText: '<li>No results found</li>',
+                searchResultTemplate: '<li><a href="{url}">{title}</a></li>',
+                json: '/search.json'
+            });
+            </script>
+            {% endunless %}
+
+            <a class="uk-navbar-toggle uk-hidden@m" href="#offcanvas" data-uk-navbar-toggle-icon data-uk-toggle></a>
+
+        </div>
+    </div>
+</div>
--- a/_includes/offcanvas.html
+++ b/_includes/offcanvas.html
@ -0,0 +1,25 @@
+<div id="offcanvas" data-uk-offcanvas="flip: true; overlay: true">
+    <div class="uk-offcanvas-bar">
+
+        <button class="uk-offcanvas-close" type="button" data-uk-close></button>
+
+        <ul class="uk-nav uk-nav-default">
+            <li><a class="uk-logo uk-margin-small-bottom" href="{{ "/" | relative_url }}">{% if site.brand.image %}<img src="{{ site.post_assets | absolute_url }}{{ site.brand.image }}" alt="{{ site.brand.text }}">{% else %}{{ site.brand.text }}{% endif %}</a></li>
+            {% for link in site.data.navigation_header %}
+                {% if link.url contains 'http' %}
+                    {% assign domain = '' %}
+                {% else %}
+                    {% assign domain = site.url %}
+                {% endif %}
+            <li><a href="{{ domain }}{{ link.url }}" {% if link.url contains 'http' %}target="_blank" {% endif %}>{{ link.title }}</a></li>
+            {% endfor %}
+        </ul>
+
+        <div class="uk-margin-small-top uk-text-center uk-text-muted uk-link-muted">
+            <div data-uk-grid class="uk-child-width-auto uk-grid-small uk-flex-center uk-grid">
+                {% include social-networks.html %}
+            </div>
+        </div>
+
+    </div>
+</div>
--- a/_includes/paginate-blog.html
+++ b/_includes/paginate-blog.html
@ -0,0 +1,8 @@
+<!-- Pagination links -->
+<ul class="uk-pagination uk-margin-medium-top">
+    {% if paginator.previous_page %}
+    <li><a class="hvr-back" href="{{ paginator.previous_page_path }}">&larr; Previous</a></li>
+    {% endif %} {% if paginator.next_page %}
+    <li class="uk-margin-auto-left"><a class="hvr-forward" href="{{ paginator.next_page_path }}">Next &rarr;</a></li>
+    {% endif %}
+</ul>
--- a/_includes/paginate-doc.html
+++ b/_includes/paginate-doc.html
@ -0,0 +1,24 @@
+{% assign docs = site.data.navigation_docs | map: 'docs' | join: ',' | split: ',' %}
+
+{% for document in docs %}
+  {% assign document_url = document | prepend:"/docs/" | append:"/" %}
+  {% if document_url == page.url %}
+    <ul class="uk-pagination uk-margin-top">
+          {% if forloop.first %}
+
+          {% else %}
+            {% assign previous = forloop.index0 | minus: 1 %}
+            {% assign previous_page = docs[previous] | prepend:"/docs/" | append:"/" %}
+            <li><a class="hvr-back" href="{{ previous_page }}">&larr; Previous</a></li>
+          {% endif %}
+          {% if forloop.last %}
+
+          {% else %}
+            {% assign next = forloop.index0 | plus: 1 %}
+            {% assign next_page = docs[next] | prepend:"/docs/" | append:"/" %}
+            <li class="uk-margin-auto-left"><a class="hvr-forward" href="{{ next_page }}">Next &rarr;</a></li>
+          {% endif %}
+    </ul>
+    {% break %}
+  {% endif %}
+{% endfor %}
--- a/_includes/paginate-post.html
+++ b/_includes/paginate-post.html
@ -0,0 +1,18 @@
+<div class="uk-margin-large-top paginate-post">
+    <div class="uk-child-width-expand@s uk-grid-large uk-pagi" data-uk-grid>
+        <div>
+            {% if page.previous.url %}
+                <h4>{{page.previous.title}}</h4>
+                <div class="uk-visible@s uk-text-muted uk-text-small">{{ page.previous.excerpt }}</div>
+                <div><a class="remove-underline link-dark hvr-back" href="{{page.previous.url}}">&larr; Previous</a></div>
+            {% endif %}
+        </div>
+        <div>
+            {% if page.next.url %}
+                <h4>{{page.next.title}}</h4>
+                <div class="uk-visible@s uk-text-muted uk-text-small">{{ page.next.excerpt }}</div>
+                <div class="uk-text-right"><a class="remove-underline link-dark hvr-forward" href="{{page.next.url}}">Next &rarr;</a></div>
+            {% endif %}
+        </div>
+    </div>
+</div>
--- a/_includes/post-meta.html
+++ b/_includes/post-meta.html
@ -0,0 +1,18 @@
+{% if page.author %}
+  {% assign author = site.authors[page.author] %}
+{% else %}
+  {% assign author = site.author %}
+{% endif %}
+
+{% if author.github %}
+    <!-- {% avatar {{ author.github }} size=32 %} -->
+{% endif %}
+
+{% if author.name %}
+    <!-- Written by <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">{{ author.name }}</span></span><br> -->
+{% endif %}
+
+<time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
+    {% assign date_format = site.date_format | default: "%b %-d, %Y" %}
+    {% include editme.html %} <span style="font-family:Wingdings">&#119;</span> {{ page.date | date: date_format }}
+</time>
--- a/_includes/related-auth.html
+++ b/_includes/related-auth.html
@ -0,0 +1,32 @@
+<div class="uk-margin-large-top">
+    <h3>Related Articles</h3>
+
+    {% assign maxRelated = 4 %}
+    {% assign minCommonTags =  1 %}
+    {% assign maxRelatedCounter = 0 %}
+
+    <ul class="uk-list">
+    {% for doc in site.docs %}
+
+    {% assign sameTagCount = 0 %}
+    {% assign commonTags = '' %}
+
+    {% for tag in doc.tags %}
+        {% if doc.url != page.url %}
+            {% if page.tags contains tag %}
+                {% assign sameTagCount = sameTagCount | plus: 1 %}
+            {% endif %}
+        {% endif %}
+    {% endfor %}
+
+    {% if sameTagCount >= minCommonTags %}
+        <li><a href="{{ site.baseurl }}{{ doc.url }}">{{ doc.title }}</a></li>
+        {% assign maxRelatedCounter = maxRelatedCounter | plus: 1 %}
+        {% if maxRelatedCounter >= maxRelated %}
+            {% break %}
+        {% endif %}
+    {% endif %}
+
+    {% endfor %}
+    </ul>
+</div>
--- a/_includes/related-docs.html
+++ b/_includes/related-docs.html
@ -0,0 +1,32 @@
+<div class="uk-margin-large-top">
+    <h3>Related Articles</h3>
+
+    {% assign maxRelated = 4 %}
+    {% assign minCommonTags =  1 %}
+    {% assign maxRelatedCounter = 0 %}
+
+    <ul class="uk-list">
+    {% for doc in site.docs %}
+
+    {% assign sameTagCount = 0 %}
+    {% assign commonTags = '' %}
+
+    {% for tag in doc.tags %}
+        {% if doc.url != page.url %}
+            {% if page.tags contains tag %}
+                {% assign sameTagCount = sameTagCount | plus: 1 %}
+            {% endif %}
+        {% endif %}
+    {% endfor %}
+
+    {% if sameTagCount >= minCommonTags %}
+        <li><a href="{{ site.baseurl }}{{ doc.url }}">{{ doc.title }}</a></li>
+        {% assign maxRelatedCounter = maxRelatedCounter | plus: 1 %}
+        {% if maxRelatedCounter >= maxRelated %}
+            {% break %}
+        {% endif %}
+    {% endif %}
+
+    {% endfor %}
+    </ul>
+</div>
--- a/_includes/related-gaia.html
+++ b/_includes/related-gaia.html
@ -0,0 +1,32 @@
+<div class="uk-margin-large-top">
+    <h3>Related Articles</h3>
+
+    {% assign maxRelated = 4 %}
+    {% assign minCommonTags =  1 %}
+    {% assign maxRelatedCounter = 0 %}
+
+    <ul class="uk-list">
+    {% for doc in site.docs %}
+
+    {% assign sameTagCount = 0 %}
+    {% assign commonTags = '' %}
+
+    {% for tag in doc.tags %}
+        {% if doc.url != page.url %}
+            {% if page.tags contains tag %}
+                {% assign sameTagCount = sameTagCount | plus: 1 %}
+            {% endif %}
+        {% endif %}
+    {% endfor %}
+
+    {% if sameTagCount >= minCommonTags %}
+        <li><a href="{{ site.baseurl }}{{ doc.url }}">{{ doc.title }}</a></li>
+        {% assign maxRelatedCounter = maxRelatedCounter | plus: 1 %}
+        {% if maxRelatedCounter >= maxRelated %}
+            {% break %}
+        {% endif %}
+    {% endif %}
+
+    {% endfor %}
+    </ul>
+</div>
--- a/_includes/related-learn.html
+++ b/_includes/related-learn.html
@ -0,0 +1,32 @@
+<div class="uk-margin-large-top">
+    <h3>Related Articles</h3>
+
+    {% assign maxRelated = 4 %}
+    {% assign minCommonTags =  1 %}
+    {% assign maxRelatedCounter = 0 %}
+
+    <ul class="uk-list">
+    {% for doc in site.learn %}
+
+    {% assign sameTagCount = 0 %}
+    {% assign commonTags = '' %}
+
+    {% for tag in doc.tags %}
+        {% if doc.url != page.url %}
+            {% if page.tags contains tag %}
+                {% assign sameTagCount = sameTagCount | plus: 1 %}
+            {% endif %}
+        {% endif %}
+    {% endfor %}
+
+    {% if sameTagCount >= minCommonTags %}
+        <li><a href="{{ site.baseurl }}{{ doc.url }}">{{ doc.title }}</a></li>
+        {% assign maxRelatedCounter = maxRelatedCounter | plus: 1 %}
+        {% if maxRelatedCounter >= maxRelated %}
+            {% break %}
+        {% endif %}
+    {% endif %}
+
+    {% endfor %}
+    </ul>
+</div>
--- a/_includes/related-naming.html
+++ b/_includes/related-naming.html
@ -0,0 +1,32 @@
+<div class="uk-margin-large-top">
+    <h3>Related Articles</h3>
+
+    {% assign maxRelated = 4 %}
+    {% assign minCommonTags =  1 %}
+    {% assign maxRelatedCounter = 0 %}
+
+    <ul class="uk-list">
+    {% for doc in site.learn %}
+
+    {% assign sameTagCount = 0 %}
+    {% assign commonTags = '' %}
+
+    {% for tag in doc.tags %}
+        {% if doc.url != page.url %}
+            {% if page.tags contains tag %}
+                {% assign sameTagCount = sameTagCount | plus: 1 %}
+            {% endif %}
+        {% endif %}
+    {% endfor %}
+
+    {% if sameTagCount >= minCommonTags %}
+        <li><a href="{{ site.baseurl }}{{ doc.url }}">{{ doc.title }}</a></li>
+        {% assign maxRelatedCounter = maxRelatedCounter | plus: 1 %}
+        {% if maxRelatedCounter >= maxRelated %}
+            {% break %}
+        {% endif %}
+    {% endif %}
+
+    {% endfor %}
+    </ul>
+</div>
--- a/_includes/related-newinternet.html
+++ b/_includes/related-newinternet.html
@ -0,0 +1,32 @@
+<div class="uk-margin-large-top">
+    <h3>Related Articles</h3>
+
+    {% assign maxRelated = 4 %}
+    {% assign minCommonTags =  1 %}
+    {% assign maxRelatedCounter = 0 %}
+
+    <ul class="uk-list">
+    {% for doc in site.learn %}
+
+    {% assign sameTagCount = 0 %}
+    {% assign commonTags = '' %}
+
+    {% for tag in doc.tags %}
+        {% if doc.url != page.url %}
+            {% if page.tags contains tag %}
+                {% assign sameTagCount = sameTagCount | plus: 1 %}
+            {% endif %}
+        {% endif %}
+    {% endfor %}
+
+    {% if sameTagCount >= minCommonTags %}
+        <li><a href="{{ site.baseurl }}{{ doc.url }}">{{ doc.title }}</a></li>
+        {% assign maxRelatedCounter = maxRelatedCounter | plus: 1 %}
+        {% if maxRelatedCounter >= maxRelated %}
+            {% break %}
+        {% endif %}
+    {% endif %}
+
+    {% endfor %}
+    </ul>
+</div>
--- a/_includes/related-posts.html
+++ b/_includes/related-posts.html
@ -0,0 +1,32 @@
+<div class="uk-margin-large-top">
+    <h3>Related Articles</h3>
+
+    {% assign maxRelated = 4 %}
+    {% assign minCommonTags =  1 %}
+    {% assign maxRelatedCounter = 0 %}
+
+    <ul class="uk-list">
+    {% for post in site.posts %}
+
+    {% assign sameTagCount = 0 %}
+    {% assign commonTags = '' %}
+
+    {% for category in post.categories %}
+        {% if post.url != page.url %}
+            {% if page.categories contains category %}
+                {% assign sameTagCount = sameTagCount | plus: 1 %}
+            {% endif %}
+        {% endif %}
+    {% endfor %}
+
+    {% if sameTagCount >= minCommonTags %}
+        <li><a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a></li>
+        {% assign maxRelatedCounter = maxRelatedCounter | plus: 1 %}
+        {% if maxRelatedCounter >= maxRelated %}
+            {% break %}
+        {% endif %}
+    {% endif %}
+
+    {% endfor %}
+    </ul>
+</div>
--- a/_includes/search.html
+++ b/_includes/search.html
@ -0,0 +1,10 @@
+<script type="text/javascript">
+   /* Create a configuration object */
+   var ss360Config = {
+      /* Your site id */
+      siteId: 'blockstack',
+      /* A CSS selector that points to your search  box */
+      searchBox: {selector: '#searchBox'}
+   };
+</script>
+<script src="https://sitesearch360.com/cdn/sitesearch360-v11.min.js" async></script>
--- a/_includes/share.html
+++ b/_includes/share.html
@ -0,0 +1,4 @@
+<div class="share uk-text-center">
+    <a href="https://twitter.com/intent/tweet?text={{ page.title }}&url={{ site.url }}{{ page.url }}&via={{ site.twitter_username }}&related={{ site.twitter_username }}" rel="nofollow" target="_blank" title="Share on Twitter" onclick="window.open(this.href, 'twitter', 'width=550,height=235');return false;"><span data-uk-icon="icon: twitter; ratio: 1.2"></span></a>
+    <a  class="uk-margin-small-left" href="https://www.facebook.com/sharer/sharer.php?u={{ page.url | prepend: site.url | cgi_escape }}" rel="nofollow" target="_blank" title="Share on Facebook" onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;"><span data-uk-icon="icon: facebook; ratio: 1.2"></span></a>
+</div>
--- a/_includes/slideshow.html
+++ b/_includes/slideshow.html
@ -0,0 +1,14 @@
+<div class="uk-position-relative uk-visible-toggle uk-light" data-uk-slideshow>
+
+    <ul class="uk-slideshow-items">
+        {% for image in site.static_files %}
+            {% if image.path contains include.gallery %}
+                <li><img src="{{ image.path }}" data-uk-cover></li>
+            {% endif %}
+        {% endfor %}
+    </ul>
+
+    <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" data-uk-slidenav-previous data-uk-slideshow-item="previous"></a>
+    <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" data-uk-slidenav-next data-uk-slideshow-item="next"></a>
+
+</div>
--- a/_includes/social-networks.html
+++ b/_includes/social-networks.html
@ -0,0 +1,65 @@
+{% if site.social.twitter %}
+<div class="uk-first-column">
+    <a href="{{ site.social.twitter }}" data-uk-icon="icon: twitter" class="uk-icon-link uk-icon" target="_blank"></a>
+</div>
+{% endif %}
+{% if site.social.facebook %}
+<div>
+    <a href="{{ site.social.facebook }}" data-uk-icon="icon: facebook" class="uk-icon-link uk-icon" target="_blank"></a>
+</div>
+{% endif %}
+{% if site.social.flickr %}
+<div>
+    <a href="{{ site.social.flickr }}" data-uk-icon="icon: flickr" class="uk-icon-link uk-icon" target="_blank"></a>
+</div>
+{% endif %}
+{% if site.social.dribbble %}
+<div>
+    <a href="{{ site.social.dribbble }}" data-uk-icon="icon: dribbble" class="uk-icon-link uk-icon" target="_blank"></a>
+</div>
+{% endif %}
+{% if site.social.instagram %}
+<div>
+    <a href="{{ site.social.instagram }}" data-uk-icon="icon: instagram" class="uk-icon-link uk-icon" target="_blank"></a>
+</div>
+{% endif %}
+{% if site.social.googleplus %}
+<div>
+    <a href="{{ site.social.googleplus }}" data-uk-icon="icon: google-plus" class="uk-icon-link uk-icon" target="_blank"></a>
+</div>
+{% endif %}
+{% if site.social.linkedin %}
+<div>
+    <a href="{{ site.social.linkedin }}" data-uk-icon="icon: linkedin" class="uk-icon-link uk-icon" target="_blank"></a>
+</div>
+{% endif %}
+{% if site.social.pinterest %}
+<div>
+    <a href="{{ site.social.pinterest }}" data-uk-icon="icon: pinterest" class="uk-icon-link uk-icon" target="_blank"></a>
+</div>
+{% endif %}
+{% if site.social.vimeo %}
+<div>
+    <a href="{{ site.social.vimeo }}" data-uk-icon="icon: vimeo" class="uk-icon-link uk-icon" target="_blank"></a>
+</div>
+{% endif %}
+{% if site.social.youtube %}
+<div>
+    <a href="{{ site.social.youtube }}" data-uk-icon="icon: youtube" class="uk-icon-link uk-icon" target="_blank"></a>
+</div>
+{% endif %}
+{% if site.social.github %}
+<div>
+    <a href="{{ site.social.github }}" data-uk-icon="icon: github" class="uk-icon-link uk-icon" target="_blank"></a>
+</div>
+{% endif %}
+{% if site.social.email %}
+<div>
+    <a href="{{ site.social.email }}" data-uk-icon="icon: mail" class="uk-icon-link uk-icon" target="_blank"></a>
+</div>
+{% endif %}
+{% if site.social.website %}
+<div>
+    <a href="{{ site.social.website }}" data-uk-icon="icon: link" class="uk-icon-link uk-icon" target="_blank"></a>
+</div>
+{% endif %}
--- a/_layouts/auth.html
+++ b/_layouts/auth.html
@ -0,0 +1,71 @@
+---
+layout: default
+---
+
+<div class="uk-section">
+    <div class="uk-container">
+        <div class="uk-grid-large" data-uk-grid>
+
+            <div class="sidebar-fixed-width uk-visible@m">
+                <div class="sidebar-docs uk-position-fixed">
+                    {% for section in site.data.navigation_auth %}
+                    <h5>{{ section.title }}</h5>
+                    <ul class="uk-nav uk-nav-default doc-nav">
+                    {% for doc in section.docs %}
+                      {% assign doc_url = doc | prepend:"/" | append:"/" %}
+                      <!-- {% assign p =  site.docs | where:"url", doc_url | first %} -->
+                      {% for col in site.collections %}
+                        {% for item in col.docs %}
+                            {% if item.url == doc_url %}
+                                 {% assign doc_title = item.title %}
+                             {% else %}
+                               {% comment %}Do nothing{% endcomment %}
+                             {% endif %}
+                        {% endfor %}
+                      {% endfor %}
+                      <li class="{% if doc_url == page.url %}uk-active{% endif %}"><a href="{{ doc_url }}">{{ doc_title }}</a></li>
+                    {% endfor %}
+                    </ul>
+                    {% endfor %}
+                </div>
+            </div>
+
+            <div class="uk-width-1-1 uk-width-expand@m">
+
+                <article class="uk-article">
+
+                    <h1 class="uk-article-title">{{ page.title | escape }}</h1>
+
+                    {% if page.subtitle %}<p class="subtitle uk-text-lead uk-text-muted">{{ page.subtitle }}</p>{% endif %}
+
+
+                    <div class="uk-article-meta uk-margin-top uk-margin-medium-bottom">
+                        {% include post-meta.html %}
+                    </div>
+
+                    <div class="article-content">
+                        {{ content }}
+                        {% include share.html %}
+                    </div>
+
+                    <hr class="uk-margin-medium">
+
+                    {% include paginate-doc.html %}
+
+                    {% include related-auth.html %}
+
+                    {% if site.disqus.shortname %} {% include disqus_comments.html %} {% endif %}
+                </article>
+
+                <script>
+                    // Table of contents scroll to
+                    UIkit.scroll('#markdown-toc a', {
+                        duration: 400,
+                        offset: 120
+                    });
+                </script>
+
+            </div>
+
+    </div>
+</div>
--- a/_layouts/changelog.html
+++ b/_layouts/changelog.html
@ -0,0 +1,37 @@
+---
+layout: default
+---
+
+<div class="uk-section">
+    <div class="uk-container uk-container-xsmall">
+
+        <article class="uk-article">
+
+            <h1 class="uk-article-title">{{ page.title | escape }}</h1>
+
+            <div class="article-content">
+                {{ content }}
+            </div>
+
+            <div class="tm-timeline uk-margin-large-top">
+                {% for version in site.data.changelog %}
+                <div class="tm-timeline-entry">
+                    <div class="tm-timeline-time">
+                        <h5>{{ version.date }}</h5>
+                    </div>
+                    <div class="tm-timeline-body">
+                        <h3>{{ version.title }} <span class="uk-label">{{ version.label }}</span></h3>
+                        <ul class="uk-list">
+                            {% for item in version.list %}
+                            <li>{{ item }}</li>
+                            {% endfor %}
+                        </ul>
+                    </div>
+                </div>
+                {% endfor %}
+            </div>
+
+        </article>
+
+    </div>
+</div>
--- a/_layouts/contact.html
+++ b/_layouts/contact.html
@ -0,0 +1,56 @@
+---
+layout: default
+---
+
+<div class="uk-section">
+    <div class="uk-container uk-container-xsmall">
+
+        <article class="uk-article">
+
+            <h1 class="uk-article-title">{{ page.title | escape }}</h1>
+
+            <div class="article-content">
+                {{ content }}
+            </div>
+
+        </article>
+
+        {% if page.formspree.email %}
+        <h3 class="uk-margin-medium-top">Contact Form</h3>
+        <form class="uk-form-stacked uk-margin-medium-top" method="POST" action="https://formspree.io/{{ page.formspree.email }}" accept-charset="UTF-8">
+            <div class="uk-margin-medium-bottom">
+                <label class="uk-form-label uk-margin-small-bottom" for="form-stacked-text">Name</label>
+                <div class="uk-form-controls">
+                    <input class="uk-input uk-form-large uk-border-rounded" name="name" type="text" required>
+                </div>
+            </div>
+            <div class="uk-margin-medium-bottom">
+                <label class="uk-form-label uk-margin-small-bottom" for="form-stacked-text">Email</label>
+                <div class="uk-form-controls">
+                    <input class="uk-input uk-form-large uk-border-rounded" name="_replyto" type="email" required>
+                </div>
+            </div>
+            <div class="uk-margin-medium-bottom">
+                <label class="uk-form-label uk-margin-small-bottom" for="form-stacked-text">Subject</label>
+                <div class="uk-form-controls">
+                    <input class="uk-input uk-form-large uk-border-rounded" name="_subject" type="text">
+                </div>
+            </div>
+            <div class="uk-margin-medium-bottom">
+                <label class="uk-form-label uk-margin-small-bottom" for="form-stacked-text">Message</label>
+                <div class="uk-form-controls">
+                    <textarea class="uk-textarea uk-form-large" name="message" rows="5" minlength="10" required></textarea>
+                </div>
+            </div>
+            <div>
+                {% if page.formspree.redirect %}
+                <input type="hidden" name="_next" value="{{ page.formspree.redirect | absolute_url }}">
+                {% endif %}
+                <input type="text" name="_gotcha" style="display:none">
+                <input class="uk-button uk-button-primary uk-button-large uk-width-1-1 uk-border-rounded" type="submit" value="Send">
+            </div>
+        </form>
+        {% endif %}
+
+    </div>
+</div>
--- a/_layouts/default.html
+++ b/_layouts/default.html
@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="{{ page.lang | default: site.lang | default: "en" }}">
+
+    {% include head.html %}
+
+    <body>
+
+    {% include header.html %}
+
+    {% if page.hero %}
+        {% include hero.html %}
+    {% endif %}
+
+    {{ content }}
+
+    {% include offcanvas.html %}
+
+    {% if page.layout != 'doc' %}
+        {% include footer.html %}
+    {% endif %}
+
+    <!-- {% include search.html %} -->
+
+
+
+    </body>
+
+</html>
--- a/_layouts/doc.html
+++ b/_layouts/doc.html
@ -0,0 +1,70 @@
+---
+layout: default
+---
+
+<div class="uk-section">
+    <div class="uk-container">
+        <div class="uk-grid-large" data-uk-grid>
+
+            <div class="sidebar-fixed-width uk-visible@m">
+                <div class="sidebar-docs uk-position-fixed">
+                    {% for section in site.data.navigation_docs %}
+                    <h5>{{ section.title }}</h5>
+                    <ul class="uk-nav uk-nav-default doc-nav">
+                    {% for doc in section.docs %}
+                      {% assign doc_url = doc | prepend:"/" | append:"/" %}
+                      <!-- {% assign p =  site.docs | where:"url", doc_url | first %} -->
+                      {% for col in site.collections %}
+                        {% for item in col.docs %}
+                            {% if item.url == doc_url %}
+                                 {% assign doc_title = item.title %}
+                             {% else %}
+                               {% comment %}Do nothing{% endcomment %}
+                             {% endif %}
+                        {% endfor %}
+                      {% endfor %}
+                      <li class="{% if doc_url == page.url %}uk-active{% endif %}"><a href="{{ doc_url }}">{{ doc_title }}</a></li>
+                    {% endfor %}
+                    </ul>
+                    {% endfor %}
+                </div>
+            </div>
+
+            <div class="uk-width-1-1 uk-width-expand@m">
+
+                <article class="uk-article">
+
+                    <h1 class="uk-article-title">{{ page.title | escape }}</h1>
+
+                    {% if page.subtitle %}<p class="subtitle uk-text-lead uk-text-muted">{{ page.subtitle }}</p>{% endif %}
+
+                    <div class="uk-article-meta uk-margin-top uk-margin-medium-bottom">
+                        {% include post-meta.html %}
+                    </div>
+
+                    <div class="article-content">
+                        {{ content }}
+                        {% include share.html %}
+                    </div>
+
+                    <hr class="uk-margin-medium">
+
+                    {% include paginate-doc.html %}
+
+                    {% include related-docs.html %}
+
+                    {% if site.disqus.shortname %} {% include disqus_comments.html %} {% endif %}
+                </article>
+
+                <script>
+                    // Table of contents scroll to
+                    UIkit.scroll('#markdown-toc a', {
+                        duration: 400,
+                        offset: 120
+                    });
+                </script>
+
+            </div>
+
+    </div>
+</div>
--- a/_layouts/gaia.html
+++ b/_layouts/gaia.html
@ -0,0 +1,70 @@
+---
+layout: default
+---
+
+<div class="uk-section">
+    <div class="uk-container">
+        <div class="uk-grid-large" data-uk-grid>
+
+            <div class="sidebar-fixed-width uk-visible@m">
+                <div class="sidebar-docs uk-position-fixed">
+                    {% for section in site.data.navigation_gaia %}
+                    <h5>{{ section.title }}</h5>
+                    <ul class="uk-nav uk-nav-default doc-nav">
+                    {% for doc in section.docs %}
+                      {% assign doc_url = doc | prepend:"/" | append:"/" %}
+                      <!-- {% assign p =  site.docs | where:"url", doc_url | first %} -->
+                      {% for col in site.collections %}
+                        {% for item in col.docs %}
+                            {% if item.url == doc_url %}
+                                 {% assign doc_title = item.title %}
+                             {% else %}
+                               {% comment %}Do nothing{% endcomment %}
+                             {% endif %}
+                        {% endfor %}
+                      {% endfor %}
+                      <li class="{% if doc_url == page.url %}uk-active{% endif %}"><a href="{{ doc_url }}">{{ doc_title }}</a></li>
+                    {% endfor %}
+                    </ul>
+                    {% endfor %}
+                </div>
+            </div>
+
+            <div class="uk-width-1-1 uk-width-expand@m">
+
+                <article class="uk-article">
+
+                    <h1 class="uk-article-title">{{ page.title | escape }}</h1>
+
+                    {% if page.subtitle %}<p class="subtitle uk-text-lead uk-text-muted">{{ page.subtitle }}</p>{% endif %}
+
+                    <div class="uk-article-meta uk-margin-top uk-margin-medium-bottom">
+                        {% include post-meta.html %}
+                    </div>
+
+                    <div class="article-content">
+                        {{ content }}
+                        {% include share.html %}
+                    </div>
+
+                    <hr class="uk-margin-medium">
+
+                    {% include paginate-doc.html %}
+
+                    {% include related-gaia.html %}
+
+                    {% if site.disqus.shortname %} {% include disqus_comments.html %} {% endif %}
+                </article>
+
+                <script>
+                    // Table of contents scroll to
+                    UIkit.scroll('#markdown-toc a', {
+                        duration: 400,
+                        offset: 120
+                    });
+                </script>
+
+            </div>
+
+    </div>
+</div>
--- a/_layouts/home.html
+++ b/_layouts/home.html
@ -0,0 +1,102 @@
+---
+layout: default
+---
+
+{% if page.categories.columns %}
+    {% assign columns = page.categories.columns %}
+{% else %}
+    {% assign columns = 3 %}
+{% endif %}
+
+{% if page.categories %}
+<div class="uk-section">
+    <div class="uk-container">
+
+        {% if page.categories.title %}
+            <h2 class="uk-text-center heading-hero-2" style="padding-top: 25px !important;">{{ page.categories.title }}</h2>
+        {% endif %}
+
+        {% if page.categories.subtitle %}<p class="subtitle uk-text-lead uk-text-center">{{ page.categories.subtitle | escape }}</p>{% endif %}
+
+        <div class="uk-child-width-1-{{ columns }}@m uk-grid-match uk-text-center uk-margin-medium-top" data-uk-grid>
+        {% for item in site.data.navigation_home %}
+            {% if item.title %}
+            {% assign doc_url = item.doc | prepend:"/" | append:"/" %}
+            {% assign doc = site.docs | where:"url", doc_url | first %}
+            <div>
+                <div class="uk-card uk-card-body uk-inline uk-border-rounded">
+                    <a class="uk-position-cover" href="{{ doc_url }}"></a>
+                    {% if item.icon %}
+                    <span data-uk-icon="icon: {{ item.icon }}; ratio: 2" class=""></span>
+                    {% endif %}
+                    <h3 class="uk-card-title uk-margin">{{ item.title }}</h3>
+                    {% if item.desc %}
+                    <p>{{ item.desc }}</p>
+                    {% endif %}
+                </div>
+            </div>
+            {% endif %}
+        {% endfor %}
+        </div>
+
+    </div>
+</div>
+{% endif %}
+
+{% comment %} ONLY include section if there are featured pages. {% endcomment %} 
+{% assign featured_exists = false %}
+{% for doc in site.docs %}
+    {% if doc.tags contains page.featured.tag and featured_exists != false %}
+        {% assign featured_exists = false %}
+    {% endif %}
+{% endfor %}
+{% if page.featured.tag and featured_exists == true %}
+<div class="uk-section uk-text-center">
+    <div class="uk-container uk-container-small">
+        {% if page.featured.title %}
+        <h2 class="heading-hero-2">{{ page.featured.title }}</h2>
+        {% endif %}
+        <ul class="uk-list uk-list-large list-featured uk-child-width-1-2@s" data-uk-grid>
+        {% for doc in site.docs %}
+            {% if doc.tags contains page.featured.tag %}
+            <li><a href="{{ site.baseurl }}{{ doc.url }}">{{doc.title}}</a></li>
+            {% endif %}
+        {% endfor %}
+        </ul>
+    </div>
+</div>
+{% endif %}
+
+{% if page.section %}
+<div class="uk-section uk-text-center">
+    <div class="uk-container uk-container-small">
+
+        {% if page.section.title %}
+            <h2 class="uk-text-center heading-hero-2">{{ page.section.title }}</h2>
+        {% endif %}
+
+        {% if page.section.subtitle %}<p class="subtitle uk-text-lead uk-text-center">{{ page.section.subtitle | escape }}</p>{% endif %}
+
+            <div class="article-content uk-margin-medium-top">{{ content }}</div>
+    </div>
+</div>
+{% endif %}
+
+{% if page.cta.button_url contains 'http' %}
+    {% assign domain = '' %}
+{% else %}
+    {% assign domain = relative_url %}
+{% endif %}
+
+
+{% if page.cta %}
+<div class="uk-section uk-text-center">
+    <div class="uk-container uk-container-small">
+        <div data-uk-scrollspy="cls: uk-animation-slide-bottom-medium; repeat: true">
+            <h3>{{ page.cta.title }}</h3>
+            {% if page.cta.subtitle %}<p class="subtitle uk-text-lead uk-text-center">{{ page.cta.subtitle | escape }}</p>{% endif %}
+            <a class="uk-button uk-button-primary uk-button-large button-cta" href="{{ domain }}{{ page.cta.button_url }}">{{ page.cta.button_text }}</a>
+        </div>
+    </div>
+</div>
+{% endif %}
--- a/_layouts/learn.html
+++ b/_layouts/learn.html
@ -0,0 +1,70 @@
+---
+layout: default
+---
+
+<div class="uk-section">
+    <div class="uk-container">
+        <div class="uk-grid-large" data-uk-grid>
+
+            <div class="sidebar-fixed-width uk-visible@m">
+                <div class="sidebar-docs uk-position-fixed">
+                    {% for section in site.data.navigation_learn %}
+                    <h5>{{ section.title }}</h5>
+                    <ul class="uk-nav uk-nav-default doc-nav">
+                    {% for doc in section.docs %}
+                      {% assign doc_url = doc | prepend:"/" | append:"/" %}
+                      <!-- {% assign p =  site.docs | where:"url", doc_url | first %} -->
+                      {% for col in site.collections %}
+                        {% for item in col.docs %}
+                            {% if item.url == doc_url %}
+                                 {% assign doc_title = item.title %}
+                             {% else %}
+                               {% comment %}Do nothing{% endcomment %}
+                             {% endif %}
+                        {% endfor %}
+                      {% endfor %}
+                      <li class="{% if doc_url == page.url %}uk-active{% endif %}"><a href="{{ doc_url }}">{{ doc_title }}</a></li>
+                    {% endfor %}
+                    </ul>
+                    {% endfor %}
+                </div>
+            </div>
+
+            <div class="uk-width-1-1 uk-width-expand@m">
+
+                <article class="uk-article">
+
+                    <h1 class="uk-article-title">{{ page.title | escape }}</h1>
+
+                    {% if page.subtitle %}<p class="subtitle uk-text-lead uk-text-muted">{{ page.subtitle }}</p>{% endif %}
+
+                    <div class="uk-article-meta uk-margin-top uk-margin-medium-bottom">
+                        {% include post-meta.html %}
+                    </div>
+
+                    <div class="article-content">
+                        {{ content }}
+                        {% include share.html %}
+                    </div>
+
+                    <hr class="uk-margin-medium">
+
+                    {% include paginate-doc.html %}
+
+                    {% include related-learn.html %}
+
+                    {% if site.disqus.shortname %} {% include disqus_comments.html %} {% endif %}
+                </article>
+
+                <script>
+                    // Table of contents scroll to
+                    UIkit.scroll('#markdown-toc a', {
+                        duration: 400,
+                        offset: 120
+                    });
+                </script>
+
+            </div>
+
+    </div>
+</div>
--- a/_layouts/naming.html
+++ b/_layouts/naming.html
@ -0,0 +1,70 @@
+---
+layout: default
+---
+
+<div class="uk-section">
+    <div class="uk-container">
+        <div class="uk-grid-large" data-uk-grid>
+
+            <div class="sidebar-fixed-width uk-visible@m">
+                <div class="sidebar-docs uk-position-fixed">
+                    {% for section in site.data.navigation_naming %}
+                    <h5>{{ section.title }}</h5>
+                    <ul class="uk-nav uk-nav-default doc-nav">
+                    {% for doc in section.docs %}
+                      {% assign doc_url = doc | prepend:"/" | append:"/" %}
+                      <!-- {% assign p =  site.docs | where:"url", doc_url | first %} -->
+                      {% for col in site.collections %}
+                        {% for item in col.docs %}
+                            {% if item.url == doc_url %}
+                                 {% assign doc_title = item.title %}
+                             {% else %}
+                               {% comment %}Do nothing{% endcomment %}
+                             {% endif %}
+                        {% endfor %}
+                      {% endfor %}
+                      <li class="{% if doc_url == page.url %}uk-active{% endif %}"><a href="{{ doc_url }}">{{ doc_title }}</a></li>
+                    {% endfor %}
+                    </ul>
+                    {% endfor %}
+                </div>
+            </div>
+
+            <div class="uk-width-1-1 uk-width-expand@m">
+
+                <article class="uk-article">
+
+                    <h1 class="uk-article-title">{{ page.title | escape }}</h1>
+
+                    {% if page.subtitle %}<p class="subtitle uk-text-lead uk-text-muted">{{ page.subtitle }}</p>{% endif %}
+
+                    <div class="uk-article-meta uk-margin-top uk-margin-medium-bottom">
+                        {% include post-meta.html %}
+                    </div>
+
+                    <div class="article-content">
+                        {{ content }}
+                        {% include share.html %}
+                    </div>
+
+                    <hr class="uk-margin-medium">
+
+                    {% include paginate-doc.html %}
+
+                    {% include related-naming.html %}
+
+                    {% if site.disqus.shortname %} {% include disqus_comments.html %} {% endif %}
+                </article>
+
+                <script>
+                    // Table of contents scroll to
+                    UIkit.scroll('#markdown-toc a', {
+                        duration: 400,
+                        offset: 120
+                    });
+                </script>
+
+            </div>
+
+    </div>
+</div>
--- a/_layouts/newinternet.html
+++ b/_layouts/newinternet.html
@ -0,0 +1,70 @@
+---
+layout: default
+---
+
+<div class="uk-section">
+    <div class="uk-container">
+        <div class="uk-grid-large" data-uk-grid>
+
+            <div class="sidebar-fixed-width uk-visible@m">
+                <div class="sidebar-docs uk-position-fixed">
+                    {% for section in site.data.navigation_newinternet %}
+                    <h5>{{ section.title }}</h5>
+                    <ul class="uk-nav uk-nav-default doc-nav">
+                    {% for doc in section.docs %}
+                      {% assign doc_url = doc | prepend:"/" | append:"/" %}
+                      <!-- {% assign p =  site.docs | where:"url", doc_url | first %} -->
+                      {% for col in site.collections %}
+                        {% for item in col.docs %}
+                            {% if item.url == doc_url %}
+                                 {% assign doc_title = item.title %}
+                             {% else %}
+                               {% comment %}Do nothing{% endcomment %}
+                             {% endif %}
+                        {% endfor %}
+                      {% endfor %}
+                      <li class="{% if doc_url == page.url %}uk-active{% endif %}"><a href="{{ doc_url }}">{{ doc_title }}</a></li>
+                    {% endfor %}
+                    </ul>
+                    {% endfor %}
+                </div>
+            </div>
+
+            <div class="uk-width-1-1 uk-width-expand@m">
+
+                <article class="uk-article">
+
+                    <h1 class="uk-article-title">{{ page.title | escape }}</h1>
+
+                    {% if page.subtitle %}<p class="subtitle uk-text-lead uk-text-muted">{{ page.subtitle }}</p>{% endif %}
+
+                    <div class="uk-article-meta uk-margin-top uk-margin-medium-bottom">
+                        {% include post-meta.html %}
+                    </div>
+
+                    <div class="article-content">
+                        {{ content }}
+                        {% include share.html %}
+                    </div>
+
+                    <hr class="uk-margin-medium">
+
+                    {% include paginate-doc.html %}
+
+                    {% include related-newinternet.html %}
+
+                    {% if site.disqus.shortname %} {% include disqus_comments.html %} {% endif %}
+                </article>
+
+                <script>
+                    // Table of contents scroll to
+                    UIkit.scroll('#markdown-toc a', {
+                        duration: 400,
+                        offset: 120
+                    });
+                </script>
+
+            </div>
+
+    </div>
+</div>
--- a/_layouts/page.html
+++ b/_layouts/page.html
@ -0,0 +1,19 @@
+---
+layout: default
+---
+
+<div class="uk-section">
+    <div class="uk-container uk-container-xsmall">
+
+        <article class="uk-article">
+
+            <h1 class="uk-article-title">{{ page.title | escape }}</h1>
+
+            <div class="article-content">
+                {{ content }}
+            </div>
+
+        </article>
+
+    </div>
+</div>
--- a/_layouts/post.html
+++ b/_layouts/post.html
@ -0,0 +1,36 @@
+---
+layout: default
+---
+
+<div class="uk-section">
+    <div class="uk-container uk-container-xsmall">
+        <article class="uk-article">
+
+            <h1 class="uk-article-title">{{ page.title | escape }}</h1>
+
+            <div class="uk-article-meta uk-margin-top uk-margin-medium-bottom">
+                {% include post-meta.html %}
+            </div>
+
+            <div class="uk-article-content">
+                {{ content }}
+                {% include share.html %}
+            </div>
+
+            <hr class="uk-margin-medium">
+
+            {% include paginate-post.html %}
+
+            {% if site.disqus.shortname %} {% include disqus_comments.html %} {% endif %}
+        </article>
+
+        <script>
+            // Table of contents scroll to
+            UIkit.scroll('#markdown-toc a', {
+                duration: 400,
+                offset: 120
+            });
+        </script>
+
+    </div>
+</div>
--- a/_posts/2017-05-25-post63.md
+++ b/_posts/2017-05-25-post63.md
@ -0,0 +1,49 @@
+---
+layout: post
+title: Example Post
+author: John Black
+---
+
+## Site tags
+
+
+    {% if site.tags contains page.featured.tag %}
+        **There is at least one**
+    {% endif %}
+
+
+
+
+Musce libero nunc, dignissim quis turpis quis, semper vehicula dolor. Suspendisse tincidunt consequat quam, ac posuere leo dapibus id. Cras fringilla convallis elit, at eleifend mi interam.
+
+Nulla non sollicitudin. Morbi sit amet laoreet ipsum, vel pretium mi. Morbi varius, tellus in accumsan blandit, elit ligula eleifend velit, luctus mattis ante nulla condimentum nulla. Etiam vestibulum risus vel arcu elementum eleifend. Cras at dolor eget urna varius faucibus tempus in elit.
+
+## Image Lightbox Example
+Nunc porta malesuada porta. Etiam tristique vestibulum dolor at ultricies. Proin hendrerit sapien sed erat fermentum, at commodo velit consectetur.
+
+{% include image.html img="image1.png" style="wide" lightbox="true" alt="Alt for image" caption="Image in lightbox" %}
+
+Etiam vestibulum risus vel arcu elementum eleifend. Cras at dolor eget urna varius faucibus tempus in elit. Cras a dui imperdiet, tempus metus quis, pharetra turpis. Phasellus at massa sit amet ante semper fermentum sed eget lectus. Quisque id dictum magna, et dapibus turpis.
+
+## Example Of Code Block
+In accumsan lacus ac neque maximus dictum. Phasellus eleifend leo id mattis bibendum. Curabitur et purus turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
+
+```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">
+  <link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}">
+  <link rel="shortcut icon" type="image/png" href="{{ "assets/img/favicon.png" | relative_url }}" >
+  <script src="{{ "/assets/js/main.js" | relative_url }}"></script>
+</head>
+```
+
+## Text and Quote
+Cras at dolor eget urna varius faucibus tempus in elit. Cras a dui imperdiet, tempus metus quis, pharetra turpis. Phasellus at massa sit amet ante semper fermentum sed eget lectus. Quisque id dictum magna turpis.
+
+> Etiam vestibulum risus vel arcu elementum eleifend. Cras at dolor eget urna varius faucibus tempus in elit. Cras a dui imperdiet
+
+In accumsan lacus ac neque maximus dictum. Phasellus eleifend leo id mattis bibendum. Curabitur et purus turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
+
+Etiam in fermentum mi. Sed et tempor felis, eu aliquet nisi. Nam eget ullamcorper arcu. Nunc porttitor nisl a dolor blandit, eget consequat sem maximus. Phasellus lacinia quam porta orci malesuada, vel tincidunt.
--- a/_sass/syntax-highlighting/github.scss
+++ b/_sass/syntax-highlighting/github.scss
@ -0,0 +1,289 @@
+/**
+ * Syntax highlighting styles
+ */
+
+
+
+.highlight, .highlighter-rouge {
+    background-color: #F7F8FA;
+    color: #5A6575;
+    border: none;
+}
+
+.highlight .lineno {
+    color: #B1B8C4
+}
+
+.highlight .c {
+    color: #B1B8C4
+}
+
+.highlight .err {
+    color: #5A6575
+}
+
+.highlight .g {
+    color: #5A6575
+}
+
+.highlight .k {
+    color: #25BEA1
+}
+
+.highlight .l {
+    color: #5A6575
+}
+
+.highlight .n {
+    color: #5A6575
+}
+
+.highlight .o {
+    color: #25BEA1
+}
+
+.highlight .x {
+    color: #FBBC09
+}
+
+.highlight .p {
+    color: #25BEA1
+}
+
+.highlight .cm {
+    color: #B1B8C4
+}
+
+.highlight .cp {
+    color: #25BEA1
+}
+
+.highlight .c1 {
+    color: #B1B8C4
+}
+
+.highlight .cs {
+    color: #25BEA1
+}
+
+.highlight .gd {
+    color: #E56134
+}
+
+.highlight .ge {
+    color: #5A6575;
+    font-style: italic
+}
+
+.highlight .gr {
+    color: #9961C9
+}
+
+.highlight .gh {
+    color: #FBBC09
+}
+
+.highlight .gi {
+    color: #25BEA1
+}
+
+.highlight .go {
+    color: #5A6575
+}
+
+.highlight .gp {
+    color: #FBBC09
+}
+
+.highlight .gs {
+    color: #5A6575;
+    font-weight: bold
+}
+
+.highlight .gu {
+    color: #FBBC09
+}
+
+.highlight .gt {
+    color: #5A6575
+}
+
+.highlight .kc {
+    color: #FBBC09
+}
+
+.highlight .kd {
+    color: #11A0F3
+}
+
+.highlight .kn {
+    color: #25BEA1
+}
+
+.highlight .kp {
+    color: #25BEA1
+}
+
+.highlight .kr {
+    color: #11A0F3
+}
+
+.highlight .kt {
+    color: #9961C9
+}
+
+.highlight .ld {
+    color: #5A6575
+}
+
+.highlight .m {
+    color: #E56134
+}
+
+.highlight .s {
+    color: #E56134
+}
+
+.highlight .na {
+    color: #5A6575
+}
+
+.highlight .nb {
+    color: #5A6575
+}
+
+.highlight .nc {
+    color: #11A0F3
+}
+
+.highlight .no {
+    color: #5A6575
+}
+
+.highlight .nd {
+    color: #11A0F3
+}
+
+.highlight .ni {
+    color: #FBBC09
+}
+
+.highlight .ne {
+    color: #FBBC09
+}
+
+.highlight .nf {
+    color: #11A0F3
+}
+
+.highlight .nl {
+    color: #5A6575
+}
+
+.highlight .nn {
+    color: #5A6575
+}
+
+.highlight .nx {
+    color: #5A6575
+}
+
+.highlight .py {
+    color: #5A6575
+}
+
+.highlight .nt {
+    color: #11A0F3
+}
+
+.highlight .nv {
+    color: #5A6575
+}
+
+.highlight .ow {
+    color: #25BEA1
+}
+
+.highlight .w {
+    color: #5A6575
+}
+
+.highlight .mf {
+    color: #E56134
+}
+
+.highlight .mh {
+    color: #E56134
+}
+
+.highlight .mi {
+    color: #E56134
+}
+
+.highlight .mo {
+    color: #E56134
+}
+
+.highlight .sb {
+    color: #B1B8C4
+}
+
+.highlight .sc {
+    color: #E56134
+}
+
+.highlight .sd {
+    color: #5A6575
+}
+
+.highlight .s2 {
+    color: #E56134
+}
+
+.highlight .se {
+    color: #FBBC09
+}
+
+.highlight .sh {
+    color: #5A6575
+}
+
+.highlight .si {
+    color: #E56134
+}
+
+.highlight .sx {
+    color: #E56134
+}
+
+.highlight .sr {
+    color: #9961C9
+}
+
+.highlight .s1 {
+    color: #E56134
+}
+
+.highlight .ss {
+    color: #E56134
+}
+
+.highlight .bp {
+    color: #11A0F3
+}
+
+.highlight .vc {
+    color: #11A0F3
+}
+
+.highlight .vg {
+    color: #11A0F3
+}
+
+.highlight .vi {
+    color: #11A0F3
+}
+
+.highlight .il {
+    color: #E56134
+}
--- a/_sass/system-font-css/CHANGELOG.md
+++ b/_sass/system-font-css/CHANGELOG.md
@ -0,0 +1,13 @@
+## 2.0.0 (2017-06-28)
+
+- Changed from `system` to `system-ui` to match the CSS specification.
+
+## 1.1.0 (2015-08-02)
+
+- Added: Android fonts Roboto and Droid Sans after Ubuntu.
+- Removed: Windows 3.1-ME font Microsoft Sans Serif.
+- Updated: documentation.
+
+## 1.0.0 (2015-07-30)
+
+- Added: Initial version
--- a/_sass/system-font-css/LICENSE.md
+++ b/_sass/system-font-css/LICENSE.md
@ -0,0 +1,15 @@
+# CC0 1.0 Universal License
+
+Public Domain Dedication
+
+The person(s) who associated a work with this deed has dedicated the work to the public domain by waiving all of his or her rights to the work worldwide under copyright law, including all related and neighboring rights, to the extent allowed by law.
+
+You can copy, modify, distribute and perform the work, even for commercial purposes, all without asking permission.
+
+In no way are the patent or trademark rights of any person affected by CC0, nor are the rights that other persons may have in the work or in how the work is used, such as publicity or privacy rights.
+
+Unless expressly stated otherwise, the person(s) who associated a work with this deed makes no warranties about the work, and disclaims liability for all uses of the work, to the fullest extent permitted by applicable law.
+
+When using or citing the work, you should not imply endorsement by the author or the affirmer.
+
+This is a [human-readable summary of the Legal Code](https://creativecommons.org/publicdomain/zero/1.0/) ([read the full text](https://creativecommons.org/publicdomain/zero/1.0/legalcode)).
--- a/_sass/system-font-css/README.md
+++ b/_sass/system-font-css/README.md
@ -0,0 +1,68 @@
+# System Font CSS
+
+System Font CSS is set of `@font-face` rules that let you use the native system font of the OS running the browser.
+
+```css
+body {
+    font-family: system-ui;
+}
+```
+
+[system-font.css](system-font.css) offers eight variations of the `system-ui` font family; **light** (300) **light italic**, **normal** (400), **normal italic**, **medium** (500), **medium italic**, **bold** (700), and **bold italic**.
+
+```css
+blockquote {
+    font: italic 300 system-ui;
+}
+
+p {
+    font: 400 system-ui;
+}
+```
+
+## Quick Start
+
+### Install
+
+This package can be installed with:
+
+* [npm](https://www.npmjs.com/package/system-font-css): `npm install --save system-font-css`
+
+### Load
+
+When installed with npm, system-font.css will create both a SCSS and LESS partial for easy importing:
+
+```scss
+@import 'system-font';
+```
+
+## OSX
+
+**OSX** has used three system typefaces. Since **El Capitan** it has used **San Fransisco**. In **Yosemite** it used **Helvetica Neue**. From **Mavericks** back to **Kodiak** it used **Lucida Grande**.
+
+## Windows
+
+**Windows** has used four system typefaces. Since **Vista** it has used **Segoe UI**. In XP, it used **Tahoma**, which oddly enough does not have an italic variation. From **Windows ME** back to **Windows 3.1** it used **Microsoft Sans Serif**. Finally, from **Windows 2.0** back to **Windows 1.0** it used **Fixedsys**. Neither **Microsoft Sans Serif** or **Fixedsys** are included in this set, with apologies.
+
+Also, for those of opposed to joy, remember that **Internet Explorer 8** does not support local `@font-face` rules. Therefore, should you need to reference system fonts in that browser then you will need to do so from the `font` declaration.
+
+```css
+body {
+    font-family: system-ui, "Segoe UI", Tahoma;
+}
+```
+
+## Android
+
+**Android** has used two system typefaces. Since **Ice Cream Sandwich** it has used **Roboto**. From **Jelly Bean** back to **Cupcake** it used **Droid Sans**, which also lacks an italic variation. Do you suppose OS developers dislike *emphasis*?
+
+## Ubuntu
+
+Ubuntu has always used one system typeface, aptly named **Ubuntu**. That part was easy.
+
+## Native `system-ui` resources
+
+* [CSS Fonts Module Level 4 Editor’s Draft Specification](https://drafts.csswg.org/css-fonts-4/#system-ui-def)
+* [Chrome Platform Status](https://www.chromestatus.com/feature/5640395337760768)
+* Proposed for inclusion on [Can I Use](https://github.com/Fyrd/caniuse/issues/2918)
+* Previous [discussions in the W3C](https://lists.w3.org/Archives/Public/www-style/2015Jul/0169.html) to standardize a generic `system` family.
--- a/_sass/system-font-css/_system-font.scss
+++ b/_sass/system-font-css/_system-font.scss
@ -0,0 +1,57 @@
+/*! system-font.css v2.0.2 | CC0-1.0 License | github.com/jonathantneal/system-font-css */
+
+@font-face {
+	font-family: system-ui;
+	font-style: normal;
+	font-weight: 300;
+	src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Segoe UI Light"), local("Ubuntu Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma");
+}
+
+@font-face {
+	font-family: system-ui;
+	font-style: italic;
+	font-weight: 300;
+	src: local(".SFNSText-LightItalic"), local(".HelveticaNeueDeskInterface-Italic"), local(".LucidaGrandeUI"), local("Segoe UI Light Italic"), local("Ubuntu Light Italic"), local("Roboto-LightItalic"), local("DroidSans"), local("Tahoma");
+}
+
+@font-face {
+	font-family: system-ui;
+	font-style: normal;
+	font-weight: 400;
+	src: local(".SFNSText-Regular"), local(".HelveticaNeueDeskInterface-Regular"), local(".LucidaGrandeUI"), local("Segoe UI"), local("Ubuntu"), local("Roboto-Regular"), local("DroidSans"), local("Tahoma");
+}
+
+@font-face {
+	font-family: system-ui;
+	font-style: italic;
+	font-weight: 400;
+	src: local(".SFNSText-Italic"), local(".HelveticaNeueDeskInterface-Italic"), local(".LucidaGrandeUI"), local("Segoe UI Italic"), local("Ubuntu Italic"), local("Roboto-Italic"), local("DroidSans"), local("Tahoma");
+}
+
+@font-face {
+	font-family: system-ui;
+	font-style: normal;
+	font-weight: 500;
+	src: local(".SFNSText-Medium"), local(".HelveticaNeueDeskInterface-MediumP4"), local(".LucidaGrandeUI"), local("Segoe UI Semibold"), local("Ubuntu Medium"), local("Roboto-Medium"), local("DroidSans-Bold"), local("Tahoma Bold");
+}
+
+@font-face {
+	font-family: system-ui;
+	font-style: italic;
+	font-weight: 500;
+	src: local(".SFNSText-MediumItalic"), local(".HelveticaNeueDeskInterface-MediumItalicP4"), local(".LucidaGrandeUI"), local("Segoe UI Semibold Italic"), local("Ubuntu Medium Italic"), local("Roboto-MediumItalic"), local("DroidSans-Bold"), local("Tahoma Bold");
+}
+
+@font-face {
+	font-family: system-ui;
+	font-style: normal;
+	font-weight: 700;
+	src: local(".SFNSText-Bold"), local(".HelveticaNeueDeskInterface-Bold"), local(".LucidaGrandeUI"), local("Segoe UI Bold"), local("Ubuntu Bold"), local("Roboto-Bold"), local("DroidSans-Bold"), local("Tahoma Bold");
+}
+
+@font-face {
+	font-family: system-ui;
+	font-style: italic;
+	font-weight: 700;
+	src: local(".SFNSText-BoldItalic"), local(".HelveticaNeueDeskInterface-BoldItalic"), local(".LucidaGrandeUI"), local("Segoe UI Bold Italic"), local("Ubuntu Bold Italic"), local("Roboto-BoldItalic"), local("DroidSans-Bold"), local("Tahoma Bold");
+}
--- a/_sass/system-font-css/index.html
+++ b/_sass/system-font-css/index.html
@ -0,0 +1,189 @@
+<!doctype html>
+<title>System Font CSS</title>
+<meta charset="utf-8">
+<meta http-equiv="x-ua-compatible" content="ie=edge">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link href="system-font.css" rel="stylesheet">
+<style>
+@font-face {
+	font-family: monospace;
+	font-style: normal;
+	font-weight: 400;
+	src: local("Menlo-Regular"), local("Monaco"), local("Consolas"), local("DejaVu Sans Mono"), local("DejaVu Sans Mono");
+}
+
+@font-face {
+	font-family: monospace;
+	font-style: italic;
+	font-weight: 400;
+	src: local("Menlo-Regular"), local("Monaco"), local("Consolas-Italic"), local("DejaVu Sans Mono Oblique");
+}
+
+@font-face {
+	font-family: monospace;
+	font-style: normal;
+	font-weight: 700;
+	src: local("Menlo-Regular"), local("Monaco"), local("Consolas-Bold"), local("DejaVu Sans Mono Bold");
+}
+
+@font-face {
+	font-family: monospace;
+	font-style: italic;
+	font-weight: 700;
+	src: local("Menlo-Regular"), local("Monaco"), local("Consolas-BoldItalic"), local("DejaVu Sans Mono Bold Oblique");
+}
+
+body {
+	font: 1em/1.6 system-ui, Tahoma, sans-serif;
+	margin: 3em auto;
+	max-width: 40em;
+}
+
+@media (max-width: 42em) {
+	body {
+		margin: 3em 1em;
+	}
+}
+
+h1,
+h2 {
+	border-bottom: 1px solid #eee;
+	padding-bottom: .3em;
+}
+
+h1 {
+	margin: 1em 0 1rem;
+	font-size: 2.25em;
+}
+
+h2 {
+	font-size: 1.75em;
+	line-height: 1.225;
+	margin: 1em 0 1rem;
+}
+
+code,
+pre {
+	border-radius: 3px;
+	font-family: "monospace", monospace;
+	font-size: 85%;
+}
+
+p,
+pre {
+	margin: 0 0 1em;
+}
+
+code {
+	background-color: rgba(0,0,0,.04);
+	padding: .2em;
+}
+
+pre {
+	background-color: #f7f7f7;
+	line-height: 1.45;
+	padding: 1em;
+	-moz-tab-size: 4;
+	tab-size: 4;
+}
+
+a {
+	color: #4078c0;
+	text-decoration: none;
+}
+
+a:focus,
+a:hover {
+	text-decoration: underline;
+}
+
+.token-selector {
+	color: #0A0;
+}
+
+.token-property-name {
+	color: #44B;
+}
+
+.token-property-value {
+	color: #B50;
+}
+</style>
+
+<h1>
+	System Font CSS
+</h1>
+
+<p>
+	System Font CSS is set of <code>@font-face</code> rules that let you use the native system font of the OS running the browser.
+</p>
+
+<pre>
+<span class="token-selector">body</span> {
+    <span class="token-property-name">font-family</span>: <span class="token-property-value">system</span>;
+}
+</pre>
+
+<p>
+	<a href="https://github.com/jonathantneal/system-font-css">system-font.css</a> offers eight variations of the <code>system</code> font family; <strong>light</strong> (300) <strong>light italic</strong>, <strong>normal</strong> (400), <strong>normal italic</strong>, <strong>medium</strong> (500), <strong>medium italic</strong>, <strong>bold</strong> (700), and <strong>bold italic</strong>.
+</p>
+
+<pre>
+<span class="token-selector">blockquote</span> {
+    <span class="token-property-name">font</span>: <span class="token-property-value">italic 300 system</span>;
+}
+
+<span class="token-selector">p</span> {
+    <span class="token-property-name">font</span>: <span class="token-property-value">400 system</span>;
+}
+</pre>
+
+<h2>
+	OSX
+</h2>
+
+<p>
+	<strong>OSX</strong> has used three system typefaces. Since <strong>El Capitan</strong> it has used <strong>San Fransisco</strong>. In <strong>Yosemite</strong> it used <strong>Helvetica Neue</strong>. From <strong>Mavericks</strong> back to <strong>Kodiak</strong> it used <strong>Lucida Grande</strong>.
+</p>
+
+<h2>
+	Windows
+</h2>
+
+<p>
+	<strong>Windows</strong> has used four system typefaces. Since <strong>Vista</strong> it has used <strong>Segoe UI</strong>. In XP, it used <strong>Tahoma</strong>, which oddly enough lacks an italic variation. From <strong>Windows ME</strong> back to <strong>Windows 3.1</strong> it used <strong>Microsoft Sans Serif</strong>. Finally, from <strong>Windows 2.0</strong> back to <strong>Windows 1.0</strong> it used <strong>Fixedsys</strong>. Neither <strong>Microsoft Sans Serif</strong> or <strong>Fixedsys</strong> are included in this set, with apologies.
+</p>
+
+<p>
+	Also, for those of opposed to joy, remember that <strong>Internet Explorer 8</strong> does not support local <code>@font-face</code> rules. Therefore, should you need to reference system fonts in that browser then you will need to do so from the <code>font</code> declaration.
+</p>
+
+<pre>
+<span class="token-selector">body</span> {
+	<span class="token-property-name">font-family</span>: <span class="token-property-value">system, "Segoe UI", Tahoma</span>;
+}
+</pre>
+
+<h2>
+	Android
+</h2>
+
+<p>
+	<strong>Android</strong> has used two system typefaces. Since <strong>Ice Cream Sandwich</strong> it has used <strong>Roboto</strong>. From <strong>Jelly Bean</strong> back to <strong>Cupcake</strong> it used <strong>Droid Sans</strong>, which also lacks an italic variation. Do you suppose OS developers dislike <em>emphasis</em>?
+</p>
+
+<h2>
+	Ubuntu
+</h2>
+
+<p>
+	Ubuntu has always used one system typeface, apty named <strong>Ubuntu</strong>. That part was easy.
+</p>
+
+<h2>
+	Is <code>system</code> going to be a thing?
+</h2>
+
+<p>
+	Maybe. There are <a href="https://lists.w3.org/Archives/Public/www-style/2015Jul/0169.html" target="_blank">discussions in the W3C</a> to standardize a generic <code>system</code> family.
+</p>
--- a/_sass/system-font-css/package.json
+++ b/_sass/system-font-css/package.json
@ -0,0 +1,83 @@
+{
+  "_from": "system-font-css@^2.0.1",
+  "_id": "system-font-css@2.0.2",
+  "_inBundle": false,
+  "_integrity": "sha512-zK36lpja4NIi4Po99bXReeqeDcM1sW4hTKJt5Mby/IXX6kLSwjkQ4pZThFdgb/jDwfRsBvxxVG+VekP1sTdF0w==",
+  "_location": "/system-font-css",
+  "_phantomChildren": {},
+  "_requested": {
+    "type": "range",
+    "registry": true,
+    "raw": "system-font-css@^2.0.1",
+    "name": "system-font-css",
+    "escapedName": "system-font-css",
+    "rawSpec": "^2.0.1",
+    "saveSpec": null,
+    "fetchSpec": "^2.0.1"
+  },
+  "_requiredBy": [
+    "/"
+  ],
+  "_resolved": "https://registry.npmjs.org/system-font-css/-/system-font-css-2.0.2.tgz",
+  "_shasum": "88c4ae30eda94bc60705cba7d66c8c822f3c47db",
+  "_spec": "system-font-css@^2.0.1",
+  "_where": "/Users/ivan/Dev/jekyll/jekyll-theme-docs",
+  "author": {
+    "name": "Jonathan Neal",
+    "email": "jonathantneal@hotmail.com",
+    "url": "http://jonathantneal.com"
+  },
+  "bugs": {
+    "url": "https://github.com/jonathantneal/system-font-css/issues"
+  },
+  "bundleDependencies": false,
+  "contributors": [
+    {
+      "name": "Zach Leatherman",
+      "email": "zachleatherman@gmail.com",
+      "url": "https://zachleat.com/"
+    }
+  ],
+  "dependencies": {
+    "cpr": "^2.2.0"
+  },
+  "deprecated": false,
+  "description": "Use the native system font of the OS running the browser",
+  "devDependencies": {},
+  "engines": {
+    "node": ">=0.8.0"
+  },
+  "homepage": "https://github.com/jonathantneal/system-font-css",
+  "keywords": [
+    "system",
+    "fonts",
+    "faces",
+    "rules",
+    "css",
+    "mac",
+    "windows",
+    "ubuntu",
+    "san",
+    "fransisco",
+    "helvetica",
+    "neue",
+    "lucida",
+    "grande",
+    "segoe",
+    "ui",
+    "microsoft",
+    "sans",
+    "serif"
+  ],
+  "license": "CC0-1.0",
+  "main": "system-font.css",
+  "name": "system-font-css",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/jonathantneal/system-font-css.git"
+  },
+  "scripts": {
+    "install": "cpr system-font.css _system-font.scss -o && cpr system-font.css system-font.less -o"
+  },
+  "version": "2.0.2"
+}
--- a/_sass/system-font-css/system-font.css
+++ b/_sass/system-font-css/system-font.css
@ -0,0 +1,57 @@
+/*! system-font.css v2.0.2 | CC0-1.0 License | github.com/jonathantneal/system-font-css */
+
+@font-face {
+	font-family: system-ui;
+	font-style: normal;
+	font-weight: 300;
+	src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Segoe UI Light"), local("Ubuntu Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma");
+}
+
+@font-face {
+	font-family: system-ui;
+	font-style: italic;
+	font-weight: 300;
+	src: local(".SFNSText-LightItalic"), local(".HelveticaNeueDeskInterface-Italic"), local(".LucidaGrandeUI"), local("Segoe UI Light Italic"), local("Ubuntu Light Italic"), local("Roboto-LightItalic"), local("DroidSans"), local("Tahoma");
+}
+
+@font-face {
+	font-family: system-ui;
+	font-style: normal;
+	font-weight: 400;
+	src: local(".SFNSText-Regular"), local(".HelveticaNeueDeskInterface-Regular"), local(".LucidaGrandeUI"), local("Segoe UI"), local("Ubuntu"), local("Roboto-Regular"), local("DroidSans"), local("Tahoma");
+}
+
+@font-face {
+	font-family: system-ui;
+	font-style: italic;
+	font-weight: 400;
+	src: local(".SFNSText-Italic"), local(".HelveticaNeueDeskInterface-Italic"), local(".LucidaGrandeUI"), local("Segoe UI Italic"), local("Ubuntu Italic"), local("Roboto-Italic"), local("DroidSans"), local("Tahoma");
+}
+
+@font-face {
+	font-family: system-ui;
+	font-style: normal;
+	font-weight: 500;
+	src: local(".SFNSText-Medium"), local(".HelveticaNeueDeskInterface-MediumP4"), local(".LucidaGrandeUI"), local("Segoe UI Semibold"), local("Ubuntu Medium"), local("Roboto-Medium"), local("DroidSans-Bold"), local("Tahoma Bold");
+}
+
+@font-face {
+	font-family: system-ui;
+	font-style: italic;
+	font-weight: 500;
+	src: local(".SFNSText-MediumItalic"), local(".HelveticaNeueDeskInterface-MediumItalicP4"), local(".LucidaGrandeUI"), local("Segoe UI Semibold Italic"), local("Ubuntu Medium Italic"), local("Roboto-MediumItalic"), local("DroidSans-Bold"), local("Tahoma Bold");
+}
+
+@font-face {
+	font-family: system-ui;
+	font-style: normal;
+	font-weight: 700;
+	src: local(".SFNSText-Bold"), local(".HelveticaNeueDeskInterface-Bold"), local(".LucidaGrandeUI"), local("Segoe UI Bold"), local("Ubuntu Bold"), local("Roboto-Bold"), local("DroidSans-Bold"), local("Tahoma Bold");
+}
+
+@font-face {
+	font-family: system-ui;
+	font-style: italic;
+	font-weight: 700;
+	src: local(".SFNSText-BoldItalic"), local(".HelveticaNeueDeskInterface-BoldItalic"), local(".LucidaGrandeUI"), local("Segoe UI Bold Italic"), local("Ubuntu Bold Italic"), local("Roboto-BoldItalic"), local("DroidSans-Bold"), local("Tahoma Bold");
+}
--- a/_sass/system-font-css/system-font.less
+++ b/_sass/system-font-css/system-font.less
@ -0,0 +1,57 @@
+/*! system-font.css v2.0.2 | CC0-1.0 License | github.com/jonathantneal/system-font-css */
+
+@font-face {
+	font-family: system-ui;
+	font-style: normal;
+	font-weight: 300;
+	src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Segoe UI Light"), local("Ubuntu Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma");
+}
+
+@font-face {
+	font-family: system-ui;
+	font-style: italic;
+	font-weight: 300;
+	src: local(".SFNSText-LightItalic"), local(".HelveticaNeueDeskInterface-Italic"), local(".LucidaGrandeUI"), local("Segoe UI Light Italic"), local("Ubuntu Light Italic"), local("Roboto-LightItalic"), local("DroidSans"), local("Tahoma");
+}
+
+@font-face {
+	font-family: system-ui;
+	font-style: normal;
+	font-weight: 400;
+	src: local(".SFNSText-Regular"), local(".HelveticaNeueDeskInterface-Regular"), local(".LucidaGrandeUI"), local("Segoe UI"), local("Ubuntu"), local("Roboto-Regular"), local("DroidSans"), local("Tahoma");
+}
+
+@font-face {
+	font-family: system-ui;
+	font-style: italic;
+	font-weight: 400;
+	src: local(".SFNSText-Italic"), local(".HelveticaNeueDeskInterface-Italic"), local(".LucidaGrandeUI"), local("Segoe UI Italic"), local("Ubuntu Italic"), local("Roboto-Italic"), local("DroidSans"), local("Tahoma");
+}
+
+@font-face {
+	font-family: system-ui;
+	font-style: normal;
+	font-weight: 500;
+	src: local(".SFNSText-Medium"), local(".HelveticaNeueDeskInterface-MediumP4"), local(".LucidaGrandeUI"), local("Segoe UI Semibold"), local("Ubuntu Medium"), local("Roboto-Medium"), local("DroidSans-Bold"), local("Tahoma Bold");
+}
+
+@font-face {
+	font-family: system-ui;
+	font-style: italic;
+	font-weight: 500;
+	src: local(".SFNSText-MediumItalic"), local(".HelveticaNeueDeskInterface-MediumItalicP4"), local(".LucidaGrandeUI"), local("Segoe UI Semibold Italic"), local("Ubuntu Medium Italic"), local("Roboto-MediumItalic"), local("DroidSans-Bold"), local("Tahoma Bold");
+}
+
+@font-face {
+	font-family: system-ui;
+	font-style: normal;
+	font-weight: 700;
+	src: local(".SFNSText-Bold"), local(".HelveticaNeueDeskInterface-Bold"), local(".LucidaGrandeUI"), local("Segoe UI Bold"), local("Ubuntu Bold"), local("Roboto-Bold"), local("DroidSans-Bold"), local("Tahoma Bold");
+}
+
+@font-face {
+	font-family: system-ui;
+	font-style: italic;
+	font-weight: 700;
+	src: local(".SFNSText-BoldItalic"), local(".HelveticaNeueDeskInterface-BoldItalic"), local(".LucidaGrandeUI"), local("Segoe UI Bold Italic"), local("Ubuntu Bold Italic"), local("Roboto-BoldItalic"), local("DroidSans-Bold"), local("Tahoma Bold");
+}
--- a/_sass/theme/mixins.scss
+++ b/_sass/theme/mixins.scss
@ -0,0 +1,469 @@
+
+@mixin hook-heading-hero(){
+    font-weight: bold;
+}
+
+@mixin hook-navbar(){
+    font-weight: 500;
+    .uk-drop {
+        width: 360px;
+    }
+    .uk-search-navbar .uk-search-input {
+        height: 50px;
+        font-size: 1.0625rem;
+        padding-left: 1.1875rem;
+        background: #fff;
+    }
+}
+@mixin hook-button(){
+    border-radius: 5px;
+}
+
+// Doc navigation
+$docs-sidebar-width: 260px;
+$docs-sidebar-width-l: 360px;
+.sidebar-fixed-width {
+    width: $docs-sidebar-width;
+}
+.sidebar-docs {
+    width: $docs-sidebar-width - $global-medium-gutter;
+    padding-right: $global-medium-gutter;
+    top: 112px;
+    bottom: 70px;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    > h5 {
+        margin: 15px 0 0;
+        &:first-child {
+            margin-top: 17px
+        }
+    }
+}
+
+@media (min-width: $breakpoint-large) {
+    .sidebar-fixed-width {
+        width: $docs-sidebar-width-l;
+    }
+    .sidebar-docs {
+        width: $docs-sidebar-width-l - $global-large-gutter;
+        padding-right: $global-large-gutter;
+    }
+}
+ul.doc-nav {
+    padding-left: 14px;
+    margin-top: 5px;
+}
+.doc-nav > li.uk-active > a {
+    position: relative;
+    &:before {
+        content: "";
+        position: absolute;
+        top: 15px;
+        left: -14px;
+        width: 7px;
+        border-top: 1px solid $global-primary-background;
+    }
+}
+
+// Home page hero
+.hero-image img {
+    max-width: 200px;
+    max-height: 75px;
+}
+.button-cta:nth-child(2n), .button-cta:nth-child(3n) {
+    margin-top: $global-margin;
+}
+.heading-hero-2 {
+    font-size: 1.875rem
+}
+@media (min-width: $breakpoint-small) {
+    .heading-hero-2 {
+        // font-size: 2.375rem;
+         font-size: 1.375rem;
+    }
+}
+@media (min-width: $breakpoint-medium) {
+    .heading-hero-2 {
+        // font-size: 2.75rem;
+        font-size: 1.75rem;
+    }
+}
+@mixin hook-card-title(){
+    font-size: 1.125rem;
+}
+
+
+
+.list-featured>li:first-child {
+    margin-top: $list-large-margin-top;
+}
+
+
+@mixin hook-base-body(){
+    //filter: blur(7px);
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+
+}
+@mixin hook-base-misc(){
+    input[type="submit" i]{
+        -webkit-appearance:none;
+    }
+}
+@mixin hook-card(){
+    border: solid 1px lighten($global-border, 10%);
+    &:hover {
+        border-color: darken($global-border, 10%);
+    }
+}
+@mixin hook-card-body(){
+    > p {
+        font-size: $global-small-font-size;
+    }
+    > span {
+        color: $global-primary-background;
+    }
+}
+
+@mixin hook-card-misc(){
+    .uk-position-cover {
+        z-index: 1;
+    }
+    .card-category {
+        h3:nth-child(2n) {
+            margin-top: 0 !important;
+        }
+    }
+    .card-post {
+        .uk-card-header{
+            padding-top: $global-medium-margin;
+            padding-bottom: 0;
+        }
+        .uk-card-body{
+            padding-top: $global-medium-margin / 2;
+            padding-bottom: $global-medium-margin / 2;
+        }
+        .uk-card-footer{
+            padding-bottom: $global-medium-margin * 0.8;
+            padding-top: 0;
+        }
+    }
+}
+
+@mixin hook-form(){
+    border: solid 1px $global-border;
+}
+
+@mixin hook-offcanvas-bar(){
+    font-weight: 500;
+}
+
+@mixin hook-list-misc(){
+    .uk-list {
+        margin: 0;
+    }
+}
+
+@mixin hook-article(){
+    .share {
+    }
+    figure, .uk-slideshow {
+        margin-top: $global-medium-margin * 1.1;
+        margin-bottom: $global-medium-margin * 1.5;
+    }
+    figure {
+        img + div .uk-overlay-icon {
+            color: rgba(255, 255, 255, 0);
+        }
+        img:hover + div .uk-overlay-icon {
+            color: rgba(255, 255, 255, 1);
+        }
+        figcaption {
+            margin-left: 0;
+            span {
+                padding-right: 20px;
+                margin-bottom: -43px;
+                margin-top: 20px;
+                border-right: solid 2px $global-muted-color;
+                font-style: italic;
+                font-size: 0.8rem;
+                line-height: 1.8;
+            }
+        }
+    }
+    blockquote {
+        border-left: solid 2px $global-muted-color;
+        padding-left: $base-margin-vertical;
+        line-height: 1.7;
+        margin-top: $global-medium-margin;
+        margin-bottom: $global-medium-margin;
+    }
+    .highlight,
+    .highlighter-rouge {
+        margin-top: $global-medium-margin;
+        margin-bottom: $global-medium-margin;
+    }
+}
+@mixin hook-article-title(){
+    margin-bottom: $global-margin;
+}
+@mixin hook-article-meta(){
+    a {
+        color: $article-meta-color;
+        &:hover {
+            color: $global-primary-background;
+        }
+    }
+    .avatar {
+        margin-right: 10px;
+        float: left;
+    }
+}
+@mixin hook-article-misc(){
+    .article-content {
+        line-height: 1.8;
+    }
+    .avatar {
+        border-radius: 50%;
+    }
+    .paginate-post .uk-text-small {
+        line-height: 1.75;
+    }
+}
+
+//
+// Utility
+//
+// ========================================================================
+@mixin hook-utility-misc(){
+    .remove-underline, .remove-underline:hover{
+        text-decoration: none;
+    }
+    .link-dark {
+        color: $color-main !important;
+    }
+    .uk-container.uk-container-xsmall {
+        max-width: 700px;
+    }
+    .hvr-forward {
+        display: inline-block;
+        vertical-align: middle;
+        -webkit-transform: perspective(1px) translateZ(0);
+        transform: perspective(1px) translateZ(0);
+        box-shadow: 0 0 1px transparent;
+        -webkit-transition-duration: 0.3s;
+        transition-duration: 0.3s;
+        -webkit-transition-property: transform;
+        transition-property: transform;
+    }
+    .hvr-forward:active,
+    .hvr-forward:focus,
+    .hvr-forward:hover {
+        -webkit-transform: translateX(6px);
+        transform: translateX(6px);
+    }
+    .hvr-back {
+      display: inline-block;
+      vertical-align: middle;
+      -webkit-transform: perspective(1px) translateZ(0);
+      transform: perspective(1px) translateZ(0);
+      box-shadow: 0 0 1px transparent;
+      -webkit-transition-duration: 0.3s;
+      transition-duration: 0.3s;
+      -webkit-transition-property: transform;
+      transition-property: transform;
+    }
+    .hvr-back:hover,
+    .hvr-back:focus,
+    .hvr-back:active {
+      -webkit-transform: translateX(-6px);
+      transform: translateX(-6px);
+    }
+    .social-networks {
+        margin-top: $global-large-margin;
+    }
+    header {
+        .uk-logo {
+            color: $global-primary-background;
+            &:hover {
+                color: $global-primary-background;
+            }
+        }
+    }
+    .section-title {
+        margin-bottom: $global-medium-margin;
+        ~ .section-title {
+            margin-top: $global-medium-margin;
+        }
+    }
+    @media (min-width: $breakpoint-medium) {
+        .section-title {
+            ~ .section-title {
+                margin-top: $global-large-margin;
+            }
+        }
+    }
+    .section-hero {
+        .searchBox {
+            max-width: 550px;
+            margin: 60px auto 0 auto;
+            .uk-search-input {
+                height: 50px;
+                border-radius: 50px;
+                color: $global-muted-color;
+                font-style: normal;
+                &:focus {
+                    background: #ffffff;
+                }
+            }
+            .uk-search-icon {
+                width: 50px;
+                color: $global-muted-color;
+            }
+
+        }
+    }
+    footer {
+        .uk-subnav>.uk-active>a {
+            color: $global-muted-color;
+        }
+    }
+    #markdown-toc {
+        padding: 0 0 0 $global-margin;
+        border-left: solid 2px $global-muted-color;
+        list-style: none;
+        margin-bottom: $global-medium-margin;
+        > li > :last-child {
+            margin-bottom: 0;
+        }
+        ul {
+            margin: 0;
+            padding-left: $global-margin;
+            list-style: none;
+        }
+        >li:nth-child(n+2), >li>ul {
+            margin-top: 5px;
+        }
+        a {
+            color: $global-muted-color;
+        }
+
+    }
+    .uk-article-content .no_toc {
+        margin-top: $global-medium-margin;
+        margin-bottom: $global-medium-margin;
+    }
+    #searchBox-results, #searchBox-results {
+        margin: 10px 0 0 0;
+        z-index: 1;
+        li {
+            margin: 0;
+            padding: 20px 25px 0;
+            background: #fff;
+            line-height: 1.4;
+            border-left: solid 1px $global-border;
+            border-right: solid 1px $global-border;
+            &:first-child {
+                border-top-left-radius: 5px;
+                border-top-right-radius: 5px;
+                border-top: solid 1px $global-border;
+            }
+            &:last-child {
+                border-bottom-left-radius: 5px;
+                border-bottom-right-radius: 5px;
+                padding-bottom: 25px;
+                border-bottom: solid 1px $global-border;
+            }
+            a:hover {
+                text-decoration: none;
+            }
+        }
+    }
+
+}
+
+
+$tm-timeline-border-width: 4px;
+$tm-timeline-dot-diameter: 20px;
+
+@media (min-width: $breakpoint-small) {
+    .tm-timeline {
+        box-sizing: border-box;
+        * {
+            box-sizing: border-box;
+        }
+        position: relative;
+
+        &:before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: calc(30% - 2px);
+            bottom: 0;
+            width: $tm-timeline-border-width;
+            background: $color-main;
+        }
+
+        &:after {
+            content: "";
+            display: table;
+            clear: both;
+        }
+    }
+
+    .tm-timeline-entry {
+        + .tm-timeline-entry{
+            margin-top: $global-large-margin;
+        }
+        clear: both;
+        text-align: left;
+        position: relative;
+
+        &:after {
+            display: block;
+            content: "";
+            clear: both;
+        }
+
+        .tm-timeline-time {
+            float: left;
+            width: 30%;
+            padding-right: $global-large-margin;
+            text-align: right;
+            position: relative;
+
+            &:before {
+                content: '';
+                position: absolute;
+                width: $tm-timeline-dot-diameter;
+                height: $tm-timeline-dot-diameter;
+                border: $tm-timeline-border-width solid $color-main;
+                background-color: #fff;
+                border-radius: 100%;
+                top: 0;
+                right: - 14px;
+                z-index: 99;
+            }
+
+            h5 {
+                margin: 3px 0 0;
+            }
+        }
+
+        .tm-timeline-body {
+            float: right;
+            width: 70%;
+            padding-left: $global-large-margin;
+            margin-top: -2px;
+            h3 {
+                margin: 0 0 15px;
+                span {
+                    font-size: .7rem;
+                    margin-bottom: 4px;
+                    padding: 0 5px;
+                }
+            }
+
+        }
+    }
+}
--- a/_sass/theme/uikit.scss
+++ b/_sass/theme/uikit.scss
@ -0,0 +1,92 @@
+// Import UIkit components
+
+// Base
+@import "../uikit/components/variables.scss";
+@import "../uikit/components/mixin.scss";
+@import "../uikit/components/base.scss";
+
+// Elements
+@import "../uikit/components/link.scss";
+@import "../uikit/components/heading.scss";
+@import "../uikit/components/divider.scss";
+@import "../uikit/components/list.scss";
+// @import "../uikit/components/description-list.scss";
+// @import "../uikit/components/table.scss";
+@import "../uikit/components/icon.scss";
+// @import "../uikit/components/form-range.scss";
+@import "../uikit/components/form.scss"; // After: Icon, Form Range
+@import "../uikit/components/button.scss";
+
+// Layout
+@import "../uikit/components/section.scss";
+@import "../uikit/components/container.scss";
+@import "../uikit/components/grid.scss";
+@import "../uikit/components/tile.scss";
+@import "../uikit/components/card.scss";
+
+// Common
+@import "../uikit/components/close.scss"; // After: Icon
+// @import "../uikit/components/spinner.scss"; // After: Icon
+@import "../uikit/components/totop.scss"; // After: Icon
+// @import "../uikit/components/marker.scss"; // After: Icon
+// @import "../uikit/components/alert.scss"; // After: Close
+// @import "../uikit/components/badge.scss";
+@import "../uikit/components/label.scss";
+@import "../uikit/components/overlay.scss"; // After: Icon
+@import "../uikit/components/article.scss"; // After: Subnav
+// @import "../uikit/components/comment.scss"; // After: Subnav
+@import "../uikit/components/search.scss"; // After: Icon
+
+// Navs
+@import "../uikit/components/nav.scss";
+@import "../uikit/components/navbar.scss"; // After: Card, Grid, Nav, Icon, Search
+@import "../uikit/components/subnav.scss";
+// @import "../uikit/components/breadcrumb.scss";
+@import "../uikit/components/pagination.scss";
+// @import "../uikit/components/tab.scss";
+// @import "../uikit/components/slidenav.scss"; // After: Icon
+// @import "../uikit/components/dotnav.scss";
+// @import "../uikit/components/thumbnav.scss";
+
+// JavaScript
+// @import "../uikit/components/accordion.scss";
+@import "../uikit/components/drop.scss"; // After: Card
+@import "../uikit/components/dropdown.scss"; // After: Card
+// @import "../uikit/components/modal.scss"; // After: Close
+@import "../uikit/components/lightbox.scss"; // After: Close
+@import "../uikit/components/slideshow.scss";
+@import "../uikit/components/sticky.scss";
+@import "../uikit/components/offcanvas.scss";
+// @import "../uikit/components/switcher.scss";
+// Scrollspy
+// Toggle
+// Scroll
+
+// Additional
+// @import "../uikit/components/iconnav.scss";
+// @import "../uikit/components/notification.scss";
+// @import "../uikit/components/tooltip.scss";
+// @import "../uikit/components/placeholder.scss";
+// @import "../uikit/components/progress.scss";
+// @import "../uikit/components/sortable.scss";
+// @import "../uikit/components/countdown.scss";
+
+// Utilities
+@import "../uikit/components/animation.scss";
+@import "../uikit/components/width.scss";
+@import "../uikit/components/text.scss";
+@import "../uikit/components/column.scss";
+@import "../uikit/components/cover.scss";
+// @import "../uikit/components/background.scss";
+@import "../uikit/components/align.scss";
+@import "../uikit/components/utility.scss";
+@import "../uikit/components/flex.scss"; // After: Utility
+@import "../uikit/components/margin.scss";
+@import "../uikit/components/padding.scss";
+@import "../uikit/components/position.scss";
+// @import "../uikit/components/transition.scss";
+@import "../uikit/components/visibility.scss";
+// @import "../uikit/components/inverse.scss";
+
+// Need to be loaded last
+@import "../uikit/components/print.scss";
--- a/_sass/theme/variables.scss
+++ b/_sass/theme/variables.scss
@ -0,0 +1,90 @@
+// Color scheme variables
+
+// Main content
+$color-main: #0F1214;
+
+// Secondary content
+$global-muted-color: #7a838a;
+
+// Accent color
+$global-primary-background: $color-main;
+
+// Link and botton hover
+$color-hover: #000;
+
+// Standard UIkit
+//$global-muted-background: ;
+$global-border: #c4c7ca;
+
+// Global
+$global-font-family: system-ui;
+$global-link-color: $global-muted-color;
+$global-link-hover-color: $color-hover;
+
+$global-xxlarge-font-size: 1.875rem;;
+$global-xlarge-font-size: 1.625rem;
+$global-large-font-size: 1.375rem;
+$global-medium-font-size: 1.125rem;
+$global-small-font-size: 0.875rem;
+
+// Base
+$base-body-color: $color-main;
+$base-heading-color: $color-main;
+$link-muted-hover-color: $color-main;
+$button-primary-hover-background: $color-hover;
+$base-hr-border: lighten($global-border, 13%);
+$text-lead-font-size: 1.125rem;
+$base-heading-font-weight: bold;
+$base-heading-margin-top: 50px;
+// $base-body-font-weight: 300;
+$base-h2-line-height: 1.4;
+$base-link-hover-text-decoration: underline;
+// $base-h1-font-size:                              $global-xxlarge-font-size !default;
+// $base-h2-font-size:                              $global-xlarge-font-size !default;
+// $base-h3-font-size:                              $global-large-font-size !default;
+// $base-h4-font-size:                              $global-medium-font-size !default;
+// $base-h5-font-size:                              $global-font-size !default;
+// $base-h6-font-size:                              $global-small-font-size !default;
+
+// Navbar
+$navbar-background: #fff;
+$navbar-nav-item-color: $global-muted-color;
+$navbar-nav-item-hover-color: $color-main;
+$navbar-nav-item-active-color: $color-main;
+$navbar-toggle-color: $global-muted-color;
+$navbar-toggle-hover-color: $color-main;
+
+// Subnav
+$subnav-item-color: $global-muted-color;
+$subnav-item-hover-color: $color-main;
+
+// Pagination links
+$pagination-item-color: $color-main;
+$pagination-item-hover-color: $color-main;
+
+$article-meta-font-size: 	0.8125rem;
+$article-meta-line-height: 1.3;
+
+$container-max-width: 1100px;
+$container-small-max-width: 800px;
+
+$card-small-body-padding-horizontal:            25px;
+$card-small-body-padding-vertical:              25px;
+
+$article-title-line-height: 1.4;
+$article-title-font-size: 1.875rem;
+$offcanvas-bar-color-mode: dark;
+$offcanvas-bar-background: #fff;
+
+$heading-hero-font-size: 2.375rem;
+$heading-hero-line-height: 1.3;
+$heading-hero-font-size-s: 2.9375rem;
+$heading-hero-line-height-s: 1.3;
+$heading-hero-font-size-m: 3.625rem;
+$heading-hero-line-height-m: 1.4;
+
+$navbar-nav-item-text-transform: none;
+
+$subnav-item-text-transform: none;
+
+$search-default-border:  darken($global-border, 15%);
--- a/_sass/uikit/components/_import.components.scss
+++ b/_sass/uikit/components/_import.components.scss
@ -0,0 +1,56 @@
+// Base
+@import "variables.scss";
+@import "mixin.scss";
+@import "base.scss";
+
+// Elements
+@import "link.scss";
+@import "heading.scss";
+@import "divider.scss";
+@import "list.scss";
+@import "description-list.scss";
+@import "table.scss";
+@import "icon.scss";
+@import "form.scss"; // After: Icon
+@import "button.scss";
+
+// Layout
+@import "section.scss";
+@import "container.scss";
+@import "grid.scss";
+@import "tile.scss";
+@import "card.scss";
+
+// Common
+@import "close.scss"; // After: Icon
+@import "spinner.scss"; // After: Icon
+@import "totop.scss"; // After: Icon
+@import "alert.scss"; // After: Close
+@import "badge.scss";
+@import "label.scss";
+@import "overlay.scss"; // After: Icon
+@import "article.scss"; // After: Subnav
+@import "comment.scss"; // After: Subnav
+@import "search.scss"; // After: Icon
+
+// Navs
+@import "nav.scss";
+@import "navbar.scss"; // After: Card, Grid, Nav, Icon, Search
+@import "subnav.scss";
+@import "breadcrumb.scss";
+@import "pagination.scss";
+@import "tab.scss";
+@import "slidenav.scss"; // After: Icon
+@import "dotnav.scss";
+
+// JavaScript
+@import "accordion.scss";
+@import "drop.scss"; // After: Card
+@import "dropdown.scss"; // After: Card
+@import "modal.scss"; // After: Close
+@import "sticky.scss";
+@import "offcanvas.scss";
+@import "switcher.scss";
+// Scrollspy
+// Toggle
+// Scroll
--- a/_sass/uikit/components/_import.scss
+++ b/_sass/uikit/components/_import.scss
@ -0,0 +1,91 @@
+// Base
+@import "variables.scss";
+@import "mixin.scss";
+@import "base.scss";
+
+// Elements
+@import "link.scss";
+@import "heading.scss";
+@import "divider.scss";
+@import "list.scss";
+@import "description-list.scss";
+@import "table.scss";
+@import "icon.scss";
+@import "form-range.scss";
+@import "form.scss"; // After: Icon, Form Range
+@import "button.scss";
+
+// Layout
+@import "section.scss";
+@import "container.scss";
+@import "grid.scss";
+@import "tile.scss";
+@import "card.scss";
+
+// Common
+@import "close.scss"; // After: Icon
+@import "spinner.scss"; // After: Icon
+@import "totop.scss"; // After: Icon
+@import "marker.scss"; // After: Icon
+@import "alert.scss"; // After: Close
+@import "badge.scss";
+@import "label.scss";
+@import "overlay.scss"; // After: Icon
+@import "article.scss"; // After: Subnav
+@import "comment.scss"; // After: Subnav
+@import "search.scss"; // After: Icon
+
+// Navs
+@import "nav.scss";
+@import "navbar.scss"; // After: Card, Grid, Nav, Icon, Search
+@import "subnav.scss";
+@import "breadcrumb.scss";
+@import "pagination.scss";
+@import "tab.scss";
+@import "slidenav.scss"; // After: Icon
+@import "dotnav.scss";
+@import "thumbnav.scss";
+
+// JavaScript
+@import "accordion.scss";
+@import "drop.scss"; // After: Card
+@import "dropdown.scss"; // After: Card
+@import "modal.scss"; // After: Close
+@import "lightbox.scss"; // After: Close
+@import "slideshow.scss";
+@import "slider.scss";
+@import "sticky.scss";
+@import "offcanvas.scss";
+@import "switcher.scss";
+// Scrollspy
+// Toggle
+// Scroll
+
+// Additional
+@import "iconnav.scss";
+@import "notification.scss";
+@import "tooltip.scss";
+@import "placeholder.scss";
+@import "progress.scss";
+@import "sortable.scss";
+@import "countdown.scss";
+
+// Utilities
+@import "animation.scss";
+@import "width.scss";
+@import "text.scss";
+@import "column.scss";
+@import "cover.scss";
+@import "background.scss";
+@import "align.scss";
+@import "utility.scss";
+@import "flex.scss"; // After: Utility
+@import "margin.scss";
+@import "padding.scss";
+@import "position.scss";
+@import "transition.scss";
+@import "visibility.scss";
+@import "inverse.scss";
+
+// Need to be loaded last
+@import "print.scss";
--- a/_sass/uikit/components/_import.utilities.scss
+++ b/_sass/uikit/components/_import.utilities.scss
@ -0,0 +1,19 @@
+// Utilities
+@import "animation.scss";
+@import "width.scss";
+@import "text.scss";
+@import "column.scss";
+@import "cover.scss";
+@import "background.scss";
+@import "align.scss";
+@import "utility.scss";
+@import "flex.scss"; // After: Utility
+@import "margin.scss";
+@import "padding.scss";
+@import "position.scss";
+@import "transition.scss";
+@import "visibility.scss";
+@import "inverse.scss";
+
+// Need to be loaded last
+@import "print.scss";
--- a/_sass/uikit/components/accordion.scss
+++ b/_sass/uikit/components/accordion.scss
@ -0,0 +1,118 @@
+// Name:            Accordion
+// Description:     Component to create accordions
+//
+// Component:       `uk-accordion`
+//
+// Sub-objects:     `uk-accordion-title`
+//                  `uk-accordion-content`
+//
+// States:          `uk-open`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$accordion-item-margin-top:                     $global-margin !default;
+
+$accordion-title-font-size:                     $global-medium-font-size !default;
+$accordion-title-line-height:                   1.4 !default;
+$accordion-title-color:                         $global-emphasis-color !default;
+$accordion-title-hover-color:                   $global-color !default;
+
+$accordion-content-margin-top:                  $global-margin !default;
+
+
+/* ========================================================================
+   Component: Accordion
+ ========================================================================== */
+
+.uk-accordion {
+    padding: 0;
+    list-style: none;
+    @if(mixin-exists(hook-accordion)) {@include hook-accordion();}
+}
+
+
+/* Item
+ ========================================================================== */
+
+.uk-accordion > :nth-child(n+2) {
+    margin-top: $accordion-item-margin-top;
+    @if(mixin-exists(hook-accordion-item)) {@include hook-accordion-item();}
+}
+
+
+/* Title
+ ========================================================================== */
+
+.uk-accordion-title {
+    display: block;
+    font-size: $accordion-title-font-size;
+    line-height: $accordion-title-line-height;
+    color: $accordion-title-color;
+    @if(mixin-exists(hook-accordion-title)) {@include hook-accordion-title();}
+}
+
+/* Hover + Focus */
+.uk-accordion-title:hover,
+.uk-accordion-title:focus {
+    color: $accordion-title-hover-color;
+    text-decoration: none;
+    outline: none;
+    @if(mixin-exists(hook-accordion-title-hover)) {@include hook-accordion-title-hover();}
+}
+
+
+/* Content
+ ========================================================================== */
+
+.uk-accordion-content {
+    margin-top: $accordion-content-margin-top;
+    @if(mixin-exists(hook-accordion-content)) {@include hook-accordion-content();}
+}
+
+/*
+ * Micro clearfix
+ */
+
+.uk-accordion-content::before,
+.uk-accordion-content::after {
+    content: "";
+    display: table;
+}
+
+.uk-accordion-content::after { clear: both; }
+
+/*
+ * Remove margin from the last-child
+ */
+
+ .uk-accordion-content > :last-child { margin-bottom: 0; }
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-accordion-misc)) {@include hook-accordion-misc();}
+
+// @mixin hook-accordion(){}
+// @mixin hook-accordion-item(){}
+// @mixin hook-accordion-title(){}
+// @mixin hook-accordion-title-hover(){}
+// @mixin hook-accordion-content(){}
+// @mixin hook-accordion-misc(){}
+
+
+// Inverse
+// ========================================================================
+
+$inverse-accordion-title-color:              $inverse-global-emphasis-color !default;
+$inverse-accordion-title-hover-color:        $inverse-global-inverse-color !default;
+
+
+
+// @mixin hook-inverse-accordion-item(){}
+// @mixin hook-inverse-accordion-title(){}
+// @mixin hook-inverse-accordion-title-hover(){}
--- a/_sass/uikit/components/alert.scss
+++ b/_sass/uikit/components/alert.scss
@ -0,0 +1,147 @@
+// Name:            Alert
+// Description:     Component to create alert messages
+//
+// Component:       `uk-alert`
+//
+// Adopted:         `uk-alert-close`
+//
+// Modifiers:       `uk-alert-primary`
+//                  `uk-alert-success`
+//                  `uk-alert-warning`
+//                  `uk-alert-danger`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$alert-margin-vertical:                          $global-margin !default;
+$alert-padding:                                  $global-small-gutter !default;
+$alert-padding-right:                            $alert-padding + 14px !default;
+$alert-background:                               $global-muted-background !default;
+$alert-color:                                    $global-color !default;
+
+$alert-close-top:                                $alert-padding + 5px !default;
+$alert-close-right:                              $alert-padding !default;
+
+$alert-primary-background:                       lighten(mix(white, $global-primary-background, 40%), 20%) !default;
+$alert-primary-color:                            $global-primary-background !default;
+
+$alert-success-background:                       lighten(mix(white, $global-success-background, 40%), 25%) !default;
+$alert-success-color:                            $global-success-background !default;
+
+$alert-warning-background:                       lighten(mix(white, $global-warning-background, 45%), 15%) !default;
+$alert-warning-color:                            $global-warning-background !default;
+
+$alert-danger-background:                        lighten(mix(white, $global-danger-background, 40%), 20%) !default;
+$alert-danger-color:                             $global-danger-background !default;
+
+
+/* ========================================================================
+   Component: Alert
+ ========================================================================== */
+
+.uk-alert {
+    position: relative;
+    margin-bottom: $alert-margin-vertical;
+    padding: $alert-padding $alert-padding-right $alert-padding $alert-padding;
+    background: $alert-background;
+    color: $alert-color;
+    @if(mixin-exists(hook-alert)) {@include hook-alert();}
+}
+
+/* Add margin if adjacent element */
+* + .uk-alert { margin-top: $alert-margin-vertical; }
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-alert > :last-child { margin-bottom: 0; }
+
+
+/* Close
+ * Adopts `uk-close`
+ ========================================================================== */
+
+.uk-alert-close {
+    position: absolute;
+    top: $alert-close-top;
+    right: $alert-close-right;
+    @if(mixin-exists(hook-alert-close)) {@include hook-alert-close();}
+}
+
+/*
+ * Remove margin from adjacent element
+ */
+
+.uk-alert-close:first-child + * { margin-top: 0; }
+
+/*
+ * Hover + Focus
+ */
+
+.uk-alert-close:hover,
+.uk-alert-close:focus {
+    @if(mixin-exists(hook-alert-close-hover)) {@include hook-alert-close-hover();}
+}
+
+
+/* Style modifiers
+ ========================================================================== */
+
+/*
+ * Primary
+ */
+
+.uk-alert-primary {
+    background: $alert-primary-background;
+    color: $alert-primary-color;
+    @if(mixin-exists(hook-alert-primary)) {@include hook-alert-primary();}
+}
+
+/*
+ * Success
+ */
+
+.uk-alert-success {
+    background: $alert-success-background;
+    color: $alert-success-color;
+    @if(mixin-exists(hook-alert-success)) {@include hook-alert-success();}
+}
+
+/*
+ * Warning
+ */
+
+.uk-alert-warning {
+    background: $alert-warning-background;
+    color: $alert-warning-color;
+    @if(mixin-exists(hook-alert-warning)) {@include hook-alert-warning();}
+}
+
+/*
+ * Danger
+ */
+
+.uk-alert-danger {
+    background: $alert-danger-background;
+    color: $alert-danger-color;
+    @if(mixin-exists(hook-alert-danger)) {@include hook-alert-danger();}
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-alert-misc)) {@include hook-alert-misc();}
+
+// @mixin hook-alert(){}
+// @mixin hook-alert-close(){}
+// @mixin hook-alert-close-hover(){}
+// @mixin hook-alert-primary(){}
+// @mixin hook-alert-success(){}
+// @mixin hook-alert-warning(){}
+// @mixin hook-alert-danger(){}
+// @mixin hook-alert-misc(){}
--- a/_sass/uikit/components/align.scss
+++ b/_sass/uikit/components/align.scss
@ -0,0 +1,142 @@
+// Name:            Align
+// Description:     Utilities to align embedded content
+//
+// Component:       `uk-align-left-*`
+//                  `uk-align-right-*`
+//                  `uk-align-center`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$align-margin-horizontal:                        $global-gutter !default;
+$align-margin-vertical:                          $global-gutter !default;
+
+$align-margin-horizontal-l:                      $global-medium-gutter !default;
+
+
+/* ========================================================================
+   Component: Align
+ ========================================================================== */
+
+/*
+ * Default
+ */
+
+[class*='uk-align'] {
+    display: block;
+    margin-bottom: $align-margin-vertical;
+}
+
+* + [class*='uk-align'] { margin-top: $align-margin-vertical; }
+
+/*
+ * Center
+ */
+
+.uk-align-center {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+/*
+ * Left/Right
+ */
+
+.uk-align-left {
+    margin-top: 0;
+    margin-right: $align-margin-horizontal;
+    float: left;
+}
+
+.uk-align-right {
+    margin-top: 0;
+    margin-left: $align-margin-horizontal;
+    float: right;
+}
+
+/* Phone landscape and bigger */
+@media (min-width: $breakpoint-small) {
+
+    .uk-align-left\@s {
+        margin-top: 0;
+        margin-right: $align-margin-horizontal;
+        float: left;
+    }
+
+    .uk-align-right\@s {
+        margin-top: 0;
+        margin-left: $align-margin-horizontal;
+        float: right;
+    }
+
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    .uk-align-left\@m {
+        margin-top: 0;
+        margin-right: $align-margin-horizontal;
+        float: left;
+    }
+
+    .uk-align-right\@m {
+        margin-top: 0;
+        margin-left: $align-margin-horizontal;
+        float: right;
+    }
+
+}
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+
+    .uk-align-left\@l {
+        margin-top: 0;
+        float: left;
+    }
+
+    .uk-align-right\@l {
+        margin-top: 0;
+        float: right;
+    }
+
+    .uk-align-left,
+    .uk-align-left\@s,
+    .uk-align-left\@m,
+    .uk-align-left\@l { margin-right: $align-margin-horizontal-l; }
+
+    .uk-align-right,
+    .uk-align-right\@s,
+    .uk-align-right\@m,
+    .uk-align-right\@l { margin-left: $align-margin-horizontal-l; }
+
+}
+
+/* Large screen and bigger */
+@media (min-width: $breakpoint-xlarge) {
+
+    .uk-align-left\@xl {
+        margin-top: 0;
+        margin-right: $align-margin-horizontal-l;
+        float: left;
+    }
+
+    .uk-align-right\@xl {
+        margin-top: 0;
+        margin-left: $align-margin-horizontal-l;
+        float: right;
+    }
+
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-align-misc)) {@include hook-align-misc();}
+
+// @mixin hook-align-misc(){}
--- a/_sass/uikit/components/animation.scss
+++ b/_sass/uikit/components/animation.scss
@ -0,0 +1,390 @@
+// Name:            Animation
+// Description:     Utilities for keyframe animations
+//
+// Component:       `uk-animation-*`
+//
+// Modifiers:       `uk-animation-reverse`
+//                  `uk-animation-fast`
+//                  `uk-animation-fade`
+//                  `uk-animation-scale-up`
+//                  `uk-animation-scale-down`
+//                  `uk-animation-slide-top-*`
+//                  `uk-animation-slide-bottom-*`
+//                  `uk-animation-slide-left-*`
+//                  `uk-animation-slide-right-*`
+//                  `uk-animation-kenburns`
+//                  `uk-animation-shake`
+//
+// Sub-objects:     `uk-animation-toggle`
+//
+// States:          `uk-hover`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$animation-duration:                             0.5s !default;
+$animation-fade-duration:                        0.8s !default;
+$animation-kenburns-duration:                    15s !default;
+$animation-fast-duration:                        0.1s !default;
+
+$animation-slide-small-translate:                10px !default;
+$animation-slide-medium-translate:               50px !default;
+
+
+/* ========================================================================
+   Component: Animation
+ ========================================================================== */
+
+[class*='uk-animation-'] {
+    animation-duration: $animation-duration;
+    animation-timing-function: ease-out;
+    animation-fill-mode: both;
+}
+
+
+/* Direction modifier
+ ========================================================================== */
+
+.uk-animation-reverse {
+    animation-direction: reverse;
+    animation-timing-function: ease-in;
+}
+
+
+/* Animations for scrollspy
+ ========================================================================== */
+
+/*
+ * Fade
+ */
+
+.uk-animation-fade {
+    animation-name: uk-fade;
+    animation-duration: $animation-fade-duration;
+    animation-timing-function: linear;
+}
+
+/*
+ * Scale
+ */
+
+.uk-animation-scale-up { animation-name: uk-fade-scale-02; }
+.uk-animation-scale-down { animation-name: uk-fade-scale-18; }
+
+/*
+ * Slide
+ */
+
+.uk-animation-slide-top { animation-name: uk-fade-top; }
+.uk-animation-slide-bottom { animation-name: uk-fade-bottom; }
+.uk-animation-slide-left { animation-name: uk-fade-left; }
+.uk-animation-slide-right { animation-name: uk-fade-right; }
+
+/*
+ * Slide Small
+ */
+
+.uk-animation-slide-top-small { animation-name: uk-fade-top-small; }
+.uk-animation-slide-bottom-small { animation-name: uk-fade-bottom-small; }
+.uk-animation-slide-left-small { animation-name: uk-fade-left-small; }
+.uk-animation-slide-right-small { animation-name: uk-fade-right-small; }
+
+/*
+ * Slide Medium
+ */
+
+.uk-animation-slide-top-medium { animation-name: uk-fade-top-medium; }
+.uk-animation-slide-bottom-medium { animation-name: uk-fade-bottom-medium; }
+.uk-animation-slide-left-medium { animation-name: uk-fade-left-medium; }
+.uk-animation-slide-right-medium { animation-name: uk-fade-right-medium; }
+
+/*
+ * Kenburns
+ */
+
+.uk-animation-kenburns {
+    animation-name: uk-scale-kenburns;
+    animation-duration: $animation-kenburns-duration;
+}
+
+/*
+ * Shake
+ */
+
+.uk-animation-shake { animation-name: uk-shake; }
+
+
+/* Duration modifier
+ ========================================================================== */
+
+.uk-animation-fast { animation-duration: $animation-fast-duration; }
+
+
+/* Enable animation only on hover
+========================================================================== */
+
+/*
+ * Note: Firefox and IE needs this because animations are not triggered when switching between display `none` and `block`
+ */
+
+.uk-animation-toggle:not(:hover):not(.uk-hover) [class*='uk-animation-'] { animation-name: none; }
+
+
+/* Keyframes used by animation classes
+ ========================================================================== */
+
+/*
+ * Fade
+ */
+
+@keyframes uk-fade {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+}
+
+/*
+ * Slide Top
+ */
+
+@keyframes uk-fade-top {
+    0% {
+        opacity: 0;
+        transform: translateY(-100%);
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/*
+ * Slide Bottom
+ */
+
+@keyframes uk-fade-bottom {
+    0% {
+        opacity: 0;
+        transform: translateY(100%);
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/*
+ * Slide Left
+ */
+
+@keyframes uk-fade-left {
+    0% {
+        opacity: 0;
+        transform: translateX(-100%);
+    }
+    100% {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+/*
+ * Slide Right
+ */
+
+@keyframes uk-fade-right {
+    0% {
+        opacity: 0;
+        transform: translateX(100%);
+    }
+    100% {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+/*
+ * Slide Top Small
+ */
+
+@keyframes uk-fade-top-small {
+    0% {
+        opacity: 0;
+        transform: translateY(-$animation-slide-small-translate);
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/*
+ * Slide Bottom Small
+ */
+
+@keyframes uk-fade-bottom-small {
+    0% {
+        opacity: 0;
+        transform: translateY($animation-slide-small-translate);
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/*
+ * Slide Left Small
+ */
+
+@keyframes uk-fade-left-small {
+    0% {
+        opacity: 0;
+        transform: translateX(-$animation-slide-small-translate);
+    }
+    100% {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+/*
+ * Slide Right Small
+ */
+
+@keyframes uk-fade-right-small {
+    0% {
+        opacity: 0;
+        transform: translateX($animation-slide-small-translate);
+    }
+    100% {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+/*
+ * Slide Top Medium
+ */
+
+@keyframes uk-fade-top-medium {
+    0% {
+        opacity: 0;
+        transform: translateY(-$animation-slide-medium-translate);
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/*
+ * Slide Bottom Medium
+ */
+
+@keyframes uk-fade-bottom-medium {
+    0% {
+        opacity: 0;
+        transform: translateY($animation-slide-medium-translate);
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/*
+ * Slide Left Medium
+ */
+
+@keyframes uk-fade-left-medium {
+    0% {
+        opacity: 0;
+        transform: translateX(-$animation-slide-medium-translate);
+    }
+    100% {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+/*
+ * Slide Right Medium
+ */
+
+@keyframes uk-fade-right-medium {
+    0% {
+        opacity: 0;
+        transform: translateX($animation-slide-medium-translate);
+    }
+    100% {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+/*
+ * Scale Up
+ */
+
+@keyframes uk-fade-scale-02 {
+    0% {
+        opacity: 0;
+        transform: scale(0.2);
+    }
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+/*
+ * Scale Down
+ */
+
+@keyframes uk-fade-scale-18 {
+    0% {
+        opacity: 0;
+        transform: scale(1.8);
+    }
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+/*
+ * Kenburns
+ */
+
+@keyframes uk-scale-kenburns {
+    0% { transform: scale(1); }
+    100% { transform: scale(1.2); }
+}
+
+/*
+ * Shake
+ */
+
+@keyframes uk-shake {
+    0%, 100% { transform: translateX(0); }
+    10% { transform: translateX(-9px); }
+    20% { transform: translateX(8px); }
+    30% { transform: translateX(-7px); }
+    40% { transform: translateX(6px); }
+    50% { transform: translateX(-5px); }
+    60% { transform: translateX(4px); }
+    70% { transform: translateX(-3px); }
+    80% { transform: translateX(2px); }
+    90% { transform: translateX(-1px); }
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-animation-misc)) {@include hook-animation-misc();}
+
+// @mixin hook-animation-misc(){}
--- a/_sass/uikit/components/article.scss
+++ b/_sass/uikit/components/article.scss
@ -0,0 +1,102 @@
+// Name:            Article
+// Description:     Component to create articles
+//
+// Component:       `uk-article`
+//
+// Sub-objects:     `uk-article-title`
+//                  `uk-article-meta`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$article-margin-top:                             $global-large-margin !default;
+
+$article-title-font-size:                        $global-xxlarge-font-size !default;
+$article-title-line-height:                      1.2 !default;
+
+$article-meta-font-size:                         $global-small-font-size !default;
+$article-meta-line-height:                       1.4 !default;
+$article-meta-color:                             $global-muted-color !default;
+
+
+/* ========================================================================
+   Component: Article
+ ========================================================================== */
+
+.uk-article {
+    @if(mixin-exists(hook-article)) {@include hook-article();}
+}
+
+/*
+ * Micro clearfix
+ */
+
+.uk-article::before,
+.uk-article::after {
+    content: "";
+    display: table;
+}
+
+.uk-article::after { clear: both; }
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-article > :last-child { margin-bottom: 0; }
+
+
+/* Adjacent sibling
+ ========================================================================== */
+
+.uk-article + .uk-article {
+    margin-top: $article-margin-top;
+    @if(mixin-exists(hook-article-adjacent)) {@include hook-article-adjacent();}
+}
+
+
+/* Title
+ ========================================================================== */
+
+.uk-article-title {
+    font-size: $article-title-font-size;
+    line-height: $article-title-line-height;
+    @if(mixin-exists(hook-article-title)) {@include hook-article-title();}
+}
+
+
+/* Meta
+ ========================================================================== */
+
+.uk-article-meta {
+    font-size: $article-meta-font-size;
+    line-height: $article-meta-line-height;
+    color: $article-meta-color;
+    @if(mixin-exists(hook-article-meta)) {@include hook-article-meta();}
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-article-misc)) {@include hook-article-misc();}
+
+// @mixin hook-article(){}
+// @mixin hook-article-adjacent(){}
+// @mixin hook-article-title(){}
+// @mixin hook-article-meta(){}
+// @mixin hook-article-misc(){}
+
+
+// Inverse
+// ========================================================================
+
+$inverse-article-meta-color:                    $inverse-global-muted-color !default;
+
+
+
+// @mixin hook-inverse-article-title(){}
+// @mixin hook-inverse-article-meta(){}
--- a/_sass/uikit/components/background.scss
+++ b/_sass/uikit/components/background.scss
@ -0,0 +1,136 @@
+// Name:            Background
+// Description:     Utilities for backgrounds
+//
+// Component:       `uk-background-*`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$background-default-background:                  $global-background !default;
+$background-muted-background:                    $global-muted-background !default;
+$background-primary-background:                  $global-primary-background !default;
+$background-secondary-background:                $global-secondary-background !default;
+
+
+/* ========================================================================
+   Component: Background
+ ========================================================================== */
+
+
+/* Color
+ ========================================================================== */
+
+.uk-background-default { background-color: $background-default-background; }
+.uk-background-muted { background-color: $background-muted-background; }
+.uk-background-primary { background-color: $background-primary-background; }
+.uk-background-secondary { background-color: $background-secondary-background; }
+
+
+/* Size
+ ========================================================================== */
+
+.uk-background-cover,
+.uk-background-contain {
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+}
+
+.uk-background-cover { background-size: cover; }
+.uk-background-contain { background-size: contain; }
+
+
+/* Position
+ ========================================================================== */
+
+.uk-background-top-left { background-position: 0 0; }
+.uk-background-top-center { background-position: 50% 0; }
+.uk-background-top-right { background-position: 100% 0; }
+.uk-background-center-left { background-position: 0 50%; }
+.uk-background-center-center { background-position: 50% 50%; }
+.uk-background-center-right { background-position: 100% 50%; }
+.uk-background-bottom-left { background-position: 0 100%; }
+.uk-background-bottom-center { background-position: 50% 100%; }
+.uk-background-bottom-right { background-position: 100% 100%; }
+
+
+/* Repeat
+ ========================================================================== */
+
+.uk-background-norepeat { background-repeat: no-repeat; }
+
+
+/* Attachment
+ ========================================================================== */
+
+.uk-background-fixed { background-attachment: fixed; }
+
+/*
+ * Exclude touch devices because `fixed` doesn't work on iOS and Android
+ */
+
+@media (pointer: coarse) {
+    .uk-background-fixed { background-attachment: scroll; }
+}
+
+
+/* Image
+ ========================================================================== */
+
+/* Phone portrait and smaller */
+@media (max-width: $breakpoint-xsmall-max) {
+
+    .uk-background-image\@s { background-image: none !important; }
+
+}
+
+/* Phone landscape and smaller */
+@media (max-width: $breakpoint-small-max) {
+
+    .uk-background-image\@m { background-image: none !important; }
+
+}
+
+/* Tablet landscape and smaller */
+@media (max-width: $breakpoint-medium-max) {
+
+    .uk-background-image\@l { background-image: none !important; }
+
+}
+
+/* Desktop and smaller */
+@media (max-width: $breakpoint-large-max) {
+
+    .uk-background-image\@xl {background-image: none !important; }
+
+}
+
+
+/* Blend modes
+ ========================================================================== */
+
+.uk-background-blend-multiply { background-blend-mode: multiply; }
+.uk-background-blend-screen { background-blend-mode: screen; }
+.uk-background-blend-overlay { background-blend-mode: overlay; }
+.uk-background-blend-darken { background-blend-mode: darken; }
+.uk-background-blend-lighten { background-blend-mode: lighten; }
+.uk-background-blend-color-dodge { background-blend-mode: color-dodge; }
+.uk-background-blend-color-burn { background-blend-mode: color-burn; }
+.uk-background-blend-hard-light { background-blend-mode: hard-light; }
+.uk-background-blend-soft-light { background-blend-mode: soft-light; }
+.uk-background-blend-difference { background-blend-mode: difference; }
+.uk-background-blend-exclusion { background-blend-mode: exclusion; }
+.uk-background-blend-hue { background-blend-mode: hue; }
+.uk-background-blend-saturation { background-blend-mode: saturation; }
+.uk-background-blend-color { background-blend-mode: color; }
+.uk-background-blend-luminosity { background-blend-mode: luminosity; }
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-background-misc)) {@include hook-background-misc();}
+
+// @mixin hook-background-misc(){}
--- a/_sass/uikit/components/badge.scss
+++ b/_sass/uikit/components/badge.scss
@ -0,0 +1,83 @@
+// Name:            Badge
+// Description:     Component to create notification badges
+
+// Component:       `uk-badge`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$badge-size:                                     22px !default;
+$badge-padding-vertical:                         0 !default;
+$badge-padding-horizontal:                       5px !default;
+$badge-border-radius:                            500px !default;
+$badge-background:                               $global-primary-background !default;
+$badge-color:                                    $global-inverse-color !default;
+$badge-font-size:                                $global-small-font-size !default;
+
+$badge-hover-color:                              $global-inverse-color !default;
+
+
+/* ========================================================================
+   Component: Badge
+ ========================================================================== */
+
+/*
+ * 1. Style
+ * 2. Center child vertically and horizontally
+ */
+
+.uk-badge {
+    box-sizing: border-box;
+    min-width: $badge-size;
+    height: $badge-size;
+    padding: $badge-padding-vertical $badge-padding-horizontal;
+    border-radius: $badge-border-radius;
+    vertical-align: middle;
+    /* 1 */
+    background: $badge-background;
+    color: $badge-color;
+    font-size: $badge-font-size;
+    /* 2 */
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    @if(mixin-exists(hook-badge)) {@include hook-badge();}
+}
+
+/*
+ * Required for `a`
+ */
+
+.uk-badge:hover,
+.uk-badge:focus {
+    color: $badge-hover-color;
+    text-decoration: none;
+    outline: none;
+    @if(mixin-exists(hook-badge-hover)) {@include hook-badge-hover();}
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-badge-misc)) {@include hook-badge-misc();}
+
+// @mixin hook-badge(){}
+// @mixin hook-badge-hover(){}
+// @mixin hook-badge-misc(){}
+
+
+// Inverse
+// ========================================================================
+
+$inverse-badge-background:                      $inverse-global-primary-background !default;
+$inverse-badge-color:                           $inverse-global-inverse-color !default;
+$inverse-badge-hover-color:                     $inverse-global-inverse-color !default;
+
+
+
+// @mixin hook-inverse-badge(){}
+// @mixin hook-inverse-badge-hover(){}
--- a/_sass/uikit/components/base.scss
+++ b/_sass/uikit/components/base.scss
@ -0,0 +1,612 @@
+// Name:            Base
+// Description:     Default values for HTML elements
+//
+// Component:       `uk-link`
+//                  `uk-h1`, `uk-h2`, `uk-h3`, `uk-h4`, `uk-h5`, `uk-h6`
+//                  `uk-hr`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$base-body-background:                           $global-background !default;
+$base-body-font-family:                          $global-font-family !default;
+$base-body-font-weight:                          normal !default;
+$base-body-font-size:                            $global-font-size !default;
+$base-body-line-height:                          $global-line-height !default;
+$base-body-color:                                $global-color !default;
+
+$base-link-color:                                $global-link-color !default;
+$base-link-text-decoration:                      none !default;
+$base-link-hover-color:                          $global-link-hover-color !default;
+$base-link-hover-text-decoration:                underline !default;
+
+$base-strong-font-weight:                        bolder !default;
+$base-code-font-size:                            $global-small-font-size !default;
+$base-code-font-family:                          Consolas, monaco, monospace !default;
+$base-code-color:                                $global-danger-background !default;
+$base-em-color:                                  $global-danger-background !default;
+$base-ins-background:                            #ffd !default;
+$base-ins-color:                                 $global-color !default;
+$base-mark-background:                           #ffd !default;
+$base-mark-color:                                $global-color !default;
+$base-quote-font-style:                          italic !default;
+$base-small-font-size:                           80% !default;
+
+$base-margin-vertical:                           $global-margin !default;
+
+$base-heading-font-family:                       $global-font-family !default;
+$base-heading-font-weight:                       normal !default;
+$base-heading-color:                             $global-emphasis-color !default;
+$base-heading-text-transform:                    none !default;
+$base-heading-margin-top:                        $global-medium-margin !default;
+$base-h1-font-size:                              $global-xxlarge-font-size !default;
+$base-h1-line-height:                            1.2 !default;
+$base-h2-font-size:                              $global-xlarge-font-size !default;
+$base-h2-line-height:                            1.3 !default;
+$base-h3-font-size:                              $global-large-font-size !default;
+$base-h3-line-height:                            1.4 !default;
+$base-h4-font-size:                              $global-medium-font-size !default;
+$base-h4-line-height:                            1.4 !default;
+$base-h5-font-size:                              $global-font-size !default;
+$base-h5-line-height:                            1.4 !default;
+$base-h6-font-size:                              $global-small-font-size !default;
+$base-h6-line-height:                            1.4 !default;
+
+$base-list-padding-left:                         30px !default;
+
+$base-hr-margin-vertical:                        $global-margin !default;
+$base-hr-border-width:                           $global-border-width !default;
+$base-hr-border:                                 $global-border !default;
+
+$base-blockquote-font-size:                      $global-medium-font-size !default;
+$base-blockquote-line-height:                    1.5 !default;
+$base-blockquote-font-style:                     italic !default;
+$base-blockquote-margin-vertical:                $global-margin !default;
+$base-blockquote-footer-margin-top:              $global-small-margin !default;
+$base-blockquote-footer-font-size:               $global-small-font-size !default;
+$base-blockquote-footer-line-height:             1.5 !default;
+
+$base-pre-font-size:                             $global-small-font-size !default;
+$base-pre-line-height:                           1.5 !default;
+$base-pre-font-family:                           $base-code-font-family !default;
+$base-pre-color:                                 $global-color !default;
+
+$base-selection-background:                      #39f !default;
+$base-selection-color:                           $global-inverse-color !default;
+
+
+/* ========================================================================
+   Component: Base
+ ========================================================================== */
+
+/*
+ * 1. Set `font-size` to support `rem` units
+ *    Not using `font` property because a leading hyphen (e.g. -apple-system) causes the font to break in IE11 and Edge
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ * 3. Style
+ */
+
+html {
+    /* 1 */
+    font-family: $base-body-font-family;
+    font-size: $base-body-font-size;
+    font-weight: $base-body-font-weight;
+    line-height: $base-body-line-height;
+    /* 2 */
+    -webkit-text-size-adjust: 100%;
+    /* 3 */
+    background: $base-body-background;
+    color: $base-body-color;
+    @if(mixin-exists(hook-base-body)) {@include hook-base-body();}
+}
+
+/*
+ * Remove the margin in all browsers.
+ */
+
+body { margin: 0; }
+
+
+/* Links
+ ========================================================================== */
+
+/*
+ * Remove gaps in links underline in iOS 8+ and Safari 8+.
+ */
+
+a { -webkit-text-decoration-skip: objects; }
+
+/*
+ * Remove the outline on focused links when they are also active or hovered
+ */
+
+a:active,
+a:hover { outline: none; }
+
+/*
+ * Style
+ */
+
+a,
+.uk-link {
+    color: $base-link-color;
+    text-decoration: $base-link-text-decoration;
+    cursor: pointer;
+    @if(mixin-exists(hook-base-link)) {@include hook-base-link();}
+}
+
+a:hover,
+.uk-link:hover {
+    color: $base-link-hover-color;
+    text-decoration: $base-link-hover-text-decoration;
+    @if(mixin-exists(hook-base-link-hover)) {@include hook-base-link-hover();}
+}
+
+
+/* Text-level semantics
+ ========================================================================== */
+
+/*
+ * 1. Remove the bottom border in Chrome 57-.
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+    /* 1 */
+    border-bottom: none;
+    /* 2 */
+    text-decoration: underline;
+    text-decoration: underline dotted;
+}
+
+
+/*
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong { font-weight: $base-strong-font-weight; }
+
+/*
+ * 1. Consolas has a better baseline in running text compared to `Courier`
+ * 2. Correct the odd `em` font sizing in all browsers.
+ * 3. Style
+ */
+
+:not(pre) > code,
+:not(pre) > kbd,
+:not(pre) > samp {
+    /* 1 */
+    font-family: $base-code-font-family;
+    /* 2 */
+    font-size: $base-code-font-size;
+    /* 3 */
+    color: $base-code-color;
+    white-space: nowrap;
+    @if(mixin-exists(hook-base-code)) {@include hook-base-code();}
+}
+
+/*
+ * Emphasize
+ */
+
+em { color: $base-em-color; }
+
+/*
+ * Insert
+ */
+
+ins {
+    background: $base-ins-background;
+    color: $base-ins-color;
+    text-decoration: none;
+}
+
+/*
+ * Mark
+ */
+
+mark {
+    background: $base-mark-background;
+    color: $base-mark-color;
+}
+
+/*
+ * Quote
+ */
+
+q { font-style: $base-quote-font-style; }
+
+/*
+ * Add the correct font size in all browsers.
+ */
+
+small { font-size: $base-small-font-size; }
+
+/*
+ * Prevents `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 the gap between embedded content and the bottom of their containers.
+ */
+
+audio,
+canvas,
+iframe,
+img,
+svg,
+video { vertical-align: middle; }
+
+/*
+ * Responsiveness
+ * 1. Set a maximum width
+ * 2. Auto scale the height. Only needed if `height` attribute is present
+ * 2. Corrects `max-width` behavior if padding and border are used
+ */
+
+audio,
+canvas,
+img,
+video {
+    /* 1 */
+    max-width: 100%;
+    /* 2 */
+    height: auto;
+    /* 3 */
+    box-sizing: border-box;
+}
+
+/*
+ * Hide the overflow in IE.
+ */
+
+svg:not(:root) { overflow: hidden; }
+
+
+/* Block elements
+ ========================================================================== */
+
+/*
+ * Margins
+ */
+
+p,
+ul,
+ol,
+dl,
+pre,
+address,
+fieldset,
+figure { margin: 0 0 $base-margin-vertical 0; }
+
+/* Add margin if adjacent element */
+* + p,
+* + ul,
+* + ol,
+* + dl,
+* + pre,
+* + address,
+* + fieldset,
+* + figure { margin-top: $base-margin-vertical; }
+
+
+/* Headings
+ ========================================================================== */
+
+h1, .uk-h1,
+h2, .uk-h2,
+h3, .uk-h3,
+h4, .uk-h4,
+h5, .uk-h5,
+h6, .uk-h6 {
+    margin: 0 0 $base-margin-vertical 0;
+    font-family: $base-heading-font-family;
+    font-weight: $base-heading-font-weight;
+    color: $base-heading-color;
+    text-transform: $base-heading-text-transform;
+    @if(mixin-exists(hook-base-heading)) {@include hook-base-heading();}
+}
+
+/* Add margin if adjacent element */
+* + h1, * + .uk-h1,
+* + h2, * + .uk-h2,
+* + h3, * + .uk-h3,
+* + h4, * + .uk-h4,
+* + h5, * + .uk-h5,
+* + h6, * + .uk-h6 { margin-top: $base-heading-margin-top; }
+
+/*
+ * Sizes
+ */
+
+h1, .uk-h1 {
+    font-size: $base-h1-font-size;
+    line-height: $base-h1-line-height;
+    @if(mixin-exists(hook-base-h1)) {@include hook-base-h1();}
+}
+
+h2, .uk-h2 {
+    font-size: $base-h2-font-size;
+    line-height: $base-h2-line-height;
+    @if(mixin-exists(hook-base-h2)) {@include hook-base-h2();}
+}
+
+h3, .uk-h3 {
+    font-size: $base-h3-font-size;
+    line-height: $base-h3-line-height;
+    @if(mixin-exists(hook-base-h3)) {@include hook-base-h3();}
+}
+
+h4, .uk-h4 {
+    font-size: $base-h4-font-size;
+    line-height: $base-h4-line-height;
+    @if(mixin-exists(hook-base-h4)) {@include hook-base-h4();}
+}
+
+h5, .uk-h5 {
+    font-size: $base-h5-font-size;
+    line-height: $base-h5-line-height;
+    @if(mixin-exists(hook-base-h5)) {@include hook-base-h5();}
+}
+
+h6, .uk-h6 {
+    font-size: $base-h6-font-size;
+    line-height: $base-h6-line-height;
+    @if(mixin-exists(hook-base-h6)) {@include hook-base-h6();}
+}
+
+
+/* Lists
+ ========================================================================== */
+
+ul,
+ol { padding-left: $base-list-padding-left; }
+
+/*
+ * Reset margin for nested lists
+ */
+
+ul > li > ul,
+ul > li > ol,
+ol > li > ol,
+ol > li > ul { margin: 0; }
+
+
+/* Description lists
+ ========================================================================== */
+
+dt { font-weight: bold; }
+dd { margin-left: 0; }
+
+
+/* Horizontal rules
+ ========================================================================== */
+
+/*
+ * 1. Add the correct box sizing and height in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ * 3. Add the correct text-align in Edge and IE.
+ * 4. Style
+ */
+
+hr, .uk-hr {
+    /* 1 */
+    box-sizing: content-box;
+    height: 0;
+    /* 2 */
+    overflow: visible;
+    /* 3 */
+    text-align: inherit;
+    /* 4 */
+    margin: 0 0 $base-hr-margin-vertical 0;
+    border: 0;
+    border-top: $base-hr-border-width solid $base-hr-border;
+    @if(mixin-exists(hook-base-hr)) {@include hook-base-hr();}
+}
+
+/* Add margin if adjacent element */
+* + hr,
+* + .uk-hr { margin-top: $base-hr-margin-vertical }
+
+
+/* Address
+ ========================================================================== */
+
+address { font-style: normal; }
+
+
+/* Blockquotes
+ ========================================================================== */
+
+blockquote {
+    margin: 0 0 $base-blockquote-margin-vertical 0;
+    font-size: $base-blockquote-font-size;
+    line-height: $base-blockquote-line-height;
+    font-style: $base-blockquote-font-style;
+    @if(mixin-exists(hook-base-blockquote)) {@include hook-base-blockquote();}
+}
+
+/* Add margin if adjacent element */
+* + blockquote { margin-top: $base-blockquote-margin-vertical; }
+
+/*
+ * Content
+ */
+
+blockquote p:last-of-type { margin-bottom: 0; }
+
+blockquote footer {
+    margin-top:  $base-blockquote-footer-margin-top;
+    font-size: $base-blockquote-footer-font-size;
+    line-height: $base-blockquote-footer-line-height;
+    @if(mixin-exists(hook-base-blockquote-footer)) {@include hook-base-blockquote-footer();}
+}
+
+
+/* Preformatted text
+ ========================================================================== */
+
+/*
+ * 1. Contain overflow in all browsers.
+ */
+
+pre {
+    font: $base-pre-font-size unquote("/") $base-pre-line-height $base-pre-font-family;
+    color: $base-pre-color;
+    -moz-tab-size: 4;
+    tab-size: 4;
+    /* 1 */
+    overflow: auto;
+    @if(mixin-exists(hook-base-pre)) {@include hook-base-pre();}
+}
+
+pre code { font-family: $base-pre-font-family; }
+
+
+/* Selection pseudo-element
+ ========================================================================== */
+
+::-moz-selection {
+    background: $base-selection-background;
+    color: $base-selection-color;
+    text-shadow: none;
+}
+
+::selection {
+    background: $base-selection-background;
+    color: $base-selection-color;
+    text-shadow: none;
+}
+
+
+/* HTML5 elements
+ ========================================================================== */
+
+/*
+ * 1. Add the correct display in Edge, IE 10+, and Firefox.
+ * 2. Add the correct display in IE.
+ */
+
+details, /* 1 */
+main { /* 2 */
+    display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary { display: list-item; }
+
+/*
+ * Add the correct display in IE.
+ */
+
+template { display: none; }
+
+
+/* Iframe
+ ========================================================================== */
+
+iframe { border: 0; }
+
+
+/* Prevent the 300ms delay for touchscreen interactions
+ ========================================================================== */
+
+/*
+ * Most browsers prevent the 300ms delay automatically for sites that use the `width=device-width` property.
+ * For Safari on iOS 9.3+, IE 11 and Edge on desktops and IE 11 on Windows Phone 8.1 it must be applied manually.
+ */
+
+a,
+area,
+button,
+input,
+label,
+select,
+summary,
+textarea { touch-action: manipulation; }
+
+
+/* Pass media breakpoints to JS
+ ========================================================================== */
+
+/*
+ * Breakpoints
+ */
+
+.var-media-s::before  { content: '#{$breakpoint-small}'; }
+.var-media-m::before  { content: '#{$breakpoint-medium}'; }
+.var-media-l::before  { content: '#{$breakpoint-large}'; }
+.var-media-xl::before { content: '#{$breakpoint-xlarge}'; }
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-base-misc)) {@include hook-base-misc();}
+
+// @mixin hook-base-body(){}
+// @mixin hook-base-link(){}
+// @mixin hook-base-link-hover(){}
+// @mixin hook-base-code(){}
+// @mixin hook-base-heading(){}
+// @mixin hook-base-h1(){}
+// @mixin hook-base-h2(){}
+// @mixin hook-base-h3(){}
+// @mixin hook-base-h4(){}
+// @mixin hook-base-h5(){}
+// @mixin hook-base-h6(){}
+// @mixin hook-base-hr(){}
+// @mixin hook-base-blockquote(){}
+// @mixin hook-base-blockquote-footer(){}
+// @mixin hook-base-pre(){}
+// @mixin hook-base-misc(){}
+
+
+// Inverse
+// ========================================================================
+
+$inverse-base-color:                            $inverse-global-color !default;
+$inverse-base-link-color:                       $inverse-global-emphasis-color !default;
+$inverse-base-link-hover-color:                 $inverse-global-emphasis-color !default;
+$inverse-base-code-color:                       $inverse-global-color !default;
+$inverse-base-em-color:                         $inverse-global-emphasis-color !default;
+$inverse-base-heading-color:                    $inverse-global-emphasis-color !default;
+$inverse-base-hr-border:                        $inverse-global-border !default;
+
+
+
+// @mixin hook-inverse-base-link(){}
+// @mixin hook-inverse-base-link-hover(){}
+// @mixin hook-inverse-base-code(){}
+// @mixin hook-inverse-base-heading(){}
+// @mixin hook-inverse-base-h1(){}
+// @mixin hook-inverse-base-h2(){}
+// @mixin hook-inverse-base-h3(){}
+// @mixin hook-inverse-base-h4(){}
+// @mixin hook-inverse-base-h5(){}
+// @mixin hook-inverse-base-h6(){}
+// @mixin hook-inverse-base-blockquote(){}
+// @mixin hook-inverse-base-blockquote-footer(){}
+// @mixin hook-inverse-base-hr(){}
--- a/_sass/uikit/components/breadcrumb.scss
+++ b/_sass/uikit/components/breadcrumb.scss
@ -0,0 +1,122 @@
+// Name:            Breadcrumb
+// Description:     Component to create a breadcrumb navigation
+//
+// Component:       `uk-breadcrumb`
+//
+// States:          `uk-disabled`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$breadcrumb-item-font-size:                          $global-small-font-size !default;
+$breadcrumb-item-color:                              $global-muted-color !default;
+$breadcrumb-item-hover-color:                        $global-color !default;
+$breadcrumb-item-hover-text-decoration:              none !default;
+$breadcrumb-item-active-color:                       $global-color !default;
+
+$breadcrumb-divider:                                 "/" !default;
+$breadcrumb-divider-margin-horizontal:               20px !default;
+$breadcrumb-divider-color:                           $global-muted-color !default;
+
+
+/* ========================================================================
+   Component: Breadcrumb
+ ========================================================================== */
+
+/*
+ * 1. Allow items to wrap into the next line
+ * 2. Reset list
+ */
+
+.uk-breadcrumb {
+    display: flex;
+    /* 1 */
+    flex-wrap: wrap;
+    /* 2 */
+    padding: 0;
+    list-style: none;
+    @if(mixin-exists(hook-breadcrumb)) {@include hook-breadcrumb();}
+}
+
+/*
+ * Space is allocated solely based on content dimensions: 0 0 auto
+ */
+
+.uk-breadcrumb > * { flex: none; }
+
+
+/* Items
+ ========================================================================== */
+
+.uk-breadcrumb > * > * {
+    display: inline-block;
+    font-size: $breadcrumb-item-font-size;
+    color: $breadcrumb-item-color;
+    @if(mixin-exists(hook-breadcrumb-item)) {@include hook-breadcrumb-item();}
+}
+
+/* Hover + Focus */
+.uk-breadcrumb > * > :hover,
+.uk-breadcrumb > * > :focus {
+    color: $breadcrumb-item-hover-color;
+    text-decoration: $breadcrumb-item-hover-text-decoration;
+    @if(mixin-exists(hook-breadcrumb-item-hover)) {@include hook-breadcrumb-item-hover();}
+}
+
+/* Disabled */
+.uk-breadcrumb > .uk-disabled > * {
+    @if(mixin-exists(hook-breadcrumb-item-disabled)) {@include hook-breadcrumb-item-disabled();}
+}
+
+/* Active */
+.uk-breadcrumb > :last-child > * {
+    color: $breadcrumb-item-active-color;
+    @if(mixin-exists(hook-breadcrumb-item-active)) {@include hook-breadcrumb-item-active();}
+}
+
+/*
+ * Divider
+ * `nth-child` makes it also work without JS if it's only one row
+ */
+
+.uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before {
+    content: $breadcrumb-divider;
+    display: inline-block;
+    margin: 0 $breadcrumb-divider-margin-horizontal;
+    color: $breadcrumb-divider-color;
+    @if(mixin-exists(hook-breadcrumb-divider)) {@include hook-breadcrumb-divider();}
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-breadcrumb-misc)) {@include hook-breadcrumb-misc();}
+
+// @mixin hook-breadcrumb(){}
+// @mixin hook-breadcrumb-item(){}
+// @mixin hook-breadcrumb-item-hover(){}
+// @mixin hook-breadcrumb-item-disabled(){}
+// @mixin hook-breadcrumb-item-active(){}
+// @mixin hook-breadcrumb-divider(){}
+// @mixin hook-breadcrumb-misc(){}
+
+
+// Inverse
+// ========================================================================
+
+$inverse-breadcrumb-item-color:                 $inverse-global-muted-color !default;
+$inverse-breadcrumb-item-hover-color:           $inverse-global-color !default;
+$inverse-breadcrumb-item-active-color:          $inverse-global-color !default;
+$inverse-breadcrumb-divider-color:              $inverse-global-muted-color !default;
+
+
+
+// @mixin hook-inverse-breadcrumb-item(){}
+// @mixin hook-inverse-breadcrumb-item-hover(){}
+// @mixin hook-inverse-breadcrumb-item-disabled(){}
+// @mixin hook-inverse-breadcrumb-item-active(){}
+// @mixin hook-inverse-breadcrumb-divider(){}
--- a/_sass/uikit/components/button.scss
+++ b/_sass/uikit/components/button.scss
@ -0,0 +1,451 @@
+// Name:            Button
+// Description:     Styles for buttons
+//
+// Component:       `uk-button`
+//
+// Sub-objects:     `uk-button-group`
+//
+// Modifiers:       `uk-button-default`
+//                  `uk-button-primary`
+//                  `uk-button-secondary`
+//                  `uk-button-danger`
+//                  `uk-button-text`
+//                  `uk-button-link`
+//                  `uk-button-small`
+//                  `uk-button-large`
+//
+// States:          `uk-active`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$button-line-height:                             $global-control-height !default;
+$button-small-line-height:                       $global-control-small-height !default;
+$button-large-line-height:                       $global-control-large-height !default;
+
+$button-font-size:                               $global-font-size !default;
+$button-small-font-size:                         $global-small-font-size !default;
+$button-large-font-size:                         $global-medium-font-size !default;
+
+$button-padding-horizontal:                      $global-gutter !default;
+$button-small-padding-horizontal:                $global-small-gutter !default;
+$button-large-padding-horizontal:                $global-medium-gutter !default;
+
+$button-default-background:                      $global-muted-background !default;
+$button-default-color:                           $global-emphasis-color !default;
+$button-default-hover-background:                darken($button-default-background, 5%) !default;
+$button-default-hover-color:                     $global-emphasis-color !default;
+$button-default-active-background:               darken($button-default-background, 10%) !default;
+$button-default-active-color:                    $global-emphasis-color !default;
+
+$button-primary-background:                      $global-primary-background !default;
+$button-primary-color:                           $global-inverse-color !default;
+$button-primary-hover-background:                darken($button-primary-background, 5%) !default;
+$button-primary-hover-color:                     $global-inverse-color !default;
+$button-primary-active-background:               darken($button-primary-background, 10%) !default;
+$button-primary-active-color:                    $global-inverse-color !default;
+
+$button-secondary-background:                    $global-secondary-background !default;
+$button-secondary-color:                         $global-inverse-color !default;
+$button-secondary-hover-background:              darken($button-secondary-background, 5%) !default;
+$button-secondary-hover-color:                   $global-inverse-color !default;
+$button-secondary-active-background:             darken($button-secondary-background, 10%) !default;
+$button-secondary-active-color:                  $global-inverse-color !default;
+
+$button-danger-background:                       $global-danger-background !default;
+$button-danger-color:                            $global-inverse-color !default;
+$button-danger-hover-background:                 darken($button-danger-background, 5%) !default;
+$button-danger-hover-color:                      $global-inverse-color !default;
+$button-danger-active-background:                darken($button-danger-background, 10%) !default;
+$button-danger-active-color:                     $global-inverse-color !default;
+
+$button-disabled-background:                     $global-muted-background !default;
+$button-disabled-color:                          $global-muted-color !default;
+
+$button-text-line-height:                        $global-line-height !default;
+$button-text-color:                              $global-muted-color !default;
+$button-text-hover-color:                        $global-color !default;
+$button-text-disabled-color:                     $global-muted-color !default;
+
+$button-link-line-height:                        $global-line-height !default;
+$button-link-color:                              $global-link-color !default;
+$button-link-hover-color:                        $global-link-hover-color !default;
+$button-link-hover-text-decoration:              underline !default;
+$button-link-disabled-color:                     $global-muted-color !default;
+
+
+/* ========================================================================
+   Component: Button
+ ========================================================================== */
+
+/*
+ * 1. Remove margins in Chrome, Safari and Opera.
+ * 2. Remove borders for `button`.
+ * 3. Remove border-radius in Chrome.
+ * 4. Address `overflow` set to `hidden` in IE.
+ * 5. Correct `font` properties and `color` not being inherited for `button`.
+ * 6. Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 7. Style
+ * 8. `line-height` is used to create a height because it also centers the text vertically for `a` elements.
+ *    Better would be to use height and flexbox to center the text vertically but flexbox doesn't work in Firefox on `button` elements.
+ * 9. Align text if button has a width
+ * 10. Required for `a`.
+ */
+
+.uk-button {
+    /* 1 */
+    margin: 0;
+    /* 2 */
+    border: none;
+    /* 3 */
+    border-radius: 0;
+    /* 4 */
+    overflow: visible;
+    /* 5 */
+    font: inherit;
+    color: inherit;
+    /* 6 */
+    text-transform: none;
+    /* 7 */
+    display: inline-block;
+    box-sizing: border-box;
+    padding: 0 $button-padding-horizontal;
+    vertical-align: middle;
+    font-size: $button-font-size;
+    /* 8 */
+    line-height: $button-line-height;
+    /* 9 */
+    text-align: center;
+    /* 10 */
+    text-decoration: none;
+    @if(mixin-exists(hook-button)) {@include hook-button();}
+}
+
+.uk-button:not(:disabled) { cursor: pointer; }
+
+/*
+ * Remove the inner border and padding in Firefox.
+ */
+
+.uk-button::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+/* Hover */
+.uk-button:hover {
+    /* 8 */
+    text-decoration: none;
+    @if(mixin-exists(hook-button-hover)) {@include hook-button-hover();}
+}
+
+/* Focus */
+.uk-button:focus {
+    outline: none;
+    @if(mixin-exists(hook-button-focus)) {@include hook-button-focus();}
+}
+
+/* OnClick + Active */
+.uk-button:active,
+.uk-button.uk-active {
+    @if(mixin-exists(hook-button-active)) {@include hook-button-active();}
+}
+
+
+/* Style modifiers
+ ========================================================================== */
+
+/*
+ * Default
+ */
+
+.uk-button-default {
+    background-color: $button-default-background;
+    color: $button-default-color;
+    @if(mixin-exists(hook-button-default)) {@include hook-button-default();}
+}
+
+/* Hover + Focus */
+.uk-button-default:hover,
+.uk-button-default:focus {
+    background-color: $button-default-hover-background;
+    color: $button-default-hover-color;
+    @if(mixin-exists(hook-button-default-hover)) {@include hook-button-default-hover();}
+}
+
+/* OnClick + Active */
+.uk-button-default:active,
+.uk-button-default.uk-active {
+    background-color: $button-default-active-background;
+    color: $button-default-active-color;
+    @if(mixin-exists(hook-button-default-active)) {@include hook-button-default-active();}
+}
+
+/*
+ * Primary
+ */
+
+.uk-button-primary {
+    background-color: $button-primary-background;
+    color: $button-primary-color;
+    @if(mixin-exists(hook-button-primary)) {@include hook-button-primary();}
+}
+
+/* Hover + Focus */
+.uk-button-primary:hover,
+.uk-button-primary:focus {
+    background-color: $button-primary-hover-background;
+    color: $button-primary-hover-color;
+    @if(mixin-exists(hook-button-primary-hover)) {@include hook-button-primary-hover();}
+}
+
+/* OnClick + Active */
+.uk-button-primary:active,
+.uk-button-primary.uk-active {
+    background-color: $button-primary-active-background;
+    color: $button-primary-active-color;
+    @if(mixin-exists(hook-button-primary-active)) {@include hook-button-primary-active();}
+}
+
+/*
+ * Secondary
+ */
+
+.uk-button-secondary {
+    background-color: $button-secondary-background;
+    color: $button-secondary-color;
+    @if(mixin-exists(hook-button-secondary)) {@include hook-button-secondary();}
+}
+
+/* Hover + Focus */
+.uk-button-secondary:hover,
+.uk-button-secondary:focus {
+    background-color: $button-secondary-hover-background;
+    color: $button-secondary-hover-color;
+    @if(mixin-exists(hook-button-secondary-hover)) {@include hook-button-secondary-hover();}
+}
+
+/* OnClick + Active */
+.uk-button-secondary:active,
+.uk-button-secondary.uk-active {
+    background-color: $button-secondary-active-background;
+    color: $button-secondary-active-color;
+    @if(mixin-exists(hook-button-secondary-active)) {@include hook-button-secondary-active();}
+}
+
+/*
+ * Danger
+ */
+
+.uk-button-danger {
+    background-color: $button-danger-background;
+    color: $button-danger-color;
+    @if(mixin-exists(hook-button-danger)) {@include hook-button-danger();}
+}
+
+/* Hover + Focus */
+.uk-button-danger:hover,
+.uk-button-danger:focus {
+    background-color: $button-danger-hover-background;
+    color: $button-danger-hover-color;
+    @if(mixin-exists(hook-button-danger-hover)) {@include hook-button-danger-hover();}
+}
+
+/* OnClick + Active */
+.uk-button-danger:active,
+.uk-button-danger.uk-active {
+    background-color: $button-danger-active-background;
+    color: $button-danger-active-color;
+    @if(mixin-exists(hook-button-danger-active)) {@include hook-button-danger-active();}
+}
+
+/*
+ * Disabled
+ * The same for all style modifiers
+ */
+
+.uk-button-default:disabled,
+.uk-button-primary:disabled,
+.uk-button-secondary:disabled,
+.uk-button-danger:disabled {
+    background-color: $button-disabled-background;
+    color: $button-disabled-color;
+    @if(mixin-exists(hook-button-disabled)) {@include hook-button-disabled();}
+}
+
+
+/* Size modifiers
+ ========================================================================== */
+
+.uk-button-small {
+    padding: 0 $button-small-padding-horizontal;
+    line-height: $button-small-line-height;
+    font-size: $button-small-font-size;
+    @if(mixin-exists(hook-button-small)) {@include hook-button-small();}
+}
+
+.uk-button-large {
+    padding: 0 $button-large-padding-horizontal;
+    line-height: $button-large-line-height;
+    font-size: $button-large-font-size;
+    @if(mixin-exists(hook-button-large)) {@include hook-button-large();}
+}
+
+
+/* Text modifiers
+ ========================================================================== */
+
+/*
+ * Text
+ * 1. Reset
+ * 2. Style
+ */
+
+.uk-button-text {
+    /* 1 */
+    padding: 0;
+    line-height: $button-text-line-height;
+    background: none;
+    /* 2 */
+    color: $button-text-color;
+    @if(mixin-exists(hook-button-text)) {@include hook-button-text();}
+}
+
+/* Hover + Focus */
+.uk-button-text:hover,
+.uk-button-text:focus {
+    color: $button-text-hover-color;
+    @if(mixin-exists(hook-button-text-hover)) {@include hook-button-text-hover();}
+}
+
+/* Disabled */
+.uk-button-text:disabled {
+    color: $button-text-disabled-color;
+    @if(mixin-exists(hook-button-text-disabled)) {@include hook-button-text-disabled();}
+}
+
+/*
+ * Link
+ * 1. Reset
+ * 2. Style
+ */
+
+.uk-button-link {
+    /* 1 */
+    padding: 0;
+    line-height: $button-link-line-height;
+    background: none;
+    /* 2 */
+    color: $button-link-color;
+    @if(mixin-exists(hook-button-link)) {@include hook-button-link();}
+}
+
+/* Hover + Focus */
+.uk-button-link:hover,
+.uk-button-link:focus {
+    color: $button-link-hover-color;
+    text-decoration: $button-link-hover-text-decoration;
+}
+
+/* Disabled */
+.uk-button-link:disabled {
+    color: $button-link-disabled-color;
+    text-decoration: none;
+}
+
+
+/* Group
+ ========================================================================== */
+
+/*
+ * 1. Using `flex` instead of `inline-block` to prevent whitespace betweent child elements
+ * 2. Behave like button
+ * 3. Create position context
+ */
+
+.uk-button-group {
+    /* 1 */
+    display: inline-flex;
+    /* 2 */
+    vertical-align: middle;
+    /* 3 */
+    position: relative;
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-button-misc)) {@include hook-button-misc();}
+
+// @mixin hook-button(){}
+// @mixin hook-button-hover(){}
+// @mixin hook-button-focus(){}
+// @mixin hook-button-active(){}
+// @mixin hook-button-default(){}
+// @mixin hook-button-default-hover(){}
+// @mixin hook-button-default-active(){}
+// @mixin hook-button-primary(){}
+// @mixin hook-button-primary-hover(){}
+// @mixin hook-button-primary-active(){}
+// @mixin hook-button-secondary(){}
+// @mixin hook-button-secondary-hover(){}
+// @mixin hook-button-secondary-active(){}
+// @mixin hook-button-danger(){}
+// @mixin hook-button-danger-hover(){}
+// @mixin hook-button-danger-active(){}
+// @mixin hook-button-disabled(){}
+// @mixin hook-button-small(){}
+// @mixin hook-button-large(){}
+// @mixin hook-button-text(){}
+// @mixin hook-button-text-hover(){}
+// @mixin hook-button-text-disabled(){}
+// @mixin hook-button-link(){}
+// @mixin hook-button-misc(){}
+
+
+// Inverse
+// ========================================================================
+
+$inverse-button-default-background:             $inverse-global-primary-background !default;
+$inverse-button-default-color:                  $inverse-global-inverse-color !default;
+$inverse-button-default-hover-background:       darken($inverse-button-default-background, 5%) !default;
+$inverse-button-default-hover-color:            $inverse-global-inverse-color !default;
+$inverse-button-default-active-background:      darken($inverse-button-default-background, 10%) !default;
+$inverse-button-default-active-color:           $inverse-global-inverse-color !default;
+$inverse-button-primary-background:             $inverse-global-primary-background !default;
+$inverse-button-primary-color:                  $inverse-global-inverse-color !default;
+$inverse-button-primary-hover-background:       darken($inverse-button-primary-background, 5%) !default;
+$inverse-button-primary-hover-color:            $inverse-global-inverse-color !default;
+$inverse-button-primary-active-background:      darken($inverse-button-primary-background, 10%) !default;
+$inverse-button-primary-active-color:           $inverse-global-inverse-color !default;
+$inverse-button-secondary-background:           $inverse-global-primary-background !default;
+$inverse-button-secondary-color:                $inverse-global-inverse-color !default;
+$inverse-button-secondary-hover-background:     darken($inverse-button-secondary-background, 5%) !default;
+$inverse-button-secondary-hover-color:          $inverse-global-inverse-color !default;
+$inverse-button-secondary-active-background:    darken($inverse-button-secondary-background, 10%) !default;
+$inverse-button-secondary-active-color:         $inverse-global-inverse-color !default;
+$inverse-button-text-color:                     $inverse-global-muted-color !default;
+$inverse-button-text-hover-color:               $inverse-global-color !default;
+$inverse-button-text-disabled-color:            $inverse-global-muted-color !default;
+$inverse-button-link-color:                     $inverse-global-muted-color !default;
+$inverse-button-link-hover-color:               $inverse-global-color !default;
+
+
+
+// @mixin hook-inverse-button-default(){}
+// @mixin hook-inverse-button-default-hover(){}
+// @mixin hook-inverse-button-default-active(){}
+// @mixin hook-inverse-button-primary(){}
+// @mixin hook-inverse-button-primary-hover(){}
+// @mixin hook-inverse-button-primary-active(){}
+// @mixin hook-inverse-button-secondary(){}
+// @mixin hook-inverse-button-secondary-hover(){}
+// @mixin hook-inverse-button-secondary-active(){}
+// @mixin hook-inverse-button-text(){}
+// @mixin hook-inverse-button-text-hover(){}
+// @mixin hook-inverse-button-text-disabled(){}
+// @mixin hook-inverse-button-link(){}
--- a/_sass/uikit/components/card.scss
+++ b/_sass/uikit/components/card.scss
@ -0,0 +1,363 @@
+// Name:            Card
+// Description:     Component to create boxed content containers
+//
+// Component:       `uk-card`
+//
+// Sub-objects:     `uk-card-body`
+//                  `uk-card-header`
+//                  `uk-card-footer`
+//                  `uk-card-media-*`
+//                  `uk-card-title`
+//                  `uk-card-badge`
+//
+// Modifiers:       `uk-card-hover`
+//                  `uk-card-default`
+//                  `uk-card-primary`
+//                  `uk-card-secondary`
+//                  `uk-card-small`
+//                  `uk-card-large`
+//
+// Uses:            `uk-grid-stack`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$card-body-padding-horizontal:                  $global-gutter !default;
+$card-body-padding-vertical:                    $global-gutter !default;
+
+$card-body-padding-horizontal-l:                $global-medium-gutter !default;
+$card-body-padding-vertical-l:                  $global-medium-gutter !default;
+
+$card-header-padding-horizontal:                $global-gutter !default;
+$card-header-padding-vertical:                  round($global-gutter / 2) !default;
+
+$card-header-padding-horizontal-l:              $global-medium-gutter !default;
+$card-header-padding-vertical-l:                round($global-medium-gutter / 2) !default;
+
+$card-footer-padding-horizontal:                $global-gutter !default;
+$card-footer-padding-vertical:                  ($global-gutter / 2) !default;
+
+$card-footer-padding-horizontal-l:              $global-medium-gutter !default;
+$card-footer-padding-vertical-l:                round($global-medium-gutter / 2) !default;
+
+$card-title-font-size:                          $global-large-font-size !default;
+$card-title-line-height:                        1.4 !default;
+
+$card-badge-top:                                $global-gutter !default;
+$card-badge-right:                              $card-badge-top !default;
+
+$card-hover-background:                         $global-muted-background !default;
+
+$card-default-background:                       $global-muted-background !default;
+$card-default-color:                            $global-color !default;
+$card-default-title-color:                      $global-emphasis-color !default;
+$card-default-hover-background:                 darken($card-default-background, 5%) !default;
+
+$card-primary-background:                       $global-primary-background !default;
+$card-primary-color:                            $global-inverse-color !default;
+$card-primary-title-color:                      $card-primary-color !default;
+$card-primary-hover-background:                 darken($card-primary-background, 5%) !default;
+$card-primary-color-mode:                       light !default;
+
+$card-secondary-background:                     $global-secondary-background !default;
+$card-secondary-color:                          $global-inverse-color !default;
+$card-secondary-title-color:                    $card-secondary-color !default;
+$card-secondary-hover-background:               darken($card-secondary-background, 5%) !default;
+$card-secondary-color-mode:                     light !default;
+
+$card-small-body-padding-horizontal:            $global-margin !default;
+$card-small-body-padding-vertical:              $global-margin !default;
+$card-small-header-padding-horizontal:          $global-margin !default;
+$card-small-header-padding-vertical:            round($global-margin / 1.5) !default;
+$card-small-footer-padding-horizontal:          $global-margin !default;
+$card-small-footer-padding-vertical:            round($global-margin / 1.5) !default;
+
+$card-large-body-padding-horizontal-l:          $global-large-gutter !default;
+$card-large-body-padding-vertical-l:            $global-large-gutter !default;
+$card-large-header-padding-horizontal-l:        $global-large-gutter !default;
+$card-large-header-padding-vertical-l:          round($global-large-gutter / 2) !default;
+$card-large-footer-padding-horizontal-l:        $global-large-gutter !default;
+$card-large-footer-padding-vertical-l:          round($global-large-gutter / 2) !default;
+
+
+/* ========================================================================
+   Component: Card
+ ========================================================================== */
+
+.uk-card {
+    position: relative;
+    box-sizing: border-box;
+    @if(mixin-exists(hook-card)) {@include hook-card();}
+}
+
+
+/* Sections
+ ========================================================================== */
+
+.uk-card-body {
+    padding: $card-body-padding-vertical $card-body-padding-horizontal;
+    @if(mixin-exists(hook-card-body)) {@include hook-card-body();}
+}
+
+.uk-card-header {
+    padding: $card-header-padding-vertical $card-header-padding-horizontal;
+    @if(mixin-exists(hook-card-header)) {@include hook-card-header();}
+}
+
+.uk-card-footer {
+    padding: $card-footer-padding-vertical $card-footer-padding-horizontal;
+    @if(mixin-exists(hook-card-footer)) {@include hook-card-footer();}
+}
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+
+    .uk-card-body { padding: $card-body-padding-vertical-l $card-body-padding-horizontal-l; }
+
+    .uk-card-header { padding: $card-header-padding-vertical-l $card-header-padding-horizontal-l; }
+
+    .uk-card-footer { padding: $card-footer-padding-vertical-l $card-footer-padding-horizontal-l; }
+
+}
+
+/*
+ * Micro clearfix
+ */
+
+.uk-card-body::before,
+.uk-card-body::after,
+.uk-card-header::before,
+.uk-card-header::after,
+.uk-card-footer::before,
+.uk-card-footer::after {
+    content: "";
+    display: table;
+}
+
+.uk-card-body::after,
+.uk-card-header::after,
+.uk-card-footer::after { clear: both; }
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-card-body > :last-child,
+.uk-card-header > :last-child,
+.uk-card-footer > :last-child { margin-bottom: 0; }
+
+
+/* Media
+ ========================================================================== */
+
+/*
+ * Reserved alignment modifier to style the media element, e.g. with `border-radius`
+ * Implemented by the theme
+ */
+
+[class*='uk-card-media'] {
+    @if(mixin-exists(hook-card-media)) {@include hook-card-media();}
+}
+
+.uk-card-media-top,
+.uk-grid-stack > .uk-card-media-left,
+.uk-grid-stack > .uk-card-media-right  {
+    @if(mixin-exists(hook-card-media-top)) {@include hook-card-media-top();}
+}
+
+.uk-card-media-bottom {
+    @if(mixin-exists(hook-card-media-bottom)) {@include hook-card-media-bottom();}
+}
+
+:not(.uk-grid-stack) > .uk-card-media-left {
+    @if(mixin-exists(hook-card-media-left)) {@include hook-card-media-left();}
+}
+
+:not(.uk-grid-stack) > .uk-card-media-right {
+    @if(mixin-exists(hook-card-media-right)) {@include hook-card-media-right();}
+}
+
+
+/* Title
+ ========================================================================== */
+
+.uk-card-title {
+    font-size: $card-title-font-size;
+    line-height: $card-title-line-height;
+    @if(mixin-exists(hook-card-title)) {@include hook-card-title();}
+}
+
+
+/* Badge
+ ========================================================================== */
+
+.uk-card-badge {
+    position: absolute;
+    top: $card-badge-top;
+    right: $card-badge-right;
+    z-index: 1;
+    @if(mixin-exists(hook-card-badge)) {@include hook-card-badge();}
+}
+
+/*
+ * Remove margin from adjacent element
+ */
+
+.uk-card-badge:first-child + * { margin-top: 0; }
+
+
+/* Hover modifier
+ ========================================================================== */
+
+.uk-card-hover:not(.uk-card-default):not(.uk-card-primary):not(.uk-card-secondary):hover {
+    background: $card-hover-background;
+    @if(mixin-exists(hook-card-hover)) {@include hook-card-hover();}
+}
+
+
+/* Style modifiers
+ ========================================================================== */
+
+/*
+ * Default
+ * Note: Header and Footer are only implemented for the default style
+ */
+
+.uk-card-default {
+    background: $card-default-background;
+    color: $card-default-color;
+    @if(mixin-exists(hook-card-default)) {@include hook-card-default();}
+}
+
+.uk-card-default .uk-card-title {
+    color: $card-default-title-color;
+    @if(mixin-exists(hook-card-default-title)) {@include hook-card-default-title();}
+}
+
+.uk-card-default.uk-card-hover:hover {
+    background-color: $card-default-hover-background;
+    @if(mixin-exists(hook-card-default-hover)) {@include hook-card-default-hover();}
+}
+
+.uk-card-default .uk-card-header {
+    @if(mixin-exists(hook-card-default-header)) {@include hook-card-default-header();}
+}
+
+.uk-card-default .uk-card-footer {
+    @if(mixin-exists(hook-card-default-footer)) {@include hook-card-default-footer();}
+}
+
+/*
+ * Primary
+ */
+
+.uk-card-primary {
+    background: $card-primary-background;
+    color: $card-primary-color;
+    @if(mixin-exists(hook-card-primary)) {@include hook-card-primary();}
+}
+
+.uk-card-primary .uk-card-title {
+    color: $card-primary-title-color;
+    @if(mixin-exists(hook-card-primary-title)) {@include hook-card-primary-title();}
+}
+
+.uk-card-primary.uk-card-hover:hover {
+    background-color: $card-primary-hover-background;
+    @if(mixin-exists(hook-card-primary-hover)) {@include hook-card-primary-hover();}
+}
+
+// Color Mode
+@if ( $card-primary-color-mode == light ) { .uk-card-primary.uk-card-body { @extend .uk-light !optional;} }
+@if ( $card-primary-color-mode == light ) { .uk-card-primary > :not([class*='uk-card-media']) { @extend .uk-light !optional;} }
+@if ( $card-primary-color-mode == dark ) { .uk-card-primary.uk-card-body { @extend .uk-dark !optional;} }
+@if ( $card-primary-color-mode == dark ) { .uk-card-primary > :not([class*='uk-card-media']) { @extend .uk-dark !optional;} }
+
+/*
+ * Secondary
+ */
+
+.uk-card-secondary {
+    background: $card-secondary-background;
+    color: $card-secondary-color;
+    @if(mixin-exists(hook-card-secondary)) {@include hook-card-secondary();}
+}
+
+.uk-card-secondary .uk-card-title {
+    color: $card-secondary-title-color;
+    @if(mixin-exists(hook-card-secondary-title)) {@include hook-card-secondary-title();}
+}
+
+.uk-card-secondary.uk-card-hover:hover {
+    background-color: $card-secondary-hover-background;
+    @if(mixin-exists(hook-card-secondary-hover)) {@include hook-card-secondary-hover();}
+}
+
+// Color Mode
+@if ( $card-secondary-color-mode == light ) { .uk-card-secondary.uk-card-body { @extend .uk-light !optional;} }
+@if ( $card-secondary-color-mode == light ) { .uk-card-secondary > :not([class*='uk-card-media']) { @extend .uk-light !optional;} }
+@if ( $card-secondary-color-mode == dark ) { .uk-card-secondary.uk-card-body { @extend .uk-dark !optional;} }
+@if ( $card-secondary-color-mode == dark ) { .uk-card-secondary > :not([class*='uk-card-media']) { @extend .uk-dark !optional;} }
+
+
+/* Size modifier
+ ========================================================================== */
+
+/*
+ * Small
+ */
+
+.uk-card-small.uk-card-body,
+.uk-card-small .uk-card-body { padding: $card-small-body-padding-vertical $card-small-body-padding-horizontal; }
+
+.uk-card-small .uk-card-header { padding: $card-small-header-padding-vertical $card-small-header-padding-horizontal; }
+.uk-card-small .uk-card-footer { padding: $card-small-footer-padding-vertical $card-small-footer-padding-horizontal; }
+
+/*
+ * Large
+ */
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+
+    .uk-card-large.uk-card-body,
+    .uk-card-large .uk-card-body { padding: $card-large-body-padding-vertical-l $card-large-body-padding-horizontal-l; }
+
+    .uk-card-large .uk-card-header { padding: $card-large-header-padding-vertical-l $card-large-header-padding-horizontal-l; }
+    .uk-card-large .uk-card-footer { padding: $card-large-footer-padding-vertical-l $card-large-footer-padding-horizontal-l; }
+
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-card-misc)) {@include hook-card-misc();}
+
+// @mixin hook-card(){}
+// @mixin hook-card-body(){}
+// @mixin hook-card-header(){}
+// @mixin hook-card-footer(){}
+// @mixin hook-card-media(){}
+// @mixin hook-card-media-top(){}
+// @mixin hook-card-media-bottom(){}
+// @mixin hook-card-media-left(){}
+// @mixin hook-card-media-right(){}
+// @mixin hook-card-title(){}
+// @mixin hook-card-badge(){}
+// @mixin hook-card-hover(){}
+// @mixin hook-card-default(){}
+// @mixin hook-card-default-title(){}
+// @mixin hook-card-default-hover(){}
+// @mixin hook-card-default-header(){}
+// @mixin hook-card-default-footer(){}
+// @mixin hook-card-primary(){}
+// @mixin hook-card-primary-title(){}
+// @mixin hook-card-primary-hover(){}
+// @mixin hook-card-secondary(){}
+// @mixin hook-card-secondary-title(){}
+// @mixin hook-card-secondary-hover(){}
+// @mixin hook-card-misc(){}
--- a/_sass/uikit/components/close.scss
+++ b/_sass/uikit/components/close.scss
@ -0,0 +1,57 @@
+// Name:            Close
+// Description:     Component to create a close button
+//
+// Component:       `uk-close`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$close-color:                                    $global-muted-color !default;
+$close-hover-color:                              $global-color !default;
+
+
+/* ========================================================================
+   Component: Close
+ ========================================================================== */
+
+/*
+ * Adopts `uk-icon`
+ */
+
+.uk-close {
+    color: $close-color;
+    @if(mixin-exists(hook-close)) {@include hook-close();}
+}
+
+/* Hover + Focus */
+.uk-close:hover,
+.uk-close:focus {
+    color: $close-hover-color;
+    outline: none;
+    @if(mixin-exists(hook-close-hover)) {@include hook-close-hover();}
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-close-misc)) {@include hook-close-misc();}
+
+// @mixin hook-close(){}
+// @mixin hook-close-hover(){}
+// @mixin hook-close-misc(){}
+
+
+// Inverse
+// ========================================================================
+
+$inverse-close-color:                            $inverse-global-muted-color !default;
+$inverse-close-hover-color:                      $inverse-global-color !default;
+
+
+
+// @mixin hook-inverse-close(){}
+// @mixin hook-inverse-close-hover(){}
--- a/_sass/uikit/components/column.scss
+++ b/_sass/uikit/components/column.scss
@ -0,0 +1,138 @@
+// Name:            Column
+// Description:     Utilities for text columns
+//
+// Component:       `uk-column-*`
+//
+// Sub-objects:     `uk-column-span`
+//
+// Modifiers:       `uk-column-divider`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$column-gutter:                                  $global-gutter !default;
+$column-gutter-l:                                $global-medium-gutter !default;
+
+$column-divider-rule-color:                      $global-border !default;
+$column-divider-rule-width:                      1px !default;
+
+
+/* ========================================================================
+   Component: Column
+ ========================================================================== */
+
+[class*='uk-column-'] { column-gap: $column-gutter; }
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+
+    [class*='uk-column-'] { column-gap: $column-gutter-l; }
+
+}
+
+/*
+ * Fix image 1px line wrapping into the next column in Chrome
+ */
+
+[class*='uk-column-'] img { transform: translate3d(0,0,0); }
+
+
+/* Divider
+ ========================================================================== */
+
+/*
+ * 1. Double the column gap
+ */
+
+.uk-column-divider {
+    column-rule: $column-divider-rule-width solid $column-divider-rule-color;
+    /* 1 */
+    column-gap: ($column-gutter * 2);
+}
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+
+    .uk-column-divider {
+        column-gap: ($column-gutter-l * 2);
+    }
+
+}
+
+
+/* Width modifiers
+ ========================================================================== */
+
+.uk-column-1-2 { column-count: 2;}
+.uk-column-1-3 { column-count: 3; }
+.uk-column-1-4 { column-count: 4; }
+.uk-column-1-5 { column-count: 5; }
+.uk-column-1-6 { column-count: 6; }
+
+/* Phone landscape and bigger */
+@media (min-width: $breakpoint-small) {
+
+    .uk-column-1-2\@s { column-count: 2; }
+    .uk-column-1-3\@s { column-count: 3; }
+    .uk-column-1-4\@s { column-count: 4; }
+    .uk-column-1-5\@s { column-count: 5; }
+    .uk-column-1-6\@s { column-count: 6; }
+
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    .uk-column-1-2\@m { column-count: 2; }
+    .uk-column-1-3\@m { column-count: 3; }
+    .uk-column-1-4\@m { column-count: 4; }
+    .uk-column-1-5\@m { column-count: 5; }
+    .uk-column-1-6\@m { column-count: 6; }
+
+}
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+
+    .uk-column-1-2\@l { column-count: 2; }
+    .uk-column-1-3\@l { column-count: 3; }
+    .uk-column-1-4\@l { column-count: 4; }
+    .uk-column-1-5\@l { column-count: 5; }
+    .uk-column-1-6\@l { column-count: 6; }
+
+}
+
+/* Large screen and bigger */
+@media (min-width: $breakpoint-xlarge) {
+
+    .uk-column-1-2\@xl { column-count: 2; }
+    .uk-column-1-3\@xl { column-count: 3; }
+    .uk-column-1-4\@xl { column-count: 4; }
+    .uk-column-1-5\@xl { column-count: 5; }
+    .uk-column-1-6\@xl { column-count: 6; }
+
+}
+
+/* Make element span across all columns
+ * Does not work in Firefox yet
+ ========================================================================== */
+
+.uk-column-span { column-span: all; }
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-column-misc)) {@include hook-column-misc();}
+
+// @mixin hook-column-misc(){}
+
+
+// Inverse
+// ========================================================================
+
+$inverse-column-divider-rule-color:                     $inverse-global-border !default;
+
--- a/_sass/uikit/components/comment.scss
+++ b/_sass/uikit/components/comment.scss
@ -0,0 +1,171 @@
+// Name:            Comment
+// Description:     Component to create nested comments
+//
+// Component:       `uk-comment`
+//
+// Sub-objects:     `uk-comment-body`
+//                  `uk-comment-header`
+//                  `uk-comment-title`
+//                  `uk-comment-meta`
+//                  `uk-comment-avatar`
+//                  `uk-comment-list`
+//
+// Modifier:        `uk-comment-primary`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$comment-header-margin-bottom:                   $global-margin !default;
+
+$comment-title-font-size:                        $global-medium-font-size !default;
+$comment-title-line-height:                      1.4 !default;
+
+$comment-meta-font-size:                         $global-small-font-size !default;
+$comment-meta-line-height:                       1.4 !default;
+$comment-meta-color:                             $global-muted-color !default;
+
+$comment-list-margin-top:                        $global-large-margin !default;
+$comment-list-padding-left:                      30px !default;
+$comment-list-padding-left-m:                    100px !default;
+
+
+/* ========================================================================
+   Component: Comment
+ ========================================================================== */
+
+.uk-comment {
+    @if(mixin-exists(hook-comment)) {@include hook-comment();}
+}
+
+
+/* Sections
+ ========================================================================== */
+
+.uk-comment-body {
+    @if(mixin-exists(hook-comment-body)) {@include hook-comment-body();}
+}
+
+.uk-comment-header {
+    margin-bottom: $comment-header-margin-bottom;
+    @if(mixin-exists(hook-comment-header)) {@include hook-comment-header();}
+}
+
+/*
+ * Micro clearfix
+ */
+
+.uk-comment-body::before,
+.uk-comment-body::after,
+.uk-comment-header::before,
+.uk-comment-header::after {
+    content: "";
+    display: table;
+}
+
+.uk-comment-body::after,
+.uk-comment-header::after { clear: both; }
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-comment-body > :last-child,
+.uk-comment-header > :last-child { margin-bottom: 0; }
+
+
+/* Title
+ ========================================================================== */
+
+.uk-comment-title {
+    font-size: $comment-title-font-size;
+    line-height: $comment-title-line-height;
+    @if(mixin-exists(hook-comment-title)) {@include hook-comment-title();}
+}
+
+
+/* Meta
+ ========================================================================== */
+
+.uk-comment-meta {
+    font-size: $comment-meta-font-size;
+    line-height: $comment-meta-line-height;
+    color: $comment-meta-color;
+    @if(mixin-exists(hook-comment-meta)) {@include hook-comment-meta();}
+}
+
+
+/* Avatar
+ ========================================================================== */
+
+.uk-comment-avatar {
+    @if(mixin-exists(hook-comment-avatar)) {@include hook-comment-avatar();}
+}
+
+
+/* List
+ ========================================================================== */
+
+.uk-comment-list {
+    padding: 0;
+    list-style: none;
+}
+
+/* Adjacent siblings */
+.uk-comment-list > :nth-child(n+2) {
+    margin-top: $comment-list-margin-top;
+    @if(mixin-exists(hook-comment-list-adjacent)) {@include hook-comment-list-adjacent();}
+}
+
+/*
+ * Sublists
+ * Note: General sibling selector allows reply block between comment and sublist
+ */
+
+.uk-comment-list .uk-comment ~ ul {
+    margin: $comment-list-margin-top 0 0 0;
+    padding-left: $comment-list-padding-left;
+    list-style: none;
+    @if(mixin-exists(hook-comment-list-sub)) {@include hook-comment-list-sub();}
+}
+
+/* Tablet and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    .uk-comment-list .uk-comment ~ ul { padding-left: $comment-list-padding-left-m; }
+
+}
+
+/* Adjacent siblings */
+.uk-comment-list .uk-comment ~ ul > :nth-child(n+2) {
+    margin-top: $comment-list-margin-top;
+    @if(mixin-exists(hook-comment-list-sub-adjacent)) {@include hook-comment-list-sub-adjacent();}
+}
+
+
+/* Style modifier
+ ========================================================================== */
+
+.uk-comment-primary {
+    @if(mixin-exists(hook-comment-primary)) {@include hook-comment-primary();}
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-comment-misc)) {@include hook-comment-misc();}
+
+// @mixin hook-comment(){}
+// @mixin hook-comment-body(){}
+// @mixin hook-comment-header(){}
+// @mixin hook-comment-title(){}
+// @mixin hook-comment-meta(){}
+// @mixin hook-comment-avatar(){}
+// @mixin hook-comment-list-adjacent(){}
+// @mixin hook-comment-list-sub(){}
+// @mixin hook-comment-list-sub-adjacent(){}
+// @mixin hook-comment-primary(){}
+// @mixin hook-comment-misc(){}
--- a/_sass/uikit/components/container.scss
+++ b/_sass/uikit/components/container.scss
@ -0,0 +1,106 @@
+// Name:            Container
+// Description:     Component to align and center your site and grid content
+//
+// Component:       `uk-container`
+//
+// Modifier:        `uk-container-small`
+//                  `uk-container-large`
+//                  `uk-container-expand`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$container-max-width:                    1200px !default;
+$container-small-max-width:              900px !default;
+$container-large-max-width:              1600px !default;
+
+$container-padding-horizontal:           15px !default;
+$container-padding-horizontal-s:         $global-gutter !default;
+$container-padding-horizontal-m:         $global-medium-gutter !default;
+
+
+/* ========================================================================
+   Component: Container
+ ========================================================================== */
+
+/*
+ * 1. Box sizing has to be `content-box` so the max-width is always the same and
+ *    unaffected by the padding on different breakpoints. It's important for the size modifiers.
+ */
+
+.uk-container {
+    box-sizing: content-box; /* 1 */
+    max-width: $container-max-width;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: $container-padding-horizontal;
+    padding-right: $container-padding-horizontal;
+}
+
+/* Phone landscape and bigger */
+@media (min-width: $breakpoint-small) {
+
+    .uk-container {
+        padding-left: $container-padding-horizontal-s;
+        padding-right: $container-padding-horizontal-s;
+    }
+
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    .uk-container {
+        padding-left: $container-padding-horizontal-m;
+        padding-right: $container-padding-horizontal-m;
+    }
+
+}
+
+/*
+ * Micro clearfix
+ */
+
+.uk-container::before,
+.uk-container::after {
+    content: "";
+    display: table;
+}
+
+.uk-container::after { clear: both; }
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-container > :last-child { margin-bottom: 0; }
+
+/*
+ * Remove padding from nested containers
+ */
+
+.uk-container .uk-container {
+    padding-left: 0;
+    padding-right: 0;
+}
+
+
+/* Size modifier
+ ========================================================================== */
+
+.uk-container-small { max-width: $container-small-max-width; }
+
+.uk-container-large { max-width: $container-large-max-width; }
+
+.uk-container-expand { max-width: none; }
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-container-misc)) {@include hook-container-misc();}
+
+// @mixin hook-container-misc(){}
--- a/_sass/uikit/components/countdown.scss
+++ b/_sass/uikit/components/countdown.scss
@ -0,0 +1,126 @@
+// Name:            Countdown
+// Description:     Component to create countdown timers
+//
+// Component:       `uk-countdown`
+//
+// Sub-objects:     `uk-countdown-number`
+//                  `uk-countdown-separator`
+//                  `uk-countdown-label`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$countdown-item-line-height:                     70px !default;
+
+$countdown-number-font-size:                     2rem !default; // 32px
+$countdown-number-font-size-s:                   4rem !default; // 64px
+$countdown-number-font-size-m:                   6rem !default; // 96px
+
+$countdown-separator-font-size:                  1rem !default; // 16px
+$countdown-separator-font-size-s:                2rem !default; // 32px
+$countdown-separator-font-size-m:                3rem !default; // 48px
+
+
+/* ========================================================================
+   Component: Countdown
+ ========================================================================== */
+
+.uk-countdown {
+    @if(mixin-exists(hook-countdown)) {@include hook-countdown();}
+}
+
+
+/* Item
+ ========================================================================== */
+
+/*
+ * 1. Center numbers and separators vertically
+ */
+
+.uk-countdown-number,
+.uk-countdown-separator {
+    /* 1 */
+    line-height: $countdown-item-line-height;
+    @if(mixin-exists(hook-countdown-item)) {@include hook-countdown-item();}
+}
+
+
+/* Number
+ ========================================================================== */
+
+.uk-countdown-number {
+    font-size: $countdown-number-font-size;
+    @if(mixin-exists(hook-countdown-number)) {@include hook-countdown-number();}
+}
+
+/* Phone landscape and bigger */
+@media (min-width: $breakpoint-small) {
+
+    .uk-countdown-number { font-size: $countdown-number-font-size-s; }
+
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    .uk-countdown-number { font-size: $countdown-number-font-size-m; }
+
+}
+
+
+/* Separator
+ ========================================================================== */
+
+.uk-countdown-separator {
+    font-size: $countdown-separator-font-size;
+    @if(mixin-exists(hook-countdown-separator)) {@include hook-countdown-separator();}
+}
+
+/* Phone landscape and bigger */
+@media (min-width: $breakpoint-small) {
+
+    .uk-countdown-separator { font-size: $countdown-separator-font-size-s; }
+
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    .uk-countdown-separator { font-size: $countdown-separator-font-size-m; }
+
+}
+
+
+/* Label
+ ========================================================================== */
+
+.uk-countdown-label {
+    @if(mixin-exists(hook-countdown-label)) {@include hook-countdown-label();}
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-countdown-misc)) {@include hook-countdown-misc();}
+
+// @mixin hook-countdown(){}
+// @mixin hook-countdown-item(){}
+// @mixin hook-countdown-number(){}
+// @mixin hook-countdown-separator(){}
+// @mixin hook-countdown-label(){}
+// @mixin hook-countdown-misc(){}
+
+
+// Inverse
+// ========================================================================
+
+
+
+// @mixin hook-inverse-countdown-item(){}
+// @mixin hook-inverse-countdown-number(){}
+// @mixin hook-inverse-countdown-separator(){}
+// @mixin hook-inverse-countdown-label(){}
--- a/_sass/uikit/components/cover.scss
+++ b/_sass/uikit/components/cover.scss
@ -0,0 +1,57 @@
+// Name:            Cover
+// Description:     Utilities to let embedded content cover their container in a centered position
+//
+// Component:       `uk-cover`
+//
+// Sub-object:      `uk-cover-container`
+//
+// ========================================================================
+
+
+/* ========================================================================
+   Component: Cover
+ ========================================================================== */
+
+/*
+ * Works with iframes and embedded content
+ * 1. Reset responsiveness for embedded content
+ * 2. Center object
+ * Note: Percent values on the `top` property only works if this element
+ *       is absolute positioned or if the container has a height
+ */
+
+.uk-cover {
+    /* 1 */
+    max-width: none;
+    /* 2 */
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%,-50%);
+}
+
+iframe.uk-cover { pointer-events: none; }
+
+
+/* Container
+ ========================================================================== */
+
+/*
+ * 1. Parent container which clips resized object
+ * 2. Needed if the child is positioned absolute. See note above
+ */
+
+.uk-cover-container {
+    /* 1 */
+    overflow: hidden;
+    /* 2 */
+    position: relative;
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-cover-misc)) {@include hook-cover-misc();}
+
+// @mixin hook-cover-misc(){}
--- a/_sass/uikit/components/description-list.scss
+++ b/_sass/uikit/components/description-list.scss
@ -0,0 +1,71 @@
+// Name:            Description list
+// Description:     Styles for description lists
+//
+// Component:       `uk-description-list`
+//
+// Modifiers:       `uk-description-list-divider`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$description-list-term-color:                    $global-emphasis-color !default;
+$description-list-term-margin-top:               $global-margin !default;
+
+$description-list-divider-term-margin-top:       $global-margin !default;
+$description-list-divider-term-border-width:     $global-border-width !default;
+$description-list-divider-term-border:           $global-border !default;
+
+
+/* ========================================================================
+   Component: Description list
+ ========================================================================== */
+
+/*
+ * Term
+ */
+
+.uk-description-list > dt {
+    color: $description-list-term-color;
+    @if(mixin-exists(hook-description-list-term)) {@include hook-description-list-term();}
+}
+
+.uk-description-list > dt:nth-child(n+2) {
+    margin-top: $description-list-term-margin-top;
+}
+
+/*
+ * Description
+ */
+
+.uk-description-list > dd {
+    @if(mixin-exists(hook-description-list-description)) {@include hook-description-list-description();}
+}
+
+
+/* Style modifier
+ ========================================================================== */
+
+/*
+ * Line
+ */
+
+.uk-description-list-divider > dt:nth-child(n+2) {
+    margin-top: $description-list-divider-term-margin-top;
+    padding-top: $description-list-divider-term-margin-top;
+    border-top: $description-list-divider-term-border-width solid $description-list-divider-term-border;
+    @if(mixin-exists(hook-description-list-divider-term)) {@include hook-description-list-divider-term();}
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-description-list-misc)) {@include hook-description-list-misc();}
+
+// @mixin hook-description-list-term(){}
+// @mixin hook-description-list-description(){}
+// @mixin hook-description-list-divider-term(){}
+// @mixin hook-description-list-misc(){}
--- a/_sass/uikit/components/divider.scss
+++ b/_sass/uikit/components/divider.scss
@ -0,0 +1,129 @@
+// Name:            Divider
+// Description:     Styles for dividers
+//
+// Component:       `uk-divider-icon`
+//                  `uk-divider-small`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$divider-margin-vertical:                        $global-margin !default;
+
+$divider-icon-width:                             50px !default;
+$divider-icon-height:                            20px !default;
+$divider-icon-color:                             $global-border !default;
+$divider-icon-line-top:                          50% !default;
+$divider-icon-line-width:                        100% !default;
+$divider-icon-line-border-width:                 $global-border-width !default;
+$divider-icon-line-border:                       $global-border !default;
+
+$internal-divider-icon-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22none%22%20stroke%3D%22#000%22%20stroke-width%3D%222%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%227%22%20%2F%3E%0A%3C%2Fsvg%3E%0A" !default;
+
+$divider-small-width:                            100px !default;
+$divider-small-border-width:                     $global-border-width !default;
+$divider-small-border:                           $global-border !default;
+
+
+/* ========================================================================
+   Component: Divider
+ ========================================================================== */
+
+/*
+ * 1. Reset default `hr`
+ * 2. Set margin if a `div` is used for semantical reason
+ */
+
+[class*='uk-divider'] {
+    /* 1 */
+    border: none;
+    /* 2 */
+    margin-bottom: $divider-margin-vertical;
+}
+
+/* Add margin if adjacent element */
+* + [class*='uk-divider'] { margin-top: $divider-margin-vertical; }
+
+
+/* Icon
+ ========================================================================== */
+
+.uk-divider-icon {
+    position: relative;
+    height: $divider-icon-height;
+    @include svg-fill($internal-divider-icon-image, "#000", $divider-icon-color);
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+    @if(mixin-exists(hook-divider-icon)) {@include hook-divider-icon();}
+}
+
+.uk-divider-icon::before,
+.uk-divider-icon::after {
+    content: "";
+    position: absolute;
+    top: $divider-icon-line-top;
+    max-width: unquote('calc(50% - (#{$divider-icon-width} / 2))');
+    border-bottom: $divider-icon-line-border-width solid $divider-icon-line-border;
+    @if(mixin-exists(hook-divider-icon-line)) {@include hook-divider-icon-line();}
+}
+
+.uk-divider-icon::before {
+    right: unquote('calc(50% + (#{$divider-icon-width} / 2))');
+    width: $divider-icon-line-width;
+    @if(mixin-exists(hook-divider-icon-line-left)) {@include hook-divider-icon-line-left();}
+}
+
+.uk-divider-icon::after {
+    left: unquote('calc(50% + (#{$divider-icon-width} / 2))');
+    width: $divider-icon-line-width;
+    @if(mixin-exists(hook-divider-icon-line-right)) {@include hook-divider-icon-line-right();}
+}
+
+
+/* Small
+ ========================================================================== */
+
+/*
+ * Reset child height, caused by `inline-block`
+ */
+
+.uk-divider-small { line-height: 0; }
+
+.uk-divider-small::after {
+    content: "";
+    display: inline-block;
+    width: $divider-small-width;
+    max-width: 100%;
+    border-top: $divider-small-border-width solid $divider-small-border;
+    vertical-align: top;
+    @if(mixin-exists(hook-divider-small)) {@include hook-divider-small();}
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-divider-misc)) {@include hook-divider-misc();}
+
+// @mixin hook-divider-icon(){}
+// @mixin hook-divider-icon-line(){}
+// @mixin hook-divider-icon-line-left(){}
+// @mixin hook-divider-icon-line-right(){}
+// @mixin hook-divider-small(){}
+// @mixin hook-divider-misc(){}
+
+
+// Inverse
+// ========================================================================
+
+$inverse-divider-icon-color:                       $inverse-global-border !default;
+$inverse-divider-icon-line-border:                 $inverse-global-border !default;
+$inverse-divider-small-border:                     $inverse-global-border !default;
+
+
+
+// @mixin hook-inverse-divider-icon(){}
+// @mixin hook-inverse-divider-icon-line(){}
+// @mixin hook-inverse-divider-small(){}
--- a/_sass/uikit/components/dotnav.scss
+++ b/_sass/uikit/components/dotnav.scss
@ -0,0 +1,157 @@
+// Name:            Dotnav
+// Description:     Component to create dot navigations
+//
+// Component:       `uk-dotnav`
+//
+// Modifier:        `uk-dotnav-vertical`
+//
+// States:          `uk-active`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$dotnav-margin-horizontal:                       12px !default;
+$dotnav-margin-vertical:                         $dotnav-margin-horizontal !default;
+
+$dotnav-item-width:                              10px !default;
+$dotnav-item-height:                             $dotnav-item-width !default;
+$dotnav-item-border-radius:                      50% !default;
+
+$dotnav-item-background:                         rgba($global-color, 0.2) !default;
+$dotnav-item-hover-background:                   rgba($global-color, 0.6) !default;
+$dotnav-item-onclick-background:                 rgba($global-color, 0.2) !default;
+$dotnav-item-active-background:                  rgba($global-color, 0.6) !default;
+
+
+/* ========================================================================
+   Component: Dotnav
+ ========================================================================== */
+
+/*
+ * 1. Allow items to wrap into the next line
+ * 2. Reset list
+ * 3. Gutter
+ */
+
+.uk-dotnav {
+    display: flex;
+    /* 1 */
+    flex-wrap: wrap;
+    /* 2 */
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    /* 3 */
+    margin-left: (-$dotnav-margin-horizontal);
+    @if(mixin-exists(hook-dotnav)) {@include hook-dotnav();}
+}
+
+/*
+ * 1. Space is allocated solely based on content dimensions: 0 0 auto
+ * 2. Gutter
+ */
+
+.uk-dotnav > * {
+    /* 1 */
+    flex: none;
+    /* 2 */
+    padding-left: $dotnav-margin-horizontal;
+}
+
+
+/* Items
+ ========================================================================== */
+
+/*
+ * Items
+ * 1. Hide text if present
+ */
+
+.uk-dotnav > * > * {
+    display: block;
+    box-sizing: border-box;
+    width: $dotnav-item-width;
+    height: $dotnav-item-height;
+    border-radius: $dotnav-item-border-radius;
+    background: $dotnav-item-background;
+    /* 1 */
+    text-indent: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    @if(mixin-exists(hook-dotnav-item)) {@include hook-dotnav-item();}
+}
+
+/* Hover + Focus */
+.uk-dotnav > * > :hover,
+.uk-dotnav > * > :focus {
+    background-color: $dotnav-item-hover-background;
+    outline: none;
+    @if(mixin-exists(hook-dotnav-item-hover)) {@include hook-dotnav-item-hover();}
+}
+
+/* OnClick */
+.uk-dotnav > * > :active {
+    background-color: $dotnav-item-onclick-background;
+    @if(mixin-exists(hook-dotnav-item-onclick)) {@include hook-dotnav-item-onclick();}
+}
+
+/* Active */
+.uk-dotnav > .uk-active > * {
+    background-color: $dotnav-item-active-background;
+    @if(mixin-exists(hook-dotnav-item-active)) {@include hook-dotnav-item-active();}
+}
+
+
+/* Modifier: 'uk-dotnav-vertical'
+ ========================================================================== */
+
+/*
+ * 1. Change direction
+ * 2. Gutter
+ */
+
+.uk-dotnav-vertical {
+    /* 1 */
+    flex-direction: column;
+    /* 2 */
+    margin-left: 0;
+    margin-top: (-$dotnav-margin-vertical);
+}
+
+/* 2 */
+.uk-dotnav-vertical > * {
+    padding-left: 0;
+    padding-top: $dotnav-margin-vertical;
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-dotnav-misc)) {@include hook-dotnav-misc();}
+
+// @mixin hook-dotnav(){}
+// @mixin hook-dotnav-item(){}
+// @mixin hook-dotnav-item-hover(){}
+// @mixin hook-dotnav-item-onclick(){}
+// @mixin hook-dotnav-item-active(){}
+// @mixin hook-dotnav-misc(){}
+
+
+// Inverse
+// ========================================================================
+
+$inverse-dotnav-item-background:                rgba($inverse-global-color, 0.5) !default;
+$inverse-dotnav-item-hover-background:          rgba($inverse-global-color, 0.9) !default;
+$inverse-dotnav-item-onclick-background:        rgba($inverse-global-color, 0.5) !default;
+$inverse-dotnav-item-active-background:         rgba($inverse-global-color, 0.9) !default;
+
+
+
+// @mixin hook-inverse-dotnav-item(){}
+// @mixin hook-inverse-dotnav-item-hover(){}
+// @mixin hook-inverse-dotnav-item-onclick(){}
+// @mixin hook-inverse-dotnav-item-active(){}
--- a/_sass/uikit/components/drop.scss
+++ b/_sass/uikit/components/drop.scss
@ -0,0 +1,74 @@
+// Name:            Drop
+// Description:     Component to position any element next to any other element.
+//
+// Component:       `uk-drop`
+//
+// Modifiers:       `uk-drop-top-*`
+//                  `uk-drop-bottom-*`
+//                  `uk-drop-left-*`
+//                  `uk-drop-right-*`
+//                  `uk-drop-stack`
+//                  `uk-drop-grid`
+//
+// States:          `uk-open`
+//
+// Uses:            Animation
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$drop-z-index:                               $global-z-index + 20 !default;
+$drop-width:                                 300px !default;
+$drop-margin:                                $global-margin !default;
+
+
+/* ========================================================================
+   Component: Drop
+ ========================================================================== */
+
+/*
+ * 1. Hide by default
+ * 2. Set position
+ * 3. Set a default width
+ */
+
+.uk-drop {
+    /* 1 */
+    display: none;
+    /* 2 */
+    position: absolute;
+    z-index: $drop-z-index;
+    /* 3 */
+    box-sizing: border-box;
+    width: $drop-width;
+}
+
+/* Show */
+.uk-drop.uk-open { display: block; }
+
+
+/* Direction / Alignment modifiers
+ ========================================================================== */
+
+/* Direction */
+[class*='uk-drop-top'] { margin-top: (-$drop-margin); }
+[class*='uk-drop-bottom'] { margin-top: $drop-margin; }
+[class*='uk-drop-left'] { margin-left: (-$drop-margin); }
+[class*='uk-drop-right'] { margin-left: $drop-margin; }
+
+
+/* Grid modifiers
+ ========================================================================== */
+
+.uk-drop-stack .uk-drop-grid > * { width: 100% !important; }
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-drop-misc)) {@include hook-drop-misc();}
+
+// @mixin hook-drop-misc(){}
--- a/_sass/uikit/components/dropdown.scss
+++ b/_sass/uikit/components/dropdown.scss
@ -0,0 +1,150 @@
+// Name:            Dropdown
+// Description:     Component to create dropdown menus
+//
+// Component:       `uk-dropdown`
+//
+// Adopted:         `uk-dropdown-nav`
+//
+// Modifiers:       `uk-dropdown-top-*`
+//                  `uk-dropdown-bottom-*`
+//                  `uk-dropdown-left-*`
+//                  `uk-dropdown-right-*`
+//                  `uk-dropdown-stack`
+//                  `uk-dropdown-grid`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$dropdown-z-index:                               $global-z-index + 20 !default;
+$dropdown-min-width:                             200px !default;
+$dropdown-padding:                               15px !default;
+$dropdown-background:                            $global-muted-background !default;
+$dropdown-color:                                 $global-color !default;
+$dropdown-margin:                                $global-small-margin !default;
+
+$dropdown-nav-item-color:                        $global-muted-color !default;
+$dropdown-nav-item-hover-color:                  $global-color !default;
+$dropdown-nav-header-color:                      $global-emphasis-color !default;
+$dropdown-nav-divider-border-width:              $global-border-width !default;
+$dropdown-nav-divider-border:                    $global-border !default;
+$dropdown-nav-sublist-item-color:                $global-muted-color !default;
+$dropdown-nav-sublist-item-hover-color:          $global-color !default;
+
+
+/* ========================================================================
+   Component: Dropdown
+ ========================================================================== */
+
+/*
+ * 1. Hide by default
+ * 2. Set position
+ * 3. Set a default width
+ * 4. Style
+ */
+
+.uk-dropdown {
+    /* 1 */
+    display: none;
+    /* 2 */
+    position: absolute;
+    z-index: $dropdown-z-index;
+    /* 3 */
+    box-sizing: border-box;
+    min-width: $dropdown-min-width;
+    /* 4 */
+    padding: $dropdown-padding;
+    background: $dropdown-background;
+    color: $dropdown-color;
+    @if(mixin-exists(hook-dropdown)) {@include hook-dropdown();}
+}
+
+/* Show */
+.uk-dropdown.uk-open { display: block; }
+
+
+/* Nav
+ * Adopts `uk-nav`
+ ========================================================================== */
+
+.uk-dropdown-nav {
+    white-space: nowrap;
+    @if(mixin-exists(hook-dropdown-nav)) {@include hook-dropdown-nav();}
+}
+
+/*
+ * Items
+ */
+
+.uk-dropdown-nav > li > a {
+    color: $dropdown-nav-item-color;
+    @if(mixin-exists(hook-dropdown-nav-item)) {@include hook-dropdown-nav-item();}
+}
+
+/* Hover + Focus + Active */
+.uk-dropdown-nav > li > a:hover,
+.uk-dropdown-nav > li > a:focus,
+.uk-dropdown-nav > li.uk-active > a {
+    color: $dropdown-nav-item-hover-color;
+    @if(mixin-exists(hook-dropdown-nav-item-hover)) {@include hook-dropdown-nav-item-hover();}
+}
+
+/*
+ * Header
+ */
+
+.uk-dropdown-nav .uk-nav-header {
+    color: $dropdown-nav-header-color;
+    @if(mixin-exists(hook-dropdown-nav-header)) {@include hook-dropdown-nav-header();}
+}
+
+/*
+ * Divider
+ */
+
+.uk-dropdown-nav .uk-nav-divider {
+    border-top: $dropdown-nav-divider-border-width solid $dropdown-nav-divider-border;
+    @if(mixin-exists(hook-dropdown-nav-divider)) {@include hook-dropdown-nav-divider();}
+}
+
+/*
+ * Sublists
+ */
+
+.uk-dropdown-nav .uk-nav-sub a { color: $dropdown-nav-sublist-item-color; }
+
+.uk-dropdown-nav .uk-nav-sub a:hover,
+.uk-dropdown-nav .uk-nav-sub a:focus { color: $dropdown-nav-sublist-item-hover-color; }
+
+
+/* Direction / Alignment modifiers
+ ========================================================================== */
+
+/* Direction */
+[class*='uk-dropdown-top'] { margin-top: (-$dropdown-margin); }
+[class*='uk-dropdown-bottom'] { margin-top: $dropdown-margin; }
+[class*='uk-dropdown-left'] { margin-left: (-$dropdown-margin); }
+[class*='uk-dropdown-right'] { margin-left: $dropdown-margin; }
+
+
+/* Grid modifiers
+ ========================================================================== */
+
+.uk-dropdown-stack .uk-dropdown-grid > * { width: 100% !important; }
+
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-dropdown-misc)) {@include hook-dropdown-misc();}
+
+// @mixin hook-dropdown(){}
+// @mixin hook-dropdown-nav(){}
+// @mixin hook-dropdown-nav-item(){}
+// @mixin hook-dropdown-nav-item-hover(){}
+// @mixin hook-dropdown-nav-header(){}
+// @mixin hook-dropdown-nav-divider(){}
+// @mixin hook-dropdown-misc(){}
--- a/_sass/uikit/components/flex.scss
+++ b/_sass/uikit/components/flex.scss
@ -0,0 +1,209 @@
+// Name:            Flex
+// Description:     Utilities for layouts based on flexbox
+//
+// Component:       `uk-flex-*`
+//
+// ========================================================================
+
+
+/* ========================================================================
+   Component: Flex
+ ========================================================================== */
+
+.uk-flex { display: flex; }
+.uk-flex-inline { display: inline-flex; }
+
+/*
+ * Remove pseudo elements created by micro clearfix as precaution
+ */
+
+.uk-flex::before,
+.uk-flex::after,
+.uk-flex-inline::before,
+.uk-flex-inline::after { display: none; }
+
+
+/* Alignment
+ ========================================================================== */
+
+/*
+ * Align items along the main axis of the current line of the flex container
+ * Row: Horizontal
+ */
+
+// Default
+.uk-flex-left { justify-content: flex-start; }
+.uk-flex-center { justify-content: center; }
+.uk-flex-right { justify-content: flex-end; }
+.uk-flex-between { justify-content: space-between; }
+.uk-flex-around { justify-content: space-around; }
+
+
+/* Phone landscape and bigger */
+@media (min-width: $breakpoint-small) {
+
+    .uk-flex-left\@s { justify-content: flex-start; }
+    .uk-flex-center\@s { justify-content: center; }
+    .uk-flex-right\@s { justify-content: flex-end; }
+    .uk-flex-between\@s { justify-content: space-between; }
+    .uk-flex-around\@s { justify-content: space-around; }
+
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    .uk-flex-left\@m { justify-content: flex-start; }
+    .uk-flex-center\@m { justify-content: center; }
+    .uk-flex-right\@m { justify-content: flex-end; }
+    .uk-flex-between\@m { justify-content: space-between; }
+    .uk-flex-around\@m { justify-content: space-around; }
+
+}
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+
+    .uk-flex-left\@l { justify-content: flex-start; }
+    .uk-flex-center\@l { justify-content: center; }
+    .uk-flex-right\@l { justify-content: flex-end; }
+    .uk-flex-between\@l { justify-content: space-between; }
+    .uk-flex-around\@l { justify-content: space-around; }
+
+}
+
+/* Large screen and bigger */
+@media (min-width: $breakpoint-xlarge) {
+
+    .uk-flex-left\@xl { justify-content: flex-start; }
+    .uk-flex-center\@xl { justify-content: center; }
+    .uk-flex-right\@xl { justify-content: flex-end; }
+    .uk-flex-between\@xl { justify-content: space-between; }
+    .uk-flex-around\@xl { justify-content: space-around; }
+
+}
+
+/*
+ * Align items in the cross axis of the current line of the flex container
+ * Row: Vertical
+ */
+
+// Default
+.uk-flex-stretch { align-items: stretch; }
+.uk-flex-top { align-items: flex-start; }
+.uk-flex-middle { align-items: center; }
+.uk-flex-bottom { align-items: flex-end; }
+
+
+/* Direction
+ ========================================================================== */
+
+// Default
+.uk-flex-row { flex-direction: row; }
+.uk-flex-row-reverse { flex-direction: row-reverse; }
+.uk-flex-column { flex-direction: column; }
+.uk-flex-column-reverse { flex-direction: column-reverse; }
+
+
+/* Wrap
+ ========================================================================== */
+
+// Default
+.uk-flex-nowrap { flex-wrap: nowrap; }
+.uk-flex-wrap { flex-wrap: wrap; }
+.uk-flex-wrap-reverse { flex-wrap: wrap-reverse; }
+
+/*
+ * Aligns items within the flex container when there is extra space in the cross-axis
+ * Only works if there is more than one line of flex items
+ */
+
+// Default
+.uk-flex-wrap-stretch { align-content: stretch; }
+.uk-flex-wrap-top { align-content: flex-start; }
+.uk-flex-wrap-middle { align-content: center; }
+.uk-flex-wrap-bottom { align-content: flex-end; }
+.uk-flex-wrap-between { align-content: space-between; }
+.uk-flex-wrap-around { align-content: space-around; }
+
+
+/* Item ordering
+ ========================================================================== */
+
+/*
+ * Default is 0
+ */
+
+.uk-flex-first { order: -1;}
+.uk-flex-last { order: 99;}
+
+
+/* Phone landscape and bigger */
+@media (min-width: $breakpoint-small) {
+
+    .uk-flex-first\@s { order: -1; }
+    .uk-flex-last\@s { order: 99; }
+
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    .uk-flex-first\@m { order: -1; }
+    .uk-flex-last\@m { order: 99; }
+
+}
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+
+    .uk-flex-first\@l { order: -1; }
+    .uk-flex-last\@l { order: 99; }
+
+}
+
+/* Large screen and bigger */
+@media (min-width: $breakpoint-xlarge) {
+
+    .uk-flex-first\@xl { order: -1; }
+    .uk-flex-last\@xl { order: 99; }
+
+}
+
+
+/* Item dimensions
+ ========================================================================== */
+
+/*
+ * Initial: 0 1 auto
+ * Content dimensions, but shrinks
+ */
+
+/*
+ * No Flex: 0 0 auto
+ * Content dimensions
+ */
+
+.uk-flex-none { flex: none; }
+
+/*
+ * Relative Flex: 1 1 auto
+ * Space is allocated considering content
+ */
+
+.uk-flex-auto { flex: auto; }
+
+/*
+ * Absolute Flex: 1 1 0%
+ * Space is allocated solely based on flex
+ */
+
+.uk-flex-1 { flex: 1; }
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-flex-misc)) {@include hook-flex-misc();}
+
+// @mixin hook-flex-misc(){}
--- a/_sass/uikit/components/form-range.scss
+++ b/_sass/uikit/components/form-range.scss
@ -0,0 +1,185 @@
+// Name:            Form Range
+// Description:     Styles for the range input type
+//
+// Component:       `uk-range`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$form-range-thumb-height:                        15px !default;
+$form-range-thumb-border-radius:                 500px !default;
+$form-range-thumb-background:                    $global-color !default;
+
+$form-range-track-height:                        3px !default;
+$form-range-track-background:                    darken($global-muted-background, 5%) !default;
+$form-range-track-focus-background:              darken($global-muted-background, 15%) !default;
+
+
+/* ========================================================================
+   Component: Form Range
+ ========================================================================== */
+
+/*
+ * 1. Normalize and defaults
+ * 2. Prevent content overflow if a fixed width is used
+ * 3. Take the full width
+ * 4. Remove default style
+ * 5. Remove white background in Chrome
+ * 6. Remove padding in IE11
+ */
+
+.uk-range {
+    /* 1 */
+    box-sizing: border-box;
+    margin: 0;
+    vertical-align: middle;
+    /* 2 */
+    max-width: 100%;
+    /* 3 */
+    width: 100%;
+    /* 4 */
+    -webkit-appearance: none;
+    /* 5 */
+    background: transparent;
+    /* 6 */
+    padding: 0;
+    @if(mixin-exists(hook-form-range)) {@include hook-form-range();}
+}
+
+/* Focus */
+.uk-range:focus { outline: none; }
+.uk-range::-moz-focus-outer { border: none; }
+
+/* IE11 Reset */
+.uk-range::-ms-track {
+    height: $form-range-thumb-height;
+    background: transparent;
+    border-color: transparent;
+    color: transparent;
+}
+
+/*
+ * Improves consistency of cursor style for clickable elements
+ */
+
+.uk-range:not(:disabled)::-webkit-slider-thumb { cursor: pointer; }
+.uk-range:not(:disabled)::-moz-range-thumb { cursor: pointer; }
+.uk-range:not(:disabled)::-ms-thumb { cursor: pointer; }
+
+
+/* Thumb
+ ========================================================================== */
+
+/*
+ * 1. Reset
+ * 2. Style
+ */
+
+/* Webkit */
+.uk-range::-webkit-slider-thumb {
+    /* 1 */
+    -webkit-appearance: none;
+    margin-top: (floor($form-range-thumb-height / 2) * -1);
+    /* 2 */
+    height: $form-range-thumb-height;
+    width: $form-range-thumb-height;
+    border-radius: $form-range-thumb-border-radius;
+    background: $form-range-thumb-background;
+    @if(mixin-exists(hook-form-range-thumb)) {@include hook-form-range-thumb();}
+}
+
+/* Firefox */
+.uk-range::-moz-range-thumb {
+    /* 1 */
+    border: none;
+    /* 2 */
+    height: $form-range-thumb-height;
+    width: $form-range-thumb-height;
+    border-radius: $form-range-thumb-border-radius;
+    background: $form-range-thumb-background;
+    @if(mixin-exists(hook-form-range-thumb)) {@include hook-form-range-thumb();}
+}
+
+/* Edge */
+.uk-range::-ms-thumb {
+    /* 1 */
+    margin-top: 0;
+}
+
+/* IE11 */
+.uk-range::-ms-thumb {
+    /* 1 */
+    border: none;
+    /* 2 */
+    height: $form-range-thumb-height;
+    width: $form-range-thumb-height;
+    border-radius: $form-range-thumb-border-radius;
+    background: $form-range-thumb-background;
+    @if(mixin-exists(hook-form-range-thumb)) {@include hook-form-range-thumb();}
+}
+
+/* Edge + IE11 */
+.uk-range::-ms-tooltip { display: none; }
+
+
+/* Track
+ ========================================================================== */
+
+/*
+ * 1. Safari doesn't have a focus state. Using active instead.
+ */
+
+/* Webkit */
+.uk-range::-webkit-slider-runnable-track {
+    height: $form-range-track-height;
+    background: $form-range-track-background;
+    @if(mixin-exists(hook-form-range-track)) {@include hook-form-range-track();}
+}
+
+.uk-range:focus::-webkit-slider-runnable-track,
+/* 1 */
+.uk-range:active::-webkit-slider-runnable-track {
+    background: $form-range-track-focus-background;
+    @if(mixin-exists(hook-form-range-track-focus)) {@include hook-form-range-track-focus();}
+}
+
+/* Firefox */
+.uk-range::-moz-range-track {
+    height: $form-range-track-height;
+    background: $form-range-track-background;
+    @if(mixin-exists(hook-form-range-track)) {@include hook-form-range-track();}
+}
+
+.uk-range:focus::-moz-range-track {
+    background: $form-range-track-focus-background;
+    @if(mixin-exists(hook-form-range-track-focus)) {@include hook-form-range-track-focus();}
+}
+
+/* Edge */
+.uk-range::-ms-fill-lower,
+.uk-range::-ms-fill-upper {
+    height: $form-range-track-height;
+    background: $form-range-track-background;
+    @if(mixin-exists(hook-form-range-track)) {@include hook-form-range-track();}
+}
+
+.uk-range:focus::-ms-fill-lower,
+.uk-range:focus::-ms-fill-upper {
+    background: $form-range-track-focus-background;
+    @if(mixin-exists(hook-form-range-track-focus)) {@include hook-form-range-track-focus();}
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-form-range-misc)) {@include hook-form-range-misc();}
+
+// @mixin hook-form-range(){}
+// @mixin hook-form-range-thumb(){}
+// @mixin hook-form-range-track(){}
+// @mixin hook-form-range-track-focus(){}
+// @mixin hook-form-range-misc(){}
--- a/_sass/uikit/components/form.scss
+++ b/_sass/uikit/components/form.scss
@ -0,0 +1,756 @@
+// Name:            Form
+// Description:     Styles for forms
+//
+// Component:       `uk-form-*`
+//                  `uk-input`
+//                  `uk-select`
+//                  `uk-textarea`
+//                  `uk-radio`
+//                  `uk-checkbox`
+//                  `uk-legend`
+//                  `uk-fieldset`
+//
+// Sub-objects:     `uk-form-custom`
+//                  `uk-form-stacked`
+//                  `uk-form-horizontal`
+//                  `uk-form-label`
+//                  `uk-form-controls`
+//                  `uk-form-icon`
+//                  `uk-form-icon-flip`
+//
+// Modifiers:       `uk-form-small`
+//                  `uk-form-large`
+//                  `uk-form-danger`
+//                  `uk-form-success`
+//                  `uk-form-blank`
+//                  `uk-form-width-xsmall`
+//                  `uk-form-width-small`
+//                  `uk-form-width-medium`
+//                  `uk-form-width-large`
+//                  `uk-form-controls-text`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$form-height:                                    $global-control-height !default;
+$form-line-height:                               $form-height !default;
+$form-padding-horizontal:                        10px !default;
+$form-padding-vertical:                          4px !default;
+
+$form-background:                                $global-muted-background !default;
+$form-color:                                     $global-color !default;
+
+$form-focus-background:                          $global-muted-background !default;
+$form-focus-color:                               $global-color !default;
+
+$form-disabled-background:                       $global-muted-background !default;
+$form-disabled-color:                            $global-muted-color !default;
+
+$form-placeholder-color:                         $global-muted-color !default;
+
+$form-small-height:                              $global-control-small-height !default;
+$form-small-padding-horizontal:                  8px !default;
+$form-small-line-height:                         $form-small-height !default;
+$form-small-font-size:                           $global-small-font-size !default;
+
+$form-large-height:                              $global-control-large-height !default;
+$form-large-padding-horizontal:                  12px !default;
+$form-large-line-height:                         $form-large-height !default;
+$form-large-font-size:                           $global-medium-font-size !default;
+
+$form-danger-color:                              $global-danger-background !default;
+$form-success-color:                             $global-success-background !default;
+
+$form-width-xsmall:                              50px !default;
+$form-width-small:                               130px !default;
+$form-width-medium:                              200px !default;
+$form-width-large:                               500px !default;
+
+$form-select-padding-right:                      20px !default;
+$form-select-icon-color:                         $global-color !default;
+$form-select-disabled-icon-color:                $global-muted-color !default;
+
+$form-radio-size:                                16px !default;
+$form-radio-margin-top:                          -4px !default;
+$form-radio-background:                          darken($global-muted-background, 5%) !default;
+
+$form-radio-checked-background:                  $global-primary-background !default;
+$form-radio-checked-icon-color:                  $global-inverse-color !default;
+
+$form-radio-checked-focus-background:            darken($global-primary-background, 10%) !default;
+
+$form-radio-disabled-background:                 $global-muted-background !default;
+$form-radio-disabled-icon-color:                 $global-muted-color !default;
+
+$form-legend-font-size:                          $global-large-font-size !default;
+$form-legend-line-height:                        1.4 !default;
+
+$form-stacked-margin-bottom:                     $global-small-margin !default;
+
+$form-horizontal-label-width:                    200px !default;
+$form-horizontal-label-margin-top:               7px !default;
+$form-horizontal-controls-margin-left:           215px !default;
+$form-horizontal-controls-text-padding-top:      7px !default;
+
+$form-icon-width:                                $form-height !default;
+$form-icon-font-size:                            $global-font-size !default;
+$form-icon-color:                                $global-muted-color !default;
+$form-icon-hover-color:                          $global-color !default;
+
+$internal-form-select-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22#000%22%20points%3D%2212%201%209%206%2015%206%22%20%2F%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22#000%22%20points%3D%2212%2013%209%208%2015%208%22%20%2F%3E%0A%3C%2Fsvg%3E%0A" !default;
+$internal-form-radio-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22#000%22%20cx%3D%228%22%20cy%3D%228%22%20r%3D%222%22%20%2F%3E%0A%3C%2Fsvg%3E" !default;
+$internal-form-checkbox-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2211%22%20viewBox%3D%220%200%2014%2011%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22#000%22%20points%3D%2212%201%205%207.5%202%205%201%205.5%205%2010%2013%201.5%22%20%2F%3E%0A%3C%2Fsvg%3E%0A" !default;
+$internal-form-checkbox-indeterminate-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22#000%22%20x%3D%223%22%20y%3D%228%22%20width%3D%2210%22%20height%3D%221%22%20%2F%3E%0A%3C%2Fsvg%3E" !default;
+
+
+/* ========================================================================
+   Component: Form
+ ========================================================================== */
+
+/*
+ * 1. Define consistent box sizing.
+ *    Default is `content-box` with following exceptions set to `border-box`
+ *    `select`, `input[type="checkbox"]` and `input[type="radio"]`
+ *    `input[type="search"]` in Chrome, Safari and Opera
+ *    `input[type="color"]` in Firefox
+ * 2. Address margins set differently in Firefox/IE and Chrome/Safari/Opera.
+ * 3. Remove `border-radius` in iOS.
+ * 4. Change font properties to `inherit` in all browsers.
+ */
+
+.uk-input,
+.uk-select,
+.uk-textarea,
+.uk-radio,
+.uk-checkbox {
+    /* 1 */
+    box-sizing: border-box;
+    /* 2 */
+    margin: 0;
+    /* 3 */
+    border-radius: 0;
+    /* 4 */
+    font: inherit;
+}
+
+/*
+ * Show the overflow in Edge.
+ */
+
+.uk-input { overflow: visible; }
+
+/*
+ * Remove the inheritance of text transform in Firefox.
+ */
+
+.uk-select { text-transform: none; }
+
+/*
+ * 1. Change font properties to `inherit` in all browsers
+ * 2. Don't inherit the `font-weight` and use `bold` instead.
+ * NOTE: Both declarations don't work in Chrome, Safari and Opera.
+ */
+
+.uk-select optgroup {
+    /* 1 */
+    font: inherit;
+    /* 2 */
+    font-weight: bold;
+}
+
+/*
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+.uk-textarea { overflow: auto; }
+
+/*
+ * Remove the inner padding and cancel buttons in Chrome on OS X and Safari on OS X.
+ */
+
+.uk-input[type="search"]::-webkit-search-cancel-button,
+.uk-input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
+
+
+/*
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+.uk-input[type="number"]::-webkit-inner-spin-button,
+.uk-input[type="number"]::-webkit-outer-spin-button { height: auto; }
+
+/*
+ * Removes placeholder transparency in Firefox.
+ */
+
+.uk-input::-moz-placeholder,
+.uk-textarea::-moz-placeholder { opacity: 1; }
+
+/*
+ * Improves consistency of cursor style for clickable elements
+ */
+
+.uk-radio:not(:disabled),
+.uk-checkbox:not(:disabled) { cursor: pointer; }
+
+/*
+ * Define consistent border, margin, and padding.
+ */
+
+.uk-fieldset {
+    border: none;
+    margin: 0;
+    padding: 0;
+}
+
+
+/* Input, select and textarea
+ * Allowed: `text`, `password`, `datetime`, `datetime-local`, `date`,  `month`,
+            `time`, `week`, `number`, `email`, `url`, `search`, `tel`, `color`
+ * Disallowed: `range`, `radio`, `checkbox`, `file`, `submit`, `reset` and `image`
+ ========================================================================== */
+
+/*
+ * Remove default style in iOS.
+ */
+
+.uk-input,
+.uk-textarea { -webkit-appearance: none; }
+
+/*
+ * 1. Prevent content overflow if a fixed width is used
+ * 2. Take the full width
+ * 3. Reset default
+ * 4. Style
+ */
+
+.uk-input,
+.uk-select,
+.uk-textarea {
+    /* 1 */
+    max-width: 100%;
+    /* 2 */
+    width: 100%;
+    /* 3 */
+    border: 0 none;
+    /* 4 */
+    padding: 0 $form-padding-horizontal;
+    background: $form-background;
+    color: $form-color;
+    @if(mixin-exists(hook-form)) {@include hook-form();}
+}
+
+/*
+ * Single-line
+ * 1. Allow any element to look like an `input` or `select` element
+ * 2. Make sure line-height is not larger than height
+ *    Also needed to center the text vertically
+ */
+
+.uk-input,
+.uk-select:not([multiple]):not([size]) {
+    height: $form-height;
+    vertical-align: middle;
+    /* 1 */
+    display: inline-block;
+    @if(mixin-exists(hook-form-single-line)) {@include hook-form-single-line();}
+}
+
+/* 2 */
+.uk-input:not(input),
+.uk-select:not(select) { line-height: $form-line-height; }
+
+/*
+ * Multi-line
+ */
+
+.uk-select[multiple],
+.uk-select[size],
+.uk-textarea {
+    padding-top: $form-padding-vertical;
+    padding-bottom: $form-padding-vertical;
+    vertical-align: top;
+    @if(mixin-exists(hook-form-multi-line)) {@include hook-form-multi-line();}
+}
+
+/* Focus */
+.uk-input:focus,
+.uk-select:focus,
+.uk-textarea:focus {
+    outline: none;
+    background-color: $form-focus-background;
+    color: $form-focus-color;
+    @if(mixin-exists(hook-form-focus)) {@include hook-form-focus();}
+}
+
+/* Disabled */
+.uk-input:disabled,
+.uk-select:disabled,
+.uk-textarea:disabled {
+    background-color: $form-disabled-background;
+    color: $form-disabled-color;
+    @if(mixin-exists(hook-form-disabled)) {@include hook-form-disabled();}
+}
+
+/*
+ * Placeholder
+ */
+
+.uk-input:-ms-input-placeholder { color: $form-placeholder-color !important; }
+.uk-input::placeholder { color: $form-placeholder-color; }
+
+.uk-textarea:-ms-input-placeholder { color: $form-placeholder-color !important; }
+.uk-textarea::placeholder { color: $form-placeholder-color; }
+
+
+/* Style modifier (`uk-input`, `uk-select` and `uk-textarea`)
+ ========================================================================== */
+
+/*
+ * Small
+ */
+
+.uk-form-small { font-size: $form-small-font-size; }
+
+.uk-form-small:not(textarea):not([multiple]):not([size]) {
+    height: $form-small-height;
+    padding-left: $form-small-padding-horizontal;
+    padding-right: $form-small-padding-horizontal;
+}
+
+.uk-form-small:not(select):not(input):not(textarea) { line-height: $form-small-line-height; }
+
+/*
+ * Large
+ */
+
+.uk-form-large { font-size: $form-large-font-size; }
+
+.uk-form-large:not(textarea):not([multiple]):not([size]) {
+    height: $form-large-height;
+    padding-left: $form-large-padding-horizontal;
+    padding-right: $form-large-padding-horizontal;
+}
+
+.uk-form-large:not(select):not(input):not(textarea) { line-height: $form-large-line-height; }
+
+
+/* Style modifier (`uk-input`, `uk-select` and `uk-textarea`)
+ ========================================================================== */
+
+/*
+ * Error
+ */
+
+.uk-form-danger,
+.uk-form-danger:focus {
+    color: $form-danger-color;
+    @if(mixin-exists(hook-form-danger)) {@include hook-form-danger();}
+}
+
+/*
+ * Success
+ */
+
+.uk-form-success,
+.uk-form-success:focus  {
+    color: $form-success-color;
+    @if(mixin-exists(hook-form-success)) {@include hook-form-success();}
+}
+
+/*
+ * Blank
+ */
+
+.uk-form-blank {
+    background: none;
+    @if(mixin-exists(hook-form-blank)) {@include hook-form-blank();}
+}
+
+.uk-form-blank:focus {
+    @if(mixin-exists(hook-form-blank-focus)) {@include hook-form-blank-focus();}
+}
+
+
+/* Width modifiers (`uk-input`, `uk-select` and `uk-textarea`)
+ ========================================================================== */
+
+/*
+ * Fixed widths
+ * Different widths for mini sized `input` and `select` elements
+ */
+
+input.uk-form-width-xsmall { width: $form-width-xsmall; }
+
+select.uk-form-width-xsmall { width: ($form-width-xsmall + 25px); }
+
+.uk-form-width-small { width: $form-width-small; }
+
+.uk-form-width-medium { width: $form-width-medium; }
+
+.uk-form-width-large { width: $form-width-large; }
+
+
+/* Select
+ ========================================================================== */
+
+/*
+ * 1. Remove default style. Also works in Firefox
+ * 2. Style
+ * 3. Remove default style in IE 10/11
+ */
+
+.uk-select:not([multiple]):not([size]) {
+    /* 1 */
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    /* 2 */
+    padding-right: $form-select-padding-right;
+    @include svg-fill($internal-form-select-image, "#000", $form-select-icon-color);
+    background-repeat: no-repeat;
+    background-position: 100% 50%;
+}
+
+/* 3 */
+.uk-select:not([multiple]):not([size])::-ms-expand { display: none; }
+
+/*
+ * Disabled
+ */
+
+.uk-select:not([multiple]):not([size]):disabled { @include svg-fill($internal-form-select-image, "#000", $form-select-disabled-icon-color); }
+
+
+/* Radio and checkbox
+ * Note: Does not work in IE11
+ ========================================================================== */
+
+/*
+ * 1. Style
+ * 2. Make box more robust so it clips the child element
+ * 3. Vertical alignment
+ * 4. Remove default style
+ * 5. Fix black background on iOS
+ * 6. Center icons
+ */
+
+.uk-radio,
+.uk-checkbox {
+    /* 1 */
+    display: inline-block;
+    height: $form-radio-size;
+    width: $form-radio-size;
+    /* 2 */
+    overflow: hidden;
+    /* 3 */
+    margin-top: $form-radio-margin-top;
+    vertical-align: middle;
+    /* 4 */
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    /* 5 */
+    background-color: $form-radio-background;
+    /* 6 */
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+    @if(mixin-exists(hook-form-radio)) {@include hook-form-radio();}
+}
+
+.uk-radio { border-radius: 50%; }
+
+/* Focus */
+.uk-radio:focus,
+.uk-checkbox:focus {
+    outline: none;
+    @if(mixin-exists(hook-form-radio-focus)) {@include hook-form-radio-focus();}
+}
+
+/*
+ * Checked
+ */
+
+.uk-radio:checked,
+.uk-checkbox:checked,
+.uk-checkbox:indeterminate {
+    background-color: $form-radio-checked-background;
+    @if(mixin-exists(hook-form-radio-checked)) {@include hook-form-radio-checked();}
+}
+
+/* Focus */
+.uk-radio:checked:focus,
+.uk-checkbox:checked:focus,
+.uk-checkbox:indeterminate:focus {
+    background-color: $form-radio-checked-focus-background;
+    @if(mixin-exists(hook-form-radio-checked-focus)) {@include hook-form-radio-checked-focus();}
+}
+
+/*
+ * Icons
+ */
+
+.uk-radio:checked { @include svg-fill($internal-form-radio-image, "#000", $form-radio-checked-icon-color); }
+.uk-checkbox:checked { @include svg-fill($internal-form-checkbox-image, "#000", $form-radio-checked-icon-color); }
+.uk-checkbox:indeterminate { @include svg-fill($internal-form-checkbox-indeterminate-image, "#000", $form-radio-checked-icon-color); }
+
+/*
+ * Disabled
+ */
+
+.uk-radio:disabled,
+.uk-checkbox:disabled {
+    background-color: $form-radio-disabled-background;
+    @if(mixin-exists(hook-form-radio-disabled)) {@include hook-form-radio-disabled();}
+}
+
+.uk-radio:disabled:checked { @include svg-fill($internal-form-radio-image, "#000", $form-radio-disabled-icon-color); }
+.uk-checkbox:disabled:checked { @include svg-fill($internal-form-checkbox-image, "#000", $form-radio-disabled-icon-color); }
+.uk-checkbox:disabled:indeterminate { @include svg-fill($internal-form-checkbox-indeterminate-image, "#000", $form-radio-disabled-icon-color); }
+
+
+/* Legend
+ ========================================================================== */
+
+/*
+ * Legend
+ * 1. Behave like block element
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove padding so people aren't caught out if they zero out fieldsets.
+ * 4. Style
+ */
+
+.uk-legend {
+    /* 1 */
+    width: 100%;
+    /* 2 */
+    color: inherit;
+    /* 3 */
+    padding: 0;
+    /* 4 */
+    font-size: $form-legend-font-size;
+    line-height: $form-legend-line-height;
+    @if(mixin-exists(hook-form-legend)) {@include hook-form-legend();}
+}
+
+
+/* Custom controls
+ ========================================================================== */
+
+/*
+ * 1. Container fits its content
+ * 2. Create position context
+ * 3. Prevent content overflow
+ * 4. Behave like most inline-block elements
+ */
+
+.uk-form-custom {
+    /* 1 */
+    display: inline-block;
+    /* 2 */
+    position: relative;
+    /* 3 */
+    max-width: 100%;
+    /* 4 */
+    vertical-align: middle;
+}
+
+/*
+ * 1. Position and resize the form control to always cover its container
+ * 2. Required for Firefox for positioning to the left
+ * 3. Required for Webkit to make `height` work
+ * 4. Hide controle and show cursor
+ * 5. Needed for the cursor
+ * 6. Clip height caused by 5. Needed for Webkit only
+ */
+
+.uk-form-custom select,
+.uk-form-custom input[type="file"] {
+    /* 1 */
+    position: absolute;
+    top: 0;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    /* 2 */
+    left: 0;
+    /* 3 */
+    -webkit-appearance: none;
+    /* 4 */
+    opacity: 0;
+    cursor: pointer;
+}
+
+.uk-form-custom input[type="file"] {
+    /* 5 */
+    font-size: 500px;
+    /* 6 */
+    overflow: hidden;
+}
+
+
+/* Label
+ ========================================================================== */
+
+.uk-form-label {
+    @if(mixin-exists(hook-form-label)) {@include hook-form-label();}
+}
+
+
+/* Layout
+ ========================================================================== */
+
+/*
+ * Stacked
+ */
+
+.uk-form-stacked .uk-form-label {
+    display: block;
+    margin-bottom: $form-stacked-margin-bottom;
+    @if(mixin-exists(hook-form-stacked-label)) {@include hook-form-stacked-label();}
+}
+
+/*
+ * Horizontal
+ */
+
+/* Tablet portrait and smaller */
+@media (max-width: $breakpoint-small-max) {
+
+    /* Behave like `uk-form-stacked` */
+    .uk-form-horizontal .uk-form-label {
+        display: block;
+        margin-bottom: $form-stacked-margin-bottom;
+        @if(mixin-exists(hook-form-stacked-label)) {@include hook-form-stacked-label();}
+    }
+
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    .uk-form-horizontal .uk-form-label {
+        width: $form-horizontal-label-width;
+        margin-top: $form-horizontal-label-margin-top;
+        float: left;
+        @if(mixin-exists(hook-form-horizontal-label)) {@include hook-form-horizontal-label();}
+    }
+
+    .uk-form-horizontal .uk-form-controls { margin-left: $form-horizontal-controls-margin-left; }
+
+    /* Better vertical alignment if controls are checkboxes and radio buttons with text */
+    .uk-form-horizontal .uk-form-controls-text { padding-top: $form-horizontal-controls-text-padding-top; }
+
+}
+
+
+/* Icons
+ ========================================================================== */
+
+/*
+ * 1. Set position
+ * 2. Set width
+ * 3. Center icon vertically and horizontally
+ * 4. Style
+ */
+
+.uk-form-icon {
+    /* 1 */
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    /* 2 */
+    width: $form-icon-width;
+    /* 3 */
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    /* 4 */
+    color: $form-icon-color;
+}
+
+/*
+ * Required for `a`.
+ */
+
+.uk-form-icon:hover { color: $form-icon-hover-color; }
+
+/*
+ * Make `input` element clickable through icon, e.g. if it's a `span`
+ */
+
+.uk-form-icon:not(a):not(button):not(input) { pointer-events: none; }
+
+/*
+ * Input padding
+ */
+
+.uk-form-icon:not(.uk-form-icon-flip) + .uk-input { padding-left: $form-icon-width !important; }
+
+/*
+ * Position modifier
+ */
+
+.uk-form-icon-flip {
+    right: 0;
+    left: auto;
+}
+
+.uk-form-icon-flip + .uk-input { padding-right: $form-icon-width !important; }
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-form-misc)) {@include hook-form-misc();}
+
+// @mixin hook-form(){}
+// @mixin hook-form-single-line(){}
+// @mixin hook-form-multi-line(){}
+// @mixin hook-form-focus(){}
+// @mixin hook-form-disabled(){}
+// @mixin hook-form-danger(){}
+// @mixin hook-form-success(){}
+// @mixin hook-form-blank(){}
+// @mixin hook-form-blank-focus(){}
+// @mixin hook-form-radio(){}
+// @mixin hook-form-radio-focus(){}
+// @mixin hook-form-radio-checked(){}
+// @mixin hook-form-radio-checked-focus(){}
+// @mixin hook-form-radio-disabled(){}
+// @mixin hook-form-legend(){}
+// @mixin hook-form-label(){}
+// @mixin hook-form-stacked-label(){}
+// @mixin hook-form-horizontal-label(){}
+// @mixin hook-form-misc(){}
+
+
+// Inverse
+// ========================================================================
+
+$inverse-form-background:                       $inverse-global-muted-background !default;
+$inverse-form-color:                            $inverse-global-color !default;
+$inverse-form-focus-background:                 $inverse-global-muted-background !default;
+$inverse-form-focus-color:                      $inverse-global-color !default;
+$inverse-form-placeholder-color:                $inverse-global-muted-color !default;
+
+$inverse-form-select-icon-color:                $inverse-global-color !default;
+
+$inverse-form-radio-background:                 darken($inverse-global-muted-background, 5%) !default;
+
+$inverse-form-radio-checked-background:         $inverse-global-primary-background !default;
+$inverse-form-radio-checked-icon-color:         $inverse-global-inverse-color !default;
+
+$inverse-form-radio-checked-focus-background:   darken($inverse-global-primary-background, 10%) !default;
+
+
+
+// @mixin hook-inverse-form(){}
+// @mixin hook-inverse-form-focus(){}
+// @mixin hook-inverse-form-radio(){}
+// @mixin hook-inverse-form-radio-focus(){}
+// @mixin hook-inverse-form-radio-checked(){}
+// @mixin hook-inverse-form-radio-checked-focus(){}
+// @mixin hook-inverse-form-label(){}
--- a/_sass/uikit/components/grid.scss
+++ b/_sass/uikit/components/grid.scss
@ -0,0 +1,352 @@
+// Name:            Grid
+// Description:     Component to create responsive, fluid and nestable grids
+//
+// Component:       `uk-grid`
+//
+// Modifiers:       `uk-grid-small`
+//                  `uk-grid-medium`
+//                  `uk-grid-large`
+//                  `uk-grid-collapse`
+//                  `uk-grid-divider`
+//                  `uk-grid-match`
+//                  `uk-grid-stack`
+//                  `uk-grid-margin`
+//                  `uk-grid-margin-small`
+//                  `uk-grid-margin-medium`
+//                  `uk-grid-margin-large`
+//                  `uk-grid-margin-collapse`
+//
+// Sub-modifier:    `uk-grid-item-match`
+//
+// States:          `uk-first-column`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$grid-gutter-horizontal:                         $global-gutter !default;
+$grid-gutter-vertical:                           $grid-gutter-horizontal !default;
+$grid-gutter-horizontal-l:                       $global-medium-gutter !default;
+$grid-gutter-vertical-l:                         $grid-gutter-horizontal-l !default;
+
+$grid-small-gutter-horizontal:                   $global-small-gutter !default;
+$grid-small-gutter-vertical:                     $grid-small-gutter-horizontal !default;
+
+$grid-medium-gutter-horizontal:                  $global-gutter !default;
+$grid-medium-gutter-vertical:                    $grid-medium-gutter-horizontal !default;
+
+$grid-large-gutter-horizontal:                   $global-medium-gutter !default;
+$grid-large-gutter-vertical:                     $grid-large-gutter-horizontal !default;
+$grid-large-gutter-horizontal-l:                 $global-large-gutter !default;
+$grid-large-gutter-vertical-l:                   $grid-large-gutter-horizontal-l !default;
+
+$grid-divider-border-width:                      $global-border-width !default;
+$grid-divider-border:                            $global-border !default;
+
+
+/* ========================================================================
+   Component: Grid
+ ========================================================================== */
+
+/*
+ * 1. Allow cells to wrap into the next line
+ * 2. Reset list
+ */
+
+.uk-grid {
+    display: flex;
+    /* 1 */
+    flex-wrap: wrap;
+    /* 2 */
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+/*
+ * Grid cell
+ * Note: Space is allocated solely based on content dimensions, but shrinks: 0 1 auto
+ * Reset margin for e.g. paragraphs
+ */
+
+.uk-grid > * { margin: 0; }
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-grid > * > :last-child { margin-bottom: 0; }
+
+
+/* Gutter
+ ========================================================================== */
+
+/*
+ * Default
+ */
+
+/* Horizontal */
+.uk-grid { margin-left: (-$grid-gutter-horizontal); }
+.uk-grid > * { padding-left: $grid-gutter-horizontal; }
+
+/* Vertical */
+.uk-grid + .uk-grid,
+.uk-grid > .uk-grid-margin,
+* + .uk-grid-margin { margin-top: $grid-gutter-vertical; }
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+
+    /* Horizontal */
+    .uk-grid { margin-left: (-$grid-gutter-horizontal-l); }
+    .uk-grid > * { padding-left: $grid-gutter-horizontal-l; }
+
+    /* Vertical */
+    .uk-grid + .uk-grid,
+    .uk-grid > .uk-grid-margin,
+    * + .uk-grid-margin { margin-top: $grid-gutter-vertical-l; }
+
+}
+
+/*
+ * Small
+ */
+
+/* Horizontal */
+.uk-grid-small { margin-left: (-$grid-small-gutter-horizontal); }
+.uk-grid-small > * { padding-left: $grid-small-gutter-horizontal; }
+
+/* Vertical */
+.uk-grid + .uk-grid-small,
+.uk-grid-small > .uk-grid-margin,
+* + .uk-grid-margin-small { margin-top: $grid-small-gutter-vertical; }
+
+/*
+ * Medium
+ */
+
+/* Horizontal */
+.uk-grid-medium { margin-left: (-$grid-medium-gutter-horizontal); }
+.uk-grid-medium > * { padding-left: $grid-medium-gutter-horizontal; }
+
+/* Vertical */
+.uk-grid + .uk-grid-medium,
+.uk-grid-medium > .uk-grid-margin,
+* + .uk-grid-margin-medium { margin-top: $grid-medium-gutter-vertical; }
+
+/*
+ * Large
+ */
+
+/* Horizontal */
+.uk-grid-large { margin-left: (-$grid-large-gutter-horizontal); }
+.uk-grid-large > * { padding-left: $grid-large-gutter-horizontal; }
+
+/* Vertical */
+.uk-grid + .uk-grid-large,
+.uk-grid-large > .uk-grid-margin,
+* + .uk-grid-margin-large { margin-top: $grid-large-gutter-vertical; }
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+
+    /* Horizontal */
+    .uk-grid-large { margin-left: (-$grid-large-gutter-horizontal-l); }
+    .uk-grid-large > * { padding-left: $grid-large-gutter-horizontal-l; }
+
+    /* Vertical */
+    .uk-grid + .uk-grid-large,
+    .uk-grid-large > .uk-grid-margin,
+    * + .uk-grid-margin-large { margin-top: $grid-large-gutter-vertical-l; }
+
+}
+
+/*
+ * Collapse
+ */
+
+/* Horizontal */
+.uk-grid-collapse { margin-left: 0; }
+.uk-grid-collapse > * { padding-left: 0; }
+
+/* Vertical */
+.uk-grid + .uk-grid-collapse,
+.uk-grid-collapse > .uk-grid-margin { margin-top: 0; }
+
+
+/* Divider
+ ========================================================================== */
+
+.uk-grid-divider > * { position: relative; }
+
+.uk-grid-divider > :not(.uk-first-column)::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    border-left: $grid-divider-border-width solid $grid-divider-border;
+}
+
+/* Vertical */
+.uk-grid-divider.uk-grid-stack > .uk-grid-margin::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    border-top: $grid-divider-border-width solid $grid-divider-border;
+}
+
+/*
+ * Default
+ */
+
+/* Horizontal */
+.uk-grid-divider { margin-left: -($grid-gutter-horizontal * 2); }
+.uk-grid-divider > * { padding-left: ($grid-gutter-horizontal * 2); }
+
+.uk-grid-divider > :not(.uk-first-column)::before { left: $grid-gutter-horizontal; }
+
+/* Vertical */
+.uk-grid-divider.uk-grid-stack > .uk-grid-margin { margin-top: ($grid-gutter-vertical * 2); }
+
+.uk-grid-divider.uk-grid-stack > .uk-grid-margin::before {
+    top: (-$grid-gutter-vertical);
+    left: ($grid-gutter-horizontal * 2);
+}
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+
+    /* Horizontal */
+    .uk-grid-divider { margin-left: -($grid-gutter-horizontal-l * 2); }
+    .uk-grid-divider > * { padding-left: ($grid-gutter-horizontal-l * 2); }
+
+    .uk-grid-divider > :not(.uk-first-column)::before { left: $grid-gutter-horizontal-l; }
+
+    /* Vertical */
+    .uk-grid-divider.uk-grid-stack > .uk-grid-margin { margin-top: ($grid-gutter-vertical-l * 2); }
+
+    .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before {
+        top: (-$grid-gutter-vertical-l);
+        left: ($grid-gutter-horizontal-l * 2);
+    }
+
+}
+
+/*
+ * Small
+ */
+
+/* Horizontal */
+.uk-grid-divider.uk-grid-small { margin-left: -($grid-small-gutter-horizontal * 2); }
+.uk-grid-divider.uk-grid-small > * { padding-left: ($grid-small-gutter-horizontal * 2); }
+
+.uk-grid-divider.uk-grid-small > :not(.uk-first-column)::before { left: $grid-small-gutter-horizontal; }
+
+/* Vertical */
+.uk-grid-divider.uk-grid-small.uk-grid-stack > .uk-grid-margin { margin-top: ($grid-small-gutter-vertical * 2); }
+
+.uk-grid-divider.uk-grid-small.uk-grid-stack > .uk-grid-margin::before {
+    top: (-$grid-small-gutter-vertical);
+    left: ($grid-small-gutter-horizontal * 2);
+}
+
+/*
+ * Medium
+ */
+
+/* Horizontal */
+.uk-grid-divider.uk-grid-medium { margin-left: -($grid-medium-gutter-horizontal * 2); }
+.uk-grid-divider.uk-grid-medium > * { padding-left: ($grid-medium-gutter-horizontal * 2); }
+
+.uk-grid-divider.uk-grid-medium > :not(.uk-first-column)::before { left: $grid-medium-gutter-horizontal; }
+
+/* Vertical */
+.uk-grid-divider.uk-grid-medium.uk-grid-stack > .uk-grid-margin { margin-top: ($grid-medium-gutter-vertical * 2); }
+
+.uk-grid-divider.uk-grid-medium.uk-grid-stack > .uk-grid-margin::before {
+    top: (-$grid-medium-gutter-vertical);
+    left: ($grid-medium-gutter-horizontal * 2);
+}
+
+/*
+ * Large
+ */
+
+/* Horizontal */
+.uk-grid-divider.uk-grid-large { margin-left: -($grid-large-gutter-horizontal * 2); }
+.uk-grid-divider.uk-grid-large > * { padding-left: ($grid-large-gutter-horizontal * 2); }
+
+.uk-grid-divider.uk-grid-large > :not(.uk-first-column)::before { left: $grid-large-gutter-horizontal; }
+
+/* Vertical */
+.uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin { margin-top: ($grid-large-gutter-vertical * 2); }
+
+.uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin::before {
+    top: (-$grid-large-gutter-vertical);
+    left: ($grid-large-gutter-horizontal * 2);
+}
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+
+    /* Horizontal */
+    .uk-grid-divider.uk-grid-large { margin-left: -($grid-large-gutter-horizontal-l * 2); }
+    .uk-grid-divider.uk-grid-large > * { padding-left: ($grid-large-gutter-horizontal-l * 2); }
+
+    .uk-grid-divider.uk-grid-large > :not(.uk-first-column)::before { left: $grid-large-gutter-horizontal-l; }
+
+    /* Vertical */
+    .uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin { margin-top: ($grid-large-gutter-vertical-l * 2); }
+
+    .uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin::before {
+        top: (-$grid-large-gutter-vertical-l);
+        left: ($grid-large-gutter-horizontal-l * 2);
+    }
+
+}
+
+
+/* Match child of a grid cell
+ ========================================================================== */
+
+/*
+ * Behave like a block element
+ * 1. Wrap into the next line
+ * 2. Take the full width, at least 100%. Only if no class from the Width component is set.
+ * 3. Expand width even if larger than 100%, e.g. because of negative margin (Needed for nested grids)
+ */
+
+.uk-grid-match > *,
+.uk-grid-item-match {
+    display: flex;
+    /* 1 */
+    flex-wrap: wrap;
+}
+
+.uk-grid-match > * > :not([class*='uk-width']),
+.uk-grid-item-match > :not([class*='uk-width']) {
+    /* 2 */
+    box-sizing: border-box;
+    width: 100%;
+    /* 3 */
+    flex: auto;
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-grid-misc)) {@include hook-grid-misc();}
+
+// @mixin hook-grid-misc(){}
+
+
+// Inverse
+// ========================================================================
+
+$inverse-grid-divider-border:                   $inverse-global-border !default;
+
+
			`@ -0,0 +1 @@`
			`<a "target="_blank" href="https://github.com/{{site.github_editme_path }}{{ site.branch_url }}/{% unless page.url contains "index.html" %}{% endunless %}{{ page.path }}" class="btn btn-default githubEditButton" role="button"><span data-uk-icon="icon: pencil; ratio: 1.2"></span> Edit this page on Github</a>`