init v0.0.1

2025-12-21 17:34:25 +04:00 · 2018-02-14 21:56:12 +01:00
commit 994dea290b
991 changed files with 55971 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,16 @@
 .idea/
 _site/
 /Gemfile.lock
 /node_modules/
 /.sass-cache/
 /.jekyll-metadata
 /.asset-cache/
 .DS_Store
 package-lock.json
 /_test/
 src/assets/css/dashboard.css
 src/assets/css/dashboard.min.css
 src/assets/plugins/**/plugin.css
 src/assets/plugins/**/plugin.min.css
 generated-site
 deploy-site
--- a/.htaccess
+++ b/.htaccess
@@ -0,0 +1,41 @@
 RewriteEngine On
 RewriteCond %{HTTPS} off
 RewriteCond %{HTTP_HOST} !=localhost
 RewriteCond %{HTTP_HOST} !=127.0.0.1
 RewriteCond %{REMOTE_ADDR} !=127.0.0.1
 RewriteCond %{REMOTE_ADDR} !=::1
 RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [R=301,L]
 ErrorDocument 404 /404.html
 ErrorDocument 500 /500.html
 <IfModule mod_deflate.c>
    SetOutputFilter DEFLATE
    SetEnvIfNoCase Request_URI \
    \.(?:gif|jpe?g|png)$ no-gzip dont-vary
 </IfModule>
 <IfModule mod_headers.c>
    ServerSignature Off
    Header unset X-Powered-By
    Header set X-XSS-Protection "1; mode=block"
 </IfModule>
 <IfModule mod_expires.c>
    ExpiresActive on
    ExpiresByType image/jpg "access 2 month"
    ExpiresByType image/gif "access 2 month"
    ExpiresByType image/jpeg "access 2 month"
    ExpiresByType image/png "access 2 month"
    ExpiresByType text/css "access 2 month"
    ExpiresByType image/svg+xml "access 2 month"
    ExpiresByType application/x-javascript "access plus 2 month"
    ExpiresByType text/javascript "access plus 2 month"
    ExpiresByType application/javascript "access plus 2 month"
    ExpiresByType image/x-icon "access plus 12 month"
    ExpiresByType image/icon "access plus 12 month"
    ExpiresByType application/x-ico "access plus 12 month"
    ExpiresByType application/ico "access plus 12 month"
    ExpiresByType text/html "access plus 2 days"
 </IfModule>
--- a/8
+++ b/8
@@ -0,0 +1,8 @@
 source 'https://rubygems.org' do
  gem 'jekyll-tidy'
  gem 'octopress-autoprefixer'
  gem 'jekyll-contentblocks'
  gem 'jekyll-redirect-from'
  gem 'jekyll-toc'
  gem 'public_suffix', '3.0.0'
 end
--- a/_config.yml
+++ b/_config.yml
@@ -0,0 +1,92 @@
 title: tabler.io
 description: tabler.io - a responsive, flat and full featured admin template
 base_color: '#cc0000'
 collections:
  docs:
    output: true
 defaults:
  - scope:
      path: ""
      type: docs
    values:
      layout: docs
 source: src
 author:
   name: codecalm.net
   url: https://codecalm.net
 plugins:
  - jekyll-tidy
  - jekyll-contentblocks
  - jekyll-toc
 exclude:
  - buddy.yml
  - package.json
  - gulpfile.js
  - start.sh
  - Gemfile
  - Gemfile.lock
  - .git
  - .idea
  - .gitignore
  - node_modules/
  - .DS_Store
  - .sass-cache/
  - .asset-cache/
  - assets/scss/*
  - assets/plugins/**/*.scss
  - push-to-repo.sh
 markdown: kramdown
 highlighter: rouge
 kramdown:
  input: GFM
  syntax_highlighter: rouge
  syntax_highlighter_opts:
    css_class: ''
    span:
      line_numbers: false
 toc:
  min_level: 2
  max_level: 3
 jekyll_tidy:
  compress_html: false
  ignore_env: development
 colors:
  blue: '#467fcf'
  azure: '#45aaf2'
  indigo: '#6574cd'
  purple: '#a55eea'
  pink: '#f66d9b'
  red: '#e74c3c'
  orange: '#fd9644'
  yellow: '#f1c40f'
  lime: '#7bd235'
  green: '#5eba00'
  teal: '#2bcbba'
  cyan: '#17a2b8'
  gray: '#868e96'
  gray-dark: '#343a40'
 theme-colors:
  primary: '#467fcf'
  secondary: '#868e96'
  success: '#38c172'
  info: '#17a2b8'
  warning: '#f8b700'
  danger: '#f90049'
  light: '#f8f9fa'
  dark: '#343a40'
 google-maps-key: AIzaSyBEJy4UvF-JfcNciWlvlznyDlUckcspiD4
 google-maps-url: https://maps.googleapis.com/maps/api/js?key=AIzaSyCOJwXN0eoyeFZ3cYtGzPLFw8zGhQ750Xk
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -0,0 +1,46 @@
 var gulp = require('gulp'),
    sass = require('gulp-sass'),
    rename = require('gulp-rename'),
 	gs = require('gulp-selectors'),
    autoprefixer = require('gulp-autoprefixer');
 gulp.task('styles', function () {
    return gulp.src('src/assets/scss/bundle.scss', { base: '.' })
        .pipe(sass({
            precision: 8,
            outputStyle: 'expanded'
        }).on('error', sass.logError))
        .pipe(autoprefixer({
            browsers: ['>1%'],
            cascade: false
        }))
        .pipe(rename('dashboard.css'))
        .pipe(gulp.dest('src/assets/css/'));
 });
 gulp.task('styles-plugins', function () {
    return gulp.src('src/assets/plugins/**/plugin.scss', { base: '.' })
        .pipe(sass({
            precision: 6,
            outputStyle: 'expanded'
        }).on('error', sass.logError))
        .pipe(autoprefixer({
            browsers: ['>1%'],
            cascade: false
        }))
        .pipe(rename(function(path) {
            path.extname = '.css';
        }))
        .pipe(gulp.dest('.'))
        .pipe(rename(function(path) {
            path.extname = '.min.css';
        }))
        .pipe(gulp.dest('.'));
 });
 gulp.task('watch', ['styles', 'styles-plugins'], function() {
    gulp.watch('src/assets/scss/**/*.scss', ['styles']);
    gulp.watch('src/assets/plugins/**/*.scss', ['styles-plugins']);
 });
 gulp.task('default', ['styles', 'styles-plugins']);
--- a/package.json
+++ b/package.json
@@ -0,0 +1,28 @@
 {
  "name": "dashboard",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/codecalm/bootstrap-dashboard.git"
  },
  "author": "codecalm",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/codecalm/bootstrap-dashboard/issues"
  },
  "homepage": "https://github.com/codecalm/bootstrap-dashboard#readme",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^4.0.0",
    "gulp-rcs": "^1.1.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^3.1.0",
    "gulp-selectors": "^0.1.10"
  },
  "dependencies": {},
  "description": ""
 }
--- a/regenerate-images.sh
+++ b/regenerate-images.sh
@@ -0,0 +1 @@
 for i in *.jpg; do convert "$i" -resize 500x333^ -gravity center -crop 500x333+0+0 -quality 80 -monitor "${i%.*}-500.jpg"; done
--- a/src/404.html
+++ b/src/404.html
@@ -0,0 +1,6 @@
 ---
 title: Page 404
 layout: error
 ---
 {% include page-error.html error="error-404" %}
--- a/src/LICENSE
+++ b/src/LICENSE
@@ -0,0 +1,21 @@
 The MIT License (MIT)
 Copyright (c) 2018 Paweł Kuna
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
 in the Software without restriction, including without limitation the rights
 to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 copies of the Software, and to permit persons to whom the Software is
 furnished to do so, subject to the following conditions:
 The above copyright notice and this permission notice shall be included in all
 copies or substantial portions of the Software.
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
--- a/src/README.md
+++ b/src/README.md
@@ -0,0 +1,17 @@
 # Dashboard
 We’ve created this admin panel for everyone who wants to create any templates based on our ready components. Our mission is to deliver a user-friendly, clear and easy administration panel, that can be used by both, simple websites and sophisticated systems. The only requirement is a basic HTML and CSS knowledge—as a reward, you'll be able to manage and visualize different types of data in the easiest possible way!
 After using many of different admin panels, no matter free or paid, we've noticed they all had a lot of defects—and the main one was resource intensity.
 They were loading loads of useless components that you wouldn't ever use, so we've decided to choose a different way. The whole system is plugin-based, what means that you have a control over what is needed and what not.
 To make the system works fast and reliable, we've converted most of the components to CSS. Thanks to this, you don't have to load a lot of unnecessary libraries into your browser what really boosts the overall speed.
 In this documentation we're going to describe common use-cases for most of our components since we want to make our tool be accessible to everyone.
 ## Browser Support
 ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![IE](https://raw.github.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png)
 --- | --- | --- | --- | --- | --- |
 Latest ✔ | Latest ✔ | Latest ✔ | 11+ ✔ | 9.1+ ✔ | Latest ✔ |
--- a/src/_400.html
+++ b/src/_400.html
@@ -0,0 +1,6 @@
 ---
 title: Page 400
 layout: error
 ---
 {% include page-error.html error="error-400" %}
--- a/src/_401.html
+++ b/src/_401.html
@@ -0,0 +1,6 @@
 ---
 title: Page 401
 layout: error
 ---
 {% include page-error.html error="error-401" %}
--- a/src/_403.html
+++ b/src/_403.html
@@ -0,0 +1,6 @@
 ---
 title: Page 403
 layout: error
 ---
 {% include page-error.html error="error-403" %}
--- a/src/_500.html
+++ b/src/_500.html
@@ -0,0 +1,6 @@
 ---
 title: Page 500
 layout: error
 ---
 {% include page-error.html error="error-500" %}
--- a/src/_503.html
+++ b/src/_503.html
@@ -0,0 +1,6 @@
 ---
 title: Page 503
 layout: error
 ---
 {% include page-error.html error="error-503" %}
--- a/src/_buttons.html
+++ b/src/_buttons.html
@@ -0,0 +1,110 @@
 ---
 layout: default
 title: Buttons
 ---
 {% assign states = 'secondary dropdown-toggle,secondary,primary,danger' | split: ',' %}
 {% assign states-outlined = 'primary,danger,success' | split: ',' %}
 <div class="container">
 	<div class="row row-cards">
 		<div class="col-6">
 			<div class="card">
 				<div class="card-body">
 					<h3 class="card-title">Default buttons</h3>
 					<div class="row mb-3 sm-gutters">
 						<div class="col-auto">
 							{% for state in states %}
 							<button class="btn btn-{{ state }}">Button</button>
 							{% endfor %}
 						</div>
 						<div class="col">
 							<input class="form-control d-inline-block w-auto">
 						</div>
 					</div>
 					<div class="row mb-3 sm-gutters">
 						<div class="col-auto">
 							{% for state in states %}
 							<button class="btn btn-sm btn-{{ state }}">Button</button>
 							{% endfor %}
 						</div>
 						<div class="col">
 							<input class="form-control form-control-sm d-inline-block w-auto">
 						</div>
 					</div>
 					<div class="row mb-3 sm-gutters">
 						<div class="col-auto">
 							{% for state in states %}
 							<button class="btn btn-lg btn-{{ state }}">Button</button>
 							{% endfor %}
 						</div>
 						<div class="col">
 							<input class="form-control form-control-lg d-inline-block w-auto">
 						</div>
 					</div>
 					<p>
 						{% for state in states %}
 						<button class="btn btn-{{ state }}"><i class="fe fe-star mr-2"></i>Button</button>
 						{% endfor %}
 					</p>
 					<p>
 						{% for state in states %}
 						<button class="btn btn-{{ state }} btn-icon"><i class="fe fe-star"></i></button>
 						{% endfor %}
 					</p>
 				</div>
 			</div>
 		</div>
 		<div class="col-6">
 			<div class="card">
 				<div class="card-body">
 					<h3 class="card-title">
 						Outlined buttons
 					</h3>
 					<p>
 						{% for state in states-outlined %}
 						<button class="btn btn-outline-{{ state }}">Button</button>
 						{% endfor %}
 					</p>
 					<p>
 						{% for state in states-outlined %}
 						<button class="btn btn-outline-{{ state }} btn-icon"><i class="fe fe-star mr-2"></i>Button</button>
 						{% endfor %}
 					</p>
 				</div>
 			</div>
 		</div>
 		<div class="col-6">
 			<div class="card">
 				<div class="card-body">
 					<p>
 						<button type="button" class="btn btn-facebook"><i class="fa fa-facebook"></i></button>
 						<button type="button" class="btn btn-twitter"><i class="fa fa-twitter"></i></button>
 						<button type="button" class="btn btn-google"><i class="fa fa-google-plus"></i></button>
 						<button type="button" class="btn btn-youtube"><i class="fa fa-youtube"></i></button>
 						<button type="button" class="btn btn-vimeo"><i class="fa fa-vimeo-square"></i></button>
 						<button type="button" class="btn btn-dribbble"><i class="fa fa-dribbble"></i></button>
 						<button type="button" class="btn btn-github"><i class="fa fa-github"></i></button>
 						<button type="button" class="btn btn-instagram"><i class="fa fa-instagram"></i></button>
 						<button type="button" class="btn btn-pinterest"><i class="fa fa-pinterest"></i></button>
 						<button type="button" class="btn btn-vk"><i class="fa fa-vk"></i></button>
 						<button type="button" class="btn btn-rss"><i class="fa fa-rss"></i></button>
 						<button type="button" class="btn btn-flickr"><i class="fa fa-flickr"></i></button>
 						<button type="button" class="btn btn-bitbucket"><i class="fa fa-bitbucket"></i></button>
 					</p>
 					<p>
 						<button type="button" class="btn btn-facebook"><i class="fa fa-facebook mr-2"></i> Facebook</button>
 						<button type="button" class="btn btn-twitter"><i class="fa fa-twitter mr-2"></i> Twitter</button>
 						<button type="button" class="btn btn-google"><i class="fa fa-google-plus mr-2"></i> Google Plus</button>
 					</p>
 					<p>
 						<button type="button" class="btn btn-sm btn-facebook"><i class="fa fa-facebook mr-2"></i> Facebook</button>
 						<button type="button" class="btn btn-sm btn-twitter"><i class="fa fa-twitter mr-2"></i> Twitter</button>
 						<button type="button" class="btn btn-sm btn-google"><i class="fa fa-google-plus mr-2"></i> Google Plus</button>
 					</p>
 				</div>
 			</div>
 		</div>
 	</div>
 </div>
--- a/src/_calendar.html
+++ b/src/_calendar.html
@@ -0,0 +1,9 @@
 ---
 layout: default
 title: Calendar
 page-title: Calendar
 ---
 <div class="container">
 	{% include cards/fullcalendar.html %}
 </div>
--- a/src/_cards.html
+++ b/src/_cards.html
@@ -0,0 +1,187 @@
 ---
 layout: default
 title: Homepage
 menu: cards
 ---
 <!--<div class="container">-->
 	<!--<nav class="breadcrumb breadcrumb-content">-->
 		<!--<a class="breadcrumb-item" href="javascript:void(0)">Library</a>-->
 		<!--<span class="breadcrumb-item active">Cards</span>-->
 	<!--</nav>-->
 <!--</div>-->
 <div class="container">
 	<div class="page-header">
 		<div>
 			<h1 class="page-title">Dashboard</h1>
 			<div class="page-description">
 				<ul class="list-inline list-inline-dots m-0">
 					<li class="list-inline-item">Section 500</li>
 					<li class="list-inline-item">English learning French</li>
 					<li class="list-inline-item">
 						<a href="javascript:void(0)">United states</a>
 					</li>
 					<li class="list-inline-item">7 students</li>
 				</ul>
 			</div>
 		</div>
 	</div>
 	<div class="row row-cards">
 		<div class="col-lg-6">
 			{% include cards/twitter.html %}
 			{% include cards/twitter.html %}
 		</div>
 		<div class="col-lg-6">
 			{% include cards/twitter.html show-image=true %}
 		</div>
 		<div class="col-lg-8">
 			{% include cards/http-request.html %}
 		</div>
 		<div class="col-12"></div>
 		<div class="col-md-3">
 			{% include cards/icon-box.html color="blue" icon="fa fa-eur" value="132" description="Sales" subtitle="12 waiting payments" %}
 		</div>
 		<div class="col-md-3">
 			{% include cards/icon-box.html color="green" icon="fa fa-shopping-bag" value="78" description="Orders" subtitle="32 shipped" %}
 		</div>
 		<div class="col-md-3">
 			{% include cards/icon-box.html color="red" icon="fa fa-user" value="1,352" description="Members" subtitle="163 registered today" %}
 		</div>
 		<div class="col-md-3">
 			{% include cards/icon-box.html color="yellow" icon="fa fa-comments" value="132" description="Comments" subtitle="16 waiting" %}
 		</div>
 		<div class="col-md-3">
 			{% include cards/price-box.html color="green" change=4 %}
 		</div>
 		<div class="col-md-3">
 			{% include cards/price-box.html title="Order status" subtitle="New order" color="red" value="738" change=-10 %}
 		</div>
 		<div class="col-md-3">
 			{% include cards/price-box.html title="Income status" subtitle="New income" color="blue" change=0 value="$3,205" %}
 		</div>
 		<div class="col-md-3">
 			{% include cards/price-box.html title="Customer status" subtitle="New users" color="yellow" value="118" change=3 %}
 		</div>
 		<div class="col-md-4">
 			{% include cards/map-metro.html %}
 		</div>
 		<div class="col-lg-8">{% include cards/profile-edit-big.html %}</div>
 		<div class="col-md-6 col-lg-3">{% include cards/icon-card.html icon="si si-drawer" icon-color="yellow" title="Capacity" value="105GB" %}</div>
 		<div class="col-md-6 col-lg-3">{% include cards/icon-card.html icon="si si-diamond" icon-color="green" title="Revenue" value="$1,345"  %}</div>
 		<div class="col-md-6 col-lg-3">{% include cards/icon-card.html icon="si si-exclamation" icon-color="red" title="Errors" value="23"  %}</div>
 		<div class="col-md-6 col-lg-3">{% include cards/icon-card.html icon="si si-social-tumblr" icon-color="blue" title="Followers" value="1685"  %}</div>
 		<div class="col-md-6 col-lg-4">
 			{% include cards/subcards.html %}
 		</div>
 		<div class="col-lg-8">
 			{% include cards/classroom.html %}
 		</div>
 		<div class="col-md-6 col-lg-4">
 			{% include cards/colors.html %}
 			{% include cards/calendar.html %}
 		</div>
 		<div class="col-md-6 col-lg-4">
 			{% include cards/chart-browsers.html %}
 		</div>
 		<div class="col-md-6 col-lg-4">
 			{% include cards/email-stats.html %}
 		</div>
 		<div class="col-12">
 			{% include cards/invoices.html %}
 			{% include cards/chart-visitors.html %}
 		</div>
 		<div class="col-lg-4 col-md-6">
 			{% include cards/chips.html %}
 			{% include cards/progress-circle.html %}
 			{% include cards/statuses.html %}
 			{% include cards/loader.html %}
 			{% include cards/progress.html %}
 			{% include cards/image-info.html %}
 			{% include cards/packages.html %}
 			{% include cards/map-germany.html %}
 			{% include cards/stock.html %}
 			{% include cards/match.html %}
 			{% include cards/profile-edit.html %}
 			{% include cards/sparkline.html type="bar" limit="16" %}
 			{% include cards/sparkline.html type="line" color="red" offset="60" limit="16" %}
 			{% include cards/options.html %}
 			{% include cards/chart-bg.html id="chart-bg-users" %}
 			{% include cards/avatars.html %}
 			{% include cards/media.html title="1530" color="primary" description="Total Leads" rate="20%" progress="20%" %}
 			{% include cards/media.html title="$8,530" color="warning" description="Total Payment" rate="0%" %}
 			{% include cards/photos.html %}
 			{% include cards/media.html title="16°C" color="warning" description="Warsaw, Poland" rate='<i class="wi wi-day-cloudy"></i>' %}
 			{% include cards/aside.html %}
 			{% include cards/links.html %}
 			{% include cards/store-product.html %}
 			{% include cards/color.html color="success" %}
 			{% include cards/follow.html %}
 			{% include cards/profile.html %}
 			{% include cards/centered.html %}
 			{% include cards/pills.html %}
 			{% include cards/color.html color="danger" %}
 		</div>
 		<div class="col-lg-8 col-md-6">
 			{% include cards/tasks.html %}
 			{% include cards/map-world.html %}
 			{% include cards/tickets.html %}
 			<div class="row">
 				<div class="col-lg-6">
 					{% include cards/profile-2.html %}
 					{% include cards/client.html %}
 					{% include cards/digit.html %}
 					<div class="row row-deck">
 						<div class="col-6">{% include cards/digit.html color="red" title="New fedbacks" digit="62" width="34%" %}</div>
 						<div class="col-6">{% include cards/digit.html color="green" title="Users online" digit="76" width="32%" %}</div>
 					</div>
 					{% include cards/digit.html color="yellow" title="Profit for this month" digit="$65,256" width="85%" %}
 					{% include cards/chart-bg.html id="chart-bg-revenue" description="Revenue" title="$5255" offset=60 rate="-3%" color="yellow" %}
 					{% include cards/server.html %}
 					{% include cards/media.html title="935" color="danger" description="Total Sales" rate="-1%" progress="75%" %}
 					{% include cards/media-inverse.html title="5324" color="success" description="New Orders" rate="60%" %}
 					{% include cards/image.html %}
 					{% include cards/header.html %}
 					{% include cards/border.html color="danger" %}
 					{% include cards/empty.html %}
 					{% include cards/color.html color="warning" %}
 					{% include cards/countries.html %}
 					{% include cards/all.html %}
 					{% include cards/register.html %}
 					{% include cards/search-custom.html %}
 				</div>
 				<div class="col-lg-6">
 					{% include cards/alert.html %}
 					{% include cards/finance.html %}
 					{% include cards/sales.html %}
 					{% include cards/chart-pie.html %}
 					{% include cards/chart-radar.html %}
 					{% include cards/message.html %}
 					{% include cards/image-bg.html %}
 					{% include cards/browsers.html %}
 					{% include cards/color.html color="dark" %}
 					{% include cards/footer.html %}
 					{% include cards/feed.html %}
 					{% include cards/list.html %}
 					{% include cards/tabs.html %}
 					{% include cards/color.html color="primary" %}
 					{% include cards/login.html %}
 					{% include cards/forgot.html %}
 				</div>
 			</div>
 		</div>
 	</div>
 </div>
--- a/src/_chat.html
+++ b/src/_chat.html
@@ -0,0 +1,4 @@
 ---
 layout: default
 body-class: aside-opened
 ---
--- a/src/_data/articles.yml
+++ b/src/_data/articles.yml
@@ -0,0 +1,34 @@
 - title: And this isn't my nose. This is a false one.
  description: Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migrate? Well, I got better.
  image: 14
  author: 3
 - title: Well, I didn't vote for you.
  description: Well, we did do the nose. Why? Shut up! Will you shut up?! You don't frighten us, English pig-dogs! Go and boil your bottoms, sons of a silly person! I blow my nose at you, so-called Ah-thoor Keeng, you and all your silly English K-n-n-n-n-n-n-n-niggits!
  image: 15
  author: 4
 - title: How do you know she is a witch?
  description: Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. But she's got a wart. You don't vote for kings. Ah, now we see the violence inherent in the system!
  image: 16
  author: 5
 - title: Shut up!
  description: Burn her! How do you know she is a witch? You don't frighten us, English pig-dogs! Go and boil your bottoms, sons of a silly person! I blow my nose at you, so-called Ah-thoor Keeng, you and all your silly English K-n-n-n-n-n-n-n-niggits!
  image: 17
  author: 6
 - title: Weaseling out of things is important to learn.
  description: Please do not offer my god a peanut. That's why I love elementary school, Edna. The children believe anything you tell them. Brace yourselves gentlemen. According to the gas chromatograph, the secret ingredient is… Love!? Who's been screwing with this thing?
  image: 20
  author: 12
 - title: You don't like your job, you don't strike.
  description: "But, Aquaman, you cannot marry a woman without gills. You're from two different worlds… Oh, I've wasted my life. Son, when you participate in sporting events, it's not whether you win or lose: it's how drunk you get."
  image: 21
  author: 13
 - title: I hope I didn't brain my damage.
  description: "I don't like being outdoors, Smithers. For one thing, there's too many fat children. Oh, loneliness and cheeseburgers are a dangerous mix. Jesus must be spinning in his grave! I hope this has taught you kids a lesson: kids never learn."
  image: 22
  author: 14
--- a/src/_data/charts.yml
+++ b/src/_data/charts.yml
@@ -0,0 +1,267 @@
 tasks:
  name: Tasks
  type: area-spline
  categories: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W']
  groups: [1, 2, 3]
  hide-points: true
  series:
    - name: 'New'
      color: blue
      data: [0, 0, 1, 2, 21, 9, 12, 10, 31, 13, 65, 10, 12, 6, 4, 3, 0]
    - name: 'Completed'
      color: lime
      data: [0, 0, 1, 2, 7, 5, 6, 8, 24, 7, 12, 5, 6, 3, 2, 2, 0]
    - name: 'Closed'
      color: orange
      data: [0, 0, 1, 0, 2, 0, 1, 0, 2, 3, 0, 2, 3, 2, 1, 0, 0]
 employment:
  name: Employment Growth
  display: true
  type: line
  hide-legend: true
  categories: ['2013', '2014', '2015', '2016', '2017', '2018']
  series:
    - name: Development
      color: orange
      data: [2, 8, 6, 7, 14, 11]
    - name: Marketing
      color: blue
      data: [5, 15, 11, 15, 21, 25]
    - name: Sales
      color: green
      data: [17, 18, 21, 20, 30, 29]
 temperature:
  name: Monthly Average Temperature
  display: true
  type: line
  show-labels: true
  hide-legend: true
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  series:
    - name: Tokyo
      color: blue
      data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    - name: London
      color: green
      data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
 area:
  name: Lorem ipsum
  display: true
  type: area
  hide-legend: true
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  series:
    - name: Maximum
      color: blue
      data: [11, 8, 15, 18, 19, 17]
    - name: Minimum
      color: pink
      data: [7, 7, 5, 7, 9, 12]
 area-spline:
  name: Lorem ipsum
  display: true
  type: area-spline
  hide-legend: true
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  series:
    - name: Maximum
      color: blue
      data: [11, 8, 15, 18, 19, 17]
    - name: Minimum
      color: pink
      data: [7, 7, 5, 7, 9, 12]
 area-spline-sracked:
  name: Lorem ipsum
  display: true
  type: area-spline
  hide-legend: true
  groups: [1, 2]
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  series:
    - name: Maximum
      color: blue
      data: [11, 8, 15, 18, 19, 17]
    - name: Minimum
      color: pink
      data: [7, 7, 5, 7, 9, 12]
 spline:
  name: Wind speed during two days
  display: true
  type: spline
  show-labels: true
  hide-legend: true
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  series:
    - name: Hestavollane
      color: blue
      data: [0.2, 0.8, 0.8, 0.8, 1, 1.3, 1.5, 2.9, 1.9, 2.6, 1.6, 3, 4, 3.6, 4.5, 4.2, 4.5, 4.5, 4, 3.1, 2.7, 4, 2.7, 2.3, 2.3, 4.1, 7.7, 7.1, 5.6, 6.1, 5.8, 8.6, 7.2, 9, 10.9, 11.5, 11.6, 11.1, 12, 12.3, 10.7, 9.4, 9.8, 9.6, 9.8, 9.5, 8.5, 7.4, 7.6]
    - name: Vik
      color: green
      data: [0, 0, 0.6, 0.9, 0.8, 0.2, 0, 0, 0, 0.1, 0.6, 0.7, 0.8, 0.6, 0.2, 0, 0.1, 0.3, 0.3, 0, 0.1, 0, 0, 0, 0.2, 0.1, 0, 0.3, 0, 0.1, 0.2, 0.1, 0.3, 0.3, 0, 3.1, 3.1, 2.5, 1.5, 1.9, 2.1, 1, 2.3, 1.9, 1.2, 0.7, 1.3, 0.4, 0.3]
 spline-rotated:
  name: Lorem ipsum
  display: true
  type: spline
  rotated: true
  hide-legend: true
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  series:
    - name: Maximum
      color: blue
      data: [11, 8, 15, 18, 19, 17]
    - name: Minimum
      color: pink
      data: [7, 7, 5, 7, 9, 12]
 step:
  name: Lorem ipsum
  display: true
  type: step
  hide-legend: true
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  series:
    - name: Maximum
      color: blue
      data: [11, 8, 15, 18, 19, 17]
    - name: Minimum
      color: pink
      data: [7, 7, 5, 7, 9, 12]
 area-step:
  name: Lorem ipsum
  display: true
  type: area-step
  hide-legend: true
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  series:
    - name: Maximum
      color: blue
      data: [11, 8, 15, 18, 19, 17]
    - name: Minimum
      color: pink
      data: [7, 7, 5, 7, 9, 12]
 bar:
  name: Lorem ipsum
  display: true
  type: bar
  hide-legend: true
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  series:
    - name: Maximum
      color: blue
      data: [11, 8, 15, 18, 19, 17]
    - name: Minimum
      color: pink
      data: [7, 7, 5, 7, 9, 12]
 bar-rotated:
  name: Lorem ipsum
  display: true
  type: bar
  rotated: true
  hide-legend: true
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  series:
    - name: Maximum
      color: blue
      data: [11, 8, 15, 18, 19, 17]
    - name: Minimum
      color: pink
      data: [7, 7, 5, 7, 9, 12]
 bar-stacked:
  name: Lorem ipsum
  display: true
  type: bar
  groups: [1, 2]
  hide-legend: true
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  series:
    - name: Maximum
      color: blue
      data: [11, 8, 15, 18, 19, 17]
    - name: Minimum
      color: pink
      data: [7, 7, 5, 7, 9, 12]
 pie:
  name: Lorem ipsum
  display: true
  type: pie
  series:
    - name: Maximum
      color: blue
      data: [63]
    - name: Minimum
      color: pink
      data: [37]
 donut:
  name: Lorem ipsum
  display: true
  type: donut
  series:
    - name: Maximum
      color: blue
      data: [63]
    - name: Minimum
      color: pink
      data: [37]
 scatter:
  name: Lorem ipsum
  display: true
  type: scatter
  hide-legend: true
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  series:
    - name: Maximum
      color: blue
      data: [11, 8, 15, 18, 19, 17]
    - name: Minimum
      color: pink
      data: [7, 7, 5, 7, 9, 12]
 combination:
  name: Combination chart
  display: true
  type: bar
  types:
    2: 'line'
    3: 'spline'
  groups: [1, 4]
  hide-legend: true
  categories: ['2013', '2014', '2015', '2016', '2017', '2018']
  series:
    - name: Development
      color: green
      data: [30, 20, 50, 40, 60, 50]
    - name: Marketing
      color: pink
      data: [200, 130, 90, 240, 130, 220]
    - name: Sales
      color: green
      data: [300, 200, 160, 400, 250, 250]
    - name: Sales
      color: blue
      data: [200, 130, 90, 240, 130, 220]
--- a/src/_data/commits.yml
+++ b/src/_data/commits.yml
@@ -0,0 +1,113 @@
 ---
 - commiter:
    name: Earvin Yoakley
    position: CEO
  commit:
    name: Initial commit
    project: Front-end
    md5: 8ed2c32
    date: 'Oct 13, 2017'
    hour: '0:58'
  milestone:
    percentage: 3
    start: 5
    end: 30
  branch: feature/cards
 - commiter:
    name: Colette Saenz
    position: CEO
  commit:
    name: Main structure markup
    project: Database
    md5: a7c1f12
    date: 'May 26, 2017'
    hour: '5:53'
  milestone:
    percentage: 84
    start: 30
    end: 46
  branch: stage
 - commiter:
    name: Hilario Kleuer
    position: Developer
  commit:
    name: Left sidebar fix
    project: Bootstrap Admin
    md5: 31697d4
    date: 'Nov 27, 2016'
    hour: '7:05'
  milestone:
    percentage: 4
    start: 1
    end: 37
  branch: feature/cards
 - commiter:
    name: Brenda Ubsdell
    position: CEO
  commit:
    name: Topbar dropdown style
    project: Front-end
    md5: e481486
    date: 'May 09, 2017'
    hour: '14:00'
  milestone:
    percentage: 78
    start: 18
    end: 38
  branch: feature/cards
 - commiter:
    name: Andrei Widger
    position: Designer
  commit:
    name: Right sidebar style
    project: Front-end
    md5: e59546d
    date: 'Jan 10, 2017'
    hour: '6:02'
  milestone:
    percentage: 53
    start: 26
    end: 48
  branch: stage
 - commiter:
    name: Catriona St. Queintain
    position: CEO
  commit:
    name: Initial commit
    project: Front-end
    md5: 14966c9
    date: 'Dec 28, 2016'
    hour: '9:51'
  milestone:
    percentage: 59
    start: 27
    end: 42
  branch: dev
 - commiter:
    name: Therine Cordeau
    position: CEO
  commit:
    name: Main structure markup
    project: Bootstrap Admin
    md5: d4b8c06
    date: 'Mar 26, 2017'
    hour: '10:11'
  milestone:
    percentage: 20
    start: 29
    end: 40
  branch: stage
 - commiter:
    name: Derward Lafaye
    position: Designer
  commit:
    name: Left sidebar fix
    project: Database
    md5: d754ded
    date: 'Feb 24, 2017'
    hour: '0:24'
  milestone:
    percentage: 40
    start: 26
    end: 34
  branch: feature/cards
--- a/src/_data/crypto-currencies.yml
+++ b/src/_data/crypto-currencies.yml
@@ -0,0 +1,907 @@
 - name: Bitcoin
  price: "$10513.00"
  p24h: -7
  market-cap: "$179,470,305,923"
  circulating-supply: 16,819,612 BTC
  volume-24h: "$9,578,830,000"
  cmgr: 8.11% / 57
  inflation: 0.36%
  icon: bitcoin.svg
 - name: Ethereum
  price: "$966.61"
  p24h: -6
  market-cap: "$95,270,125,036"
  circulating-supply: 97,145,024 ETH
  volume-24h: "$3,466,060,000"
  cmgr: 22.62% / 29
  inflation: 0.64%
  icon: ethereum.svg
 - name: Ripple
  price: "$1.2029"
  p24h: -11
  market-cap: "$47,649,145,657"
  circulating-supply: 38,739,144,704 XRP
  volume-24h: "$2,081,450,000"
  cmgr: 10.85% / 53
  inflation: 0.06%
  icon: ripple.svg
 - name: Bitcoin Cash
  price: "$1547.00"
  p24h: -11
  market-cap: "$26,720,210,956"
  circulating-supply: 16,925,988 BCH
  volume-24h: "$598,337,000"
  cmgr: 21.30% / 6
  inflation: 0.32%
 - name: Cardano
  price: "$0.550768"
  p24h: -9
  market-cap: "$14,279,800,786"
  circulating-supply: 25,927,069,696 ADA
  volume-24h: "$466,381,000"
  cmgr: 205.35% / 3
  inflation: 0.00%
  icon: cardano.svg
 - name: Litecoin
  price: "$173.86"
  p24h: -7
  market-cap: "$9,670,920,267"
  circulating-supply: 54,873,584 LTC
  volume-24h: "$430,524,000"
  cmgr: 6.87% / 57
  inflation: 0.80%
  icon: litecoin.svg
 - name: EOS
  price: "$13.394"
  p24h: 5
  market-cap: "$8,420,143,033"
  circulating-supply: 621,412,800 EOS
  volume-24h: "$2,864,780,000"
  cmgr: 53.25% / 6
  inflation: 11.56%
  icon: eos.svg
 - name: NEM
  price: "$0.935049"
  p24h: -11
  market-cap: "$8,415,440,999"
  circulating-supply: 8,999,999,488 XEM
  volume-24h: "$66,061,000"
  cmgr: 26.99% / 33
  inflation: 0.24%
  icon: nem.svg
 - name: Stellar
  price: "$0.467813"
  p24h: 2
  market-cap: "$8,358,735,080"
  circulating-supply: 17,867,683,840 XLM
  volume-24h: "$370,297,000"
  cmgr: 13.12% / 41
  inflation: 0.19%
 - name: NEO
  price: "$118.61"
  p24h: -9
  market-cap: "$7,693,400,000"
  circulating-supply: 65,000,000 NEO
  volume-24h: "$318,308,000"
  cmgr: 62.68% / 15
  inflation: 0.00%
 - name: IOTA
  price: "$2.34"
  p24h: -14
  market-cap: "$6,504,100,862"
  circulating-supply: 2,779,530,240 MIOTA
  volume-24h: "$103,132,000"
  cmgr: 23.27% / 7
  inflation: "-0.02%"
 - name: Dash
  price: "$747.222"
  p24h: -8
  market-cap: "$5,881,413,815"
  circulating-supply: 7,833,738 DASH
  volume-24h: "$96,147,900"
  cmgr: 19.19% / 47
  inflation: 0.81%
  icon: dash.svg
 - name: Monero
  price: "$305.16"
  p24h: -11
  market-cap: "$4,778,157,533"
  circulating-supply: 15,633,286 XMR
  volume-24h: "$100,788,000"
  cmgr: 11.88% / 44
  inflation: 0.78%
 - name: TRON
  price: "$0.067691"
  p24h: -5
  market-cap: "$4,450,560,896"
  circulating-supply: 65,748,193,280 TRX
  volume-24h: "$581,651,000"
  cmgr: 142.69% / 4
  inflation: 0.00%
 - name: Bitcoin Gold
  price: "$181.39"
  p24h: -7
  market-cap: "$3,084,108,676"
  circulating-supply: 16,779,700 BTG
  volume-24h: "$199,652,000"
  cmgr: "-25.44% / 3"
  inflation: 0.34%
 - name: ICON
  price: "$7.90"
  p24h: -10
  market-cap: "$3,002,355,531"
  circulating-supply: 380,044,992 ICX
  volume-24h: "$78,201,200"
  cmgr: 179.33% / 3
  inflation: 90.09%
 - name: Qtum
  price: "$38.37"
  p24h: -9
  market-cap: "$2,832,729,404"
  circulating-supply: 73,826,672 QTUM
  volume-24h: "$593,524,000"
  cmgr: 30.43% / 8
  inflation: 0.11%
 - name: Ethereum Classic
  price: "$28.023"
  p24h: -6
  market-cap: "$2,827,320,112"
  circulating-supply: 99,308,752 ETC
  volume-24h: "$303,356,000"
  cmgr: 22.79% / 18
  inflation: 0.74%
 - name: Lisk
  price: "$20.48"
  p24h: -6
  market-cap: "$2,401,760,051"
  circulating-supply: 117,273,440 LSK
  volume-24h: "$44,483,500"
  cmgr: 12.05% / 21
  inflation: 0.86%
 - name: VeChain
  price: "$8.33"
  p24h: 9
  market-cap: "$2,308,764,732"
  circulating-supply: 277,162,624 VEN
  volume-24h: "$348,907,000"
  cmgr: 101.15% / 5
  inflation: "-0.06%"
 - name: RaiBlocks
  price: "$14.46"
  p24h: -15
  market-cap: "$1,926,770,258"
  circulating-supply: 133,248,288 XRB
  volume-24h: "$13,331,500"
  cmgr: 112.15% / 10
  inflation: 0.06%
 - name: Tether
  price: "$1.0097"
  p24h: -1
  market-cap: "$1,618,090,823"
  circulating-supply: 1,618,090,880 USDT
  volume-24h: "$3,022,620,000"
  cmgr: 0.03% / 33
  inflation: 33.71%
 - name: OmiseGO
  price: "$14.83"
  p24h: -11
  market-cap: "$1,532,679,131"
  circulating-supply: 102,042,552 OMG
  volume-24h: "$63,574,500"
  cmgr: 50.49% / 6
  inflation: "-0.04%"
 - name: Populous
  price: "$41.22"
  p24h: -3
  market-cap: "$1,525,305,992"
  circulating-supply: 37,004,028 PPT
  volume-24h: "$2,271,650"
  cmgr: 58.49% / 6
  inflation: "-10.29%"
 - name: Zcash
  price: "$431.43"
  p24h: -10
  market-cap: "$1,358,979,711"
  circulating-supply: 3,114,069 ZEC
  volume-24h: "$71,375,000"
  cmgr: "-13.51% / 15"
  inflation: 7.44%
 - name: Verge
  price: "$0.089875"
  p24h: -13
  market-cap: "$1,303,358,298"
  circulating-supply: 14,501,900,288 XVG
  volume-24h: "$75,841,900"
  cmgr: 27.95% / 39
  inflation: 2.06%
 - name: Binance Coin
  price: "$12.60"
  p24h: -9
  market-cap: "$1,247,576,400"
  circulating-supply: 99,014,000 BNB
  volume-24h: "$129,483,000"
  cmgr: 122.80% / 6
  inflation: 0.08%
 - name: Siacoin
  price: "$0.037594"
  p24h: -13
  market-cap: "$1,180,306,719"
  circulating-supply: 31,396,145,152 SC
  volume-24h: "$58,783,600"
  cmgr: 26.70% / 29
  inflation: 0.00%
 - name: Stratis
  price: "$11.50"
  p24h: -13
  market-cap: "$1,135,175,764"
  circulating-supply: 98,710,936 STRAT
  volume-24h: "$25,548,100"
  cmgr: 49.79% / 17
  inflation: "-0.02%"
 - name: Bytecoin
  price: "$0.006127"
  p24h: -8
  market-cap: "$1,125,403,469"
  circulating-supply: 183,679,369,216 BCN
  volume-24h: "$7,904,870"
  cmgr: 11.39% / 43
  inflation: 0.23%
 - name: Steem
  price: "$4.13"
  p24h: -14
  market-cap: "$1,022,039,920"
  circulating-supply: 247,467,296 STEEM
  volume-24h: "$29,580,000"
  cmgr: 10.15% / 21
  inflation: 0.68%
 - name: Ardor
  price: "$0.995641"
  p24h: -9
  market-cap: "$994,644,856"
  circulating-supply: 998,999,488 ARDR
  volume-24h: "$143,752,000"
  cmgr: 20.75% / 18
  inflation: "-0.41%"
 - name: Status
  price: "$0.264278"
  p24h: -9
  market-cap: "$917,172,514"
  circulating-supply: 3,470,483,712 SNT
  volume-24h: "$355,833,000"
  cmgr: 24.53% / 7
  inflation: 0.00%
 - name: Maker
  price: "$1480.84"
  p24h: -7
  market-cap: "$915,496,751"
  circulating-supply: 618,228 MKR
  volume-24h: "$1,662,690"
  cmgr: 42.77% / 12
  inflation: "-"
 - name: Augur
  price: "$81.55"
  p24h: -5
  market-cap: "$897,050,000"
  circulating-supply: 11,000,000 REP
  volume-24h: "$16,086,600"
  cmgr: 16.36% / 27
  inflation: 0.01%
 - name: BitShares
  price: "$0.317687"
  p24h: -9
  market-cap: "$828,330,730"
  circulating-supply: 2,607,379,968 BTS
  volume-24h: "$43,185,600"
  cmgr: 8.22% / 42
  inflation: 0.06%
 - name: 0x
  price: "$1.66"
  p24h: -3
  market-cap: "$827,949,569"
  circulating-supply: 498,764,800 ZRX
  volume-24h: "$20,493,000"
  cmgr: 72.59% / 5
  inflation: "-0.24%"
 - name: Waves
  price: "$8.13"
  p24h: -1
  market-cap: "$813,000,000"
  circulating-supply: 100,000,000 WAVES
  volume-24h: "$26,239,600"
  cmgr: 10.11% / 19
  inflation: "-0.01%"
 - name: Dogecoin
  price: "$0.00659"
  p24h: -8
  market-cap: "$743,890,685"
  circulating-supply: 112,881,745,920 DOGE
  volume-24h: "$20,613,400"
  cmgr: 5.35% / 49
  inflation: 0.36%
 - name: KuCoin Shares
  price: "$7.91"
  p24h: -17
  market-cap: "$720,150,731"
  circulating-supply: 91,043,072 KCS
  volume-24h: "$5,481,780"
  cmgr: 276.01% / 2
  inflation: "-0.04%"
 - name: Electroneum
  price: "$0.120304"
  p24h: -7
  market-cap: "$712,763,819"
  circulating-supply: 5,924,689,408 ETN
  volume-24h: "$5,103,980"
  cmgr: 19.45% / 2
  inflation: 18.19%
 - name: Walton
  price: "$27.79"
  p24h: 1
  market-cap: "$691,920,366"
  circulating-supply: 24,898,178 WTC
  volume-24h: "$50,403,900"
  cmgr: 92.30% / 5
  inflation: 0.00%
 - name: Veritaseum
  price: "$335.15"
  p24h: -8
  market-cap: "$682,581,571"
  circulating-supply: 2,036,645 VERI
  volume-24h: "$628,128"
  cmgr: 33.82% / 7
  inflation: 0.00%
 - name: Komodo
  price: "$5.96"
  p24h: -11
  market-cap: "$614,151,644"
  circulating-supply: 103,045,576 KMD
  volume-24h: "$7,010,050"
  cmgr: 45.00% / 11
  inflation: "-1.09%"
 - name: Decred
  price: "$91.29"
  p24h: -8
  market-cap: "$603,249,158"
  circulating-supply: 6,608,053 DCR
  volume-24h: "$1,304,410"
  cmgr: 22.47% / 23
  inflation: 3.04%
 - name: Dragonchain
  price: "$2.39"
  p24h: -11
  market-cap: "$569,828,436"
  circulating-supply: 238,421,936 DRGN
  volume-24h: "$3,490,920"
  cmgr: 926.29% / 1
  inflation: 0.14%
 - name: Dentacoin
  price: "$0.001735"
  p24h: -5
  market-cap: "$564,205,023"
  circulating-supply: 325,190,221,824 DCN
  volume-24h: "$1,082,850"
  cmgr: 43.44% / 5
  inflation: 0.05%
 - name: Loopring
  price: "$0.965091"
  p24h: -9
  market-cap: "$541,577,621"
  circulating-supply: 561,167,424 LRC
  volume-24h: "$11,179,900"
  cmgr: 55.67% / 5
  inflation: 95.51%
 - name: Ark
  price: "$5.36"
  p24h: -11
  market-cap: "$525,179,682"
  circulating-supply: 97,981,280 ARK
  volume-24h: "$7,183,610"
  cmgr: 68.16% / 10
  inflation: "-0.07%"
 - name: SALT
  price: "$7.23"
  p24h: -11
  market-cap: "$514,095,078"
  circulating-supply: 71,105,824 SALT
  volume-24h: "$12,135,100"
  cmgr: 4.35% / 4
  inflation: 38.07%
 - name: QASH
  price: "$1.46"
  p24h: -9
  market-cap: "$511,000,000"
  circulating-supply: 350,000,000 QASH
  volume-24h: "$19,206,800"
  cmgr: 85.16% / 2
  inflation: "-0.17%"
 - name: DigiByte
  price: "$0.050116"
  p24h: -11
  market-cap: "$487,853,928"
  circulating-supply: 9,734,494,208 DGB
  volume-24h: "$11,389,900"
  cmgr: 8.02% / 47
  inflation: 1.48%
 - name: Basic Attention Token
  price: "$0.487348"
  p24h: -12
  market-cap: "$487,348,000"
  circulating-supply: 1,000,000,000 BAT
  volume-24h: "$14,891,300"
  cmgr: 19.38% / 7
  inflation: 0.00%
 - name: PIVX
  price: "$8.68"
  p24h: 4
  market-cap: "$480,968,834"
  circulating-supply: 55,411,156 PIVX
  volume-24h: "$11,144,700"
  cmgr: 47.24% / 23
  inflation: 0.42%
 - name: Golem
  price: "$0.571295"
  p24h: -9
  market-cap: "$476,609,709"
  circulating-supply: 834,262,016 GNT
  volume-24h: "$10,420,800"
  cmgr: 30.48% / 14
  inflation: 0.10%
 - name: Hshare
  price: "$10.82"
  p24h: -9
  market-cap: "$460,173,193"
  circulating-supply: 42,529,872 HSR
  volume-24h: "$100,098,000"
  cmgr: "-9.81% / 5"
  inflation: 0.30%
 - name: Byteball Bytes
  price: "$700.65"
  p24h: -1
  market-cap: "$452,074,794"
  circulating-supply: 645,222 GBYTE
  volume-24h: "$1,461,460"
  cmgr: 32.04% / 13
  inflation: 0.00%
 - name: Kyber Network
  price: "$3.32"
  p24h: -9
  market-cap: "$445,320,554"
  circulating-supply: 134,132,696 KNC
  volume-24h: "$39,139,800"
  cmgr: 18.46% / 4
  inflation: 0.08%
 - name: WAX
  price: "$0.903366"
  p24h: -8
  market-cap: "$445,318,368"
  circulating-supply: 492,954,528 WAX
  volume-24h: "$8,945,930"
  cmgr: "-77.44% / 1"
  inflation: "-"
 - name: Ethos
  price: "$5.84"
  p24h: -8
  market-cap: "$440,377,399"
  circulating-supply: 75,407,088 ETHOS
  volume-24h: "$3,608,200"
  cmgr: 84.05% / 2
  inflation: 0.31%
 - name: Gas
  price: "$44.44"
  p24h: -12
  market-cap: "$425,068,288"
  circulating-supply: 9,564,993 GAS
  volume-24h: "$19,148,900"
  cmgr: 74.36% / 6
  inflation: 4.55%
 - name: RChain
  price: "$1.71"
  p24h: -6
  market-cap: "$417,309,706"
  circulating-supply: 244,040,768 RHOC
  volume-24h: "$773,418"
  cmgr: 117.91% / 3
  inflation: 33.41%
 - name: FunFair
  price: "$0.092324"
  p24h: -8
  market-cap: "$407,987,657"
  circulating-supply: 4,419,085,824 FUN
  volume-24h: "$12,285,800"
  cmgr: 37.92% / 6
  inflation: 3.98%
 - name: Cindicator
  price: "$0.272886"
  p24h: 32
  market-cap: "$394,586,767"
  circulating-supply: 1,445,976,576 CND
  volume-24h: "$262,465,000"
  cmgr: 120.78% / 3
  inflation: 0.00%
 - name: SmartCash
  price: "$0.634479"
  p24h: -14
  market-cap: "$393,086,475"
  circulating-supply: 619,542,144 SMART
  volume-24h: "$943,553"
  cmgr: 88.55% / 6
  inflation: 24.97%
 - name: Factom
  price: "$44.59"
  p24h: -6
  market-cap: "$389,944,098"
  circulating-supply: 8,745,102 FCT
  volume-24h: "$10,792,400"
  cmgr: 22.26% / 27
  inflation: 0.00%
 - name: Nxt
  price: "$0.381823"
  p24h: 29
  market-cap: "$381,441,154"
  circulating-supply: 998,999,936 NXT
  volume-24h: "$122,842,000"
  cmgr: 6.32% / 49
  inflation: "-0.20%"
 - name: Kin
  price: "$0.000492"
  p24h: 0
  market-cap: "$372,000,000"
  circulating-supply: 756,097,548,288 KIN
  volume-24h: "$1,325,070"
  cmgr: 49.42% / 4
  inflation: 0.11%
 - name: Aion
  price: "$4.75"
  p24h: -13
  market-cap: "$370,278,764"
  circulating-supply: 77,953,424 AION
  volume-24h: "$8,336,950"
  cmgr: 108.52% / 3
  inflation: 30.32%
 - name: Dent
  price: "$0.033938"
  p24h: -12
  market-cap: "$360,243,757"
  circulating-supply: 10,614,761,472 DENT
  volume-24h: "$10,021,500"
  cmgr: 129.26% / 5
  inflation: 0.00%
 - name: MonaCoin
  price: "$6.24"
  p24h: -8
  market-cap: "$355,053,036"
  circulating-supply: 56,899,524 MONA
  volume-24h: "$5,033,730"
  cmgr: 10.28% / 46
  inflation: 1.17%
 - name: DigixDAO
  price: "$176.77"
  p24h: -6
  market-cap: "$353,540,000"
  circulating-supply: 2,000,000 DGD
  volume-24h: "$6,663,630"
  cmgr: 12.74% / 8
  inflation: 0.00%
 - name: Power Ledger
  price: "$0.949943"
  p24h: -9
  market-cap: "$345,599,442"
  circulating-supply: 363,810,720 POWR
  volume-24h: "$27,744,500"
  cmgr: 337.83% / 2
  inflation: 1.12%
 - name: Aeternity
  price: "$1.48"
  p24h: -2
  market-cap: "$344,870,298"
  circulating-supply: 233,020,480 AE
  volume-24h: "$2,399,090"
  cmgr: 11.87% / 7
  inflation: "-0.13%"
 - name: aelf
  price: "$1.37"
  p24h: -10
  market-cap: "$342,500,000"
  circulating-supply: 250,000,000 ELF
  volume-24h: "$91,334,500"
  cmgr: 43.85% / 1
  inflation: "-"
 - name: Bytom
  price: "$0.340729"
  p24h: -4
  market-cap: "$336,299,523"
  circulating-supply: 987,000,000 BTM
  volume-24h: "$20,267,400"
  cmgr: 26.63% / 5
  inflation: 0.00%
 - name: ZClassic
  price: "$106.69"
  p24h: -19
  market-cap: "$336,029,543"
  circulating-supply: 3,149,588 ZCL
  volume-24h: "$29,954,800"
  cmgr: 25.48% / 14
  inflation: 73.30%
 - name: Nebulas
  price: "$9.32"
  p24h: -7
  market-cap: "$330,860,000"
  circulating-supply: 35,500,000 NAS
  volume-24h: "$22,865,400"
  cmgr: 17.66% / 5
  inflation: "-"
 - name: MaidSafeCoin
  price: "$0.730459"
  p24h: 8
  market-cap: "$330,570,982"
  circulating-supply: 452,552,416 MAID
  volume-24h: "$11,475,700"
  cmgr: 8.94% / 44
  inflation: 0.00%
 - name: Syscoin
  price: "$0.613294"
  p24h: -3
  market-cap: "$325,307,399"
  circulating-supply: 530,426,528 SYS
  volume-24h: "$29,120,200"
  cmgr: 15.10% / 41
  inflation: 0.13%
 - name: ReddCoin
  price: "$0.010511"
  p24h: -11
  market-cap: "$302,001,007"
  circulating-supply: 28,731,899,904 RDD
  volume-24h: "$5,219,450"
  cmgr: 13.19% / 47
  inflation: 0.09%
 - name: Nexus
  price: "$5.47"
  p24h: -6
  market-cap: "$301,758,337"
  circulating-supply: 55,166,056 NXS
  volume-24h: "$2,823,430"
  cmgr: 22.15% / 36
  inflation: 1.13%
 - name: SIRIN LABS Token
  price: "$3.02"
  p24h: 23
  market-cap: "$298,797,166"
  circulating-supply: 98,939,456 SRN
  volume-24h: "$15,880,000"
  cmgr: 229.99% / 1
  inflation: "-"
 - name: GXShares
  price: "$4.92"
  p24h: 0
  market-cap: "$295,200,000"
  circulating-supply: 60,000,000 GXS
  volume-24h: "$9,631,300"
  cmgr: "-2.54% / 7"
  inflation: 48.19%
 - name: Enigma
  price: "$3.91"
  p24h: -11
  market-cap: "$292,609,428"
  circulating-supply: 74,836,168 ENG
  volume-24h: "$7,421,050"
  cmgr: 92.34% / 3
  inflation: 0.41%
 - name: Request Network
  price: "$0.455615"
  p24h: -8
  market-cap: "$292,069,688"
  circulating-supply: 641,044,928 REQ
  volume-24h: "$13,739,700"
  cmgr: 104.63% / 3
  inflation: 0.05%
 - name: Cryptonex
  price: "$6.26"
  p24h: 7
  market-cap: "$282,187,766"
  circulating-supply: 45,077,920 CNX
  volume-24h: "$293,944"
  cmgr: 30.18% / 3
  inflation: 0.11%
 - name: Emercoin
  price: "$6.72"
  p24h: -10
  market-cap: "$276,999,596"
  circulating-supply: 41,220,176 EMC
  volume-24h: "$1,951,950"
  cmgr: 23.20% / 41
  inflation: 0.14%
 - name: ChainLink
  price: "$0.790746"
  p24h: -10
  market-cap: "$276,761,100"
  circulating-supply: 350,000,000 LINK
  volume-24h: "$11,327,700"
  cmgr: 54.30% / 4
  inflation: "-0.36%"
 - name: Neblio
  price: "$21.57"
  p24h: -13
  market-cap: "$274,933,398"
  circulating-supply: 12,746,101 NEBL
  volume-24h: "$7,116,500"
  cmgr: 153.01% / 4
  inflation: 0.66%
 - name: Bancor
  price: "$6.59"
  p24h: -7
  market-cap: "$268,693,219"
  circulating-supply: 40,772,872 BNT
  volume-24h: "$8,478,540"
  cmgr: 6.69% / 7
  inflation: "-0.01%"
 - name: ZCoin
  price: "$67.90"
  p24h: -12
  market-cap: "$267,385,718"
  circulating-supply: 3,937,934 XZC
  volume-24h: "$3,653,910"
  cmgr: 42.92% / 15
  inflation: 5.28%
 - name: Substratum
  price: "$1.17"
  p24h: -16
  market-cap: "$264,526,995"
  circulating-supply: 226,091,456 SUB
  volume-24h: "$12,041,500"
  cmgr: 131.18% / 4
  inflation: 0.14%
 - name: Experience Points
  price: "$0.00127"
  p24h: -11
  market-cap: "$268,849,841"
  circulating-supply: 211,692,781,568 XP
  volume-24h: "$1,528,840"
  cmgr: 160.93% / 1
  inflation: 9.61%
 - name: MediBloc
  price: "$0.088088"
  p24h: -13
  market-cap: "$261,302,842"
  circulating-supply: 2,966,384,128 MED
  volume-24h: "$6,968,920"
  cmgr: 390.11% / 1
  inflation: "-"
 - name: Quantstamp
  price: "$0.412894"
  p24h: -6
  market-cap: "$254,885,317"
  circulating-supply: 617,314,176 QSP
  volume-24h: "$15,626,100"
  cmgr: 159.68% / 2
  inflation: 0.00%
 - name: Bitcore
  price: "$22.43"
  p24h: -17
  market-cap: "$244,287,081"
  circulating-supply: 10,891,087 BTX
  volume-24h: "$3,291,470"
  cmgr: 16.18% / 9
  inflation: 444.11%
 - name: TenX
  price: "$2.23"
  p24h: -6
  market-cap: "$233,394,721"
  circulating-supply: 104,661,312 PAY
  volume-24h: "$11,627,300"
  cmgr: 17.68% / 6
  inflation: 0.05%
 - name: XPlay
  price: "$0.231756"
  p24h: 0
  market-cap: "$231,756,000"
  circulating-supply: 1,000,000,000 XPA
  volume-24h: "$143,905"
  cmgr: 106.90% / 4
  inflation: 0.00%
 - name: Iconomi
  price: "$2.26"
  p24h: -11
  market-cap: "$225,521,589"
  circulating-supply: 99,788,312 ICN
  volume-24h: "$3,993,010"
  cmgr: "-3.30% / 7"
  inflation: "-0.19%"
--- a/src/_data/errors.yml
+++ b/src/_data/errors.yml
@@ -0,0 +1,23 @@
 error-400:
  name: 400
  description: We are sorry but your request contains bad syntax and cannot be fulfilled
 error-401:
  name: 401
  description: We are sorry but you are not authorized to access this page
 error-403:
  name: 403
  description: We are sorry but you do not have permission to access this page
 error-404:
  name: 404
  description: We are sorry but our service is currently not available
 error-500:
  name: 500
  description: We are sorry but your request contains bad syntax and cannot be fulfilled
 error-503:
  name: 503
  description: We are sorry but our service is currently not available
--- a/src/_data/icons-fa.yml
+++ b/src/_data/icons-fa.yml
@@ -0,0 +1,786 @@
 - fa-500px
 - fa-address-book
 - fa-address-book-o
 - fa-address-card
 - fa-address-card-o
 - fa-adjust
 - fa-adn
 - fa-align-center
 - fa-align-justify
 - fa-align-left
 - fa-align-right
 - fa-amazon
 - fa-ambulance
 - fa-american-sign-language-interpreting
 - fa-anchor
 - fa-android
 - fa-angellist
 - fa-angle-double-down
 - fa-angle-double-left
 - fa-angle-double-right
 - fa-angle-double-up
 - fa-angle-down
 - fa-angle-left
 - fa-angle-right
 - fa-angle-up
 - fa-apple
 - fa-archive
 - fa-area-chart
 - fa-arrow-circle-down
 - fa-arrow-circle-left
 - fa-arrow-circle-o-down
 - fa-arrow-circle-o-left
 - fa-arrow-circle-o-right
 - fa-arrow-circle-o-up
 - fa-arrow-circle-right
 - fa-arrow-circle-up
 - fa-arrow-down
 - fa-arrow-left
 - fa-arrow-right
 - fa-arrow-up
 - fa-arrows
 - fa-arrows-alt
 - fa-arrows-h
 - fa-arrows-v
 - fa-asl-interpreting
 - fa-assistive-listening-systems
 - fa-asterisk
 - fa-at
 - fa-audio-description
 - fa-automobile
 - fa-backward
 - fa-balance-scale
 - fa-ban
 - fa-bandcamp
 - fa-bank
 - fa-bar-chart
 - fa-bar-chart-o
 - fa-barcode
 - fa-bars
 - fa-bath
 - fa-bathtub
 - fa-battery
 - fa-battery-0
 - fa-battery-1
 - fa-battery-2
 - fa-battery-3
 - fa-battery-4
 - fa-battery-empty
 - fa-battery-full
 - fa-battery-half
 - fa-battery-quarter
 - fa-battery-three-quarters
 - fa-bed
 - fa-beer
 - fa-behance
 - fa-behance-square
 - fa-bell
 - fa-bell-o
 - fa-bell-slash
 - fa-bell-slash-o
 - fa-bicycle
 - fa-binoculars
 - fa-birthday-cake
 - fa-bitbucket
 - fa-bitbucket-square
 - fa-bitcoin
 - fa-black-tie
 - fa-blind
 - fa-bluetooth
 - fa-bluetooth-b
 - fa-bold
 - fa-bolt
 - fa-bomb
 - fa-book
 - fa-bookmark
 - fa-bookmark-o
 - fa-braille
 - fa-briefcase
 - fa-btc
 - fa-bug
 - fa-building
 - fa-building-o
 - fa-bullhorn
 - fa-bullseye
 - fa-bus
 - fa-buysellads
 - fa-cab
 - fa-calculator
 - fa-calendar
 - fa-calendar-check-o
 - fa-calendar-minus-o
 - fa-calendar-o
 - fa-calendar-plus-o
 - fa-calendar-times-o
 - fa-camera
 - fa-camera-retro
 - fa-car
 - fa-caret-down
 - fa-caret-left
 - fa-caret-right
 - fa-caret-square-o-down
 - fa-caret-square-o-left
 - fa-caret-square-o-right
 - fa-caret-square-o-up
 - fa-caret-up
 - fa-cart-arrow-down
 - fa-cart-plus
 - fa-cc
 - fa-cc-amex
 - fa-cc-diners-club
 - fa-cc-discover
 - fa-cc-jcb
 - fa-cc-mastercard
 - fa-cc-paypal
 - fa-cc-stripe
 - fa-cc-visa
 - fa-certificate
 - fa-chain
 - fa-chain-broken
 - fa-check
 - fa-check-circle
 - fa-check-circle-o
 - fa-check-square
 - fa-check-square-o
 - fa-chevron-circle-down
 - fa-chevron-circle-left
 - fa-chevron-circle-right
 - fa-chevron-circle-up
 - fa-chevron-down
 - fa-chevron-left
 - fa-chevron-right
 - fa-chevron-up
 - fa-child
 - fa-chrome
 - fa-circle
 - fa-circle-o
 - fa-circle-o-notch
 - fa-circle-thin
 - fa-clipboard
 - fa-clock-o
 - fa-clone
 - fa-close
 - fa-cloud
 - fa-cloud-download
 - fa-cloud-upload
 - fa-cny
 - fa-code
 - fa-code-fork
 - fa-codepen
 - fa-codiepie
 - fa-coffee
 - fa-cog
 - fa-cogs
 - fa-columns
 - fa-comment
 - fa-comment-o
 - fa-commenting
 - fa-commenting-o
 - fa-comments
 - fa-comments-o
 - fa-compass
 - fa-compress
 - fa-connectdevelop
 - fa-contao
 - fa-copy
 - fa-copyright
 - fa-creative-commons
 - fa-credit-card
 - fa-credit-card-alt
 - fa-crop
 - fa-crosshairs
 - fa-css3
 - fa-cube
 - fa-cubes
 - fa-cut
 - fa-cutlery
 - fa-dashboard
 - fa-dashcube
 - fa-database
 - fa-deaf
 - fa-deafness
 - fa-dedent
 - fa-delicious
 - fa-desktop
 - fa-deviantart
 - fa-diamond
 - fa-digg
 - fa-dollar
 - fa-dot-circle-o
 - fa-download
 - fa-dribbble
 - fa-drivers-license
 - fa-drivers-license-o
 - fa-dropbox
 - fa-drupal
 - fa-edge
 - fa-edit
 - fa-eercast
 - fa-eject
 - fa-ellipsis-h
 - fa-ellipsis-v
 - fa-empire
 - fa-envelope
 - fa-envelope-o
 - fa-envelope-open
 - fa-envelope-open-o
 - fa-envelope-square
 - fa-envira
 - fa-eraser
 - fa-etsy
 - fa-eur
 - fa-euro
 - fa-exchange
 - fa-exclamation
 - fa-exclamation-circle
 - fa-exclamation-triangle
 - fa-expand
 - fa-expeditedssl
 - fa-external-link
 - fa-external-link-square
 - fa-eye
 - fa-eye-slash
 - fa-eyedropper
 - fa-fa
 - fa-facebook
 - fa-facebook-f
 - fa-facebook-official
 - fa-facebook-square
 - fa-fast-backward
 - fa-fast-forward
 - fa-fax
 - fa-feed
 - fa-female
 - fa-fighter-jet
 - fa-file
 - fa-file-archive-o
 - fa-file-audio-o
 - fa-file-code-o
 - fa-file-excel-o
 - fa-file-image-o
 - fa-file-movie-o
 - fa-file-o
 - fa-file-pdf-o
 - fa-file-photo-o
 - fa-file-picture-o
 - fa-file-powerpoint-o
 - fa-file-sound-o
 - fa-file-text
 - fa-file-text-o
 - fa-file-video-o
 - fa-file-word-o
 - fa-file-zip-o
 - fa-files-o
 - fa-film
 - fa-filter
 - fa-fire
 - fa-fire-extinguisher
 - fa-firefox
 - fa-first-order
 - fa-flag
 - fa-flag-checkered
 - fa-flag-o
 - fa-flash
 - fa-flask
 - fa-flickr
 - fa-floppy-o
 - fa-folder
 - fa-folder-o
 - fa-folder-open
 - fa-folder-open-o
 - fa-font
 - fa-font-awesome
 - fa-fonticons
 - fa-fort-awesome
 - fa-forumbee
 - fa-forward
 - fa-foursquare
 - fa-free-code-camp
 - fa-frown-o
 - fa-futbol-o
 - fa-gamepad
 - fa-gavel
 - fa-gbp
 - fa-ge
 - fa-gear
 - fa-gears
 - fa-genderless
 - fa-get-pocket
 - fa-gg
 - fa-gg-circle
 - fa-gift
 - fa-git
 - fa-git-square
 - fa-github
 - fa-github-alt
 - fa-github-square
 - fa-gitlab
 - fa-gittip
 - fa-glass
 - fa-glide
 - fa-glide-g
 - fa-globe
 - fa-google
 - fa-google-plus
 - fa-google-plus-circle
 - fa-google-plus-official
 - fa-google-plus-square
 - fa-google-wallet
 - fa-graduation-cap
 - fa-gratipay
 - fa-grav
 - fa-group
 - fa-h-square
 - fa-hacker-news
 - fa-hand-grab-o
 - fa-hand-lizard-o
 - fa-hand-o-down
 - fa-hand-o-left
 - fa-hand-o-right
 - fa-hand-o-up
 - fa-hand-paper-o
 - fa-hand-peace-o
 - fa-hand-pointer-o
 - fa-hand-rock-o
 - fa-hand-scissors-o
 - fa-hand-spock-o
 - fa-hand-stop-o
 - fa-handshake-o
 - fa-hard-of-hearing
 - fa-hashtag
 - fa-hdd-o
 - fa-header
 - fa-headphones
 - fa-heart
 - fa-heart-o
 - fa-heartbeat
 - fa-history
 - fa-home
 - fa-hospital-o
 - fa-hotel
 - fa-hourglass
 - fa-hourglass-1
 - fa-hourglass-2
 - fa-hourglass-3
 - fa-hourglass-end
 - fa-hourglass-half
 - fa-hourglass-o
 - fa-hourglass-start
 - fa-houzz
 - fa-html5
 - fa-i-cursor
 - fa-id-badge
 - fa-id-card
 - fa-id-card-o
 - fa-ils
 - fa-image
 - fa-imdb
 - fa-inbox
 - fa-indent
 - fa-industry
 - fa-info
 - fa-info-circle
 - fa-inr
 - fa-instagram
 - fa-institution
 - fa-internet-explorer
 - fa-intersex
 - fa-ioxhost
 - fa-italic
 - fa-joomla
 - fa-jpy
 - fa-jsfiddle
 - fa-key
 - fa-keyboard-o
 - fa-krw
 - fa-language
 - fa-laptop
 - fa-lastfm
 - fa-lastfm-square
 - fa-leaf
 - fa-leanpub
 - fa-legal
 - fa-lemon-o
 - fa-level-down
 - fa-level-up
 - fa-life-bouy
 - fa-life-buoy
 - fa-life-ring
 - fa-life-saver
 - fa-lightbulb-o
 - fa-line-chart
 - fa-link
 - fa-linkedin
 - fa-linkedin-square
 - fa-linode
 - fa-linux
 - fa-list
 - fa-list-alt
 - fa-list-ol
 - fa-list-ul
 - fa-location-arrow
 - fa-lock
 - fa-long-arrow-down
 - fa-long-arrow-left
 - fa-long-arrow-right
 - fa-long-arrow-up
 - fa-low-vision
 - fa-magic
 - fa-magnet
 - fa-mail-forward
 - fa-mail-reply
 - fa-mail-reply-all
 - fa-male
 - fa-map
 - fa-map-marker
 - fa-map-o
 - fa-map-pin
 - fa-map-signs
 - fa-mars
 - fa-mars-double
 - fa-mars-stroke
 - fa-mars-stroke-h
 - fa-mars-stroke-v
 - fa-maxcdn
 - fa-meanpath
 - fa-medium
 - fa-medkit
 - fa-meetup
 - fa-meh-o
 - fa-mercury
 - fa-microchip
 - fa-microphone
 - fa-microphone-slash
 - fa-minus
 - fa-minus-circle
 - fa-minus-square
 - fa-minus-square-o
 - fa-mixcloud
 - fa-mobile
 - fa-mobile-phone
 - fa-modx
 - fa-money
 - fa-moon-o
 - fa-mortar-board
 - fa-motorcycle
 - fa-mouse-pointer
 - fa-music
 - fa-navicon
 - fa-neuter
 - fa-newspaper-o
 - fa-object-group
 - fa-object-ungroup
 - fa-odnoklassniki
 - fa-odnoklassniki-square
 - fa-opencart
 - fa-openid
 - fa-opera
 - fa-optin-monster
 - fa-outdent
 - fa-pagelines
 - fa-paint-brush
 - fa-paper-plane
 - fa-paper-plane-o
 - fa-paperclip
 - fa-paragraph
 - fa-paste
 - fa-pause
 - fa-pause-circle
 - fa-pause-circle-o
 - fa-paw
 - fa-paypal
 - fa-pencil
 - fa-pencil-square
 - fa-pencil-square-o
 - fa-percent
 - fa-phone
 - fa-phone-square
 - fa-photo
 - fa-picture-o
 - fa-pie-chart
 - fa-pied-piper
 - fa-pied-piper-alt
 - fa-pied-piper-pp
 - fa-pinterest
 - fa-pinterest-p
 - fa-pinterest-square
 - fa-plane
 - fa-play
 - fa-play-circle
 - fa-play-circle-o
 - fa-plug
 - fa-plus
 - fa-plus-circle
 - fa-plus-square
 - fa-plus-square-o
 - fa-podcast
 - fa-power-off
 - fa-print
 - fa-product-hunt
 - fa-puzzle-piece
 - fa-qq
 - fa-qrcode
 - fa-question
 - fa-question-circle
 - fa-question-circle-o
 - fa-quora
 - fa-quote-left
 - fa-quote-right
 - fa-ra
 - fa-random
 - fa-ravelry
 - fa-rebel
 - fa-recycle
 - fa-reddit
 - fa-reddit-alien
 - fa-reddit-square
 - fa-refresh
 - fa-registered
 - fa-remove
 - fa-renren
 - fa-reorder
 - fa-repeat
 - fa-reply
 - fa-reply-all
 - fa-resistance
 - fa-retweet
 - fa-rmb
 - fa-road
 - fa-rocket
 - fa-rotate-left
 - fa-rotate-right
 - fa-rouble
 - fa-rss
 - fa-rss-square
 - fa-rub
 - fa-ruble
 - fa-rupee
 - fa-s15
 - fa-safari
 - fa-save
 - fa-scissors
 - fa-scribd
 - fa-search
 - fa-search-minus
 - fa-search-plus
 - fa-sellsy
 - fa-send
 - fa-send-o
 - fa-server
 - fa-share
 - fa-share-alt
 - fa-share-alt-square
 - fa-share-square
 - fa-share-square-o
 - fa-shekel
 - fa-sheqel
 - fa-shield
 - fa-ship
 - fa-shirtsinbulk
 - fa-shopping-bag
 - fa-shopping-basket
 - fa-shopping-cart
 - fa-shower
 - fa-sign-in
 - fa-sign-language
 - fa-sign-out
 - fa-signal
 - fa-signing
 - fa-simplybuilt
 - fa-sitemap
 - fa-skyatlas
 - fa-skype
 - fa-slack
 - fa-sliders
 - fa-slideshare
 - fa-smile-o
 - fa-snapchat
 - fa-snapchat-ghost
 - fa-snapchat-square
 - fa-snowflake-o
 - fa-soccer-ball-o
 - fa-sort
 - fa-sort-alpha-asc
 - fa-sort-alpha-desc
 - fa-sort-amount-asc
 - fa-sort-amount-desc
 - fa-sort-asc
 - fa-sort-desc
 - fa-sort-down
 - fa-sort-numeric-asc
 - fa-sort-numeric-desc
 - fa-sort-up
 - fa-soundcloud
 - fa-space-shuttle
 - fa-spinner
 - fa-spoon
 - fa-spotify
 - fa-square
 - fa-square-o
 - fa-stack-exchange
 - fa-stack-overflow
 - fa-star
 - fa-star-half
 - fa-star-half-empty
 - fa-star-half-full
 - fa-star-half-o
 - fa-star-o
 - fa-steam
 - fa-steam-square
 - fa-step-backward
 - fa-step-forward
 - fa-stethoscope
 - fa-sticky-note
 - fa-sticky-note-o
 - fa-stop
 - fa-stop-circle
 - fa-stop-circle-o
 - fa-street-view
 - fa-strikethrough
 - fa-stumbleupon
 - fa-stumbleupon-circle
 - fa-subscript
 - fa-subway
 - fa-suitcase
 - fa-sun-o
 - fa-superpowers
 - fa-superscript
 - fa-support
 - fa-table
 - fa-tablet
 - fa-tachometer
 - fa-tag
 - fa-tags
 - fa-tasks
 - fa-taxi
 - fa-telegram
 - fa-television
 - fa-tencent-weibo
 - fa-terminal
 - fa-text-height
 - fa-text-width
 - fa-th
 - fa-th-large
 - fa-th-list
 - fa-themeisle
 - fa-thermometer
 - fa-thermometer-0
 - fa-thermometer-1
 - fa-thermometer-2
 - fa-thermometer-3
 - fa-thermometer-4
 - fa-thermometer-empty
 - fa-thermometer-full
 - fa-thermometer-half
 - fa-thermometer-quarter
 - fa-thermometer-three-quarters
 - fa-thumb-tack
 - fa-thumbs-down
 - fa-thumbs-o-down
 - fa-thumbs-o-up
 - fa-thumbs-up
 - fa-ticket
 - fa-times
 - fa-times-circle
 - fa-times-circle-o
 - fa-times-rectangle
 - fa-times-rectangle-o
 - fa-tint
 - fa-toggle-down
 - fa-toggle-left
 - fa-toggle-off
 - fa-toggle-on
 - fa-toggle-right
 - fa-toggle-up
 - fa-trademark
 - fa-train
 - fa-transgender
 - fa-transgender-alt
 - fa-trash
 - fa-trash-o
 - fa-tree
 - fa-trello
 - fa-tripadvisor
 - fa-trophy
 - fa-truck
 - fa-try
 - fa-tty
 - fa-tumblr
 - fa-tumblr-square
 - fa-turkish-lira
 - fa-tv
 - fa-twitch
 - fa-twitter
 - fa-twitter-square
 - fa-umbrella
 - fa-underline
 - fa-undo
 - fa-universal-access
 - fa-university
 - fa-unlink
 - fa-unlock
 - fa-unlock-alt
 - fa-unsorted
 - fa-upload
 - fa-usb
 - fa-usd
 - fa-user
 - fa-user-circle
 - fa-user-circle-o
 - fa-user-md
 - fa-user-o
 - fa-user-plus
 - fa-user-secret
 - fa-user-times
 - fa-users
 - fa-vcard
 - fa-vcard-o
 - fa-venus
 - fa-venus-double
 - fa-venus-mars
 - fa-viacoin
 - fa-viadeo
 - fa-viadeo-square
 - fa-video-camera
 - fa-vimeo
 - fa-vimeo-square
 - fa-vine
 - fa-vk
 - fa-volume-control-phone
 - fa-volume-down
 - fa-volume-off
 - fa-volume-up
 - fa-warning
 - fa-wechat
 - fa-weibo
 - fa-weixin
 - fa-whatsapp
 - fa-wheelchair
 - fa-wheelchair-alt
 - fa-wifi
 - fa-wikipedia-w
 - fa-window-close
 - fa-window-close-o
 - fa-window-maximize
 - fa-window-minimize
 - fa-window-restore
 - fa-windows
 - fa-won
 - fa-wordpress
 - fa-wpbeginner
 - fa-wpexplorer
 - fa-wpforms
 - fa-wrench
 - fa-xing
 - fa-xing-square
 - fa-y-combinator
 - fa-y-combinator-square
 - fa-yahoo
 - fa-yc
 - fa-yc-square
 - fa-yelp
 - fa-yen
 - fa-yoast
 - fa-youtube
 - fa-youtube-play
 - fa-youtube-square
--- a/src/_data/icons-fe.yml
+++ b/src/_data/icons-fe.yml
@@ -0,0 +1,263 @@
 - fe-activity
 - fe-airplay
 - fe-alert-circle
 - fe-alert-octagon
 - fe-alert-triangle
 - fe-align-center
 - fe-align-justify
 - fe-align-left
 - fe-align-right
 - fe-anchor
 - fe-aperture
 - fe-arrow-down
 - fe-arrow-down-circle
 - fe-arrow-down-left
 - fe-arrow-down-right
 - fe-arrow-left
 - fe-arrow-left-circle
 - fe-arrow-right
 - fe-arrow-right-circle
 - fe-arrow-up
 - fe-arrow-up-circle
 - fe-arrow-up-left
 - fe-arrow-up-right
 - fe-at-sign
 - fe-award
 - fe-bar-chart
 - fe-bar-chart-2
 - fe-battery
 - fe-battery-charging
 - fe-bell
 - fe-bell-off
 - fe-bluetooth
 - fe-bold
 - fe-book
 - fe-book-open
 - fe-bookmark
 - fe-box
 - fe-briefcase
 - fe-calendar
 - fe-camera
 - fe-camera-off
 - fe-cast
 - fe-check
 - fe-check-circle
 - fe-check-square
 - fe-chevron-down
 - fe-chevron-left
 - fe-chevron-right
 - fe-chevron-up
 - fe-chevrons-down
 - fe-chevrons-left
 - fe-chevrons-right
 - fe-chevrons-up
 - fe-chrome
 - fe-circle
 - fe-clipboard
 - fe-clock
 - fe-cloud
 - fe-cloud-drizzle
 - fe-cloud-lightning
 - fe-cloud-off
 - fe-cloud-rain
 - fe-cloud-snow
 - fe-code
 - fe-codepen
 - fe-command
 - fe-compass
 - fe-copy
 - fe-corner-down-left
 - fe-corner-down-right
 - fe-corner-left-down
 - fe-corner-left-up
 - fe-corner-right-down
 - fe-corner-right-up
 - fe-corner-up-left
 - fe-corner-up-right
 - fe-cpu
 - fe-credit-card
 - fe-crop
 - fe-crosshair
 - fe-database
 - fe-delete
 - fe-disc
 - fe-dollar-sign
 - fe-download
 - fe-download-cloud
 - fe-droplet
 - fe-edit
 - fe-edit-2
 - fe-edit-3
 - fe-external-link
 - fe-eye
 - fe-eye-off
 - fe-facebook
 - fe-fast-forward
 - fe-feather
 - fe-file
 - fe-file-minus
 - fe-file-plus
 - fe-file-text
 - fe-film
 - fe-filter
 - fe-flag
 - fe-folder
 - fe-folder-minus
 - fe-folder-plus
 - fe-git-branch
 - fe-git-commit
 - fe-git-merge
 - fe-git-pull-request
 - fe-github
 - fe-gitlab
 - fe-globe
 - fe-grid
 - fe-hard-drive
 - fe-hash
 - fe-headphones
 - fe-heart
 - fe-help-circle
 - fe-home
 - fe-image
 - fe-inbox
 - fe-info
 - fe-instagram
 - fe-italic
 - fe-layers
 - fe-layout
 - fe-life-buoy
 - fe-link
 - fe-link-2
 - fe-linkedin
 - fe-list
 - fe-loader
 - fe-lock
 - fe-log-in
 - fe-log-out
 - fe-mail
 - fe-map
 - fe-map-pin
 - fe-maximize
 - fe-maximize-2
 - fe-menu
 - fe-message-circle
 - fe-message-square
 - fe-mic
 - fe-mic-off
 - fe-minimize
 - fe-minimize-2
 - fe-minus
 - fe-minus-circle
 - fe-minus-square
 - fe-monitor
 - fe-moon
 - fe-more-horizontal
 - fe-more-vertical
 - fe-move
 - fe-music
 - fe-navigation
 - fe-navigation-2
 - fe-octagon
 - fe-package
 - fe-paperclip
 - fe-pause
 - fe-pause-circle
 - fe-percent
 - fe-phone
 - fe-phone-call
 - fe-phone-forwarded
 - fe-phone-incoming
 - fe-phone-missed
 - fe-phone-off
 - fe-phone-outgoing
 - fe-pie-chart
 - fe-play
 - fe-play-circle
 - fe-plus
 - fe-plus-circle
 - fe-plus-square
 - fe-pocket
 - fe-power
 - fe-printer
 - fe-radio
 - fe-refresh-ccw
 - fe-refresh-cw
 - fe-repeat
 - fe-rewind
 - fe-rotate-ccw
 - fe-rotate-cw
 - fe-rss
 - fe-save
 - fe-scissors
 - fe-search
 - fe-send
 - fe-server
 - fe-settings
 - fe-share
 - fe-share-2
 - fe-shield
 - fe-shield-off
 - fe-shopping-bag
 - fe-shopping-cart
 - fe-shuffle
 - fe-sidebar
 - fe-skip-back
 - fe-skip-forward
 - fe-slack
 - fe-slash
 - fe-sliders
 - fe-smartphone
 - fe-speaker
 - fe-square
 - fe-star
 - fe-stop-circle
 - fe-sun
 - fe-sunrise
 - fe-sunset
 - fe-tablet
 - fe-tag
 - fe-target
 - fe-terminal
 - fe-thermometer
 - fe-thumbs-down
 - fe-thumbs-up
 - fe-toggle-left
 - fe-toggle-right
 - fe-trash
 - fe-trash-2
 - fe-trending-down
 - fe-trending-up
 - fe-triangle
 - fe-truck
 - fe-tv
 - fe-twitter
 - fe-type
 - fe-umbrella
 - fe-underline
 - fe-unlock
 - fe-upload
 - fe-upload-cloud
 - fe-user
 - fe-user-check
 - fe-user-minus
 - fe-user-plus
 - fe-user-x
 - fe-users
 - fe-video
 - fe-video-off
 - fe-voicemail
 - fe-volume
 - fe-volume-1
 - fe-volume-2
 - fe-volume-x
 - fe-watch
 - fe-wifi
 - fe-wifi-off
 - fe-wind
 - fe-x
 - fe-x-circle
 - fe-x-square
 - fe-zap
 - fe-zap-off
 - fe-zoom-in
 - fe-zoom-out
--- a/src/_data/icons-flags.yml
+++ b/src/_data/icons-flags.yml
@@ -0,0 +1,255 @@
 - 'flag-ad'
 - 'flag-ae'
 - 'flag-af'
 - 'flag-ag'
 - 'flag-ai'
 - 'flag-al'
 - 'flag-am'
 - 'flag-ao'
 - 'flag-aq'
 - 'flag-ar'
 - 'flag-as'
 - 'flag-at'
 - 'flag-au'
 - 'flag-aw'
 - 'flag-ax'
 - 'flag-az'
 - 'flag-ba'
 - 'flag-bb'
 - 'flag-bd'
 - 'flag-be'
 - 'flag-bf'
 - 'flag-bg'
 - 'flag-bh'
 - 'flag-bi'
 - 'flag-bj'
 - 'flag-bl'
 - 'flag-bm'
 - 'flag-bn'
 - 'flag-bo'
 - 'flag-bq'
 - 'flag-br'
 - 'flag-bs'
 - 'flag-bt'
 - 'flag-bv'
 - 'flag-bw'
 - 'flag-by'
 - 'flag-bz'
 - 'flag-ca'
 - 'flag-cc'
 - 'flag-cd'
 - 'flag-cf'
 - 'flag-cg'
 - 'flag-ch'
 - 'flag-ci'
 - 'flag-ck'
 - 'flag-cl'
 - 'flag-cm'
 - 'flag-cn'
 - 'flag-co'
 - 'flag-cr'
 - 'flag-cu'
 - 'flag-cv'
 - 'flag-cw'
 - 'flag-cx'
 - 'flag-cy'
 - 'flag-cz'
 - 'flag-de'
 - 'flag-dj'
 - 'flag-dk'
 - 'flag-dm'
 - 'flag-do'
 - 'flag-dz'
 - 'flag-ec'
 - 'flag-ee'
 - 'flag-eg'
 - 'flag-eh'
 - 'flag-er'
 - 'flag-es'
 - 'flag-et'
 - 'flag-eu'
 - 'flag-fi'
 - 'flag-fj'
 - 'flag-fk'
 - 'flag-fm'
 - 'flag-fo'
 - 'flag-fr'
 - 'flag-ga'
 - 'flag-gb'
 - 'flag-gb-eng'
 - 'flag-gb-nir'
 - 'flag-gb-sct'
 - 'flag-gb-wls'
 - 'flag-gd'
 - 'flag-ge'
 - 'flag-gf'
 - 'flag-gg'
 - 'flag-gh'
 - 'flag-gi'
 - 'flag-gl'
 - 'flag-gm'
 - 'flag-gn'
 - 'flag-gp'
 - 'flag-gq'
 - 'flag-gr'
 - 'flag-gs'
 - 'flag-gt'
 - 'flag-gu'
 - 'flag-gw'
 - 'flag-gy'
 - 'flag-hk'
 - 'flag-hm'
 - 'flag-hn'
 - 'flag-hr'
 - 'flag-ht'
 - 'flag-hu'
 - 'flag-id'
 - 'flag-ie'
 - 'flag-il'
 - 'flag-im'
 - 'flag-in'
 - 'flag-io'
 - 'flag-iq'
 - 'flag-ir'
 - 'flag-is'
 - 'flag-it'
 - 'flag-je'
 - 'flag-jm'
 - 'flag-jo'
 - 'flag-jp'
 - 'flag-ke'
 - 'flag-kg'
 - 'flag-kh'
 - 'flag-ki'
 - 'flag-km'
 - 'flag-kn'
 - 'flag-kp'
 - 'flag-kr'
 - 'flag-kw'
 - 'flag-ky'
 - 'flag-kz'
 - 'flag-la'
 - 'flag-lb'
 - 'flag-lc'
 - 'flag-li'
 - 'flag-lk'
 - 'flag-lr'
 - 'flag-ls'
 - 'flag-lt'
 - 'flag-lu'
 - 'flag-lv'
 - 'flag-ly'
 - 'flag-ma'
 - 'flag-mc'
 - 'flag-md'
 - 'flag-me'
 - 'flag-mf'
 - 'flag-mg'
 - 'flag-mh'
 - 'flag-mk'
 - 'flag-ml'
 - 'flag-mm'
 - 'flag-mn'
 - 'flag-mo'
 - 'flag-mp'
 - 'flag-mq'
 - 'flag-mr'
 - 'flag-ms'
 - 'flag-mt'
 - 'flag-mu'
 - 'flag-mv'
 - 'flag-mw'
 - 'flag-mx'
 - 'flag-my'
 - 'flag-mz'
 - 'flag-na'
 - 'flag-nc'
 - 'flag-ne'
 - 'flag-nf'
 - 'flag-ng'
 - 'flag-ni'
 - 'flag-nl'
 - 'flag-no'
 - 'flag-np'
 - 'flag-nr'
 - 'flag-nu'
 - 'flag-nz'
 - 'flag-om'
 - 'flag-pa'
 - 'flag-pe'
 - 'flag-pf'
 - 'flag-pg'
 - 'flag-ph'
 - 'flag-pk'
 - 'flag-pl'
 - 'flag-pm'
 - 'flag-pn'
 - 'flag-pr'
 - 'flag-ps'
 - 'flag-pt'
 - 'flag-pw'
 - 'flag-py'
 - 'flag-qa'
 - 'flag-re'
 - 'flag-ro'
 - 'flag-rs'
 - 'flag-ru'
 - 'flag-rw'
 - 'flag-sa'
 - 'flag-sb'
 - 'flag-sc'
 - 'flag-sd'
 - 'flag-se'
 - 'flag-sg'
 - 'flag-sh'
 - 'flag-si'
 - 'flag-sj'
 - 'flag-sk'
 - 'flag-sl'
 - 'flag-sm'
 - 'flag-sn'
 - 'flag-so'
 - 'flag-sr'
 - 'flag-ss'
 - 'flag-st'
 - 'flag-sv'
 - 'flag-sx'
 - 'flag-sy'
 - 'flag-sz'
 - 'flag-tc'
 - 'flag-td'
 - 'flag-tf'
 - 'flag-tg'
 - 'flag-th'
 - 'flag-tj'
 - 'flag-tk'
 - 'flag-tl'
 - 'flag-tm'
 - 'flag-tn'
 - 'flag-to'
 - 'flag-tr'
 - 'flag-tt'
 - 'flag-tv'
 - 'flag-tw'
 - 'flag-tz'
 - 'flag-ua'
 - 'flag-ug'
 - 'flag-um'
 - 'flag-un'
 - 'flag-us'
 - 'flag-uy'
 - 'flag-uz'
 - 'flag-va'
 - 'flag-vc'
 - 'flag-ve'
 - 'flag-vg'
 - 'flag-vi'
 - 'flag-vn'
 - 'flag-vu'
 - 'flag-wf'
 - 'flag-ws'
 - 'flag-ye'
 - 'flag-yt'
 - 'flag-za'
 - 'flag-zm'
 - 'flag-zw'
--- a/src/_data/icons-mdi.yml
+++ b/src/_data/icons-mdi.yml
--- a/src/_data/icons-payments.yml
+++ b/src/_data/icons-payments.yml
@@ -0,0 +1,108 @@
 - 'payment-2checkout'
 - 'payment-alipay'
 - 'payment-amazon'
 - 'payment-americanexpress'
 - 'payment-applepay'
 - 'payment-bancontact'
 - 'payment-bitcoin'
 - 'payment-bitpay'
 - 'payment-cirrus'
 - 'payment-clickandbuy'
 - 'payment-coinkite'
 - 'payment-dinersclub'
 - 'payment-directdebit'
 - 'payment-discover'
 - 'payment-dwolla'
 - 'payment-ebay'
 - 'payment-eway'
 - 'payment-giropay'
 - 'payment-googlewallet'
 - 'payment-ingenico'
 - 'payment-jcb'
 - 'payment-klarna'
 - 'payment-laser'
 - 'payment-maestro'
 - 'payment-mastercard'
 - 'payment-monero'
 - 'payment-neteller'
 - 'payment-ogone'
 - 'payment-okpay'
 - 'payment-paybox'
 - 'payment-paymill'
 - 'payment-payone'
 - 'payment-payoneer'
 - 'payment-paypal'
 - 'payment-paysafecard'
 - 'payment-payu'
 - 'payment-payza'
 - 'payment-ripple'
 - 'payment-sage'
 - 'payment-sepa'
 - 'payment-shopify'
 - 'payment-skrill'
 - 'payment-solo'
 - 'payment-square'
 - 'payment-stripe'
 - 'payment-switch'
 - 'payment-ukash'
 - 'payment-unionpay'
 - 'payment-verifone'
 - 'payment-verisign'
 - 'payment-visa'
 - 'payment-webmoney'
 - 'payment-westernunion'
 - 'payment-worldpay'
 - 'payment-2checkout-dark'
 - 'payment-alipay-dark'
 - 'payment-amazon-dark'
 - 'payment-americanexpress-dark'
 - 'payment-applepay-dark'
 - 'payment-bancontact-dark'
 - 'payment-bitcoin-dark'
 - 'payment-bitpay-dark'
 - 'payment-cirrus-dark'
 - 'payment-clickandbuy-dark'
 - 'payment-coinkite-dark'
 - 'payment-dinersclub-dark'
 - 'payment-directdebit-dark'
 - 'payment-discover-dark'
 - 'payment-dwolla-dark'
 - 'payment-ebay-dark'
 - 'payment-eway-dark'
 - 'payment-giropay-dark'
 - 'payment-googlewallet-dark'
 - 'payment-ingenico-dark'
 - 'payment-jcb-dark'
 - 'payment-klarna-dark'
 - 'payment-laser-dark'
 - 'payment-maestro-dark'
 - 'payment-mastercard-dark'
 - 'payment-monero-dark'
 - 'payment-neteller-dark'
 - 'payment-ogone-dark'
 - 'payment-okpay-dark'
 - 'payment-paybox-dark'
 - 'payment-paymill-dark'
 - 'payment-payone-dark'
 - 'payment-payoneer-dark'
 - 'payment-paypal-dark'
 - 'payment-paysafecard-dark'
 - 'payment-payu-dark'
 - 'payment-payza-dark'
 - 'payment-ripple-dark'
 - 'payment-sage-dark'
 - 'payment-sepa-dark'
 - 'payment-shopify-dark'
 - 'payment-skrill-dark'
 - 'payment-solo-dark'
 - 'payment-square-dark'
 - 'payment-stripe-dark'
 - 'payment-switch-dark'
 - 'payment-ukash-dark'
 - 'payment-unionpay-dark'
 - 'payment-verifone-dark'
 - 'payment-verisign-dark'
 - 'payment-visa-dark'
 - 'payment-webmoney-dark'
 - 'payment-westernunion-dark'
 - 'payment-worldpay-dark'
--- a/src/_data/icons-sli.yml
+++ b/src/_data/icons-sli.yml
@@ -0,0 +1,189 @@
 - si-user
 - si-people
 - si-user-female
 - si-user-follow
 - si-user-following
 - si-user-unfollow
 - si-login
 - si-logout
 - si-emotsmile
 - si-phone
 - si-call-end
 - si-call-in
 - si-call-out
 - si-map
 - si-location-pin
 - si-direction
 - si-directions
 - si-compass
 - si-layers
 - si-menu
 - si-list
 - si-options-vertical
 - si-options
 - si-arrow-down
 - si-arrow-left
 - si-arrow-right
 - si-arrow-up
 - si-arrow-up-circle
 - si-arrow-left-circle
 - si-arrow-right-circle
 - si-arrow-down-circle
 - si-check
 - si-clock
 - si-plus
 - si-minus
 - si-close
 - si-event
 - si-exclamation
 - si-organization
 - si-trophy
 - si-screen-smartphone
 - si-screen-desktop
 - si-plane
 - si-notebook
 - si-mustache
 - si-mouse
 - si-magnet
 - si-energy
 - si-disc
 - si-cursor
 - si-cursor-move
 - si-crop
 - si-chemistry
 - si-speedometer
 - si-shield
 - si-screen-tablet
 - si-magic-wand
 - si-hourglass
 - si-graduation
 - si-ghost
 - si-game-controller
 - si-fire
 - si-eyeglass
 - si-envelope-open
 - si-envelope-letter
 - si-bell
 - si-badge
 - si-anchor
 - si-wallet
 - si-vector
 - si-speech
 - si-puzzle
 - si-printer
 - si-present
 - si-playlist
 - si-pin
 - si-picture
 - si-handbag
 - si-globe-alt
 - si-globe
 - si-folder-alt
 - si-folder
 - si-film
 - si-feed
 - si-drop
 - si-drawer
 - si-docs
 - si-doc
 - si-diamond
 - si-cup
 - si-calculator
 - si-bubbles
 - si-briefcase
 - si-book-open
 - si-basket-loaded
 - si-basket
 - si-bag
 - si-action-undo
 - si-action-redo
 - si-wrench
 - si-umbrella
 - si-trash
 - si-tag
 - si-support
 - si-frame
 - si-size-fullscreen
 - si-size-actual
 - si-shuffle
 - si-share-alt
 - si-share
 - si-rocket
 - si-question
 - si-pie-chart
 - si-pencil
 - si-note
 - si-loop
 - si-home
 - si-grid
 - si-graph
 - si-microphone
 - si-music-tone-alt
 - si-music-tone
 - si-earphones-alt
 - si-earphones
 - si-equalizer
 - si-like
 - si-dislike
 - si-control-start
 - si-control-rewind
 - si-control-play
 - si-control-pause
 - si-control-forward
 - si-control-end
 - si-volume-1
 - si-volume-2
 - si-volume-off
 - si-calendar
 - si-bulb
 - si-chart
 - si-ban
 - si-bubble
 - si-camrecorder
 - si-camera
 - si-cloud-download
 - si-cloud-upload
 - si-envelope
 - si-eye
 - si-flag
 - si-heart
 - si-info
 - si-key
 - si-link
 - si-lock
 - si-lock-open
 - si-magnifier
 - si-magnifier-add
 - si-magnifier-remove
 - si-paper-clip
 - si-paper-plane
 - si-power
 - si-refresh
 - si-reload
 - si-settings
 - si-star
 - si-symbol-female
 - si-symbol-male
 - si-target
 - si-credit-card
 - si-paypal
 - si-social-tumblr
 - si-social-twitter
 - si-social-facebook
 - si-social-instagram
 - si-social-linkedin
 - si-social-pinterest
 - si-social-github
 - si-social-google
 - si-social-reddit
 - si-social-skype
 - si-social-dribbble
 - si-social-behance
 - si-social-foursqare
 - si-social-soundcloud
 - si-social-spotify
 - si-social-stumbleupon
 - si-social-youtube
 - si-social-dropbox
 - si-social-vkontakte
 - si-social-steam
--- a/src/_data/icons-weather.yml
+++ b/src/_data/icons-weather.yml
@@ -0,0 +1,250 @@
 - wi-day-sunny
 - wi-day-cloudy
 - wi-day-cloudy-gusts
 - wi-day-cloudy-windy
 - wi-day-fog
 - wi-day-hail
 - wi-day-haze
 - wi-day-lightning
 - wi-day-rain
 - wi-day-rain-mix
 - wi-day-rain-wind
 - wi-day-showers
 - wi-day-sleet
 - wi-day-sleet-storm
 - wi-day-snow
 - wi-day-snow-thunderstorm
 - wi-day-snow-wind
 - wi-day-sprinkle
 - wi-day-storm-showers
 - wi-day-sunny-overcast
 - wi-day-thunderstorm
 - wi-day-windy
 - wi-solar-eclipse
 - wi-hot
 - wi-day-cloudy-high
 - wi-day-light-wind
 - wi-night-clear
 - wi-night-alt-cloudy
 - wi-night-alt-cloudy-gusts
 - wi-night-alt-cloudy-windy
 - wi-night-alt-hail
 - wi-night-alt-lightning
 - wi-night-alt-rain
 - wi-night-alt-rain-mix
 - wi-night-alt-rain-wind
 - wi-night-alt-showers
 - wi-night-alt-sleet
 - wi-night-alt-sleet-storm
 - wi-night-alt-snow
 - wi-night-alt-snow-thunderstorm
 - wi-night-alt-snow-wind
 - wi-night-alt-sprinkle
 - wi-night-alt-storm-showers
 - wi-night-alt-thunderstorm
 - wi-night-cloudy
 - wi-night-cloudy-gusts
 - wi-night-cloudy-windy
 - wi-night-fog
 - wi-night-hail
 - wi-night-lightning
 - wi-night-partly-cloudy
 - wi-night-rain
 - wi-night-rain-mix
 - wi-night-rain-wind
 - wi-night-showers
 - wi-night-sleet
 - wi-night-sleet-storm
 - wi-night-snow
 - wi-night-snow-thunderstorm
 - wi-night-snow-wind
 - wi-night-sprinkle
 - wi-night-storm-showers
 - wi-night-thunderstorm
 - wi-lunar-eclipse
 - wi-stars
 - wi-storm-showers
 - wi-thunderstorm
 - wi-night-alt-cloudy-high
 - wi-night-cloudy-high
 - wi-night-alt-partly-cloudy
 - wi-cloud
 - wi-cloudy
 - wi-cloudy-gusts
 - wi-cloudy-windy
 - wi-fog
 - wi-hail
 - wi-rain
 - wi-rain-mix
 - wi-rain-wind
 - wi-showers
 - wi-sleet
 - wi-snow
 - wi-sprinkle
 - wi-storm-showers
 - wi-thunderstorm
 - wi-snow-wind
 - wi-snow
 - wi-smog
 - wi-smoke
 - wi-lightning
 - wi-raindrops
 - wi-raindrop
 - wi-dust
 - wi-snowflake-cold
 - wi-windy
 - wi-strong-wind
 - wi-sandstorm
 - wi-earthquake
 - wi-fire
 - wi-flood
 - wi-meteor
 - wi-tsunami
 - wi-volcano
 - wi-hurricane
 - wi-tornado
 - wi-small-craft-advisory
 - wi-gale-warning
 - wi-storm-warning
 - wi-hurricane-warning
 - wi-wind-direction
 - wi-alien
 - wi-celsius
 - wi-fahrenheit
 - wi-degrees
 - wi-thermometer
 - wi-thermometer-exterior
 - wi-thermometer-internal
 - wi-cloud-down
 - wi-cloud-up
 - wi-cloud-refresh
 - wi-horizon
 - wi-horizon-alt
 - wi-sunrise
 - wi-sunset
 - wi-moonrise
 - wi-moonset
 - wi-refresh
 - wi-refresh-alt
 - wi-umbrella
 - wi-barometer
 - wi-humidity
 - wi-na
 - wi-train
 - wi-moon-new
 - wi-moon-waxing-crescent-1
 - wi-moon-waxing-crescent-2
 - wi-moon-waxing-crescent-3
 - wi-moon-waxing-crescent-4
 - wi-moon-waxing-crescent-5
 - wi-moon-waxing-crescent-6
 - wi-moon-first-quarter
 - wi-moon-waxing-gibbous-1
 - wi-moon-waxing-gibbous-2
 - wi-moon-waxing-gibbous-3
 - wi-moon-waxing-gibbous-4
 - wi-moon-waxing-gibbous-5
 - wi-moon-waxing-gibbous-6
 - wi-moon-full
 - wi-moon-waning-gibbous-1
 - wi-moon-waning-gibbous-2
 - wi-moon-waning-gibbous-3
 - wi-moon-waning-gibbous-4
 - wi-moon-waning-gibbous-5
 - wi-moon-waning-gibbous-6
 - wi-moon-third-quarter
 - wi-moon-waning-crescent-1
 - wi-moon-waning-crescent-2
 - wi-moon-waning-crescent-3
 - wi-moon-waning-crescent-4
 - wi-moon-waning-crescent-5
 - wi-moon-waning-crescent-6
 - wi-moon-alt-new
 - wi-moon-alt-waxing-crescent-1
 - wi-moon-alt-waxing-crescent-2
 - wi-moon-alt-waxing-crescent-3
 - wi-moon-alt-waxing-crescent-4
 - wi-moon-alt-waxing-crescent-5
 - wi-moon-alt-waxing-crescent-6
 - wi-moon-alt-first-quarter
 - wi-moon-alt-waxing-gibbous-1
 - wi-moon-alt-waxing-gibbous-2
 - wi-moon-alt-waxing-gibbous-3
 - wi-moon-alt-waxing-gibbous-4
 - wi-moon-alt-waxing-gibbous-5
 - wi-moon-alt-waxing-gibbous-6
 - wi-moon-alt-full
 - wi-moon-alt-waning-gibbous-1
 - wi-moon-alt-waning-gibbous-2
 - wi-moon-alt-waning-gibbous-3
 - wi-moon-alt-waning-gibbous-4
 - wi-moon-alt-waning-gibbous-5
 - wi-moon-alt-waning-gibbous-6
 - wi-moon-alt-third-quarter
 - wi-moon-alt-waning-crescent-1
 - wi-moon-alt-waning-crescent-2
 - wi-moon-alt-waning-crescent-3
 - wi-moon-alt-waning-crescent-4
 - wi-moon-alt-waning-crescent-5
 - wi-moon-alt-waning-crescent-6
 - wi-moon-0
 - wi-moon-1
 - wi-moon-2
 - wi-moon-3
 - wi-moon-4
 - wi-moon-5
 - wi-moon-6
 - wi-moon-7
 - wi-moon-8
 - wi-moon-9
 - wi-moon-10
 - wi-moon-11
 - wi-moon-12
 - wi-moon-13
 - wi-moon-14
 - wi-moon-15
 - wi-moon-16
 - wi-moon-17
 - wi-moon-18
 - wi-moon-19
 - wi-moon-20
 - wi-moon-21
 - wi-moon-22
 - wi-moon-23
 - wi-moon-24
 - wi-moon-25
 - wi-moon-26
 - wi-moon-27
 - wi-time-1
 - wi-time-2
 - wi-time-3
 - wi-time-4
 - wi-time-5
 - wi-time-6
 - wi-time-7
 - wi-time-8
 - wi-time-9
 - wi-time-10
 - wi-time-11
 - wi-time-12
 - wi-direction-up
 - wi-direction-up-right
 - wi-direction-right
 - wi-direction-down-right
 - wi-direction-down
 - wi-direction-down-left
 - wi-direction-left
 - wi-direction-up-left
 - wi-wind-beaufort-0
 - wi-wind-beaufort-1
 - wi-wind-beaufort-2
 - wi-wind-beaufort-3
 - wi-wind-beaufort-4
 - wi-wind-beaufort-5
 - wi-wind-beaufort-6
 - wi-wind-beaufort-7
 - wi-wind-beaufort-8
 - wi-wind-beaufort-9
 - wi-wind-beaufort-10
 - wi-wind-beaufort-11
 - wi-wind-beaufort-12
--- a/src/_data/invoices.yml
+++ b/src/_data/invoices.yml
@@ -0,0 +1,79 @@
 -
  invoice: "00450"
  name: Design Works
  client: Carlson Limited
  vat-no: 87956621
  date: 15 Dec 2017
  status: success
  status-name: Paid
  price: $887
 -
  invoice: "00450"
  name: UX Wireframes
  client: Adobe
  vat-no: 87956421
  date: 12 Apr 2017
  status: warning
  status-name: Pending
  price: $1200
 -
  invoice: "00452"
  name: New Dashboard
  client: Bluewolf
  vat-no: 87952621
  date: 23 Oct 2017
  status: warning
  status-name: Pending
  price: $534
 -
  invoice: "00450"
  name: Landing Page
  client: Salesforce
  vat-no: 87953421
  date: 2 Sep 2017
  status: secondary
  status-name: Due in 2 Weeks
  price: $1500
 -
  invoice: "00450"
  name: Marketing Templates
  client: Printic
  vat-no: 87956621
  date: 29 Jan 2018
  status: danger
  status-name: Paid Today
  price: $648
 -
  invoice: "00450"
  name: Sales Presentation
  client: Tabdaq
  vat-no: 87956621
  date: 4 Feb 2018
  status: secondary
  status-name: Due in 3 Weeks
  price: $300
 -
  invoice: "00450"
  name: Logo & Print
  client: Apple
  vat-no: 87956621
  date: 22 Mar 2018
  status: success
  status-name: Paid Today
  price: $2500
 -
  invoice: "00450"
  name: Icons
  client: Tookapic
  vat-no: 87956621
  date: 13 May 2018
  status: success
  status-name: Paid Today
  price: $940
--- a/src/_data/map-germany.yml
+++ b/src/_data/map-germany.yml
@@ -0,0 +1,16 @@
 "DE-BE": 11,
 "DE-ST": 43,
 "DE-RP": 4,
 "DE-BB": 65
 "DE-NI": 4,
 "DE-MV": 24,
 "DE-TH": 45,
 "DE-BW": 7,
 "DE-HH": 45,
 "DE-SH": 9,
 "DE-NW": 8,
 "DE-SN": 27,
 "DE-HB": 42,
 "DE-SL": 85,
 "DE-BY": 24,
 "DE-HE": 66
--- a/src/_data/map-world.yml
+++ b/src/_data/map-world.yml
@@ -0,0 +1,183 @@
 AF: 16.63
 AL: 11.58
 DZ: 158.97
 AO: 85.81
 AG: 1.1
 AR: 351.02
 AM: 8.83
 AU: 1219.72
 AT: 366.26
 AZ: 52.17
 BS: 7.54
 BH: 21.73
 BD: 105.4
 BB: 3.96
 BY: 52.89
 BE: 461.33
 BZ: 1.43
 BJ: 6.49
 BT: 1.4
 BO: 19.18
 BA: 16.2
 BW: 12.5
 BR: 2023.53
 BN: 11.96
 BG: 44.84
 BF: 8.67
 BI: 1.47
 KH: 11.36
 CM: 21.88
 CA: 1563.66
 CV: 1.57
 CF: 2.11
 TD: 7.59
 CL: 199.18
 CN: 5745.13
 CO: 283.11
 KM: 0.56
 CD: 12.6
 CG: 11.88
 CR: 35.02
 CI: 22.38
 HR: 59.92
 CY: 22.75
 CZ: 195.23
 DK: 304.56
 DJ: 1.14
 DM: 0.38
 DO: 50.87
 EC: 61.49
 EG: 216.83
 SV: 21.8
 GQ: 14.55
 ER: 2.25
 EE: 19.22
 ET: 30.94
 FJ: 3.15
 FI: 231.98
 FR: 2555.44
 GA: 12.56
 GM: 1.04
 GE: 11.23
 DE: 3305.9
 GH: 18.06
 GR: 305.01
 GD: 0.65
 GT: 40.77
 GN: 4.34
 GW: 0.83
 GY: 2.2
 HT: 6.5
 HN: 15.34
 HK: 226.49
 HU: 132.28
 IS: 12.77
 IN: 1430.02
 ID: 695.06
 IR: 337.9
 IQ: 84.14
 IE: 204.14
 IL: 201.25
 IT: 2036.69
 JM: 13.74
 JP: 5390.9
 JO: 27.13
 KZ: 129.76
 KE: 32.42
 KI: 0.15
 KR: 986.26
 UNDEFINED: 5.73
 KW: 117.32
 KG: 4.44
 LA: 6.34
 LV: 23.39
 LB: 39.15
 LS: 1.8
 LR: 0.98
 LY: 77.91
 LT: 35.73
 LU: 52.43
 MK: 9.58
 MG: 8.33
 MW: 5.04
 MY: 218.95
 MV: 1.43
 ML: 9.08
 MT: 7.8
 MR: 3.49
 MU: 9.43
 MX: 1004.04
 MD: 5.36
 MN: 5.81
 ME: 3.88
 MA: 91.7
 MZ: 10.21
 MM: 35.65
 NA: 11.45
 NP: 15.11
 NL: 770.31
 NZ: 138
 NI: 6.38
 NE: 5.6
 NG: 206.66
 NO: 413.51
 OM: 53.78
 PK: 174.79
 PA: 27.2
 PG: 8.81
 PY: 17.17
 PE: 153.55
 PH: 189.06
 PL: 438.88
 PT: 223.7
 QA: 126.52
 RO: 158.39
 RU: 1476.91
 RW: 5.69
 WS: 0.55
 ST: 0.19
 SA: 434.44
 SN: 12.66
 RS: 38.92
 SC: 0.92
 SL: 1.9
 SG: 217.38
 SK: 86.26
 SI: 46.44
 SB: 0.67
 ZA: 354.41
 ES: 1374.78
 LK: 48.24
 KN: 0.56
 LC: 1
 VC: 0.58
 SD: 65.93
 SR: 3.3
 SZ: 3.17
 SE: 444.59
 CH: 522.44
 SY: 59.63
 TW: 426.98
 TJ: 5.58
 TZ: 22.43
 TH: 312.61
 TL: 0.62
 TG: 3.07
 TO: 0.3
 TT: 21.2
 TN: 43.86
 TR: 729.05
 TM: 0
 UG: 17.12
 UA: 136.56
 AE: 239.65
 GB: 2258.57
 US: 14624.18
 UY: 40.71
 UZ: 37.72
 VU: 0.72
 VE: 285.21
 VN: 101.99
 YE: 30.02
 ZM: 15.69
 ZW: 5.5
--- a/src/_data/maps.yml
+++ b/src/_data/maps.yml
@@ -0,0 +1,20 @@
 default:
  center: [37.772, -122.214]
 header-bg:
  center: [52.230119, 20.983394]
  custom-styles: true
  zoom: 5
 metro:
  center: [52.230119, 20.983394]
  path-color: blue
  custom-styles: true
  points:
    - [52.230119, 20.983394]
    - [52.233063, 20.998307]
    - [52.235192, 21.00837]
    - [52.2369, 21.017189]
    - [52.239817, 21.03163]
    - [52.246991, 21.043046]
    - [52.25419, 21.03504]
--- a/src/_data/menu.yml
+++ b/src/_data/menu.yml
@@ -0,0 +1,62 @@
 index:
  name: Home
  icon: fe fe-home
  url: .
 interface:
  name: Interface
  icon: fe fe-box
  subpages:
    cards:
      name: Cards design
      icon: fe fe-box
      url: cards.html
    charts:
      name: Charts
      icon: fe fe-pie-chart
      url: charts.html
 components:
  name: Components
  icon: fe fe-calendar
  subpages:
    maps:
      name: Maps
      icon: fe fe-map-pin
      url: maps.html
    icons:
      name: Icons
      icon: fe fe-heart
      url: icons.html
    store:
      name: Store
      icon: fe fe-shopping-cart
      url: store.html
    blog:
      name: Blog
      icon: fe fe-shopping-cart
      url: blog.html
 profile:
  name: Profile
  icon: fe fe-user
  url: profile.html
 gallery:
  name: Gallery
  icon: fe fe-image
  url: gallery.html
 forms:
  name: Forms
  icon: fe fe-check-square
  url: form-elements.html
 #docs:
 #  name: Docs
 #  icon: fe fe-file
 #  url: docs/index.html
--- a/src/_data/photos.yml
+++ b/src/_data/photos.yml
@@ -0,0 +1,150 @@
 -
  big: 'assets/images/photos/adrian-infernus-281832-1500.jpg'
  small: 'assets/images/photos/adrian-infernus-281832-500.jpg'
 -
  big: 'assets/images/photos/ales-krivec-107499-1500.jpg'
  small: 'assets/images/photos/ales-krivec-107499-500.jpg'
 -
  big: 'assets/images/photos/alex-bertha-316137-1500.jpg'
  small: 'assets/images/photos/alex-bertha-316137-500.jpg'
 -
  big: 'assets/images/photos/anders-jilden-307322-1500.jpg'
  small: 'assets/images/photos/anders-jilden-307322-500.jpg'
 -
  big: 'assets/images/photos/andrew-neel-141710-1500.jpg'
  small: 'assets/images/photos/andrew-neel-141710-500.jpg'
 -
  big: 'assets/images/photos/aneta-ivanova-776-1500.jpg'
  small: 'assets/images/photos/aneta-ivanova-776-500.jpg'
 -
  big: 'assets/images/photos/anthony-intraversato-257182-1500.jpg'
  small: 'assets/images/photos/anthony-intraversato-257182-500.jpg'
 -
  big: 'assets/images/photos/artem-sapegin-229391-1500.jpg'
  small: 'assets/images/photos/artem-sapegin-229391-500.jpg'
 -
  big: 'assets/images/photos/bobby-burch-145906-1500.jpg'
  small: 'assets/images/photos/bobby-burch-145906-500.jpg'
 -
  big: 'assets/images/photos/casey-horner-339165-1500.jpg'
  small: 'assets/images/photos/casey-horner-339165-500.jpg'
 -
  big: 'assets/images/photos/christian-joudrey-96208-1500.jpg'
  small: 'assets/images/photos/christian-joudrey-96208-500.jpg'
 -
  big: 'assets/images/photos/christoph-bengtsson-lissalde-80291-1500.jpg'
  small: 'assets/images/photos/christoph-bengtsson-lissalde-80291-500.jpg'
 -
  big: 'assets/images/photos/clarisse-meyer-122804-1500.jpg'
  small: 'assets/images/photos/clarisse-meyer-122804-500.jpg'
 -
  big: 'assets/images/photos/cristina-gottardi-259243-1500.jpg'
  small: 'assets/images/photos/cristina-gottardi-259243-500.jpg'
 -
  big: 'assets/images/photos/david-klaasen-54203-1500.jpg'
  small: 'assets/images/photos/david-klaasen-54203-500.jpg'
 -
  big: 'assets/images/photos/david-marcu-114194-1500.jpg'
  small: 'assets/images/photos/david-marcu-114194-500.jpg'
 -
  big: 'assets/images/photos/davide-cantelli-139887-1500.jpg'
  small: 'assets/images/photos/davide-cantelli-139887-500.jpg'
 -
  big: 'assets/images/photos/dino-reichmuth-84359-1500.jpg'
  small: 'assets/images/photos/dino-reichmuth-84359-500.jpg'
 -
  big: 'assets/images/photos/eberhard-grossgasteiger-311213-1500.jpg'
  small: 'assets/images/photos/eberhard-grossgasteiger-311213-500.jpg'
 -
  big: 'assets/images/photos/geran-de-klerk-290418-1500.jpg'
  small: 'assets/images/photos/geran-de-klerk-290418-500.jpg'
 -
  big: 'assets/images/photos/grant-ritchie-338179-1500.jpg'
  small: 'assets/images/photos/grant-ritchie-338179-500.jpg'
 -
  big: 'assets/images/photos/ilnur-kalimullin-218996-1500.jpg'
  small: 'assets/images/photos/ilnur-kalimullin-218996-500.jpg'
 -
  big: 'assets/images/photos/jakob-owens-224352-1500.jpg'
  small: 'assets/images/photos/jakob-owens-224352-500.jpg'
 -
  big: 'assets/images/photos/jeremy-bishop-330225-1500.jpg'
  small: 'assets/images/photos/jeremy-bishop-330225-500.jpg'
 -
  big: 'assets/images/photos/jonatan-pie-226191-1500.jpg'
  small: 'assets/images/photos/jonatan-pie-226191-500.jpg'
 -
  big: 'assets/images/photos/josh-calabrese-66153-1500.jpg'
  small: 'assets/images/photos/josh-calabrese-66153-500.jpg'
 -
  big: 'assets/images/photos/joshua-earle-157231-1500.jpg'
  small: 'assets/images/photos/joshua-earle-157231-500.jpg'
 -
  big: 'assets/images/photos/mahkeo-222765-1500.jpg'
  small: 'assets/images/photos/mahkeo-222765-500.jpg'
 -
  big: 'assets/images/photos/matt-barrett-339981-1500.jpg'
  small: 'assets/images/photos/matt-barrett-339981-500.jpg'
 -
  big: 'assets/images/photos/nathan-anderson-297460-1500.jpg'
  small: 'assets/images/photos/nathan-anderson-297460-500.jpg'
 -
  big: 'assets/images/photos/nathan-anderson-316188-1500.jpg'
  small: 'assets/images/photos/nathan-anderson-316188-500.jpg'
 -
  big: 'assets/images/photos/nathan-dumlao-287713-1500.jpg'
  small: 'assets/images/photos/nathan-dumlao-287713-500.jpg'
 -
  big: 'assets/images/photos/nicolas-picard-208276-1500.jpg'
  small: 'assets/images/photos/nicolas-picard-208276-500.jpg'
 -
  big: 'assets/images/photos/oskar-vertetics-53043-1500.jpg'
  small: 'assets/images/photos/oskar-vertetics-53043-500.jpg'
 -
  big: 'assets/images/photos/priscilla-du-preez-181896-1500.jpg'
  small: 'assets/images/photos/priscilla-du-preez-181896-500.jpg'
 -
  big: 'assets/images/photos/ricardo-gomez-angel-262359-1500.jpg'
  small: 'assets/images/photos/ricardo-gomez-angel-262359-500.jpg'
 -
  big: 'assets/images/photos/sam-ferrara-136526-1500.jpg'
  small: 'assets/images/photos/sam-ferrara-136526-500.jpg'
 -
  big: 'assets/images/photos/sean-afnan-244576-1500.jpg'
  small: 'assets/images/photos/sean-afnan-244576-500.jpg'
 -
  big: 'assets/images/photos/sophie-higginbottom-133982-1500.jpg'
  small: 'assets/images/photos/sophie-higginbottom-133982-500.jpg'
 -
  big: 'assets/images/photos/stefan-kunze-26932-1500.jpg'
  small: 'assets/images/photos/stefan-kunze-26932-500.jpg'
 -
  big: 'assets/images/photos/stefan-stefancik-105376-1500.jpg'
  small: 'assets/images/photos/stefan-stefancik-105376-500.jpg'
 -
  big: 'assets/images/photos/sweet-ice-cream-photography-143023-1500.jpg'
  small: 'assets/images/photos/sweet-ice-cream-photography-143023-500.jpg'
 -
  big: 'assets/images/photos/tatyana-dobreva-288463-1500.jpg'
  small: 'assets/images/photos/tatyana-dobreva-288463-500.jpg'
 -
  big: 'assets/images/photos/teddy-kelley-109202-1500.jpg'
  small: 'assets/images/photos/teddy-kelley-109202-500.jpg'
 -
  big: 'assets/images/photos/tim-bogdanov-97988-1500.jpg'
  small: 'assets/images/photos/tim-bogdanov-97988-500.jpg'
 -
  big: 'assets/images/photos/tim-marshall-173957-1500.jpg'
  small: 'assets/images/photos/tim-marshall-173957-500.jpg'
 -
  big: 'assets/images/photos/tom-barrett-318952-1500.jpg'
  small: 'assets/images/photos/tom-barrett-318952-500.jpg'
 -
  big: 'assets/images/photos/vladimir-kudinov-12761-1500.jpg'
  small: 'assets/images/photos/vladimir-kudinov-12761-500.jpg'
 -
  big: 'assets/images/photos/web-agency-29200-1500.jpg'
  small: 'assets/images/photos/web-agency-29200-500.jpg'
 -
  big: 'assets/images/photos/wil-stewart-18242-1500.jpg'
  small: 'assets/images/photos/wil-stewart-18242-500.jpg'
--- a/src/_data/products.yml
+++ b/src/_data/products.yml
@@ -0,0 +1,53 @@
 -
  name: Apple iPhone 7 Plus 256GB Red Special Edition
  image: assets/images/products/apple-iphone7-special.jpg
  producer: Apple
  price: $499
 -
  name: Apple MacBook Pro i7 3,1GHz/16/512/Radeon 560 Space Gray
  image: assets/images/products/apple-macbook-pro.jpg
  producer: Apple
  price: $1499
 -
  name: Apple iPhone 7 32GB Jet Black
  image: assets/images/products/apple-iphone7.jpg
  producer: Apple
  price: $499
 -
  name: GoPro HERO6 Black
  image: assets/images/products/gopro-hero.jpg
  producer: GoPro
  price: $599
 -
  name: MSI GV62 i5-7300HQ/8GB/1TB/Win10X GTX1050
  image: assets/images/products/msi.jpg
  producer: MSI
  price: $1599
 -
  name: Xiaomi Mi A1 64GB Black
  image: assets/images/products/xiaomi-mi.jpg
  producer: Xiaomi
  price: $269
 -
  name: Huawei Mate 10 Pro Dual SIM Gray
  image: assets/images/products/huawei-mate.jpg
  producer: Huawei
  price: $999
 -
  name: Sony KD-49XE7005
  image: assets/images/products/sony-kd.jpg
  producer: Sony
  price: $799
 -
  name: Samsung Galaxy A5 A520F 2017 LTE Black Sky
  image: assets/images/products/samsung-galaxy.jpg
  producer: Samsung
  price: $399
--- a/src/_data/random-numbers.yml
+++ b/src/_data/random-numbers.yml
@@ -0,0 +1,100 @@
 - 10.5
 - 5.1
 - 14.7
 - 18.5
 - 2.5
 - 59.5
 - 79.6
 - 35.3
 - 70.1
 - 1.4
 - 8.1
 - 30.9
 - 31.8
 - 36.4
 - 28.8
 - 91.3
 - 78.8
 - 37.3
 - 57.4
 - 16.1
 - 41.2
 - 97.6
 - 86.4
 - 94.7
 - 7.5
 - 64.5
 - 39.0
 - 99.9
 - 38.5
 - 93.7
 - 20.1
 - 50.3
 - 86.7
 - 98.0
 - 49.9
 - 81.1
 - 94.8
 - 41.7
 - 57.7
 - 88.2
 - 84.2
 - 65.4
 - 74.4
 - 46.7
 - 77.2
 - 68.6
 - 53.0
 - 68.6
 - 76.3
 - 65.9
 - 55.7
 - 94.9
 - 28.2
 - 82.4
 - 24.6
 - 2.4
 - 37.8
 - 98.6
 - 42.5
 - 43.4
 - 67.8
 - 57.4
 - 38.2
 - 77.9
 - 36.4
 - 39.0
 - 85.9
 - 24.9
 - 4.7
 - 40.6
 - 8.7
 - 36.9
 - 14.2
 - 53.0
 - 64.7
 - 28.2
 - 67.0
 - 87.8
 - 78.6
 - 95.1
 - 39.8
 - 62.4
 - 11.9
 - 36.8
 - 59.5
 - 12.4
 - 55.7
 - 6.7
 - 12.9
 - 32.7
 - 46.3
 - 12.0
 - 88.2
 - 13.8
 - 70.5
 - 76.5
 - 72.3
 - 61.7
 - 24.3
 - 85.3
--- a/src/_data/tasks.yml
+++ b/src/_data/tasks.yml
@@ -0,0 +1,23 @@
 - name: HTML & CSS lessons
  date: 6 Dec 2017
  place: Warsaw, Poland
  icon: mdi mdi-map-marker
  background: blue
 - name: HTML & CSS lessons
  date: 5 Jun 2019
  place: London, UK
  icon: mdi mdi-map-marker
  background: red
 - name: HTML & CSS lessons
  date: 22 Oct 2018
  place: Barcelona, Spain
  icon: mdi mdi-map-marker
  background: yellow
 - name: Smashing Magazine Conference
  date: 11 Dec 2018
  place: Santa Crus, Spain
  icon: mdi mdi-map-marker
  background: green
--- a/src/_data/theme-colors.yml
+++ b/src/_data/theme-colors.yml
@@ -0,0 +1,16 @@
 - name: primary
  hex: "#1c7ed6"
 - name: secondary
  hex: "#868e96"
 - name: success
  hex: "#28a745"
 - name: danger
  hex: "#dc3545"
 - name: warning
  hex: "#ffc107"
 - name: info
  hex: "#17a2b8"
 - name: light
  hex: "#f8f9fa"
 - name: dark
  hex: "#343a40"
--- a/src/_data/users.yml
+++ b/src/_data/users.yml
--- a/src/_docs/blog.md
+++ b/src/_docs/blog.md
@@ -0,0 +1,47 @@
 ---
 title: Blog components
 ---
 Tabler is a great choice when it comes to the blog management. It allows you to create advanced systems with which you'll be able to administrate your posts without the mess. With our components, your blog will be transparent and really nice-looking.
 ### Post card
 The best way to make your post eye-catching is adding an image to it. To do so, just add the image with the `.card-img-top` class:
 {% example html columns=1 %}
 {% include cards/blog-single.html type="image" %}
 {% endexample %}
 We've added the `.d-flex .flex-column` classes to the `.card-body` to have the author details be on the bottom of the card.
 If you want to create a couple of posts next to each other, add the `.row-deck` class to `.row`—then they will all have the same height:
 {% example html columns=2 %}
 <div class="row row-cards row-deck">
    <div class="col-md-4">
        <div class="card">
            <div class="card-body">Short content</div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <div class="card-body">Extra long content of card. Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <div class="card-body">Short content</div>
        </div>
    </div>
 </div>
 {% endexample %}
 ### Post card with aside image
 You can also add the image on the left side of the card. All you need do to is: add the `.card-aside` class to the element with the `.card` class. Then add the image in the `.card-aside-column` element. No worries, tabler will automatically center it and scale to right size:
 {% example html columns=2 %}
 {% include cards/blog-single.html type="aside" liked=1 %}
 {% endexample %}
 See more live examples [here]({{ site.base }}/blog.html).
--- a/src/_docs/buttons.md
+++ b/src/_docs/buttons.md
@@ -0,0 +1,16 @@
 ---
 title: Buttons
 ---
 ### Pill buttons
 Add `.btn-pill` to any button to make them more rounded.
 {% example html %}
 <a href="#" class="btn btn-pill btn-primary">Primary</a>
 <a href="#" class="btn btn-pill btn-secondary">Secondary</a>
 <a href="#" class="btn btn-pill btn-success">Success</a>
 <a href="#" class="btn btn-pill btn-info">Info</a>
 <a href="#" class="btn btn-pill btn-warning">Warning</a>
 <a href="#" class="btn btn-pill btn-danger">Danger</a>
 {% endexample %}
--- a/src/_docs/charts.md
+++ b/src/_docs/charts.md
@@ -0,0 +1,19 @@
 ---
 title: Charts
 ---
 ### c3.js charts 
 Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
 {% example html columns=2 %}
 <div class="card">
 	<div class="card-header">
 		<h3 class="card-title">Chart name</h3>
 	</div>
 	<div class="card-body">
 		<div id="chart-wrapper" style="height: 16rem"></div>
 	</div>
 </div>
 {% include js-charts.html id="chart-wrapper" data='temperature' %}
 {% endexample %}
--- a/src/_docs/form-components.md
+++ b/src/_docs/form-components.md
@@ -0,0 +1,47 @@
 ---
 title: Form components
 ---
 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
 {:toc}
 ### Color input
 At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 {% example html %}
 {% include parts/input-color.html %}
 {% endexample %}
 ### Image input
 At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 {% example html %}
 {% include parts/input-image.html row-class="col-sm-2" limit=6 %}
 {% endexample %}
 ### Icon input
 At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 {% example html %}
 {% include parts/input-icon.html %}
 {% endexample %}
 ### Toggle switches
 At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 {% example html %}
 {% include parts/input-toggle.html %}
 {% endexample %}
 ### Form fieldset
 At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 {% example html %}
 {% include parts/form-fieldset.html %}
 {% endexample %}
--- a/src/_docs/index.md
+++ b/src/_docs/index.md
@@ -0,0 +1,36 @@
 ---
 title: Getting started
 ---
 We’ve created this admin panel for everyone who wants to create any templates based on our ready components. Our mission is to deliver a user-friendly, clear and easy administration panel, that can be used by both, simple websites and sophisticated systems. The only requirement is a basic HTML and CSS knowledge—as a reward, you'll be able to manage and visualize different types of data in the easiest possible way!
 After using many of different admin panels, no matter free or paid, we've noticed they all had a lot of defects—and the main one was resource intensity.
 They were loading loads of useless components that you wouldn't ever use, so we've decided to choose a different way. The whole system is plugin-based, what means that you have a control over what is needed and what not.
 To make the system works fast and reliable, we've converted most of the components to CSS. Thanks to this, you don't have to load a lot of unnecessary libraries into your browser what really boosts the overall speed.
 In this documentation we're going to describe common use-cases for most of our components since we want to make our tool be accessible to everyone.
 If you miss any component, feel free to drop us a line at: [email]—we'll do our best to add it.
 ### What’s included
 Within template you’ll find the following directories and files, grouping common resources and providing both compiled and minified distribution files, as well as raw source files.  It's up to you how you're going to use them.
 ```
 tabler.io/
  ├── assets/
  ├── docs/
  └── README.md
 ```
 ### Browser Support
 {{ site.title }} is build in Bootstrap, which supports the latest, stable releases of all major browsers and platforms. On Windows, we support Internet Explorer 10-11 / Microsoft Edge.
 ### License
 tabler.io is released under MIT license. tabler.io is a free Bootstrap 4 admin template developed from [codecalm.net](http://codecalm.net). Feel free to download it, use it, share it, get creative with it.
--- a/src/_elements.html
+++ b/src/_elements.html
@@ -0,0 +1,555 @@
 ---
 title: All elements
 layout: default
 ---
 <div class="container">
 	<div class="card">
 		<div class="card-body">
 			<h1>h1. Bootstrap heading</h1>
 			<h2>h2. Bootstrap heading</h2>
 			<h3>h3. Bootstrap heading</h3>
 			<h4>h4. Bootstrap heading</h4>
 			<h5>h5. Bootstrap heading</h5>
 			<h6>h6. Bootstrap heading</h6>
 			<h3>
 				Fancy display heading
 				<small class="text-muted">With faded secondary text</small>
 			</h3>
 			<h1 class="display-1">Display 1</h1>
 			<h1 class="display-2">Display 2</h1>
 			<h1 class="display-3">Display 3</h1>
 			<h1 class="display-4">Display 4</h1>
 			<p class="lead">
 				Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
 			</p>
 			<p>You can use the mark tag to
 				<mark>highlight</mark>
 				text.
 			</p>
 			<p>
 				<del>This line of text is meant to be treated as deleted text.</del>
 			</p>
 			<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
 			<p>
 				<ins>This line of text is meant to be treated as an addition to the document.</ins>
 			</p>
 			<p><u>This line of text will render as underlined</u></p>
 			<p>
 				<small>This line of text is meant to be treated as fine print.</small>
 			</p>
 			<p><strong>This line rendered as bold text.</strong></p>
 			<p><em>This line rendered as italicized text.</em></p>
 			<blockquote class="blockquote">
 				<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 			</blockquote>
 			<blockquote class="blockquote">
 				<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 				<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
 			</blockquote>
 			<ul class="list-unstyled">
 				<li>Lorem ipsum dolor sit amet</li>
 				<li>Consectetur adipiscing elit</li>
 				<li>Integer molestie lorem at massa</li>
 				<li>Facilisis in pretium nisl aliquet</li>
 				<li>Nulla volutpat aliquam velit
 					<ul>
 						<li>Phasellus iaculis neque</li>
 						<li>Purus sodales ultricies</li>
 						<li>Vestibulum laoreet porttitor sem</li>
 						<li>Ac tristique libero volutpat at</li>
 					</ul>
 				</li>
 				<li>Faucibus porta lacus fringilla vel</li>
 				<li>Aenean sit amet erat nunc</li>
 				<li>Eget porttitor lorem</li>
 			</ul>
 			<dl class="row">
 				<dt class="col-sm-3">Description lists</dt>
 				<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
 				<dt class="col-sm-3">Euismod</dt>
 				<dd class="col-sm-9">
 					<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
 					<p>Donec id elit non mi porta gravida at eget metus.</p>
 				</dd>
 				<dt class="col-sm-3">Malesuada porta</dt>
 				<dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
 				<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
 				<dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
 				<dt class="col-sm-3">Nesting</dt>
 				<dd class="col-sm-9">
 					<dl class="row">
 						<dt class="col-sm-4">Nested definition list</dt>
 						<dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
 					</dl>
 				</dd>
 			</dl>
 			<p>For example, <code>&lt;section&gt;</code> should be wrapped as inline.</p>
 			<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
 &lt;p&gt;And another line of sample text here...&lt;/p&gt;
 </code></pre>
 			<p>
 				<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
 			</p>
 			<p>
 				To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
 				To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
 			</p>
 			<p>
 				<samp>This text is meant to be treated as sample output from a computer program.</samp>
 			</p>
 			<table class="table">
 				<thead>
 				<tr>
 					<th>#</th>
 					<th>First Name</th>
 					<th>Last Name</th>
 					<th>Username</th>
 				</tr>
 				</thead>
 				<tbody>
 				<tr>
 					<th scope="row">1</th>
 					<td>Mark</td>
 					<td>Otto</td>
 					<td>@mdo</td>
 				</tr>
 				<tr>
 					<th scope="row">2</th>
 					<td>Jacob</td>
 					<td>Thornton</td>
 					<td>@fat</td>
 				</tr>
 				<tr>
 					<th scope="row">3</th>
 					<td>Larry</td>
 					<td>the Bird</td>
 					<td>@twitter</td>
 				</tr>
 				</tbody>
 			</table>
 			<table class="table table-striped">
 				<thead>
 				<tr>
 					<th>#</th>
 					<th>First Name</th>
 					<th>Last Name</th>
 					<th>Username</th>
 				</tr>
 				</thead>
 				<tbody>
 				<tr>
 					<th scope="row">1</th>
 					<td>Mark</td>
 					<td>Otto</td>
 					<td>@mdo</td>
 				</tr>
 				<tr>
 					<th scope="row">2</th>
 					<td>Jacob</td>
 					<td>Thornton</td>
 					<td>@fat</td>
 				</tr>
 				<tr>
 					<th scope="row">3</th>
 					<td>Larry</td>
 					<td>the Bird</td>
 					<td>@twitter</td>
 				</tr>
 				</tbody>
 			</table>
 			<figure class="figure">
 				<img src="https://placehold.it/400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
 				<figcaption class="figure-caption">A caption for the above image.</figcaption>
 			</figure>
 			<div class="alert alert-primary" role="alert">
 				This is a primary alert with <a href="javascript:void(0)" class="alert-link">an example link</a>. Give it a click if you like.
 			</div>
 			<div class="alert alert-secondary" role="alert">
 				This is a secondary alert with <a href="javascript:void(0)" class="alert-link">an example link</a>. Give it a click if you like.
 			</div>
 			<div class="alert alert-success" role="alert">
 				This is a success alert with <a href="javascript:void(0)" class="alert-link">an example link</a>. Give it a click if you like.
 			</div>
 			<div class="alert alert-danger" role="alert">
 				This is a danger alert with <a href="javascript:void(0)" class="alert-link">an example link</a>. Give it a click if you like.
 			</div>
 			<div class="alert alert-warning" role="alert">
 				This is a warning alert with <a href="javascript:void(0)" class="alert-link">an example link</a>. Give it a click if you like.
 			</div>
 			<div class="alert alert-info" role="alert">
 				This is a info alert with <a href="javascript:void(0)" class="alert-link">an example link</a>. Give it a click if you like.
 			</div>
 			<div class="alert alert-light" role="alert">
 				This is a light alert with <a href="javascript:void(0)" class="alert-link">an example link</a>. Give it a click if you like.
 			</div>
 			<div class="alert alert-dark" role="alert">
 				This is a dark alert with <a href="javascript:void(0)" class="alert-link">an example link</a>. Give it a click if you like.
 			</div>
 			<div class="alert alert-warning alert-dismissible fade show" role="alert">
 				<button type="button" class="close" data-dismiss="alert" aria-label="Close">
 					<span aria-hidden="true">&times;</span>
 				</button>
 				<strong>Holy guacamole!</strong> You should check in on some of those fields below.
 			</div>
 			<h1>Example heading <span class="badge badge-default">New</span></h1>
 			<h2>Example heading <span class="badge badge-default">New</span></h2>
 			<h3>Example heading <span class="badge badge-default">New</span></h3>
 			<h4>Example heading <span class="badge badge-default">New</span></h4>
 			<h5>Example heading <span class="badge badge-default">New</span></h5>
 			<h6>Example heading <span class="badge badge-default">New</span></h6>
 			<p>
 				<button class="btn">
 					Profile <span class="badge badge-default">9</span>
 					<span class="sr-only">unread messages</span>
 				</button>
 			</p>
 			<p>
 				<span class="badge badge-primary">Primary</span>
 				<span class="badge badge-default">Secondary</span>
 				<span class="badge badge-success">Success</span>
 				<span class="badge badge-danger">Danger</span>
 				<span class="badge badge-warning">Warning</span>
 				<span class="badge badge-info">Info</span>
 				<span class="badge badge-light">Light</span>
 				<span class="badge badge-dark">Dark</span>
 			</p>
 			<p>
 				<span class="badge badge-pill badge-primary">Primary</span>
 				<span class="badge badge-pill badge-default">Secondary</span>
 				<span class="badge badge-pill badge-success">Success</span>
 				<span class="badge badge-pill badge-danger">Danger</span>
 				<span class="badge badge-pill badge-warning">Warning</span>
 				<span class="badge badge-pill badge-info">Info</span>
 				<span class="badge badge-pill badge-light">Light</span>
 				<span class="badge badge-pill badge-dark">Dark</span>
 			</p>
 			<p>
 				<a href="javascript:void(0)" class="badge badge-primary">Primary</a>
 				<a href="javascript:void(0)" class="badge badge-default">Secondary</a>
 				<a href="javascript:void(0)" class="badge badge-success">Success</a>
 				<a href="javascript:void(0)" class="badge badge-danger">Danger</a>
 				<a href="javascript:void(0)" class="badge badge-warning">Warning</a>
 				<a href="javascript:void(0)" class="badge badge-info">Info</a>
 				<a href="javascript:void(0)" class="badge badge-light">Light</a>
 				<a href="javascript:void(0)" class="badge badge-dark">Dark</a>
 			</p>
 			<ol class="breadcrumb">
 				<li class="breadcrumb-item active">Home</li>
 			</ol>
 			<ol class="breadcrumb">
 				<li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
 				<li class="breadcrumb-item active">Library</li>
 			</ol>
 			<ol class="breadcrumb">
 				<li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
 				<li class="breadcrumb-item"><a href="javascript:void(0)">Library</a></li>
 				<li class="breadcrumb-item active">Data</li>
 			</ol>
 			<nav class="breadcrumb">
 				<a class="breadcrumb-item" href="javascript:void(0)">Home</a>
 				<a class="breadcrumb-item" href="javascript:void(0)">Library</a>
 				<a class="breadcrumb-item" href="javascript:void(0)">Data</a>
 				<span class="breadcrumb-item active">Bootstrap</span>
 			</nav>
 			<p>
 				<button type="button" class="btn btn-primary">Primary</button>
 				<button type="button" class="btn btn-secondary">Secondary</button>
 				<button type="button" class="btn btn-success">Success</button>
 				<button type="button" class="btn btn-danger">Danger</button>
 				<button type="button" class="btn btn-warning">Warning</button>
 				<button type="button" class="btn btn-info">Info</button>
 				<button type="button" class="btn btn-light">Light</button>
 				<button type="button" class="btn btn-dark">Dark</button>
 				<button type="button" class="btn btn-link">Link</button>
 			</p>
 			<p>
 				<a class="btn btn-primary" href="javascript:void(0)" role="button">Link</a>
 				<button class="btn btn-primary" type="submit">Button</button>
 				<input class="btn btn-primary" type="button" value="Input">
 				<input class="btn btn-primary" type="submit" value="Submit">
 				<input class="btn btn-primary" type="reset" value="Reset">
 			</p>
 			<p>
 				<button type="button" class="btn btn-outline-primary">Primary</button>
 				<button type="button" class="btn btn-outline-secondary">Secondary</button>
 				<button type="button" class="btn btn-outline-success">Success</button>
 				<button type="button" class="btn btn-outline-danger">Danger</button>
 				<button type="button" class="btn btn-outline-warning">Warning</button>
 				<button type="button" class="btn btn-outline-info">Info</button>
 				<button type="button" class="btn btn-outline-light">Light</button>
 				<button type="button" class="btn btn-outline-dark">Dark</button>
 			</p>
 			<div class="btn-group" role="group" aria-label="Basic example">
 				<button type="button" class="btn btn-secondary">Left</button>
 				<button type="button" class="btn btn-secondary">Middle</button>
 				<button type="button" class="btn btn-secondary">Right</button>
 			</div>
 			<div class="card my-4" style="width: 20rem;">
 				<img class="card-img-top" src="https://placehold.it/318x180" alt="Card image cap">
 				<div class="card-body">
 					<h4 class="card-title">Card title</h4>
 					<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
 					<a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
 				</div>
 			</div>
 			<div class="card my-4">
 				<div class="card-body">
 					This is some text within a card block.
 				</div>
 			</div>
 			<div class="row my-4">
 				<div class="col-sm-6">
 					<div class="card">
 						<div class="card-body">
 							<h4 class="card-title">Special title treatment</h4>
 							<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
 							<a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
 						</div>
 					</div>
 				</div>
 				<div class="col-sm-6">
 					<div class="card">
 						<div class="card-body">
 							<h4 class="card-title">Special title treatment</h4>
 							<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
 							<a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
 						</div>
 					</div>
 				</div>
 			</div>
 			<div class="card text-center my-4">
 				<div class="card-header">
 					<ul class="nav nav-tabs card-header-tabs">
 						<li class="nav-item">
 							<a class="nav-link active" href="javascript:void(0)">Active</a>
 						</li>
 						<li class="nav-item">
 							<a class="nav-link" href="javascript:void(0)">Link</a>
 						</li>
 						<li class="nav-item">
 							<a class="nav-link disabled" href="javascript:void(0)">Disabled</a>
 						</li>
 					</ul>
 				</div>
 				<div class="card-body">
 					<h4 class="card-title">Special title treatment</h4>
 					<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
 					<a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
 				</div>
 			</div>
 			<div class="card text-white bg-primary mb-3" style="max-width: 20rem;">
 				<div class="card-header">Header</div>
 				<div class="card-body">
 					<h4 class="card-title">Primary card title</h4>
 					<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
 				</div>
 			</div>
 			<div class="card text-white bg-secondary mb-3" style="max-width: 20rem;">
 				<div class="card-header">Header</div>
 				<div class="card-body">
 					<h4 class="card-title">Secondary card title</h4>
 					<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
 				</div>
 			</div>
 			<div class="card text-white bg-success mb-3" style="max-width: 20rem;">
 				<div class="card-header">Header</div>
 				<div class="card-body">
 					<h4 class="card-title">Success card title</h4>
 					<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
 				</div>
 			</div>
 			<div class="card text-white bg-danger mb-3" style="max-width: 20rem;">
 				<div class="card-header">Header</div>
 				<div class="card-body">
 					<h4 class="card-title">Danger card title</h4>
 					<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
 				</div>
 			</div>
 			<div class="card text-white bg-warning mb-3" style="max-width: 20rem;">
 				<div class="card-header">Header</div>
 				<div class="card-body">
 					<h4 class="card-title">Warning card title</h4>
 					<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
 				</div>
 			</div>
 			<div class="card text-white bg-info mb-3" style="max-width: 20rem;">
 				<div class="card-header">Header</div>
 				<div class="card-body">
 					<h4 class="card-title">Info card title</h4>
 					<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
 				</div>
 			</div>
 			<div class="card bg-light mb-3" style="max-width: 20rem;">
 				<div class="card-header">Header</div>
 				<div class="card-body">
 					<h4 class="card-title">Light card title</h4>
 					<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
 				</div>
 			</div>
 			<div class="card text-white bg-dark mb-3" style="max-width: 20rem;">
 				<div class="card-header">Header</div>
 				<div class="card-body">
 					<h4 class="card-title">Dark card title</h4>
 					<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
 				</div>
 			</div>
 			<div class="card-deck">
 				<div class="card">
 					<img class="card-img-top" src="https://placehold.it/318x180" alt="Card image cap">
 					<div class="card-body">
 						<h4 class="card-title">Card title</h4>
 						<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit
 							longer.</p>
 						<p class="card-text">
 							<small class="text-muted">Last updated 3 mins ago</small>
 						</p>
 					</div>
 				</div>
 				<div class="card">
 					<img class="card-img-top" src="https://placehold.it/318x180" alt="Card image cap">
 					<div class="card-body">
 						<h4 class="card-title">Card title</h4>
 						<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
 						<p class="card-text">
 							<small class="text-muted">Last updated 3 mins ago</small>
 						</p>
 					</div>
 				</div>
 				<div class="card">
 					<img class="card-img-top" src="https://placehold.it/318x180" alt="Card image cap">
 					<div class="card-body">
 						<h4 class="card-title">Card title</h4>
 						<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer
 							content than the first to show that equal height action.</p>
 						<p class="card-text">
 							<small class="text-muted">Last updated 3 mins ago</small>
 						</p>
 					</div>
 				</div>
 			</div>
 			<div class="progress my-4">
 				<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
 			</div>
 			<div class="progress my-4">
 				<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
 			</div>
 			<div class="progress my-4">
 				<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
 			</div>
 			<div class="progress my-4">
 				<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
 			</div>
 			<div class="progress my-4">
 				<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
 			</div>
 			<div class="progress my-4">
 				<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
 			</div>
 			<div class="progress my-4">
 				<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
 			</div>
 			<div class="progress my-4">
 				<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
 			</div>
 			<div class="progress my-4">
 				<div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
 			</div>
 			<div class="progress my-4">
 				<div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
 			</div>
 			<div class="progress my-4">
 				<div class="progress-bar progress-bar-animated progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0"
 					 aria-valuemax="100"></div>
 			</div>
 			<div class="progress my-4">
 				<div class="progress-bar progress-bar-animated progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25"
 					 aria-valuemin="0" aria-valuemax="100"></div>
 			</div>
 			<div class="progress my-4">
 				<div class="progress-bar progress-bar-animated progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0"
 					 aria-valuemax="100"></div>
 			</div>
 			<div class="progress my-4">
 				<div class="progress-bar progress-bar-animated progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75"
 					 aria-valuemin="0" aria-valuemax="100"></div>
 			</div>
 			<div class="progress my-4">
 				<div class="progress-bar progress-bar-animated progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100"
 					 aria-valuemin="0" aria-valuemax="100"></div>
 			</div>
 			<div class="my-4">
 				<div class="dropdown">
 					<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"
 							aria-expanded="false">
 						Dropdown button
 					</button>
 					<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
 						<a class="dropdown-item" href="javascript:void(0)">Action</a>
 						<a class="dropdown-item" href="javascript:void(0)">Another action</a>
 						<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
 					</div>
 				</div>
 			</div>
 			<div class="my-4">
 				<div class="btn-group">
 					<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 						Action
 					</button>
 					<div class="dropdown-menu">
 						<a class="dropdown-item" href="javascript:void(0)">Action</a>
 						<a class="dropdown-item" href="javascript:void(0)">Another action</a>
 						<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
 						<div class="dropdown-divider"></div>
 						<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
 					</div>
 				</div>
 			</div>
 		</div>
 	</div>
 </div>
--- a/src/_includes/aside.html
+++ b/src/_includes/aside.html
@@ -0,0 +1,28 @@
 <aside class="aside">
 	<div class="aside-header">
 		<div class="row">
 			<div class="col-auto">
 				<span class="avatar" style="background-image: url({{ site.base }}/assets/images/faces/male/4.jpg)">
 		            <span class="avatar-status bg-green"></span>
 		        </span>
 			</div>
 			<div class="col">
 				<h5 class="mb-0">Boston Rob</h5>
 				<small class="d-block text-muted">3 minutes ago</small>
 			</div>
 		</div>
 	</div>
 	<div class="aside-body">
 		{% include chat-content.html %}
 	</div>
 	<div class="aside-footer">
 		<div class="row xs-gutters">
 			<div class="col">
 				<input type="text" class="form-control" placeholder="Message to Bob&hellip;">
 			</div>
 			<div class="col-auto">
 				<button class="btn btn-primary"><i class="si si-arrow-right"></i></button>
 			</div>
 		</div>
 	</div>
 </aside>
--- a/src/_includes/cards/alert.html
+++ b/src/_includes/cards/alert.html
@@ -0,0 +1,6 @@
 <div class="alert alert-warning alert-dismissible show mb-5" role="alert">
 	<button type="button" class="close" data-dismiss="alert" aria-label="Close">
 		<span aria-hidden="true">&times;</span>
 	</button>
 	<strong>Holy guacamole!</strong> You should check in on some of those fields below.
 </div>
--- a/src/_includes/cards/all.html
+++ b/src/_includes/cards/all.html
@@ -0,0 +1,16 @@
 <div class="card">
 	<img class="card-img-top" src="{{ site.data.photos[5].small }}" alt="Card image cap">
 	<div class="card-body">
 		<h4 class="card-title">Card title</h4>
 		<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
 	</div>
 	<ul class="list-group card-list-group">
 		<li class="list-group-item">Cras justo odio</li>
 		<li class="list-group-item">Dapibus ac facilisis in</li>
 		<li class="list-group-item">Vestibulum at eros</li>
 	</ul>
 	<div class="card-body">
 		<a href="javascript:void(0)" class="card-link">Card link</a>
 		<a href="javascript:void(0)" class="card-link">Another link</a>
 	</div>
 </div>
--- a/src/_includes/cards/aside.html
+++ b/src/_includes/cards/aside.html
@@ -0,0 +1,9 @@
 <div class="card card-aside">
 	<div class="card-aside-column" style="background-image: url({{ site.data.photos[49].small }})"></div>
 	<div class="card-body">
 		<h4 class="card-title">Card with aside</h4>
 		<p>
 			Lorem ipsum dolor sit amet.
 		</p>
 	</div>
 </div>
--- a/src/_includes/cards/auth.html
+++ b/src/_includes/cards/auth.html
@@ -0,0 +1,60 @@
 <div class="card">
 	<div class="card-header">
 		<h4 class="card-title">Authentication</h4>
 	</div>
 	<div class="card-body">
 		<ul class="list-unstyled list-separated">
 			<li class="list-separated-item">
 				<div class="row align-items-center">
 					<div class="col-auto w-8 text-center text-muted h1 m-0">
 						<i class="si si-user"></i>
 					</div>
 					<div class="col">
 						<div class="h5 mb-1">Everyone can look me up</div>
 						<p class="text-muted m-0">A Jedi can feel the Force flowing through him. You mean it controls your actions</p>
 					</div>
 					<div class="col-auto text-right">
 						<label class="custom-switch">
 							<input type="checkbox" class="custom-switch-input">
 							<span class="custom-switch-indicator"></span>
 						</label>
 					</div>
 				</div>
 			</li>
 			<li class="list-separated-item">
 				<div class="row align-items-center">
 					<div class="col-auto w-8 text-center text-muted h1 m-0">
 						<i class="si si-screen-smartphone"></i>
 					</div>
 					<div class="col">
 						<div class="h5 mb-1">Everyone can contact me</div>
 						<p class="text-muted m-0">When we heard about Alderaan, we were afraid that you were</p>
 					</div>
 					<div class="col-auto text-right">
 						<label class="custom-switch">
 							<input type="checkbox" class="custom-switch-input" checked>
 							<span class="custom-switch-indicator"></span>
 						</label>
 					</div>
 				</div>
 			</li>
 			<li class="list-separated-item">
 				<div class="row align-items-center">
 					<div class="col-auto w-8 text-center text-muted h1 m-0">
 						<i class="si si-location-pin"></i>
 					</div>
 					<div class="col">
 						<div class="h5 mb-1">Show my location</div>
 						<p class="text-muted m-0"> I said, all systems have been alerted to your presence, sir. </p>
 					</div>
 					<div class="col-auto text-right">
 						<label class="custom-switch">
 							<input type="checkbox" class="custom-switch-input" checked>
 							<span class="custom-switch-indicator"></span>
 						</label>
 					</div>
 				</div>
 			</li>
 		</ul>
 	</div>
 </div>
--- a/src/_includes/cards/avatars.html
+++ b/src/_includes/cards/avatars.html
@@ -0,0 +1,41 @@
 <div class="card">
 	<div class="card-header">
 		<h4 class="card-title">New users</h4>
 		<div class="card-options">
 			<button type="button" class="btn btn-option" data-toggle="tooltip" title="Edit">
 				<i class="si si-pencil"></i>
 			</button>
 			<div class="dropdown card-options-dropdown">
 				<button type="button" class="btn btn-option dropdown-toggle" data-toggle="dropdown"><i class="si si-options"></i></button>
 				<div class="dropdown-menu dropdown-menu-right">
 					<a class="dropdown-item" href="javascript:void(0)">
 						<i class="si si-bell mr-3"></i>News
 					</a>
 					<a class="dropdown-item" href="javascript:void(0)">
 						<i class="si si-envelope mr-3"></i>Messages
 					</a>
 					<div class="dropdown-divider"></div>
 					<a class="dropdown-item" href="javascript:void(0)">
 						<i class="si si-pencil mr-3"></i>Edit Profile
 					</a>
 				</div>
 			</div>
 		</div>
 	</div>
 	<div class="card-body">
 		<div class="card-text">
 			<ul class="avatar-list">
 				{% for user in site.data.users limit: 10 offset: 16 %}
 				<li class="avatar-list-item">
 					<a href="javascript:void(0)" class="avatar avatar-lg" style="background-image: url({{ user.photo }})">
 						{% if forloop.index > 3 and forloop.index < 7 or forloop.index == 9 %}
 							<span class="avatar-status bg-green"></span>
 						{% endif %}
 					</a>
 				</li>
 				{% endfor %}
 			</ul>
 		</div>
 	</div>
 </div>
--- a/src/_includes/cards/blog-single.html
+++ b/src/_includes/cards/blog-single.html
@@ -0,0 +1,34 @@
 {% assign article = include.article | default: site.data.articles[0] %}
 {% assign type = include.type | default: 'none' %}
 {% assign author = site.data.users[article.author] %}
 {% assign liked = include.liked | default: false %}
 {% assign truncate = include.truncate | default: 100 %}
 <div class="card{% if type == 'aside' %} card-aside{% endif %}">
 	{% if type == 'image' %}
 	<a href="#"><img class="card-img-top" src="{{ site.base }}/{{ site.data.photos[article.image].small }}" alt="{{ article.title | escape}}"></a>
 	{% endif %}
 	{% if type == 'aside' %}
 	<a href="#" class="card-aside-column{% if include.aside-class %} {{ include.aside-class }}{% endif %}" style="background-image: url({{ site.base }}/{{ site.data.photos[article.image].small }})"></a>
 	{% endif %}
 	<div class="card-body d-flex flex-column">
 		<h4><a href="#">{{ article.title }}</a></h4>
 		<div class="text-muted">{{ article.description | truncate: truncate }}</div>
 		<div class="d-flex align-items-center pt-5 mt-auto">
 			<div class="avatar avatar-md mr-3" style="background-image: url({{ site.base }}/{{ author.photo }})"></div>
 			<div>
 				<a href="{{ site.base }}/profile.html" class="text-default">{{ author.name }} {{ author.surname }}</a>
 				<small class="d-block text-muted">3 days ago</small>
 			</div>
 			<div class="ml-auto {% if liked %}text-red{% else %}text-muted{% endif %}">
 				<a href="javascript:void(0)" class="icon d-none d-md-inline-block ml-3"><i class="fe fe-heart mr-1"></i></a>
 			</div>
 		</div>
 	</div>
 </div>
--- a/src/_includes/cards/border.html
+++ b/src/_includes/cards/border.html
@@ -0,0 +1,8 @@
 <div class="card border-{{ include.color }}">
 	<div class="card-body text-{{ include.color }}">
 		<h4 class="card-title">
 			{{ include.color | capitalize }} card title
 		</h4>
 		<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
 	</div>
 </div>
--- a/src/_includes/cards/browsers.html
+++ b/src/_includes/cards/browsers.html
@@ -0,0 +1,37 @@
 <div class="card">
 	<div class="card-header">
 		<h4 class="card-title">Browser Stats</h4>
 	</div>
 	<table class="table card-table">
 		<tr>
 			<td width="1"><i class="fa fa-chrome text-muted"></i></td>
 			<td>Google Chrome</td>
 			<td class="text-right"><span class="text-muted">23%</span></td>
 		</tr>
 		<tr>
 			<td><i class="fa fa-firefox text-muted"></i></td>
 			<td>Mozila Firefox</td>
 			<td class="text-right"><span class="text-muted">15%</span></td>
 		</tr>
 		<tr>
 			<td><i class="fa fa-safari text-muted"></i></td>
 			<td>Apple Safari</td>
 			<td class="text-right"><span class="text-muted">7%</span></td>
 		</tr>
 		<tr>
 			<td><i class="fa fa-internet-explorer text-muted"></i></td>
 			<td>Internet Explorer</td>
 			<td class="text-right"><span class="text-muted">9%</span></td>
 		</tr>
 		<tr>
 			<td><i class="fa fa-opera text-muted"></i></td>
 			<td>Opera mini</td>
 			<td class="text-right"><span class="text-muted">23%</span></td>
 		</tr>
 		<tr>
 			<td><i class="fa fa-edge text-muted"></i></td>
 			<td>Microsoft edge</td>
 			<td class="text-right"><span class="text-muted">9%</span></td>
 		</tr>
 	</table>
 </div>
--- a/src/_includes/cards/buttons.html
+++ b/src/_includes/cards/buttons.html
@@ -0,0 +1,25 @@
 <div class="card">
 	<div class="card-header">
 		<h3 class="card-title">Buttons</h3>
 	</div>
 	<div class="card-body">
 		<p>
 			<button type="button" class="btn btn-primary">Primary</button>
 			<button type="button" class="btn btn-secondary">Default</button>
 			<button type="button" class="btn btn-secondary">Secondary</button>
 			<button type="button" class="btn btn-success">Success</button>
 			<button type="button" class="btn btn-info">Info</button>
 			<button type="button" class="btn btn-warning">Warning</button>
 			<button type="button" class="btn btn-danger">Danger</button>
 		</p>
 		<p>
 			<button type="button" class="btn btn-outline-primary">Primary</button>
 			<button type="button" class="btn btn-outline-default">Default</button>
 			<button type="button" class="btn btn-outline-secondary">Secondary</button>
 			<button type="button" class="btn btn-outline-success">Success</button>
 			<button type="button" class="btn btn-outline-info">Info</button>
 			<button type="button" class="btn btn-outline-warning">Warning</button>
 			<button type="button" class="btn btn-outline-danger">Danger</button>
 		</p>
 	</div>
 </div>
--- a/src/_includes/cards/calendar.html
+++ b/src/_includes/cards/calendar.html
@@ -0,0 +1,80 @@
 <div class="card">
 	<div class="card-header">
 		<h3 class="card-title text-center">December 2017</h3>
 	</div>
 	<div class="card-body p-3">
 		<table class="table table-calendar">
 			<tbody>
 			<tr>
 				<th>Mo</th>
 				<th>Tu</th>
 				<th>We</th>
 				<th>Th</th>
 				<th>Fr</th>
 				<th>Sa</th>
 				<th>Su</th>
 			</tr>
 			<tr>
 				<td class="text-muted">27</td>
 				<td class="text-muted">28</td>
 				<td class="text-muted">29</td>
 				<td class="text-muted">30</td>
 				<td>1</td>
 				<td>2</td>
 				<td>3</td>
 			</tr>
 			<tr>
 				<td><a href="javascript:void(0)" class="table-calendar-link">4</a></td>
 				<td>5</td>
 				<td><a href="javascript:void(0)" class="table-calendar-link">6</a></td>
 				<td>7</td>
 				<td>8</td>
 				<td>9</td>
 				<td>10</td>
 			</tr>
 			<tr>
 				<td>11</td>
 				<td><a href="javascript:void(0)" class="table-calendar-link">12</a></td>
 				<td>13</td>
 				<td>14</td>
 				<td><a href="javascript:void(0)">15</a></td>
 				<td>16</td>
 				<td>17</td>
 			</tr>
 			<tr>
 				<td>18</td>
 				<td><a href="javascript:void(0)" class="table-calendar-link">19</a></td>
 				<td><a href="javascript:void(0)" class="table-calendar-link">20</a></td>
 				<td>21</td>
 				<td>22</td>
 				<td>23</td>
 				<td>24</td>
 			</tr>
 			<tr>
 				<td>25</td>
 				<td>26</td>
 				<td>27</td>
 				<td>28</td>
 				<td>29</td>
 				<td>30</td>
 				<td class="text-muted">1</td>
 			</tr>
 			</tbody>
 		</table>
 	</div>
 	<ul class="list-group card-list-group">
 		<li class="list-group-item list-group-item-red">
 			<a href="javascript:void(0)" class="text-inherit">Cras justo odio</a>
 			<span class="pull-right text-muted">16 Dec</span>
 		</li>
 		<li class="list-group-item list-group-item-blue">
 			<a href="javascript:void(0)" class="text-inherit">Dapibus ac facilisis in</a>
 			<span class="pull-right text-muted">22 Dec</span>
 		</li>
 		<li class="list-group-item list-group-item-red">
 			<a href="javascript:void(0)" class="text-inherit">Vestibulum at eros</a>
 			<span class="pull-right text-muted">29 Dec</span>
 		</li>
 	</ul>
 </div>
--- a/src/_includes/cards/card.html
+++ b/src/_includes/cards/card.html
@@ -0,0 +1,40 @@
 <div class="card{% if include.collapsed %} card-collapsed{% endif %}">
 	{% if include.status or include.status-left %}
 	<div class="card-status{% if include.status-left %} card-status-left{% endif %} bg-{{ include.status | default: include.status-left }}"></div>
 	{% endif %}
 	<div class="card-header">
 		{% if include.title %}
 		<h3 class="card-title">{{ include.title }}</h3>
 		{% endif %}
 		{% unless include.hide-options %}
 		<div class="card-options">
 			{% if include.options %}
 			{{ include.options }}
 			{% else %}
 				<a href="#" class="card-options-collapse" data-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
 				{% if include.show-fullscreen %}
 				<a href="#" class="card-options-fullscreen" data-toggle="card-fullscreen"><i class="fe fe-maximize"></i></a>
 				{% endif %}
 				<a href="#" class="card-options-remove" data-toggle="card-remove"><i class="fe fe-x"></i></a>
 			{% endif %}
 		</div>
 		{% endunless %}
 	</div>
 	{% if include.alert %}
 	<div class="card-alert alert alert-{{ include.alert-type | default: 'success' }} mb-0">
 		{{ include.alert }}
 	</div>
 	{% endif %}
 	<div class="card-body">
 		<p>
 			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan.
 		</p>
 	</div>
 	{% if include.show-footer %}
 	<div class="card-footer">
 		This is standard card footer
 	</div>
 	{% endif %}
 </div>
--- a/src/_includes/cards/centered.html
+++ b/src/_includes/cards/centered.html
@@ -0,0 +1,7 @@
 <div class="card text-center">
 	<div class="card-body">
 		<h4 class="card-title">Special title treatment</h4>
 		<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
 		<a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
 	</div>
 </div>
--- a/src/_includes/cards/chart-bg.html
+++ b/src/_includes/cards/chart-bg.html
@@ -0,0 +1,19 @@
 {% assign color = include.color | default: 'blue' %}
 {% assign offset = include.offset | default: 0 %}
 {% assign limit = include.limit | default: 20 %}
 {% assign aggregate = include.aggregate | default: false %}
 <div class="card">
 	<div class="card-body">
 		<div class="card-value pull-right text-{{ color }}">{{ include.rate | default: '+5%' }}</div>
 		<h3 class="mb-1">{{ include.title | default: '423' }}</h3>
 		<div class="text-muted">{{ include.description | default: 'Users online' }}</div>
 	</div>
 	<div class="card-chart-bg">
 		<div id="{{ include.id }}" style="height: 100%"></div>
 	</div>
 </div>
 {% contentfor scripts %}
 {% include js/chart-bg.js id=include.id color=color %}
 {% endcontentfor %}
--- a/src/_includes/cards/chart-browsers.html
+++ b/src/_includes/cards/chart-browsers.html
@@ -0,0 +1,65 @@
 <div class="card">
 	<div class="card-body">
 		<h3 class="card-title">Browsers traffic</h3>
 		<div>
 			<div id="chart-browsers" style="height: 15rem"></div>
 		</div>
 	</div>
 	<table class="table card-table">
 		<tbody>
 		<tr>
 			<td width="1"><i class="browser browser-chrome"></i></td>
 			<td>Google Chrome</td>
 			<td class="text-right"><span class="text-muted">23%</span></td>
 		</tr>
 		<tr>
 			<td><i class="browser browser-firefox"></i></td>
 			<td>Mozila Firefox</td>
 			<td class="text-right"><span class="text-muted">15%</span></td>
 		</tr>
 		<tr>
 			<td><i class="browser browser-safari"></i></td>
 			<td>Apple Safari</td>
 			<td class="text-right"><span class="text-muted">7%</span></td>
 		</tr>
 		<tr>
 			<td><i class="browser browser-opera"></i></td>
 			<td>Opera mini</td>
 			<td class="text-right"><span class="text-muted">23%</span></td>
 		</tr>
 		<tr>
 			<td><i class="browser browser-edge"></i></td>
 			<td>Microsoft edge</td>
 			<td class="text-right"><span class="text-muted">9%</span></td>
 		</tr>
 		</tbody>
 	</table>
 </div>
 <script>
    require(['c3', 'jquery'], function (c3) {
        var chart = c3.generate({
            bindto: '#chart-browsers',
            data: {
                columns: [
                    ['Chrome', 36],
                    ['Firefox', 5],
                    ['Safari', 9],
                    ['Edge', 20],
                    ['Opera', 30],
                ],
                colors: {
                    Chrome: '{{ site.colors.green }}',
                    Firefox: '{{ site.colors.orange }}',
                    Safari: '{{ site.colors.blue }}',
                    Edge: '{{ site.colors.azure }}',
                    Opera: '{{ site.colors.red }}',
                },
                type: 'donut'
            },
            legend: {
                show: false
            }
        });
    });
 </script>
--- a/src/_includes/cards/chart-followers.html
+++ b/src/_includes/cards/chart-followers.html
@@ -0,0 +1,87 @@
 <div class="card">
 	<div class="card-header">
 		<div class="card-title">Gained &amp; Lost Followers</div>
 	</div>
 	<div class="card-body">
 		<div id="chart-followers" style="height: 16rem"></div>
 	</div>
 </div>
 <script>
    require(['c3', 'jquery'], function (c3, $) {
        $(document).ready(function () {
            var chart = c3.generate({
                bindto: '#chart-followers',
                padding: {
                    bottom: 24,
                    top: 0
                },
                data: {
                    names: {
                        data1: 'Gained followers',
                        data2: 'Lost followers',
                        data3: 'Posts',
                    },
                    colors: {
                        data1: '{{ site.colors.blue }}',
                        data2: '{{ site.colors.gray }}',
                        data3: '{{ site.colors.lime }}',
                    },
                    columns: [
                        ['data1', 200, 290, 110, 80, 300, 90, 120],
                        ['data2', 0, -35, -20, -10, -50, -10, 0],
                        ['data3', 1, 2, 2, 0, 1, 1, 0]
                    ],
                    type: 'bar',
                    types: {
                        data3: 'line'
                    },
                    groups: [
                        ['data1', 'data2']
                    ],
                    axes: {
                        data3: 'y2'
                    }
                },
                bar: {
                    width: 16
                },
                legend: {
                    padding: 16
                },
                axis: {
                    y: {
                        min: -100,
                        tick: {
                            count: 5
                        },
                        padding: {
                            bottom: 0,
 							top: 0
                        }
                    },
                    y2: {
                        min: -1,
 						max: 3,
                        show: true,
                        tick: {
 							format: d3.format('d')
                        },
                        padding: {
                            bottom: 0,
                            top: 0
                        }
                    }
                },
                grid: {
                    y: {
                        show: true,
                        lines: [
                            {value: 0.0}
                        ]
                    }
                }
            });
        });
    });
 </script>
--- a/src/_includes/cards/chart-pie.html
+++ b/src/_includes/cards/chart-pie.html
@@ -0,0 +1,12 @@
 <div class="card">
 	<div class="card-header">
 		<h3 class="card-title">Pie chart</h3>
 	</div>
 	<div class="card-body">
 		<div id="chart-pie" style="height: 250px"></div>
 	</div>
 </div>
 {% contentfor scripts %}
 {% include js/pie.js %}
 {% endcontentfor %}
--- a/src/_includes/cards/chart-radar.html
+++ b/src/_includes/cards/chart-radar.html
@@ -0,0 +1,11 @@
 <div class="card">
 	<div class="card-header">
 		<h3 class="card-title">Radar chart</h3>
 	</div>
 	<div class="card-body">
 		<canvas id="canvas1" height="200"></canvas>
 	</div>
 </div>
 {% contentfor scripts %}
 {% endcontentfor %}
--- a/src/_includes/cards/chart-revenue.html
+++ b/src/_includes/cards/chart-revenue.html
@@ -0,0 +1,60 @@
 <div class="card">
 	<div class="card-header">
 		<h3 class="card-title">Total Revenue</h3>
 	</div>
 	<div class="card-body">
 		<div id="chart-revenue" style="height: 20rem"></div>
 	</div>
 </div>
 <script>
 	require(['c3', 'jquery'], function(c3) {
 	   $(document).ready(function(){
           var chart = c3.generate({
               bindto: '#chart-revenue',
               data: {
                   columns: [
 					   ['data1', 39, 44, 47, 50, 55, 66, 79, 84, 86, 87, 92, 95],
                       ['data2', 65, 73, 83, 95, 96, 97, 99, 100, 103, 116, 138, 143],
                       ['data3', 101, 104, 119, 125, 132, 143, 145, 161, 167, 187, 191, 194]
                   ],
                   type: 'bar',
                   groups: [
                       ['data1', 'data2', 'data3']
                   ],
 				   colors: {
                     	'data1': tabler.colors.red,
                     	'data2': tabler.colors.green,
                     	'data3': tabler.colors.blue,
 				   },
 				   names: {
                       'data1': '2015',
                       'data2': '2016',
                       'data3': '2017',
 				   }
               },
               axis : {
                   x: {
                       type: 'category',
                       categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                   },
                   y: {
                       tick: {
                           format: d3.format("$")
                       }
                   }
               },
               bar: {
                   width: 32
               },
               padding: {
                   bottom: 24,
                   top: 0
               },
               legend: {
                   padding: 16
               }
           });
 	   });
 	});
 </script>
--- a/src/_includes/cards/chart-visitors.html
+++ b/src/_includes/cards/chart-visitors.html
@@ -0,0 +1,120 @@
 <div class="card">
 	<div class="card-tabs">
 		<div class="card-tabs-item">
 			<div class="row">
 				<div class="col-auto align-self-center">
 					<div class="chart-circle chart-circle-xs" data-value="0.8" data-thickness="4" data-color="#fca328"></div>
 				</div>
 				<div class="col">
 					<div class="text-muted">Projects</div>
 					<div class="h3 m-0">11,164</div>
 				</div>
 			</div>
 		</div>
 		<div class="card-tabs-item">
 			<div class="row">
 				<div class="col-auto align-self-center">
 					<div class="chart-circle chart-circle-xs" data-value="0.2" data-thickness="4" data-color="#7bd235"></div>
 				</div>
 				<div class="col">
 					<div class="text-muted">Calls</div>
 					<div class="h3 m-0">986</div>
 				</div>
 			</div>
 		</div>
 		<div class="card-tabs-item">
 			<div class="row">
 				<div class="col-auto align-self-center">
 					<div class="chart-circle chart-circle-xs" data-value="0.45" data-thickness="4" data-color="#76befe"></div>
 				</div>
 				<div class="col">
 					<div class="text-muted">Referrals</div>
 					<div class="h3 m-0">1,986</div>
 				</div>
 			</div>
 		</div>
 		<div class="card-tabs-item">
 			<div class="row">
 				<div class="col-auto align-self-center">
 					<div class="chart-circle chart-circle-xs" data-value="0.6" data-thickness="4" data-color="#f90049"></div>
 				</div>
 				<div class="col">
 					<div class="text-muted">Revenue</div>
 					<div class="h3 m-0">$640</div>
 				</div>
 			</div>
 		</div>
 	</div>
 	<div class="card-body">
 		<div id="chart-visitors" style="min-height: 18rem"></div>
 	</div>
 </div>
 <script>
    require(['c3', 'jquery'], function (c3) {
        $(document).ready(function() {
            var chart = c3.generate({
                bindto: '#chart-visitors',
                padding: {
                    bottom: 24
                },
                data: {
                    x: 'x',
                    names: {
                        data1: 'Referral',
                        data2: 'Calls',
                        data3: 'Prospects',
                    },
                    columns: [
                        ['x', '2013-07-12', '2013-07-13', '2013-07-14', '2013-07-15', '2013-07-16', '2013-07-17', '2013-07-18', '2013-07-19', '2013-07-20', '2013-07-21', '2013-07-22'],
                        ['data1', 22, 28, 21, 46, 48, 38, 48, 52, 28, 57, 32],
                        ['data2', 72, 61, 102, 104, 132, 86, 74, 108, 78, 106, 144],
                        ['data3', 125, 100, 72, 132, 154, 141, 178, 142, 146, 72, 186],
                    ],
                    types: {
                        data1: 'area',
                    }
                },
                point: {
                    show: false
                },
                legend: {
                    position: 'top',
                    padding: 16
                },
                transition: {
                    duration: 0
                },
                axis: {
                    y: {
                        tick: {
                            fit: true
                        }
                    },
                    x: {
                        type: 'timeseries',
                        tick: {
                            format: '%d %b'
                        },
                        padding: {
                            top: 10,
                            bottom: 0
                        }
                    }
                },
                grid: {
                    y: {
                        show: true
                    }
                },
                color: {
                    pattern: [
                        '#fca328',
                        '#7bd235',
                        '#76befe',
                    ]
                }
            });
        });
    });
 </script>
--- a/src/_includes/cards/chat.html
+++ b/src/_includes/cards/chat.html
@@ -0,0 +1,18 @@
 <div class="card">
 	<div class="card-header">
 		<h3 class="card-title">Chat</h3>
 	</div>
 	<div class="card-body card-body-scrollable">
 		{% include chat-content.html %}
 	</div>
 	<div class="card-footer">
 		<div class="row xs-gutters">
 			<div class="col">
 				<input type="text" class="form-control" placeholder="Message to Bob&hellip;">
 			</div>
 			<div class="col-auto">
 				<button class="btn btn-primary"><i class="si si-arrow-right"></i></button>
 			</div>
 		</div>
 	</div>
 </div>
--- a/src/_includes/cards/chips.html
+++ b/src/_includes/cards/chips.html
@@ -0,0 +1,13 @@
 <div class="card">
 	<div class="card-body">
 		<div>
 			<div class="chips">
 				{% for user in site.data.users limit: 10 %}
 				<a href="javascript:void(0)" class="chip">
 					<span class="avatar" style="background-image: url({{ user.photo }})"></span> {{ user.name }}
 				</a>
 				{% endfor %}
 			</div>
 		</div>
 	</div>
 </div>
--- a/src/_includes/cards/classroom.html
+++ b/src/_includes/cards/classroom.html
@@ -0,0 +1,88 @@
 <form class="card" action="">
 	<div class="card-header">
 		<h3 class="card-title">Create new classroom</h3>
 	</div>
 	<div class="card-body">
 		<div class="row">
 			<div class="col-sm-6">
 				<div class="form-group">
 					<label class="form-label">Name of Class</label>
 					<input type="text" class="form-control" placeholder="e.g. English Class" />
 				</div>
 			</div>
 			<div class="col-sm-6">
 				<div class="form-group">
 					<label class="form-label">Section</label>
 					<input type="text" class="form-control" placeholder="e.g. English" />
 				</div>
 			</div>
 			<div class="col-sm-6">
 				<div class="form-group">
 					<label class="form-label">Target Language (L1)</label>
 					<select class="form-control custom-select">
 						<option value="english">English</option>
 					</select>
 				</div>
 			</div>
 			<div class="col-sm-6">
 				<div class="form-group">
 					<label class="form-label">Target Language (L2)</label>
 					<select class="form-control custom-select">
 						<option value="french">French</option>
 					</select>
 				</div>
 			</div>
 			<div class="col-sm-6">
 				<div class="form-group">
 					<label class="form-label">Home Country</label>
 					<select class="form-control custom-select">
 						<option value="french">United States</option>
 					</select>
 				</div>
 			</div>
 			<div class="col-sm-6">
 				<div class="form-group">
 					<label class="form-label">School</label>
 					<input type="text" class="form-control" placeholder="Where do you teach?" />
 				</div>
 			</div>
 			<div class="col-sm-12">
 				<div class="form-group">
 					<label class="form-label">What kind of classroom would you like to connect with?</label>
 					<input type="text" class="form-control" placeholder="Where do you teach?" />
 				</div>
 			</div>
 			<div class="col-sm-6">
 				<div class="form-group">
 					<label class="form-label">Which tools would you like to use?</label>
 					<select class="form-control custom-select">
 						<option value="french">Blogging, Video Chat, Quizzes, +3 Others</option>
 					</select>
 				</div>
 			</div>
 			<div class="col-sm-6">
 				<div class="form-group">
 					<label class="form-label">What Age Group are you going to teach?</label>
 					<div>
 						<label class="custom-control custom-radio">
 							<input type="radio" name="classroom-age" class="custom-control-input" checked>
 							<span class="custom-control-indicator"></span>
 							<span class="custom-control-description">K-12</span>
 						</label>
 						<label class="custom-control custom-radio">
 							<input type="radio" name="classroom-age" class="custom-control-input">
 							<span class="custom-control-indicator"></span>
 							<span class="custom-control-description">Value</span>
 						</label>
 					</div>
 				</div>
 			</div>
 		</div>
 	</div>
 	<div class="card-footer">
 		<div class="d-flex align-items-center">
 			<a href="javascript:void(0)" class="text-muted">Cancel</a>
 			<button type="submit" class="btn btn-primary ml-auto">Create classroom</button>
 		</div>
 	</div>
 </form>
--- a/src/_includes/cards/client.html
+++ b/src/_includes/cards/client.html
@@ -0,0 +1,61 @@
 <div class="card">
 	<div class="card-header">
 		<h3 class="card-title">Client card</h3>
 		<div class="card-options">
 			<button type="button" class="btn btn-option" data-toggle="tooltip" title="Edit">
 				<i class="si si-pencil"></i>
 			</button>
 			<div class="dropdown card-options-dropdown">
 				<button type="button" class="btn btn-option dropdown-toggle" data-toggle="dropdown"><i class="si si-options"></i></button>
 				<div class="dropdown-menu dropdown-menu-right">
 					<a class="dropdown-item" href="javascript:void(0)">
 						<i class="si si-bell mr-3"></i>News
 					</a>
 					<a class="dropdown-item" href="javascript:void(0)">
 						<i class="si si-envelope mr-3"></i>Messages
 					</a>
 					<div class="dropdown-divider"></div>
 					<a class="dropdown-item" href="javascript:void(0)">
 						<i class="si si-pencil mr-3"></i>Edit Profile
 					</a>
 				</div>
 			</div>
 		</div>
 	</div>
 	<div class="card-map card-map-placeholder"></div>
 	<div class="card-body">
 		<div class="media mb-5">
 			<img class="d-flex mr-5 rounded" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2264%22%20height%3D%2264%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ec911398e%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ec911398e%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2213.84375%22%20y%3D%2236.65%22%3E64x64%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Generic placeholder image">
 			<div class="media-body">
 				<h5>Axa Global Group</h5>
 				<address class="text-muted small">
 					1290 Avenua of The Americas<br>
 					New York, NY 101040105
 				</address>
 			</div>
 		</div>
 		<div class="row">
 			<div class="col-6">
 				<div class="h6">Relationship</div>
 				<p>Client</p>
 			</div>
 			<div class="col-6">
 				<div class="h6">Business Type</div>
 				<p>Insurance Company</p>
 			</div>
 			<div class="col-6">
 				<div class="h6">Website</div>
 				<p><a href="javascript:void(0)">http://www.axa.com</a></p>
 			</div>
 			<div class="col-6">
 				<div class="h6">Office Phone</div>
 				<p>+123456789</p>
 			</div>
 		</div>
 		<div class="h6">Description</div>
 		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur dignissimos doloribus eum fugiat itaque laboriosam maiores nisi nostrum perspiciatis vero.</p>
 	</div>
 </div>
--- a/src/_includes/cards/color.html
+++ b/src/_includes/cards/color.html
@@ -0,0 +1,8 @@
 <div class="card text-white bg-{{ include.color }}">
 	<div class="card-body">
 		<h4 class="card-title">
 			{{ include.color | capitalize }} card title
 		</h4>
 		<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
 	</div>
 </div>
--- a/src/_includes/cards/colors.html
+++ b/src/_includes/cards/colors.html
@@ -0,0 +1,12 @@
 <div class="card">
 	<div class="card-body">
 		<h4 class="card-title">
 			Colors
 		</h4>
 		<div>
 			{% for color in site.colors %}
 				<div class="d-inline-block bg-{{ color[0] }} w-6 h-6 rounded mr-1"></div>
 			{% endfor %}
 		</div>
 	</div>
 </div>
--- a/src/_includes/cards/company-lookup.html
+++ b/src/_includes/cards/company-lookup.html
@@ -0,0 +1,196 @@
 <div class="card">
 	<div class="card-body">
 		<div class="row align-items-center mb-6">
 			<div class="col-auto">
 				<div class="avatar avatar-lg rounded d-block" style="background-image: url(https://logo.clearbit.com/amazon.com?size=100)"></div>
 			</div>
 			<div class="col">
 				<div class="h3 m-0 font-weight-normal">amazon.com</div>
 			</div>
 		</div>
 		<div class="row">
 			<div class="col">
 				<h5 class="mb-1">Name</h5>
 				<div class="text-muted-dark">Amazon.com</div>
 			</div>
 			<div class="col">
 				<h5 class="mb-1">Legal Name</h5>
 				<div class="text-muted-dark">Amazon.com, Inc.</div>
 			</div>
 			<div class="col">
 				<h5 class="mb-1">Ticker</h5>
 				<div class="text-muted-dark">AMZN</div>
 			</div>
 			<div class="col">
 				<h5 class="mb-1">Founded Year</h5>
 				<div class="text-muted-dark">1995</div>
 			</div>
 			<div class="col">
 				<h5 class="mb-1">Type</h5>
 				<div class="text-muted-dark">Public</div>
 			</div>
 			<div class="col">
 				<h5 class="mb-1">Employees</h5>
 				<div class="text-muted-dark">341,400</div>
 			</div>
 			<div class="col">
 				<h5 class="mb-1">Annual Revenue</h5>
 				<div class="text-muted-dark">$135B</div>
 			</div>
 		</div>
 	</div>
 	<div class="card-body">
 		<div class="row lg-gutters">
 			<div class="col-7">
 				<div class="row mb-5">
 					<div class="col">
 						<h5 class="mb-1">Location</h5>
 						<div class="text-muted-dark">207 Boren Ave, Seattle, WA 98109, USA</div>
 					</div>
 					<div class="col">
 						<h5 class="mb-1">Timezone</h5>
 						<div class="text-muted-dark">America/Los_Angeles</div>
 					</div>
 				</div>
 				<div class="map-static"
 				     style="background-image: url(https://maps.googleapis.com/maps/api/staticmap?center=47.620057,-122.3362675&size=640x120&scale=2&zoom=13&markers=color:blue|47.620057,-122.3362675&key={{ site.google-maps-key }});"></div>
 				<hr>
 				<h5 class="mb-4">Recent News</h5>
 				<ul class="list-unstyled">
 					<li class="mb-5">
 						<a href="#">Amazons Super Bowl commercial might contain a clue about where HQ2 will be</a>
 						<p class="mb-1">Eagleeyed viewers of the Super Bowl spotted something most people missed in Amazons commercial for its Alexa voice assistant Before Alexa lo…</p>
 						<div class="row">
 							<div class="col text-muted">businessinsider.com</div>
 							<div class="col text-muted text-right">2 days ago</div>
 						</div>
 					</li>
 					<li class="mb-5">
 						<a href="#">Holiday performance propels Amazon to stellar quarter results</a>
 						<p>This story was delivered to BI Intelligence ECommerce Briefing subscribers hours before appearing on Business Insider To be the first to kno…</p>
 						<div class="row">
 							<div class="col text-muted">businessinsider.com</div>
 							<div class="col text-muted text-right">2 days ago</div>
 						</div>
 					</li>
 					<li class="mb-5">
 						<a href="#">12 highpaying jobs Amazons HQ2 will likely bring to its future city</a>
 						<p class="mb-1">These Amazon jobs all earn over 90000tanleimagesShutterstock</p>
 						<div class="row">
 							<div class="col text-muted">businessinsider.com</div>
 							<div class="col text-muted text-right" title="2018-02-02T12:32:00.000Z">4 days ago</div>
 						</div>
 					</li>
 					<li class="mb-5">
 						<a href="http://businessinsider.com/amazon-dominates-online-shopping-2018-2">Amazon is tightening its iron grip online</a>
 						<p class="mb-1">ReutersLindsey Wasson To say Amazon is doing well would be an understatement In its latest earnings report the company reported 6045 billion…</p>
 						<div class="row">
 							<div class="col text-muted">businessinsider.com</div>
 							<div class="col text-muted text-right" title="2018-02-02T10:45:00.000Z">5 days ago</div>
 						</div>
 					</li>
 					<li class="mb-4">
 						<a href="http://businessinsider.com/tough-amazon-interview-questions-you-should-be-prepared-to-answer-2018-1">21 tough interview questions you may have to answer if you want to work at Amazon</a>
 						<p class="mb-1">How would you answer Amazon is a peculiar company whats peculiar about youAlex WongGetty Images</p>
 						<div class="row">
 							<div class="col text-muted">businessinsider.com</div>
 							<div class="col text-muted text-right" title="2018-02-01T11:25:00.000Z">6 days ago</div>
 						</div>
 					</li>
 				</ul>
 			</div>
 			<div class="col-5">
 				<ul class="list-unstyled list-separated">
 					<li class="list-separated-item">
 						<h5>Description</h5>
 						<div class="text-muted-dark">
 							Online shopping from the earth's biggest selection of books, magazines, music, DVDs, videos, electronics, computers, software, apparel & acc…
 						</div>
 					</li>
 					<li class="list-separated-item">
 						<h5>Tags</h5>
 						<div>
 							<span class="tag">E-Commerce &amp; Marketplaces</span>
 							<span class="tag">E-commerce</span>
 							<span class="tag">B2C</span>
 							<span class="tag">Internet</span>
 							<span class="tag">Consumer Discretionary</span>
 							<span class="tag">Technology</span>
 						</div>
 					</li>
 					<li class="list-separated-item">
 						<h5 class="mb-1">Industry</h5>
 						<div>Internet Software &amp; Services</div>
 					</li>
 					<li class="list-separated-item">
 						<h5 class="mb-1">Sector</h5>
 						<div>Information Technology</div>
 					</li>
 					<li class="list-separated-item">
 						<h5 class="mb-1">SIC Code</h5>
 						<div>59</div>
 					</li>
 					<li class="list-separated-item">
 						<h5 class="mb-1">NAICS Code</h5>
 						<div>45</div>
 					</li>
 					<li class="list-separated-item">
 						<h5 class="mb-1">EIN</h5>
 						<div>911646860</div>
 					</li>
 					<li class="list-separated-item">
 						<h5 class="mb-1">Technologies</h5>
 						<div>
 							<span class="tag text-uppercase">amazon associates</span>
 							<span class="tag text-uppercase">amazon ses</span>
 							<span class="tag text-uppercase">dyn dns</span>
 							<span class="tag text-uppercase">omniture adobe analytics</span>
 							<span class="tag text-uppercase">typekit by adobe</span>
 						</div>
 					</li>
 					<li class="list-separated-item">
 						<h5 class="mb-1">Alexa US Rank</h5>
 						<div>5</div>
 					</li>
 					<li class="list-separated-item">
 						<h5 class="mb-1">Alexa Global Rank</h5>
 						<div>10</div>
 					</li>
 					<li class="list-separated-item">
 						<h5 class="mb-1">Fiscal Year End</h5>
 						<div>End of December</div>
 					</li>
 					<li class="list-separated-item">
 						<h5 class="mb-1">Phone</h5>
 						<div>
 							<a href="tel:+1 206-266-1000">+1 206-266-1000</a>
 						</div>
 					</li>
 					<li class="list-separated-item">
 						<h5 class="mb-1">Crunchbase</h5>
 						<div>
 							<a href="#">crunchbase.com/organization/amazon</a>
 						</div>
 					</li>
 					<li class="list-separated-item">
 						<h5 class="mb-1">Twitter</h5>
 						<div>
 							<a href="#">twitter.com/amazon</a>
 						</div>
 					</li>
 					<li class="list-separated-item">
 						<h5 class="mb-1">Facebook</h5>
 						<div>
 							<a href="#">facebook.com/amazon</a>
 						</div>
 					</li>
 				</ul>
 			</div>
 		</div>
 	</div>
 </div>
--- a/src/_includes/cards/countries.html
+++ b/src/_includes/cards/countries.html
@@ -0,0 +1,69 @@
 <div class="card">
 	<div class="card-body">
 		<h4 class="card-title">Top Countries</h4>
 	</div>
 	<table class="table card-table">
 		<tbody>
 		<tr>
 			<td width="1"><i class="flag flag-us"></i></td>
 			<td>
 				USA
 				<div class="progress progress-xs mt-2">
 					<div class="progress-bar" style="width: 78%"></div>
 				</div>
 			</td>
 			<td width="1" class="text-right"><span class="text-muted">$6425</span></td>
 		</tr>
 		<tr>
 			<td><i class="flag flag-pl"></i></td>
 			<td>
 				Poland
 				<div class="progress progress-xs mt-2">
 					<div class="progress-bar" style="width: 62%"></div>
 				</div>
 			</td>
 			<td class="text-right"><span class="text-muted">$5582</span></td>
 		</tr>
 		<tr>
 			<td><i class="flag flag-de"></i></td>
 			<td>
 				Germany
 				<div class="progress progress-xs mt-2">
 					<div class="progress-bar" style="width: 48%"></div>
 				</div>
 			</td>
 			<td class="text-right"><span class="text-muted">$4587</span></td>
 		</tr>
 		<tr>
 			<td><i class="flag flag-ru"></i></td>
 			<td>
 				Russia
 				<div class="progress progress-xs mt-2">
 					<div class="progress-bar" style="width: 35%"></div>
 				</div>
 			</td>
 			<td class="text-right"><span class="text-muted">$2520</span></td>
 		</tr>
 		<tr>
 			<td><i class="flag flag-au"></i></td>
 			<td>
 				Australia
 				<div class="progress progress-xs mt-2">
 					<div class="progress-bar" style="width: 30%"></div>
 				</div>
 			</td>
 			<td class="text-right"><span class="text-muted">$1899</span></td>
 		</tr>
 		<tr>
 			<td><i class="flag flag-gb"></i></td>
 			<td>
 				Great Britain
 				<div class="progress progress-xs mt-2">
 					<div class="progress-bar" style="width: 22%"></div>
 				</div>
 			</td>
 			<td class="text-right"><span class="text-muted">$1056</span></td>
 		</tr>
 		</tbody>
 	</table>
 </div>
--- a/src/_includes/cards/credit-card.html
+++ b/src/_includes/cards/credit-card.html
@@ -0,0 +1,60 @@
 <!-- Creadit Card component -->
 <div class="card">
 	<div class="card-body">
 		<div class="form-group">
 			<label class="form-label">Cardholder's name</label>
 			<input type="text" class="form-control">
 		</div>
 		<div class="form-group">
 			<label class="form-label">Card number</label>
 			<input type="text" class="form-control">
 		</div>
 		<div class="form-group">
 			<div class="row sm-gutters">
 				<div class="col">
 					<label class="form-label">Expiry Date</label>
 					<div class="row sm-gutters">
 						<div class="col">
 							<select name="" class="form-control custom-select">
 								<option value="">January</option>
 								<option value="">February</option>
 								<option value="">March</option>
 								<option value="">April</option>
 								<option value="">May</option>
 								<option value="">June</option>
 								<option value="">Juli</option>
 								<option value="">August</option>
 								<option value="">September</option>
 								<option value="">October</option>
 								<option value="">November</option>
 								<option value="">December</option>
 							</select>
 						</div>
 						<div class="col-auto">
 							<select name="" class="form-control custom-select">
 								<option value="">2017</option>
 								<option value="">2018</option>
 								<option value="">2019</option>
 								<option value="">2020</option>
 								<option value="">2021</option>
 								<option value="">2022</option>
 								<option value="">2023</option>
 								<option value="">2024</option>
 							</select>
 						</div>
 					</div>
 				</div>
 				<div class="col-3">
 					<label class="form-label">CVV</label>
 					<input type="text" class="form-control">
 				</div>
 			</div>
 		</div>
 	</div>
 	<div class="card-footer">
 		<div class="d-flex">
 			<a href="" class="btn btn-link">Cancel</a>
 			<button class="btn btn-primary ml-auto">Complete Order</button>
 		</div>
 	</div>
 </div>
--- a/src/_includes/cards/digit.html
+++ b/src/_includes/cards/digit.html
@@ -0,0 +1,13 @@
 {% assign width = include.width | default: '54%' %}
 {% assign color = include.color | default: 'blue' %}
 {% assign title = include.title | default: 'Today Expenses' %}
 {% assign digit = include.digit | default: '$8500' %}
 <div class="card">
 	<div class="card-body text-center">
 		<div class="h5">{{ title }}</div>
 		<div class="display-4 font-weight-bold mb-4">{{ digit }}</div>
 		<div class="progress progress-sm">
 			<div class="progress-bar bg-{{ color }}" style="width: {{ width }}"></div>
 		</div>
 	</div>
 </div>
--- a/src/_includes/cards/email-stats.html
+++ b/src/_includes/cards/email-stats.html
@@ -0,0 +1,14 @@
 <div class="card">
 	<div class="card-body">
 		<h3 class="card-title">Email Statistics</h3>
 		<div>
 			<div id="chart-emails" style="height: 15rem"></div>
 			{% include js/chart-circle.js id="chart-emails" data='{"Open": [30, "blue"], "Bounce": [50, "red"], "Unsubscribe": [25, "yellow"]}' type="donut" %}
 		</div>
 	</div>
 	<div class="card-footer">
 		<i class="fa fa-clock-o"></i> Campaign sent 2 days ago
 	</div>
 </div>
--- a/src/_includes/cards/empty.html
+++ b/src/_includes/cards/empty.html
@@ -0,0 +1,6 @@
 <div class="card">
 	<div class="card-body">
 		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi asperiores atque beatae commodi, deserunt dolores eligendi esse est harum maxime nesciunt non nostrum quibusdam quisquam ratione repudiandae saepe soluta sunt.
 		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi asperiores atque beatae commodi, deserunt dolores eligendi esse est harum maxime nesciunt non nostrum quibusdam quisquam ratione repudiandae saepe soluta sunt.
 	</div>
 </div>
--- a/src/_includes/cards/feed.html
+++ b/src/_includes/cards/feed.html
@@ -0,0 +1,62 @@
 <div class="card">
 	<header class="card-header">
 		<h4 class="card-title">Feeds</h4>
 		<div class="card-options">
 			<button type="button" class="btn btn-option" data-toggle="tooltip" title="Edit">
 				<i class="si si-pencil"></i>
 			</button>
 			<div class="dropdown card-options-dropdown">
 				<button type="button" class="btn btn-option dropdown-toggle" data-toggle="dropdown"><i class="si si-options"></i></button>
 				<div class="dropdown-menu dropdown-menu-right">
 					<a class="dropdown-item" href="javascript:void(0)">
 						<i class="si si-bell mr-3"></i>News
 					</a>
 					<a class="dropdown-item" href="javascript:void(0)">
 						<i class="si si-envelope mr-3"></i>Messages
 					</a>
 					<div class="dropdown-divider"></div>
 					<a class="dropdown-item" href="javascript:void(0)">
 						<i class="si si-pencil mr-3"></i>Edit Profile
 					</a>
 				</div>
 			</div>
 		</div>
 	</header>
 	<div class="card-body">
 		<div class="media mb-3">
 			<div class="media-object mr-4"><span class="avatar avatar-md" style="background-image: url({{ site.data.users[4].photo }})"></span></div>
 			<div class="media-body">
 				<h5 class="mb-0"><a href="javascript:void(0)" class="text-color">Some of the fantastic things people have had to say about Ooooh</a></h5>
 				<small class="text-muted">2 days ago</small>
 			</div>
 		</div>
 		<div class="media mb-3">
 			<div class="media-object mr-4"><span class="avatar avatar-md" style="background-image: url({{ site.data.users[5].photo }})"></span></div>
 			<div class="media-body">
 				<h5 class="mb-0"><a href="javascript:void(0)" class="text-color">Here are just some of the magazine reviews we have had</a></h5>
 				<small class="text-muted">1 day ago</small>
 			</div>
 		</div>
 		<div class="media mb-3">
 			<div class="media-object mr-4"><span class="avatar avatar-md" style="background-image: url({{ site.data.users[6].photo }})"></span></div>
 			<div class="media-body">
 				<h5 class="mb-0"><a href="javascript:void(0)" class="text-color">Lorem ipsum dolor amet, consectetur adipisicing elit.</a></h5>
 				<small class="text-muted">2 days ago</small>
 			</div>
 		</div>
 		<div class="media mb-3">
 			<div class="media-object mr-4"><span class="avatar avatar-md" style="background-image: url({{ site.data.users[7].photo }})"></span></div>
 			<div class="media-body">
 				<h5 class="mb-0"><a href="javascript:void(0)" class="text-color">“It’s just brilliant. I will recommend it to everyone!”</a></h5>
 				<small class="text-muted">2 mins ago</small>
 			</div>
 		</div>
 		<div class="media">
 			<div class="media-object mr-4"><span class="avatar avatar-md" style="background-image: url({{ site.data.users[8].photo }})"></span></div>
 			<div class="media-body">
 				<h5 class="mb-0"><a href="javascript:void(0)" class="text-color">John has just started working on the project</a></h5>
 				<small class="text-muted">right now</small>
 			</div>
 		</div>
 	</div>
 </div>
--- a/src/_includes/cards/finance.html
+++ b/src/_includes/cards/finance.html
@@ -0,0 +1,63 @@
 <div class="card">
 	<div class="card-header">
 		<h3 class="card-title">
 			Finance Stats
 		</h3>
 	</div>
 	<div class="card-body">
 		<ul class="list-unstyled">
 			<li>
 				<div class="row align-items-center">
 					<div class="col-auto">
 						<div class="h5 mb-0">
 							IPO Margin
 						</div>
 						<span class="small text-muted">Awerage IPO Margin</span>
 					</div>
 					<div class="col text-right">
 						<span class="h4 text-primary font-weight-bold">+24%</span>
 					</div>
 				</div>
 			</li>
 			<li class="mt-4">
 				<div class="row align-items-center">
 					<div class="col-auto">
 						<div class="h5 mb-0">
 							Payments
 						</div>
 						<span class="small text-muted">Yearly Expenses</span>
 					</div>
 					<div class="col text-right">
 						<span class="h4 text-info font-weight-bold">+$560,800</span>
 					</div>
 				</div>
 			</li>
 			<li class="mt-4">
 				<div class="row align-items-center">
 					<div class="col-auto">
 						<div class="h5 mb-0">
 							Logistics
 						</div>
 						<span class="small text-muted">Overall Regional Logistics</span>
 					</div>
 					<div class="col text-right">
 						<span class="h4 text-warning font-weight-bold">-10%</span>
 					</div>
 				</div>
 			</li>
 			<li class="mt-4">
 				<div class="row align-items-center">
 					<div class="col-auto">
 						<div class="h5 mb-0">
 							Expenses
 						</div>
 						<span class="small text-muted">Balance</span>
 					</div>
 					<div class="col text-right">
 						<span class="h4 text-danger font-weight-bold">$345,000</span>
 					</div>
 				</div>
 			</li>
 		</ul>
 	</div>
 </div>
--- a/src/_includes/cards/follow.html
+++ b/src/_includes/cards/follow.html
@@ -0,0 +1,50 @@
 <div class="card">
 	<div class="card-body">
 		<h4 class="card-title">Follow</h4>
 	</div>
 	<table class="table card-table">
 		<tr>
 			<td class="align-middle" width="1">
 				<span class="avatar avatar-md" style="background-image: url({{ site.data.users[38].photo }})"></span>
 			</td>
 			<td>
 				<strong>Jacob Thornton</strong>
 				<small class="d-block text-muted">@fat</small>
 			</td>
 			<td class="align-middle" width="1">
 				<button class="btn btn-outline-primary btn-sm">
 					<span class="fa fa-twitter"></span> Follow
 				</button>
 			</td>
 		</tr>
 		<tr>
 			<td class="align-middle" width="1">
 				<span class="avatar avatar-md" style="background-image: url({{ site.data.users[39].photo }})"></span>
 			</td>
 			<td>
 				<strong>Dave Gamache</strong>
 				<small class="d-block text-muted">@dhg</small>
 			</td>
 			<td class="align-middle" width="1">
 				<button class="btn btn-outline-primary btn-sm">
 					<span class="fa fa-twitter"></span> Follow
 				</button>
 			</td>
 		</tr>
 		<tr>
 			<td class="align-middle" width="1">
 				<span class="avatar avatar-md" style="background-image: url({{ site.data.users[40].photo }})"></span>
 			</td>
 			<td>
 				<strong>Mark Otto</strong>
 				<small class="d-block text-muted">@mdo</small>
 			</td>
 			<td class="align-middle" width="1">
 				<button class="btn btn-outline-primary btn-sm">
 					<span class="fa fa-twitter"></span> Follow
 				</button>
 			</td>
 		</tr>
 	</table>
 </div>
--- a/src/_includes/cards/footer.html
+++ b/src/_includes/cards/footer.html
@@ -0,0 +1,8 @@
 <div class="card">
 	<div class="card-body">
 		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquid architecto commodi dolorum nam odio perspiciatis quo sapiente vitae voluptatem? Accusamus beatae distinctio dolores laborum nobis, obcaecati odio quia reprehenderit.
 	</div>
 	<div class="card-footer">
 		Card with footer content
 	</div>
 </div>
--- a/src/_includes/cards/forgot.html
+++ b/src/_includes/cards/forgot.html
@@ -0,0 +1,19 @@
 <form class="card" action="./" method="get">
 	<div class="card-body">
 		<div class="card-title">Forgot password</div>
 		<p class="text-muted">Enter your email address and your password will be reset and emailed to you.</p>
 		<div class="form-group">
 			<label class="form-label" for="exampleInputEmail1">Email address</label>
 			<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
 		</div>
 		<div class="form-footer">
 			<button type="submit" class="btn btn-primary btn-block">Send me new password</button>
 		</div>
 	</div>
 	<div class="card-footer">
 		<a href="./login.html"><i class="mdi mdi-arrow-left"></i> Back to login form</a>
 	</div>
 </form>
--- a/src/_includes/cards/form-all-elements.html
+++ b/src/_includes/cards/form-all-elements.html
@@ -0,0 +1,660 @@
 <form action="https://httpbin.org/post" method="post" class="card">
 	<div class="card-header">
 		<h3 class="card-title">Form elements</h3>
 	</div>
 	<div class="card-body">
 		<div class="row">
 			<div class="col-md-6 col-lg-4">
 				<div class="form-group">
 					<label class="form-label">Static</label>
 					<div class="form-control-plaintext">Username</div>
 				</div>
 				<div class="form-group">
 					<label class="form-label" for="example-text-input">Text</label>
 					<input type="text" class="form-control" name="example-text-input" placeholder="Text..">
 				</div>
 				<div class="form-group">
 					<label class="form-label" for="example-disabled-input">Disabled</label>
 					<input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled.."
 					       value="Well, she turned me into a newt."
 					       disabled>
 				</div>
 				<div class="form-group">
 					<label class="form-label" for="example-disabled-input">Readonly</label>
 					<input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled.."
 					       value="Well, how'd you become king, then?"
 					       readonly>
 				</div>
 				<div class="form-group">
 					<label class="form-label" for="example-textarea-input">Textarea <span class="form-label-small">56/100</span></label>
 					<textarea class="form-control" name="example-textarea-input" rows="6" placeholder="Content..">Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! We shall say 'Ni' again to you, if you do not appease us. I'm not a witch. I'm not a witch. Camelot!</textarea>
 				</div>
 				{% include parts/input-image.html %}
 				{% include parts/input-color.html %}
 				<div class="form-group">
 					<label class="form-label">Input group</label>
 					<div class="input-group">
 						<input type="text" class="form-control" placeholder="Search for...">
 						<span class="input-group-append">
 							<button class="btn btn-primary" type="button">Go!</button>
 						</span>
 					</div>
 				</div>
 				<div class="form-group">
 					<label class="form-label">Input group buttons</label>
 					<div class="input-group">
 						<input type="text" class="form-control">
 						<div class="input-group-append">
 							<button type="button" class="btn btn-primary">Action</button>
 							<button data-toggle="dropdown" type="button" class="btn btn-primary dropdown-toggle"></button>
 							<div class="dropdown-menu dropdown-menu-right">
 								<a class="dropdown-item" href="javascript:void(0)">
 									News
 								</a>
 								<a class="dropdown-item" href="javascript:void(0)">
 									Messages
 								</a>
 								<div class="dropdown-divider"></div>
 								<a class="dropdown-item" href="javascript:void(0)">
 									Edit Profile
 								</a>
 							</div>
 						</div>
 					</div>
 				</div>
 				{% include parts/input-icon.html %}
 				<div class="form-group">
 					<label class="form-label">Separated inputs</label>
 					<div class="row xs-gutters">
 						<div class="col">
 							<input type="text" class="form-control" placeholder="Search for...">
 						</div>
 						<span class="col-auto">
 							<button class="btn btn-secondary" type="button"><i class="fe fe-search"></i></button>
 						</span>
 					</div>
 				</div>
 				<div class="form-group">
 					<label class="form-label">ZIP Code</label>
 					<div class="row sm-gutters">
 						<div class="col">
 							<input type="text" class="form-control" placeholder="Search for...">
 						</div>
 						<span class="col-auto align-self-center">
 							<span class="form-help" data-toggle="popover" data-placement="top" data-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p><p class='mb-0'><a href=''>USP ZIP codes lookup tools</a></p>">?</span>
 						</span>
 					</div>
 				</div>
 			</div>
 			<div class="col-md-6 col-lg-4">
 				<div class="form-group">
 					<label class="form-label" for="example-password-input">Password</label>
 					<input type="password" class="form-control" name="example-password-input" placeholder="Password..">
 				</div>
 				<div class="form-group">
 					<label class="form-label" for="example-text-input-valid">Valid State</label>
 					<input type="text" class="form-control is-valid" name="example-text-input-valid" placeholder="Valid State..">
 					<input type="text" class="form-control mt-3 state-valid" value="Valid state">
 				</div>
 				<div class="form-group">
 					<label class="form-label" for="example-text-input-invalid">Invalid State</label>
 					<input type="text" class="form-control is-invalid" name="example-text-input-invalid"
 					       placeholder="Invalid State..">
 					<div class="invalid-feedback">Invalid feedback</div>
 					<input type="text" class="form-control mt-3 state-invalid" value="Invalid state">
 				</div>
 				<div class="form-group">
 					<label class="form-label">Country</label>
 					<select class="form-control custom-select">
 						<option value="">Germany</option>
 					</select>
 				</div>
 				<div class="form-group">
 					<label class="form-label">Ratios</label>
 					<div class="row align-items-center">
 						<div class="col">
 							<input type="range" class="form-control custom-range" step="5" min="0" max="50">
 						</div>
 						<div class="col-auto">
 							<input type="number" class="form-control w-8" value="45">
 						</div>
 					</div>
 				</div>
 				<div class="form-group">
 					<label class="form-label">Size</label>
 					<div class="selectgroup w-100">
 						<label class="selectgroup-item">
 							<input type="radio" name="value" value="50" class="selectgroup-input" checked="">
 							<span class="selectgroup-button">S</span>
 						</label>
 						<label class="selectgroup-item">
 							<input type="radio" name="value" value="100" class="selectgroup-input">
 							<span class="selectgroup-button">M</span>
 						</label>
 						<label class="selectgroup-item">
 							<input type="radio" name="value" value="150" class="selectgroup-input">
 							<span class="selectgroup-button">L</span>
 						</label>
 						<label class="selectgroup-item">
 							<input type="radio" name="value" value="200" class="selectgroup-input">
 							<span class="selectgroup-button">XL</span>
 						</label>
 					</div>
 				</div>
 				<div class="form-group">
 					<label class="form-label">Icons input</label>
 					<div class="selectgroup w-100">
 						<label class="selectgroup-item">
 							<input type="radio" name="transportation" value="2" class="selectgroup-input">
 							<span class="selectgroup-button selectgroup-button-icon"><i class="fe fe-smartphone"></i></span>
 						</label>
 						<label class="selectgroup-item">
 							<input type="radio" name="transportation" value="1" class="selectgroup-input" checked="">
 							<span class="selectgroup-button selectgroup-button-icon"><i class="fe fe-tablet"></i></span>
 						</label>
 						<label class="selectgroup-item">
 							<input type="radio" name="transportation" value="6" class="selectgroup-input">
 							<span class="selectgroup-button selectgroup-button-icon"><i class="fe fe-monitor"></i></span>
 						</label>
 						<label class="selectgroup-item">
 							<input type="radio" name="transportation" value="6" class="selectgroup-input">
 							<span class="selectgroup-button selectgroup-button-icon"><i class="fe fe-x"></i></span>
 						</label>
 					</div>
 				</div>
 				<div class="form-group">
 					<label class="form-label">Icons input</label>
 					<div class="selectgroup selectgroup-pills">
 						<label class="selectgroup-item">
 							<input type="radio" name="icon-input" value="1" class="selectgroup-input" checked="">
 							<span class="selectgroup-button selectgroup-button-icon"><i class="fa fa-male"></i></span>
 						</label>
 						<label class="selectgroup-item">
 							<input type="radio" name="icon-input" value="2" class="selectgroup-input">
 							<span class="selectgroup-button selectgroup-button-icon"><i class="fa fa-female"></i></span>
 						</label>
 					</div>
 				</div>
 				<div class="form-group">
 					<label class="form-label">Your skills</label>
 					<div class="selectgroup selectgroup-pills">
 						<label class="selectgroup-item">
 							<input type="checkbox" name="value" value="HTML" class="selectgroup-input" checked="">
 							<span class="selectgroup-button">HTML</span>
 						</label>
 						<label class="selectgroup-item">
 							<input type="checkbox" name="value" value="CSS" class="selectgroup-input">
 							<span class="selectgroup-button">CSS</span>
 						</label>
 						<label class="selectgroup-item">
 							<input type="checkbox" name="value" value="PHP" class="selectgroup-input">
 							<span class="selectgroup-button">PHP</span>
 						</label>
 						<label class="selectgroup-item">
 							<input type="checkbox" name="value" value="JavaScript" class="selectgroup-input">
 							<span class="selectgroup-button">JavaScript</span>
 						</label>
 						<label class="selectgroup-item">
 							<input type="checkbox" name="value" value="Ruby" class="selectgroup-input">
 							<span class="selectgroup-button">Ruby</span>
 						</label>
 						<label class="selectgroup-item">
 							<input type="checkbox" name="value" value="Ruby" class="selectgroup-input">
 							<span class="selectgroup-button">Ruby</span>
 						</label>
 						<label class="selectgroup-item">
 							<input type="checkbox" name="value" value="C++" class="selectgroup-input">
 							<span class="selectgroup-button">C++</span>
 						</label>
 					</div>
 				</div>
 				{% include parts/input-toggle.html %}
 				<div class="form-group">
 					<div class="form-label">Toggle switch single</div>
 					<label class="custom-switch">
 						<input type="checkbox" name="custom-switch-checkbox" class="custom-switch-input">
 						<span class="custom-switch-indicator"></span>
 						<span class="custom-switch-description">I agree with terms and conditions</span>
 					</label>
 				</div>
 				{% include parts/form-fieldset.html %}
 			</div>
 			<div class="col-md-6 col-lg-4">
 				<div class="form-group">
 					<label class="form-label">Radios</label>
 					<div class="custom-controls-stacked">
 						<label class="custom-control custom-radio">
 							<input type="radio" class="custom-control-input" name="example-radios" value="option1" checked="">
 							<div class="custom-control-label">Option 1</div>
 						</label>
 						<label class="custom-control custom-radio">
 							<input type="radio" class="custom-control-input" name="example-radios" value="option2">
 							<div class="custom-control-label">Option 2</div>
 						</label>
 						<label class="custom-control custom-radio">
 							<input type="radio" class="custom-control-input" name="example-radios" value="option3" disabled>
 							<div class="custom-control-label">Option Disabled</div>
 						</label>
 						<label class="custom-control custom-radio">
 							<input type="radio" class="custom-control-input" name="example-radios2" value="option4" disabled checked>
 							<div class="custom-control-label">Option Disabled Checked</div>
 						</label>
 					</div>
 				</div>
 				<div class="form-group">
 					<div class="form-label">Inline Radios</div>
 					<div class="custom-control custom-radio">
 						<input type="radio" class="custom-control-input" name="example-inline-radios" value="option1" checked="">
 						<span class="custom-control-label">Option 1</span>
 					</div>
 					<div class="custom-control custom-radio">
 						<input type="radio" class="custom-control-input" name="example-inline-radios" value="option2">
 						<span class="custom-control-label">Option 2</span>
 					</div>
 					<div class="custom-control custom-radio">
 						<input type="radio" class="custom-control-input" name="example-inline-radios" value="option3">
 						<span class="custom-control-label">Option 3</span>
 					</div>
 				</div>
 				<div class="form-group">
 					<label class="form-label">Checkboxes</label>
 					<div class="custom-controls-stacked">
 						<div class="custom-control custom-checkbox">
 							<input type="checkbox" class="custom-control-input" name="example-checkbox1" value="option1" checked="">
 							<label class="custom-control-label">Option 1</label>
 						</div>
 						<div class="custom-control custom-checkbox">
 							<input type="checkbox" class="custom-control-input" name="example-checkbox2" value="option2">
 							<label class="custom-control-label">Option 2</label>
 						</div>
 						<div class="custom-control custom-checkbox">
 							<input type="checkbox" class="custom-control-input" name="example-checkbox3" value="option3" disabled>
 							<label class="custom-control-label">Option Disabled</label>
 						</div>
 						<div class="custom-control custom-checkbox">
 							<input type="checkbox" class="custom-control-input" name="example-checkbox4" value="option4" checked disabled>
 							<label class="custom-control-label">Option Disabled Checked</label>
 						</div>
 					</div>
 				</div>
 				<div class="form-group">
 					<div class="form-label">Inline Checkboxes</div>
 					<div class="custom-control custom-checkbox">
 						<input type="checkbox" class="custom-control-input" name="example-inline-checkbox1" value="option1"
 						       checked="">
 						<label class="custom-control-label">Option 1</label>
 					</div>
 					<div class="custom-control custom-checkbox">
 						<input type="checkbox" class="custom-control-input" name="example-inline-checkbox2" value="option2">
 						<label class="custom-control-label">Option 2</label>
 					</div>
 					<div class="custom-control custom-checkbox">
 						<input type="checkbox" class="custom-control-input" name="example-inline-checkbox3" value="option3">
 						<label class="custom-control-label">Option 3</label>
 					</div>
 				</div>
 				<div class="form-group">
 					<div class="form-label">Bootstrap's Custom File Input</div>
 					<div class="custom-file">
 						<input type="file" class="custom-file-input" name="example-file-input-custom">
 						<label class="custom-file-label">Choose file</label>
 					</div>
 				</div>
 				<div class="form-group">
 					<label class="form-label">Date of birth</label>
 					<div class="row xs-gutters">
 						<div class="col-5">
 							<select name="user[month]" class="form-control custom-select">
 								<option value="">Month</option>
 								<option value="1">January</option>
 								<option value="2">February</option>
 								<option value="3">March</option>
 								<option value="4">April</option>
 								<option value="5">May</option>
 								<option selected="selected" value="6">June</option>
 								<option value="7">July</option>
 								<option value="8">August</option>
 								<option value="9">September</option>
 								<option value="10">October</option>
 								<option value="11">November</option>
 								<option value="12">December</option>
 							</select>
 						</div>
 						<div class="col-3">
 							<select name="user[day]" class="form-control custom-select">
 								<option value="">Day</option>
 								<option value="1">1</option>
 								<option value="2">2</option>
 								<option value="3">3</option>
 								<option value="4">4</option>
 								<option value="5">5</option>
 								<option value="6">6</option>
 								<option value="7">7</option>
 								<option value="8">8</option>
 								<option value="9">9</option>
 								<option value="10">10</option>
 								<option value="11">11</option>
 								<option value="12">12</option>
 								<option value="13">13</option>
 								<option value="14">14</option>
 								<option value="15">15</option>
 								<option value="16">16</option>
 								<option value="17">17</option>
 								<option value="18">18</option>
 								<option value="19">19</option>
 								<option selected="selected" value="20">20</option>
 								<option value="21">21</option>
 								<option value="22">22</option>
 								<option value="23">23</option>
 								<option value="24">24</option>
 								<option value="25">25</option>
 								<option value="26">26</option>
 								<option value="27">27</option>
 								<option value="28">28</option>
 								<option value="29">29</option>
 								<option value="30">30</option>
 								<option value="31">31</option>
 							</select>
 						</div>
 						<div class="col-4">
 							<select name="user[year]" class="form-control custom-select">
 								<option value="">Year</option>
 								<option value="2014">2014</option>
 								<option value="2013">2013</option>
 								<option value="2012">2012</option>
 								<option value="2011">2011</option>
 								<option value="2010">2010</option>
 								<option value="2009">2009</option>
 								<option value="2008">2008</option>
 								<option value="2007">2007</option>
 								<option value="2006">2006</option>
 								<option value="2005">2005</option>
 								<option value="2004">2004</option>
 								<option value="2003">2003</option>
 								<option value="2002">2002</option>
 								<option value="2001">2001</option>
 								<option value="2000">2000</option>
 								<option value="1999">1999</option>
 								<option value="1998">1998</option>
 								<option value="1997">1997</option>
 								<option value="1996">1996</option>
 								<option value="1995">1995</option>
 								<option value="1994">1994</option>
 								<option value="1993">1993</option>
 								<option value="1992">1992</option>
 								<option value="1991">1991</option>
 								<option value="1990">1990</option>
 								<option selected="selected" value="1989">1989</option>
 								<option value="1988">1988</option>
 								<option value="1987">1987</option>
 								<option value="1986">1986</option>
 								<option value="1985">1985</option>
 								<option value="1984">1984</option>
 								<option value="1983">1983</option>
 								<option value="1982">1982</option>
 								<option value="1981">1981</option>
 								<option value="1980">1980</option>
 								<option value="1979">1979</option>
 								<option value="1978">1978</option>
 								<option value="1977">1977</option>
 								<option value="1976">1976</option>
 								<option value="1975">1975</option>
 								<option value="1974">1974</option>
 								<option value="1973">1973</option>
 								<option value="1972">1972</option>
 								<option value="1971">1971</option>
 								<option value="1970">1970</option>
 								<option value="1969">1969</option>
 								<option value="1968">1968</option>
 								<option value="1967">1967</option>
 								<option value="1966">1966</option>
 								<option value="1965">1965</option>
 								<option value="1964">1964</option>
 								<option value="1963">1963</option>
 								<option value="1962">1962</option>
 								<option value="1961">1961</option>
 								<option value="1960">1960</option>
 								<option value="1959">1959</option>
 								<option value="1958">1958</option>
 								<option value="1957">1957</option>
 								<option value="1956">1956</option>
 								<option value="1955">1955</option>
 								<option value="1954">1954</option>
 								<option value="1953">1953</option>
 								<option value="1952">1952</option>
 								<option value="1951">1951</option>
 								<option value="1950">1950</option>
 								<option value="1949">1949</option>
 								<option value="1948">1948</option>
 								<option value="1947">1947</option>
 								<option value="1946">1946</option>
 								<option value="1945">1945</option>
 								<option value="1944">1944</option>
 								<option value="1943">1943</option>
 								<option value="1942">1942</option>
 								<option value="1941">1941</option>
 								<option value="1940">1940</option>
 								<option value="1939">1939</option>
 								<option value="1938">1938</option>
 								<option value="1937">1937</option>
 								<option value="1936">1936</option>
 								<option value="1935">1935</option>
 								<option value="1934">1934</option>
 								<option value="1933">1933</option>
 								<option value="1932">1932</option>
 								<option value="1931">1931</option>
 								<option value="1930">1930</option>
 								<option value="1929">1929</option>
 								<option value="1928">1928</option>
 								<option value="1927">1927</option>
 								<option value="1926">1926</option>
 								<option value="1925">1925</option>
 								<option value="1924">1924</option>
 								<option value="1923">1923</option>
 								<option value="1922">1922</option>
 								<option value="1921">1921</option>
 								<option value="1920">1920</option>
 								<option value="1919">1919</option>
 								<option value="1918">1918</option>
 								<option value="1917">1917</option>
 								<option value="1916">1916</option>
 								<option value="1915">1915</option>
 								<option value="1914">1914</option>
 								<option value="1913">1913</option>
 								<option value="1912">1912</option>
 								<option value="1911">1911</option>
 								<option value="1910">1910</option>
 								<option value="1909">1909</option>
 								<option value="1908">1908</option>
 								<option value="1907">1907</option>
 								<option value="1906">1906</option>
 								<option value="1905">1905</option>
 								<option value="1904">1904</option>
 								<option value="1903">1903</option>
 								<option value="1902">1902</option>
 								<option value="1901">1901</option>
 								<option value="1900">1900</option>
 								<option value="1899">1899</option>
 								<option value="1898">1898</option>
 								<option value="1897">1897</option>
 							</select>
 						</div>
 					</div>
 				</div>
 				<div class="form-group">
 					<label class="form-label">Username</label>
 					<div class="input-group">
 						<span class="input-group-prepend" id="basic-addon1">
 							<span class="input-group-text">@</span>
 						</span>
 						<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
 					</div>
 				</div>
 				<div class="form-group">
 					<label class="form-label">Subdomain</label>
 					<div class="input-group">
 						<input type="text" class="form-control" placeholder="Your subdomain" aria-label="Recipient's username" aria-describedby="basic-addon2">
 						<span class="input-group-append" id="basic-addon2">
 							<span class="input-group-text">.example.com</span>
 						</span>
 					</div>
 				</div>
 				<div class="form-group">
 					<label class="form-label">Your vanity URL</label>
 					<div class="input-group">
 						<span class="input-group-prepend" id="basic-addon3">
 							<span class="input-group-text">https://example.com/users/</span>
 						</span>
 						<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
 					</div>
 				</div>
 				<div class="form-group">
 					<label class="form-label">Price</label>
 					<div class="input-group">
 						<span class="input-group-prepend">
 							<span class="input-group-text">$</span>
 						</span>
 						<input type="text" class="form-control text-right" aria-label="Amount (to the nearest dollar)">
 						<span class="input-group-append">
 							<span class="input-group-text">.00</span>
 						</span>
 					</div>
 				</div>
 				<div class="form-group">
 					<label class="form-label">Button input</label>
 					<div class="input-group">
 						<div class="input-group-prepend">
 							<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 								Action
 							</button>
 							<div class="dropdown-menu">
 								<a class="dropdown-item" href="javascript:void(0)">Action</a>
 								<a class="dropdown-item" href="javascript:void(0)">Another action</a>
 								<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
 								<div role="separator" class="dropdown-divider"></div>
 								<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
 							</div>
 						</div>
 						<input type="text" class="form-control" aria-label="Text input with dropdown button">
 					</div>
 				</div>
 				<div class="form-group">
 					<label class="form-label">Tags</label>
 					<input type="text" class="form-control" id="input-tags" value="aa,bb,cc,dd">
 				</div>
 				<div class="form-group">
 					<label class="form-label">Beast</label>
 					<select name="beast" id="select-beast" class="form-control custom-select">
 						<option value="1">Chuck Testa</option>
 						<option value="4">Sage Cattabriga-Alosa</option>
 						<option value="3">Nikola Tesla</option>
 					</select>
 				</div>
 				<div class="form-group">
 					<label class="form-label">Users list</label>
 					<select name="user" id="select-users" class="form-control custom-select">
 						{% for user in site.data.users %}
 						<option value="{{ forloop.index }}" data-data='{"image": "{{ user.photo }}"}'>{{ user.name }} {{ user.surname }}</option>
 						{% endfor %}
 					</select>
 				</div>
 				<div class="form-group">
 					<label class="form-label">Countries</label>
 					<select name="country" id="select-countries" class="form-control custom-select">
 						<option value="br" data-data='{"image": "./assets/images/flags/br.svg"}'>Brazil</option>
 						<option value="cz" data-data='{"image": "./assets/images/flags/cz.svg"}'>Czech Republic</option>
 						<option value="de" data-data='{"image": "./assets/images/flags/de.svg"}'>Germany</option>
 						<option value="pl" data-data='{"image": "./assets/images/flags/pl.svg"}' selected>Poland</option>
 					</select>
 				</div>
 			</div>
 		</div>
 	</div>
 	<div class="card-footer text-right">
 		<div class="d-flex">
 			<a href="javascript:void(0)" class="btn btn-link">Cancel</a>
 			<button type="submit" class="btn btn-primary ml-auto">Send data</button>
 		</div>
 	</div>
 </form>
 {% contentfor js %}
 <script>
 	require(['jquery', 'selectize'], function ($, selectize) {
 		$(document).ready(function () {
 			$('#input-tags').selectize({
 				delimiter: ',',
 				persist: false,
 				create: function (input) {
 					return {
 						value: input,
 						text: input
 					}
 				}
 			});
 			$('#select-beast').selectize({});
 			$('#select-users').selectize({
 				render: {
 					option: function (data, escape) {
 						return '<div>' +
 							'<span class="image"><img src="' + data.image + '" alt=""></span>' +
 							'<span class="title">' + escape(data.text) + '</span>' +
 							'</div>';
 					},
 					item: function (data, escape) {
 						return '<div>' +
 							'<span class="image"><img src="' + data.image + '" alt=""></span>' +
 							escape(data.text) +
 							'</div>';
 					}
 				}
 			});
 			$('#select-countries').selectize({
 				render: {
 					option: function (data, escape) {
 						return '<div>' +
 							'<span class="image"><img src="' + data.image + '" alt=""></span>' +
 							'<span class="title">' + escape(data.text) + '</span>' +
 							'</div>';
 					},
 					item: function (data, escape) {
 						return '<div>' +
 							'<span class="image"><img src="' + data.image + '" alt=""></span>' +
 							escape(data.text) +
 							'</div>';
 					}
 				}
 			});
 		});
 	});
 </script>
 {% endcontentfor %}
--- a/src/_includes/cards/form-base.html
+++ b/src/_includes/cards/form-base.html
@@ -0,0 +1,447 @@
 <div class="card">
 	<div class="card-header card-header-default">
 		<h3 class="card-title">Default Elements</h3>
 	</div>
 	<div class="card-body">
 		<div class="form-group">
 			<label class="form-label">Static</label>
 			<div class="form-control-plaintext">Username</div>
 		</div>
 		<div class="form-group">
 			<label class="form-label" for="example-text-input">Text</label>
 			<input type="text" class="form-control" id="example-text-input" name="example-text-input" placeholder="Text..">
 			<div class="form-text text-muted">Further info about this input</div>
 		</div>
 		<div class="form-group">
 			<label class="form-label" for="example-email-input">Email</label>
 			<input type="email" class="form-control" id="example-email-input" name="example-email-input" placeholder="Email..">
 		</div>
 		<div class="form-group">
 			<label class="form-label" for="example-password-input">Password</label>
 			<input type="password" class="form-control" id="example-password-input" name="example-password-input" placeholder="Password..">
 		</div>
 		<div class="form-group">
 			<label class="form-label" for="example-text-input-valid">Valid State</label>
 			<input type="text" class="form-control is-valid" id="example-text-input-valid" name="example-text-input-valid" placeholder="Valid State..">
 		</div>
 		<div class="form-group">
 			<label class="form-label" for="example-text-input-invalid">Invalid State</label>
 			<input type="text" class="form-control is-invalid" id="example-text-input-invalid" name="example-text-input-invalid"
 			       placeholder="Invalid State..">
 			<div class="invalid-feedback">Invalid feedback</div>
 		</div>
 		<div class="form-group">
 			<label class="form-label" for="example-disabled-input">Disabled</label>
 			<input type="text" class="form-control" id="example-disabled-input" name="example-disabled-input" placeholder="Disabled.." disabled="">
 		</div>
 		<div class="form-group">
 			<label class="form-label" for="example-textarea-input">Textarea</label>
 			<textarea class="form-control" id="example-textarea-input" name="example-textarea-input" rows="6" placeholder="Content.."></textarea>
 		</div>
 		<div class="form-group">
 			<label class="form-label" for="example-select">Select</label>
 			<select class="form-control" id="example-select" name="example-select">
 				<option value="0">Please select</option>
 				<option value="1">Option #1</option>
 				<option value="2">Option #2</option>
 				<option value="3">Option #3</option>
 			</select>
 		</div>
 		<div class="form-group">
 			<label class="form-label" for="example-custom-select">Custom Select</label>
 			<select class="form-control custom-select" id="example-custom-select" name="example-custom-select">
 				<option value="0">Please select</option>
 				<option value="1">Option #1</option>
 				<option value="2">Option #2</option>
 				<option value="3">Option #3</option>
 			</select>
 		</div>
 		<div class="form-group">
 			<label class="form-label" for="example-multiple-select">Multiple Select</label>
 			<select class="form-control" id="example-multiple-select" name="example-multiple-select" size="7" multiple="">
 				<option value="1">Option #1</option>
 				<option value="2">Option #2</option>
 				<option value="3">Option #3</option>
 				<option value="4">Option #4</option>
 				<option value="5">Option #5</option>
 				<option value="6">Option #6</option>
 				<option value="7">Option #7</option>
 				<option value="8">Option #8</option>
 				<option value="9">Option #9</option>
 				<option value="10">Option #10</option>
 			</select>
 		</div>
 		<div class="form-group">
 			<label class="form-label">Radios</label>
 			<div class="custom-controls-stacked">
 				<label class="custom-control custom-radio">
 					<input type="radio" class="custom-control-input" id="example-radio1" name="example-radios" value="option1" checked="">
 					<span class="custom-control-indicator"></span>
 					<span class="custom-control-description">Option 1</span>
 				</label>
 				<label class="custom-control custom-radio">
 					<input type="radio" class="custom-control-input" id="example-radio2" name="example-radios" value="option2">
 					<span class="custom-control-indicator"></span>
 					<span class="custom-control-description">Option 2</span>
 				</label>
 				<label class="custom-control custom-radio">
 					<input type="radio" class="custom-control-input" id="example-radio3" name="example-radios" value="option3">
 					<span class="custom-control-indicator"></span>
 					<span class="custom-control-description">Option 3</span>
 				</label>
 			</div>
 		</div>
 		<div class="form-group">
 			<label class="form-label">Inline Radios</label>
 			<label class="custom-control custom-radio">
 				<input type="radio" class="custom-control-input" id="example-inline-radio1" name="example-inline-radios" value="option1" checked="">
 				<span class="custom-control-indicator"></span>
 				<span class="custom-control-description">Option 1</span>
 			</label>
 			<label class="custom-control custom-radio">
 				<input type="radio" class="custom-control-input" id="example-inline-radio2" name="example-inline-radios" value="option2">
 				<span class="custom-control-indicator"></span>
 				<span class="custom-control-description">Option 2</span>
 			</label>
 			<label class="custom-control custom-radio">
 				<input type="radio" class="custom-control-input" id="example-inline-radio3" name="example-inline-radios" value="option3">
 				<span class="custom-control-indicator"></span>
 				<span class="custom-control-description">Option 3</span>
 			</label>
 		</div>
 		<div class="form-group">
 			<label class="form-label">Checkboxes</label>
 			<div class="custom-controls-stacked">
 				<label class="custom-control custom-checkbox">
 					<input type="checkbox" class="custom-control-input" id="example-checkbox1" name="example-checkbox1" value="option1" checked="">
 					<span class="custom-control-indicator"></span>
 					<span class="custom-control-description">Option 1</span>
 				</label>
 				<label class="custom-control custom-checkbox">
 					<input type="checkbox" class="custom-control-input" id="example-checkbox2" name="example-checkbox2" value="option2">
 					<span class="custom-control-indicator"></span>
 					<span class="custom-control-description">Option 2</span>
 				</label>
 				<label class="custom-control custom-checkbox">
 					<input type="checkbox" class="custom-control-input" id="example-checkbox3" name="example-checkbox3" value="option3">
 					<span class="custom-control-indicator"></span>
 					<span class="custom-control-description">Option 3</span>
 				</label>
 			</div>
 		</div>
 		<div class="form-group">
 			<label class="form-label">Inline Checkboxes</label>
 			<label class="custom-control custom-checkbox">
 				<input type="checkbox" class="custom-control-input" id="example-inline-checkbox1" name="example-inline-checkbox1" value="option1"
 				       checked="">
 				<span class="custom-control-indicator"></span>
 				<span class="custom-control-description">Option 1</span>
 			</label>
 			<label class="custom-control custom-checkbox">
 				<input type="checkbox" class="custom-control-input" id="example-inline-checkbox2" name="example-inline-checkbox2" value="option2">
 				<span class="custom-control-indicator"></span>
 				<span class="custom-control-description">Option 2</span>
 			</label>
 			<label class="custom-control custom-checkbox">
 				<input type="checkbox" class="custom-control-input" id="example-inline-checkbox3" name="example-inline-checkbox3" value="option3">
 				<span class="custom-control-indicator"></span>
 				<span class="custom-control-description">Option 3</span>
 			</label>
 		</div>
 		<div class="form-group">
 			<label class="form-label" for="example-file-input">File Input</label>
 			<input type="file" id="example-file-input" name="example-file-input">
 		</div>
 		<div class="form-group">
 			<label class="form-label" for="example-file-multiple-input">File Input (Multiple)</label>
 			<input type="file" id="example-file-multiple-input" name="example-file-multiple-input" multiple="">
 		</div>
 		<div class="form-group">
 			<label class="form-label">Bootstrap's Custom File Input</label>
 			<label class="custom-file">
 				<input type="file" class="custom-file-input" id="example-file-input-custom" name="example-file-input-custom">
 				<span class="custom-file-control"></span>
 			</label>
 		</div>
 		<div class="form-group">
 			<label class="form-label">Bootstrap's Custom File Input (Multiple)</label>
 			<label class="custom-file">
 				<input type="file" class="custom-file-input" id="example-file-multiple-input-custom" name="example-file-multiple-input-custom" multiple="">
 				<span class="custom-file-control"></span>
 			</label>
 		</div>
 		<div class="form-group">
 			<label class="form-label" for="example-select-2">Selectize.js</label>
 			<select class="form-control custom-select" id="example-select-2" name="example-select" data-selectize>
 				<option value="0">Please select</option>
 				<option value="1">Option #1</option>
 				<option value="2">Option #2</option>
 				<option value="3">Option #3</option>
 			</select>
 		</div>
 		<div class="form-group">
 			<label class="form-label" for="example-select-2">Selectize.js</label>
 			<select class="form-control custom-select" id="example-select-3" name="example-select">
 				<option value="0">Please select</option>
 				<option value="1">Option #1</option>
 				<option value="2">Option #2</option>
 				<option value="3">Option #3</option>
 			</select>
 		</div>
 		<div class="form-group">
 			<label class="form-label">Country</label>
 			<select id="select-country" class="form-control custom-select" placeholder="Select a country..." data-selectize>
 				<option value="">Select a country...</option>
 				<option value="AF">Afghanistan</option>
 				<option value="AX">&Aring;land Islands</option>
 				<option value="AL">Albania</option>
 				<option value="DZ">Algeria</option>
 				<option value="AS">American Samoa</option>
 				<option value="AD">Andorra</option>
 				<option value="AO">Angola</option>
 				<option value="AI">Anguilla</option>
 				<option value="AQ">Antarctica</option>
 				<option value="AG">Antigua and Barbuda</option>
 				<option value="AR">Argentina</option>
 				<option value="AM">Armenia</option>
 				<option value="AW">Aruba</option>
 				<option value="AU">Australia</option>
 				<option value="AT">Austria</option>
 				<option value="AZ">Azerbaijan</option>
 				<option value="BS">Bahamas</option>
 				<option value="BH">Bahrain</option>
 				<option value="BD">Bangladesh</option>
 				<option value="BB">Barbados</option>
 				<option value="BY">Belarus</option>
 				<option value="BE">Belgium</option>
 				<option value="BZ">Belize</option>
 				<option value="BJ">Benin</option>
 				<option value="BM">Bermuda</option>
 				<option value="BT">Bhutan</option>
 				<option value="BO">Bolivia, Plurinational State of</option>
 				<option value="BA">Bosnia and Herzegovina</option>
 				<option value="BW">Botswana</option>
 				<option value="BV">Bouvet Island</option>
 				<option value="BR">Brazil</option>
 				<option value="IO">British Indian Ocean Territory</option>
 				<option value="BN">Brunei Darussalam</option>
 				<option value="BG">Bulgaria</option>
 				<option value="BF">Burkina Faso</option>
 				<option value="BI">Burundi</option>
 				<option value="KH">Cambodia</option>
 				<option value="CM">Cameroon</option>
 				<option value="CA">Canada</option>
 				<option value="CV">Cape Verde</option>
 				<option value="KY">Cayman Islands</option>
 				<option value="CF">Central African Republic</option>
 				<option value="TD">Chad</option>
 				<option value="CL">Chile</option>
 				<option value="CN">China</option>
 				<option value="CX">Christmas Island</option>
 				<option value="CC">Cocos (Keeling) Islands</option>
 				<option value="CO">Colombia</option>
 				<option value="KM">Comoros</option>
 				<option value="CG">Congo</option>
 				<option value="CD">Congo, the Democratic Republic of the</option>
 				<option value="CK">Cook Islands</option>
 				<option value="CR">Costa Rica</option>
 				<option value="CI">C&ocirc;te d'Ivoire</option>
 				<option value="HR">Croatia</option>
 				<option value="CU">Cuba</option>
 				<option value="CY">Cyprus</option>
 				<option value="CZ">Czech Republic</option>
 				<option value="DK">Denmark</option>
 				<option value="DJ">Djibouti</option>
 				<option value="DM">Dominica</option>
 				<option value="DO">Dominican Republic</option>
 				<option value="EC">Ecuador</option>
 				<option value="EG">Egypt</option>
 				<option value="SV">El Salvador</option>
 				<option value="GQ">Equatorial Guinea</option>
 				<option value="ER">Eritrea</option>
 				<option value="EE">Estonia</option>
 				<option value="ET">Ethiopia</option>
 				<option value="FK">Falkland Islands (Malvinas)</option>
 				<option value="FO">Faroe Islands</option>
 				<option value="FJ">Fiji</option>
 				<option value="FI">Finland</option>
 				<option value="FR">France</option>
 				<option value="GF">French Guiana</option>
 				<option value="PF">French Polynesia</option>
 				<option value="TF">French Southern Territories</option>
 				<option value="GA">Gabon</option>
 				<option value="GM">Gambia</option>
 				<option value="GE">Georgia</option>
 				<option value="DE">Germany</option>
 				<option value="GH">Ghana</option>
 				<option value="GI">Gibraltar</option>
 				<option value="GR">Greece</option>
 				<option value="GL">Greenland</option>
 				<option value="GD">Grenada</option>
 				<option value="GP">Guadeloupe</option>
 				<option value="GU">Guam</option>
 				<option value="GT">Guatemala</option>
 				<option value="GG">Guernsey</option>
 				<option value="GN">Guinea</option>
 				<option value="GW">Guinea-Bissau</option>
 				<option value="GY">Guyana</option>
 				<option value="HT">Haiti</option>
 				<option value="HM">Heard Island and McDonald Islands</option>
 				<option value="VA">Holy See (Vatican City State)</option>
 				<option value="HN">Honduras</option>
 				<option value="HK">Hong Kong</option>
 				<option value="HU">Hungary</option>
 				<option value="IS">Iceland</option>
 				<option value="IN">India</option>
 				<option value="ID">Indonesia</option>
 				<option value="IR">Iran, Islamic Republic of</option>
 				<option value="IQ">Iraq</option>
 				<option value="IE">Ireland</option>
 				<option value="IM">Isle of Man</option>
 				<option value="IL">Israel</option>
 				<option value="IT">Italy</option>
 				<option value="JM">Jamaica</option>
 				<option value="JP">Japan</option>
 				<option value="JE">Jersey</option>
 				<option value="JO">Jordan</option>
 				<option value="KZ">Kazakhstan</option>
 				<option value="KE">Kenya</option>
 				<option value="KI">Kiribati</option>
 				<option value="KP">Korea, Democratic People's Republic of</option>
 				<option value="KR">Korea, Republic of</option>
 				<option value="KW">Kuwait</option>
 				<option value="KG">Kyrgyzstan</option>
 				<option value="LA">Lao People's Democratic Republic</option>
 				<option value="LV">Latvia</option>
 				<option value="LB">Lebanon</option>
 				<option value="LS">Lesotho</option>
 				<option value="LR">Liberia</option>
 				<option value="LY">Libyan Arab Jamahiriya</option>
 				<option value="LI">Liechtenstein</option>
 				<option value="LT">Lithuania</option>
 				<option value="LU">Luxembourg</option>
 				<option value="MO">Macao</option>
 				<option value="MK">Macedonia, the former Yugoslav Republic of</option>
 				<option value="MG">Madagascar</option>
 				<option value="MW">Malawi</option>
 				<option value="MY">Malaysia</option>
 				<option value="MV">Maldives</option>
 				<option value="ML">Mali</option>
 				<option value="MT">Malta</option>
 				<option value="MH">Marshall Islands</option>
 				<option value="MQ">Martinique</option>
 				<option value="MR">Mauritania</option>
 				<option value="MU">Mauritius</option>
 				<option value="YT">Mayotte</option>
 				<option value="MX">Mexico</option>
 				<option value="FM">Micronesia, Federated States of</option>
 				<option value="MD">Moldova, Republic of</option>
 				<option value="MC">Monaco</option>
 				<option value="MN">Mongolia</option>
 				<option value="ME">Montenegro</option>
 				<option value="MS">Montserrat</option>
 				<option value="MA">Morocco</option>
 				<option value="MZ">Mozambique</option>
 				<option value="MM">Myanmar</option>
 				<option value="NA">Namibia</option>
 				<option value="NR">Nauru</option>
 				<option value="NP">Nepal</option>
 				<option value="NL">Netherlands</option>
 				<option value="AN">Netherlands Antilles</option>
 				<option value="NC">New Caledonia</option>
 				<option value="NZ">New Zealand</option>
 				<option value="NI">Nicaragua</option>
 				<option value="NE">Niger</option>
 				<option value="NG">Nigeria</option>
 				<option value="NU">Niue</option>
 				<option value="NF">Norfolk Island</option>
 				<option value="MP">Northern Mariana Islands</option>
 				<option value="NO">Norway</option>
 				<option value="OM">Oman</option>
 				<option value="PK">Pakistan</option>
 				<option value="PW">Palau</option>
 				<option value="PS">Palestinian Territory, Occupied</option>
 				<option value="PA">Panama</option>
 				<option value="PG">Papua New Guinea</option>
 				<option value="PY">Paraguay</option>
 				<option value="PE">Peru</option>
 				<option value="PH">Philippines</option>
 				<option value="PN">Pitcairn</option>
 				<option value="PL">Poland</option>
 				<option value="PT">Portugal</option>
 				<option value="PR">Puerto Rico</option>
 				<option value="QA">Qatar</option>
 				<option value="RE">R&eacute;union</option>
 				<option value="RO">Romania</option>
 				<option value="RU">Russian Federation</option>
 				<option value="RW">Rwanda</option>
 				<option value="BL">Saint Barth&eacute;lemy</option>
 				<option value="SH">Saint Helena, Ascension and Tristan da Cunha</option>
 				<option value="KN">Saint Kitts and Nevis</option>
 				<option value="LC">Saint Lucia</option>
 				<option value="MF">Saint Martin (French part)</option>
 				<option value="PM">Saint Pierre and Miquelon</option>
 				<option value="VC">Saint Vincent and the Grenadines</option>
 				<option value="WS">Samoa</option>
 				<option value="SM">San Marino</option>
 				<option value="ST">Sao Tome and Principe</option>
 				<option value="SA">Saudi Arabia</option>
 				<option value="SN">Senegal</option>
 				<option value="RS">Serbia</option>
 				<option value="SC">Seychelles</option>
 				<option value="SL">Sierra Leone</option>
 				<option value="SG">Singapore</option>
 				<option value="SK">Slovakia</option>
 				<option value="SI">Slovenia</option>
 				<option value="SB">Solomon Islands</option>
 				<option value="SO">Somalia</option>
 				<option value="ZA">South Africa</option>
 				<option value="GS">South Georgia and the South Sandwich Islands</option>
 				<option value="ES">Spain</option>
 				<option value="LK">Sri Lanka</option>
 				<option value="SD">Sudan</option>
 				<option value="SR">Suriname</option>
 				<option value="SJ">Svalbard and Jan Mayen</option>
 				<option value="SZ">Swaziland</option>
 				<option value="SE">Sweden</option>
 				<option value="CH">Switzerland</option>
 				<option value="SY">Syrian Arab Republic</option>
 				<option value="TW">Taiwan, Province of China</option>
 				<option value="TJ">Tajikistan</option>
 				<option value="TZ">Tanzania, United Republic of</option>
 				<option value="TH">Thailand</option>
 				<option value="TL">Timor-Leste</option>
 				<option value="TG">Togo</option>
 				<option value="TK">Tokelau</option>
 				<option value="TO">Tonga</option>
 				<option value="TT">Trinidad and Tobago</option>
 				<option value="TN">Tunisia</option>
 				<option value="TR">Turkey</option>
 				<option value="TM">Turkmenistan</option>
 				<option value="TC">Turks and Caicos Islands</option>
 				<option value="TV">Tuvalu</option>
 				<option value="UG">Uganda</option>
 				<option value="UA">Ukraine</option>
 				<option value="AE">United Arab Emirates</option>
 				<option value="GB">United Kingdom</option>
 				<option value="US">United States</option>
 				<option value="UM">United States Minor Outlying Islands</option>
 				<option value="UY">Uruguay</option>
 				<option value="UZ">Uzbekistan</option>
 				<option value="VU">Vanuatu</option>
 				<option value="VE">Venezuela, Bolivarian Republic of</option>
 				<option value="VN">Viet Nam</option>
 				<option value="VG">Virgin Islands, British</option>
 				<option value="VI">Virgin Islands, U.S.</option>
 				<option value="WF">Wallis and Futuna</option>
 				<option value="EH">Western Sahara</option>
 				<option value="YE">Yemen</option>
 				<option value="ZM">Zambia</option>
 				<option value="ZW">Zimbabwe</option>
 			</select>
 		</div>
 		<div class="form-footer">
 			<button type="submit" class="btn btn-primary">Submit</button>
 		</div>
 	</div>
 </div>
--- a/src/_includes/cards/form-button-groups.html
+++ b/src/_includes/cards/form-button-groups.html
@@ -0,0 +1,43 @@
 <div class="card">
 	<div class="card-header">
 		<h3 class="card-title">Button Groups</h3>
 	</div>
 	<div class="card-body">
 		<div class="form-group">
 			<div class="input-group">
 				<div class="input-group-btn">
 					<button type="button" class="btn btn-secondary">
 						<i class="fa fa-search"></i> Search
 					</button>
 				</div>
 				<input type="text" class="form-control" id="example-input1-group2" name="example-input1-group2" placeholder="Username">
 			</div>
 		</div>
 		<div class="form-group ">
 			<div class="input-group">
 				<input type="email" class="form-control" id="example-input2-group2" name="example-input2-group2" placeholder="Email">
 				<div class="input-group-btn">
 					<button type="button" class="btn btn-secondary">Submit</button>
 				</div>
 			</div>
 		</div>
 		<div class="form-group">
 			<div class="input-group">
 				<div class="input-group-btn">
 					<button type="button" class="btn btn-secondary">
 						<i class="fa fa-facebook"></i>
 					</button>
 				</div>
 				<input type="text" class="form-control" id="example-input3-group2" name="example-input3-group2" placeholder="Search">
 				<div class="input-group-btn">
 					<button type="button" class="btn btn-secondary">
 						<i class="fa fa-twitter"></i>
 					</button>
 				</div>
 			</div>
 		</div>
 		<div class="form-footer">
 			<button type="submit" class="btn btn-primary">Submit</button>
 		</div>
 	</div>
 </div>
--- a/src/_includes/cards/form-dropdown-groups.html
+++ b/src/_includes/cards/form-dropdown-groups.html
@@ -0,0 +1,88 @@
 <div class="card">
 	<div class="card-header">
 		<h3 class="card-title">Dropdown Groups</h3>
 	</div>
 	<div class="card-body">
 		<div class="form-group">
 			<div class="input-group">
 				<div class="input-group-btn">
 					<button type="button" class="btn btn-secondary">Options</button>
 					<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
 					<div class="dropdown-menu">
 						<a class="dropdown-item" href="javascript:void(0)">
 							<i class="fa fa-fw fa-bell mr-5"></i>News
 						</a>
 						<a class="dropdown-item" href="javascript:void(0)">
 							<i class="fa fa-fw fa-envelope-o mr-5"></i>Messages
 						</a>
 						<div class="dropdown-divider"></div>
 						<a class="dropdown-item" href="javascript:void(0)">
 							<i class="fa fa-fw fa-pencil mr-5"></i>Edit Profile
 						</a>
 					</div>
 				</div>
 				<input type="text" class="form-control" id="example-input1-group3" name="example-input1-group3" placeholder="Username">
 			</div>
 		</div>
 		<div class="form-group ">
 			<div class="input-group">
 				<input type="email" class="form-control" id="example-input2-group3" name="example-input2-group3" placeholder="Email">
 				<div class="input-group-btn">
 					<button type="button" class="btn btn-secondary" data-toggle="dropdown" >
 						<i class="fa fa-angle-down"></i>
 					</button>
 					<div class="dropdown-menu dropdown-menu-right">
 						<a class="dropdown-item" href="javascript:void(0)">
 							<i class="fa fa-fw fa-bell mr-5"></i>News
 						</a>
 						<a class="dropdown-item" href="javascript:void(0)">
 							<i class="fa fa-fw fa-envelope-o mr-5"></i>Messages
 						</a>
 					</div>
 				</div>
 			</div>
 		</div>
 		<div class="form-group ">
 			<div class="input-group">
 				<div class="input-group-btn dropup">
 					<button type="button" class="btn btn-secondary" data-toggle="dropdown" >
 						<i class="fa fa-angle-up"></i>
 					</button>
 					<div class="dropdown-menu">
 						<a class="dropdown-item" href="javascript:void(0)">
 							<i class="fa fa-fw fa-bell mr-5"></i>News
 						</a>
 						<a class="dropdown-item" href="javascript:void(0)">
 							<i class="fa fa-fw fa-envelope-o mr-5"></i>Messages
 						</a>
 						<div class="dropdown-divider"></div>
 						<a class="dropdown-item" href="javascript:void(0)">
 							<i class="fa fa-fw fa-pencil mr-5"></i>Edit Profile
 						</a>
 					</div>
 				</div>
 				<input type="text" class="form-control" id="example-input3-group3" name="example-input3-group3" placeholder="..">
 				<div class="input-group-btn dropup">
 					<button type="button" class="btn btn-secondary" data-toggle="dropdown" >
 						<i class="fa fa-angle-up"></i>
 					</button>
 					<div class="dropdown-menu dropdown-menu-right">
 						<a class="dropdown-item" href="javascript:void(0)">
 							<i class="fa fa-fw fa-bell mr-5"></i>News
 						</a>
 						<a class="dropdown-item" href="javascript:void(0)">
 							<i class="fa fa-fw fa-envelope-o mr-5"></i>Messages
 						</a>
 						<div class="dropdown-divider"></div>
 						<a class="dropdown-item" href="javascript:void(0)">
 							<i class="fa fa-fw fa-pencil mr-5"></i>Edit Profile
 						</a>
 					</div>
 				</div>
 			</div>
 		</div>
 		<div class="form-footer">
 			<button type="submit" class="btn btn-primary">Submit</button>
 		</div>
 	</div>
 </div>
--- a/src/_includes/cards/form-states.html
+++ b/src/_includes/cards/form-states.html
@@ -0,0 +1,41 @@
 <div class="card">
 	<form class="card-body">
 		<div class="row">
 			<div class="col-md-6 mb-3">
 				<label for="validationServer01">First name</label>
 				<input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="Mark" required>
 			</div>
 			<div class="col-md-6 mb-3">
 				<label for="validationServer02">Last name</label>
 				<input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="Otto" required>
 			</div>
 		</div>
 		<div class="row">
 			<div class="col-md-6 mb-3">
 				<label for="validationServer03">City</label>
 				<input type="text" class="form-control is-invalid" id="validationServer03" placeholder="City" required>
 				<div class="invalid-feedback">
 					Please provide a valid city.
 				</div>
 			</div>
 			<div class="col-md-3 mb-3">
 				<label for="validationServer04">State</label>
 				<input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" required>
 				<div class="invalid-feedback">
 					Please provide a valid state.
 				</div>
 			</div>
 			<div class="col-md-3 mb-3">
 				<label for="validationServer05">Zip</label>
 				<input type="text" class="form-control is-invalid" id="validationServer05" placeholder="Zip" required>
 				<div class="invalid-feedback">
 					Please provide a valid zip.
 				</div>
 			</div>
 		</div>
 		<button class="btn btn-primary" type="submit">Submit form</button>
 	</form>
 </div>
--- a/src/_includes/cards/form-text-groups.html
+++ b/src/_includes/cards/form-text-groups.html
@@ -0,0 +1,29 @@
 <div class="card">
 	<div class="card-header">
 		<h3 class="card-title">Icon/Text Groups</h3>
 	</div>
 	<div class="card-body">
 		<div class="form-group">
 			<div class="input-group">
 				<span class="input-group-prepend"><i class="fa fa-user"></i></span>
 				<input type="text" class="form-control" id="example-input1-group1" name="example-input1-group1" placeholder="Username">
 			</div>
 		</div>
 		<div class="form-group">
 			<div class="input-group">
 				<input type="email" class="form-control" id="example-input2-group1" name="example-input2-group1" placeholder="Email">
 				<span class="input-group-append"><i class="fa fa-envelope-o"></i></span>
 			</div>
 		</div>
 		<div class="form-group">
 			<div class="input-group">
 				<span class="input-group-prepend"><i class="fa fa-euro"></i></span>
 				<input type="text" class="form-control" id="example-input3-group1" name="example-input3-group1" placeholder="..">
 				<span class="input-group-append">.00</span>
 			</div>
 		</div>
 		<div class="form-footer">
 			<button type="submit" class="btn btn-primary">Submit</button>
 		</div>
 	</div>
 </div>
--- a/src/_includes/cards/forms.html
+++ b/src/_includes/cards/forms.html
@@ -0,0 +1,117 @@
 <div class="card">
 	<div class="card-body">
 		<form>
 			<div class="form-group">
 				<label class="form-label">Email address</label>
 				<input type="email" class="form-control" placeholder="name@example.com">
 			</div>
 			<div class="form-group">
 				<label class="form-label">Example select</label>
 				<select class="form-control">
 					<option>1</option>
 					<option>2</option>
 					<option>3</option>
 					<option>4</option>
 					<option>5</option>
 				</select>
 			</div>
 			<div class="form-group">
 				<label class="form-label">Example select</label>
 				<select class="form-control">
 					<option>1</option>
 					<option>2</option>
 					<option>3</option>
 					<option>4</option>
 					<option>5</option>
 				</select>
 			</div>
 			<div class="form-group">
 				<label class="form-label">Example multiple select</label>
 				<select multiple class="form-control">
 					<option>1</option>
 					<option>2</option>
 					<option>3</option>
 					<option>4</option>
 					<option>5</option>
 				</select>
 			</div>
 			<div class="form-group">
 				<label class="form-label">Example textarea</label>
 				<textarea class="form-control" rows="3"></textarea>
 			</div>
 			<div class="form-group">
 				<label for="validationDefault03">City</label>
 				<input type="text" class="form-control" id="validationDefault03" placeholder="City" required>
 				<div class="invalid-feedback">
 					Please provide a valid city.
 				</div>
 			</div>
 			<div class="row">
 				<div class="col-sm-7 form-group">
 					<label for="validationDefault04">State</label>
 					<input type="text" class="form-control" id="validationDefault04" placeholder="State" required>
 					<div class="invalid-feedback">
 						Please provide a valid state.
 					</div>
 				</div>
 				<div class="col-sm-5 form-group">
 					<label for="validationDefault05">Zip</label>
 					<input type="text" class="form-control" id="validationDefault05" placeholder="Zip" required>
 					<div class="invalid-feedback">
 						Please provide a valid zip.
 					</div>
 				</div>
 			</div>
 			<div class="form-group">
 				<label class="form-label">Example file input</label>
 				<input type="file" class="form-control-file">
 			</div>
 			<div class="form-group">
 				<label class="form-label">Password</label>
 				<input type="password" class="form-control">
 				<small class="form-text text-muted">
 					Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
 				</small>
 			</div>
 			<div class="form-group">
 				<label class="form-label">Custom select</label>
 				<select class="">
 					<option selected>Open this select menu</option>
 					<option value="1">One</option>
 					<option value="2">Two</option>
 					<option value="3">Three</option>
 				</select>
 			</div>
 			<div class="form-group">
 				<label class="form-label">Custom file input</label>
 				<label class="custom-file custom-file-block">
 					<input type="file" id="file2" class="custom-file-input">
 					<span class="custom-file-control"></span>
 				</label>
 			</div>
 			<div class="form-group">
 				<div class="custom-controls-stacked">
 					<label class="custom-control custom-radio">
 						<input name="radio-stacked" type="radio" class="custom-control-input">
 						<span class="custom-control-indicator"></span>
 						<span class="custom-control-description">Toggle this custom radio</span>
 					</label>
 					<label class="custom-control custom-radio">
 						<input name="radio-stacked" type="radio" class="custom-control-input">
 						<span class="custom-control-indicator"></span>
 						<span class="custom-control-description">Or toggle this other custom radio</span>
 					</label>
 				</div>
 			</div>
 			<div class="form-group">
 				<label class="custom-control custom-checkbox">
 					<input name="radio-stacked" type="checkbox" class="custom-control-input">
 					<span class="custom-control-indicator"></span>
 					<span class="custom-control-description">Toggle this custom radio</span>
 				</label>
 			</div>
 		</form>
 	</div>
 </div>
--- a/src/_includes/cards/fullcalendar.html
+++ b/src/_includes/cards/fullcalendar.html
@@ -0,0 +1,96 @@
 <div class="card">
 	<div class="card-body">
 		<div id="fullcalendar"></div>
 	</div>
 </div>
 <script>
    require(['fullcalendar', 'jquery'], function () {
        $(document).ready(function () {
            $('#fullcalendar').fullCalendar({
                eventColor: tabler.colors.blue,
                displayEventTime: true,
                defaultDate: '2017-11-12',
                editable: true,
                eventLimit: true,
                columnFormat: 'dddd',
                timeFormat: 'H:mm',
 				header: {
                    left:   'today',
                    center: 'title',
                    right:  'prev,next'
 				},
                viewRender: function(view, element) {
                    if(view.name === 'month') {
                        element.find('.fc-head-container').addClass('table');
                    }
                },
                events: [
                    {
                        title: 'All Day Event',
                        start: '2017-11-01',
                        color: tabler.colors.red
                    },
                    {
                        title: 'Long Event',
                        start: '2017-11-07',
                        end: '2017-11-10'
                    },
                    {
                        id: 999,
                        title: 'Repeating Event',
                        start: '2017-11-09T16:00:00',
                        color: tabler.colors.yellow
                    },
                    {
                        id: 999,
                        title: 'Repeating Event',
                        start: '2017-11-16T16:00:00',
                        color: tabler.colors.yellow
                    },
                    {
                        id: 999,
                        title: 'Repeating Event',
                        start: '2017-11-23T16:00:00',
                        color: tabler.colors.yellow
                    },
                    {
                        title: 'Conference',
                        start: '2017-11-11',
                        end: '2017-11-13'
                    },
                    {
                        title: 'Meeting',
                        start: '2017-11-12T10:30:00',
                        end: '2017-11-12T12:30:00'
                    },
                    {
                        title: 'Lunch',
                        start: '2017-11-12T12:00:00'
                    },
                    {
                        title: 'Meeting',
                        start: '2017-11-12T14:30:00'
                    },
                    {
                        title: 'Happy Hour',
                        start: '2017-11-12T17:30:00'
                    },
                    {
                        title: 'Dinner',
                        start: '2017-11-12T20:00:00'
                    },
                    {
                        title: 'Birthday Party',
                        start: '2017-11-13T07:00:00'
                    },
                    {
                        title: 'Click for Google',
                        url: 'http://google.com/',
                        start: '2017-11-28'
                    }
                ]
            })
        });
    });
 </script>
--- a/src/_includes/cards/header.html
+++ b/src/_includes/cards/header.html
@@ -0,0 +1,10 @@
 <div class="card">
 	<div class="card-header">
 		<div class="card-title">
 			Card with header content
 		</div>
 	</div>
 	<div class="card-body">
 		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquid architecto commodi dolorum nam odio perspiciatis quo sapiente vitae voluptatem? Accusamus beatae distinctio dolores laborum nobis, obcaecati odio quia reprehenderit.
 	</div>
 </div>
--- a/src/_includes/cards/http-request.html
+++ b/src/_includes/cards/http-request.html
@@ -0,0 +1,167 @@
 <div class="card">
 	<div class="card-header">
 		<h3 class="card-title">HTTP Request</h3>
 	</div>
 	<div class="card-body">
 		<div class="row">
 			<div class="form-group col-sm-4 col-md-2">
 				<label class="form-label">
 					Method <span class="form-required">*</span>
 				</label>
 				<select class="custom-select">
 					<option value="GET">GET</option>
 					<option value="POST">POST</option>
 					<option value="PUT">PUT</option>
 					<option value="HEAD">HEAD</option>
 					<option value="DELETE">DELETE</option>
 					<option value="PATCH">PATCH</option>
 				</select>
 			</div>
 			<div class="form-group col-sm-8 col-md-10">
 				<label class="form-label">
 					URL <span class="form-required">*</span>
 				</label>
 				<input name="url" type="text" class="form-control" value="https://content.googleapis.com/discovery/v1/apis/surveys/v2/rest">
 			</div>
 		</div>
 		<div class="form-label">Assertions</div>
 		<div class="table-responsive">
 			<table class="table mb-0">
 				<thead>
 				<tr>
 					<th class="pl-0">Source</th>
 					<th>Property</th>
 					<th>Comparison</th>
 					<th class="pr-0">Target</th>
 				</tr>
 				</thead>
 				<tr>
 					<td class="pl-0">
 						<select class="custom-select">
 							<option value="STATUS_CODE" selected>Status code</option>
 							<option value="JSON_BODY">JSON body</option>
 							<option value="HEADERS">Headers</option>
 							<option value="TEXT_BODY">Text body</option>
 							<option value="RESPONSE_TIME">Response time</option>
 						</select>
 					</td>
 					<td>
 						<input type="text" class="form-control"></td>
 					<td>
 						<select class="custom-select">
 							<option value="EQUALS" selected>Equals</option>
 							<option value="NOT_EQUALS">Not equals</option>
 							<option value="HAS_KEY">Has key</option>
 							<option value="NOT_HAS_KEY">Not has key</option>
 							<option value="HAS_VALUE">Has value</option>
 							<option value="NOT_HAS_VALUE">Not has value</option>
 							<option value="IS_EMPTY">Is empty</option>
 							<option value="NOT_EMPTY">Is not empty</option>
 							<option value="GREATER_THAN">Greater than</option>
 							<option value="LESS_THAN">Less than</option>
 						</select>
 					</td>
 					<td class="pr-0">
 						<input type="text" class="form-control" value="200">
 					</td>
 				</tr>
 				<tr>
 					<td class="pl-0">
 						<select class="custom-select">
 							<option value="STATUS_CODE">Status code</option>
 							<option value="JSON_BODY" selected>JSON body</option>
 							<option value="HEADERS">Headers</option>
 							<option value="TEXT_BODY">Text body</option>
 							<option value="RESPONSE_TIME">Response time</option>
 						</select>
 					</td>
 					<td>
 						<input type="text" class="form-control" value="parameters.alt.type">
 					</td>
 					<td>
 						<select class="custom-select">
 							<option value="EQUALS">Equals</option>
 							<option value="NOT_EQUALS">Not equals</option>
 							<option value="HAS_KEY">Has key</option>
 							<option value="NOT_HAS_KEY">Not has key</option>
 							<option value="HAS_VALUE" selected>Has value</option>
 							<option value="NOT_HAS_VALUE">Not has value</option>
 							<option value="IS_EMPTY">Is empty</option>
 							<option value="NOT_EMPTY">Is not empty</option>
 							<option value="GREATER_THAN">Greater than</option>
 							<option value="LESS_THAN">Less than</option>
 						</select>
 					</td>
 					<td class="pr-0">
 						<input type="text" class="form-control" value="string">
 					</td>
 				</tr>
 				<tr>
 					<td class="pl-0">
 						<select class="custom-select">
 							<option value="STATUS_CODE">Status code</option>
 							<option value="JSON_BODY">JSON body</option>
 							<option value="HEADERS">Headers</option>
 							<option value="TEXT_BODY">Text body</option>
 							<option value="RESPONSE_TIME" selected>Response time</option>
 						</select>
 					</td>
 					<td>
 						<input type="text" class="form-control"></td>
 					<td>
 						<select class="custom-select">
 							<option value="EQUALS">Equals</option>
 							<option value="NOT_EQUALS">Not equals</option>
 							<option value="HAS_KEY">Has key</option>
 							<option value="NOT_HAS_KEY">Not has key</option>
 							<option value="HAS_VALUE">Has value</option>
 							<option value="NOT_HAS_VALUE">Not has value</option>
 							<option value="IS_EMPTY">Is empty</option>
 							<option value="NOT_EMPTY">Is not empty</option>
 							<option value="GREATER_THAN">Greater than</option>
 							<option value="LESS_THAN" selected>Less than</option>
 						</select>
 					</td>
 					<td class="pr-0">
 						<input type="text" class="form-control" value="500">
 					</td>
 				</tr>
 				<tr>
 					<td class="pl-0">
 						<select class="custom-select">
 							<option value="STATUS_CODE">Status code</option>
 							<option value="JSON_BODY">JSON body</option>
 							<option value="HEADERS" selected>Headers</option>
 							<option value="TEXT_BODY">Text body</option>
 							<option value="RESPONSE_TIME">Response time</option>
 						</select>
 					</td>
 					<td>
 						<input type="text" class="form-control" value="content-type">
 					</td>
 					<td>
 						<select class="custom-select">
 							<option value="EQUALS" selected>Equals</option>
 							<option value="NOT_EQUALS">Not equals</option>
 							<option value="HAS_KEY">Has key</option>
 							<option value="NOT_HAS_KEY">Not has key</option>
 							<option value="HAS_VALUE">Has value</option>
 							<option value="NOT_HAS_VALUE">Not has value</option>
 							<option value="IS_EMPTY">Is empty</option>
 							<option value="NOT_EMPTY">Is not empty</option>
 							<option value="GREATER_THAN">Greater than</option>
 							<option value="LESS_THAN">Less than</option>
 						</select>
 					</td>
 					<td class="pr-0">
 						<input type="text" class="form-control" value="application/json; charset=UTF-8">
 					</td>
 				</tr>
 			</table>
 		</div>
 	</div>
 	<div class="card-footer text-right">
 		<button type="submit" class="btn btn-primary">Make request</button>
 	</div>
 </div>
--- a/src/_includes/cards/icon-box.html
+++ b/src/_includes/cards/icon-box.html
@@ -0,0 +1,11 @@
 <div class="card p-3">
 	<div class="d-flex align-items-center">
 		<span class="stamp stamp-md bg-{{ include.color | default: 'red' }} mr-3">
 			<i class="{{ include.icon | default: 'fa fa-dollar' }}"></i>
 		</span>
 		<div>
 			<h4 class="m-0"><a href="javascript:void(0)">{{ include.value | default: '16' }} <small>{{ include.description | default: 'Sales' }}</small></a></h4>
 			<small class="text-muted">{{ include.subtitle | default: '6 waiting payments' }}</small>
 		</div>
 	</div>
 </div>
--- a/src/_includes/cards/icon-card.html
+++ b/src/_includes/cards/icon-card.html
@@ -0,0 +1,15 @@
 <div class="card {% if include.bg-color %}bg-{{ include.bg-color }} text-white{% endif %}">
 	<div class="card-body p-4">
 		<div class="row">
 			<div class="col-auto">
 				<div class="stamp stamp-md {% if include.icon-color %}bg-{{ include.icon-color }}{% endif %}">
 					<i class="{{ include.icon }}"></i>
 				</div>
 			</div>
 			<div class="col text-right">
 				<div class="small text-muted">{{ include.title }}</div>
 				<div class="h4 m-0">{{ include.value }}</div>
 			</div>
 		</div>
 	</div>
 </div>
--- a/src/_includes/cards/icons.html
+++ b/src/_includes/cards/icons.html
@@ -0,0 +1,26 @@
 <div class="card">
 	<div class="card-header">
 		<div class="card-title">{{ include.title }}</div>
 	</div>
 	<div class="card-body">
 		<div class="row">
 			<div class="col-3">
 				<p>{{ include.description }} For more info <a href="{{ include.url }}" target="_blank">click here</a>.</p>
 				<p><code>&lt;i class="{{ include.icon_class }} {{ include.icon_class }}-ICON_NAME"&gt;&lt;/i&gt;</code></p>
 			</div>
 			<div class="col-9">
 				<div class="icons-list-wrap">
 					<ul class="icons-list">
 						{% for icon in include.icons %}
 						<li class="icons-list-item"><i class="{{ include.icon_class }} {{ icon }}" data-toggle="tooltip" title="{{ include.icon_class }} {{ icon }}"></i></li>
 						{% endfor %}
 						{% for icon in (0..20) %}
 						<li></li>
 						{% endfor %}
 					</ul>
 				</div>
 			</div>
 		</div>
 	</div>
 </div>
--- a/src/_includes/cards/image-bg.html
+++ b/src/_includes/cards/image-bg.html
@@ -0,0 +1,7 @@
 <div class="card bg-dark text-white">
 	<img class="card-img" src="{{ site.data.photos[43].small }}" alt="Card image">
 	<div class="card-img-overlay justify-content-end">
 		<h4 class="card-title">Card title</h4>
 		<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
 	</div>
 </div>
--- a/src/_includes/cards/image-info.html
+++ b/src/_includes/cards/image-info.html
@@ -0,0 +1,68 @@
 <div class="card">
 	<img src="{{ site.data.photos[1].small }}" class="card-img-top" alt="">
 	<div class="card-body">
 		<h4 class="mb-4">Girl & Lake</h4>
 		<div class="row mb-4">
 			<div class="col-5">
 				<i class="mdi mdi-camera mr-1"></i>ISO 200
 			</div>
 			<div class="col-7">
 				<i class="mdi mdi-camera-iris mr-1"></i>1/1000
 			</div>
 			<div class="col-5">3780 x 2984</div>
 			<div class="col-7">9.54 MB</div>
 		</div>
 		<div class="row">
 			<div class="col-5"><strong>Created:</strong></div>
 			<div class="col-7">09 Jun 2017 11:32AM</div>
 			<div class="col-5"><strong>Updated:</strong></div>
 			<div class="col-7">19 Jun 2017 9:43PM</div>
 			<div class="col-5"><strong>Bit Depth:</strong></div>
 			<div class="col-7">16 bit</div>
 			<div class="col-5"><strong>Creator:</strong></div>
 			<div class="col-7">{{ site.data.users[1].name }} {{ site.data.users[1].surname }}</div>
 			<div class="col-5"><strong>Used colors:</strong></div>
 			<div class="col-7">
 				<div class="colors-list">
 					<span class="colors-list-item" style="background-color: #646432"></span>
 					<span class="colors-list-item" style="background-color: #323232"></span>
 					<span class="colors-list-item" style="background-color: #c8c8fa"></span>
 					<span class="colors-list-item" style="background-color: #969696"></span>
 					<span class="colors-list-item" style="background-color: #6496c8"></span>
 					<span class="colors-list-item" style="background-color: #939f5f"></span>
 					<span class="colors-list-item" style="background-color: #3264c8"></span>
 				</div>
 			</div>
 		</div>
 		<hr>
 		<div class="row align-items-center mb-4">
 			<div class="col-5"><strong>Privacy</strong></div>
 			<div class="col-7">
 				<select class="custom-select custom-select-sm">
 					<option value="">Public</option>
 					<option value="">Private</option>
 					<option value="">Friends</option>
 				</select>
 			</div>
 		</div>
 		<div class="row align-items-center">
 			<div class="col-5"><strong>Collaborators</strong></div>
 			<div class="col-7">
 				<ul class="avatar-list avatar-list-stacked">
 					{% for user in site.data.users limit: 6 offset: 1 %}
 					<li class="avatar-list-item">
 						<span class="avatar avatar-sm" style="background-image: url({{ user.photo }})"></span>
 					</li>
 					{% endfor %}
 				</ul>
 			</div>
 		</div>
 	</div>
 </div>
--- a/Show More
+++ b/Show More
		`@@ -0,0 +1 @@`
							`for i in .jpg; do convert "$i" -resize 500x333^ -gravity center -crop 500x333+0+0 -quality 80 -monitor "${i%.}-500.jpg"; done`