css scripts, js scripts, remove gulp

Gemfile

@@ -9,5 +9,5 @@ gem "jekyll-random", "~> 0.0.3"
 gem "jekyll-tidy"
 gem "jekyll-timeago"
 gem 'jekyll-redirect-from'
+gem 'jekyll-include-cache'
 
-gem "htmlbeautifier", "~> 1.3"

Gemfile.lock

@@ -1,81 +0,0 @@
-GEM
-  remote: https://rubygems.org/
-  specs:
-    addressable (2.6.0)
-      public_suffix (>= 2.0.2, < 4.0)
-    colorator (1.1.0)
-    concurrent-ruby (1.1.4)
-    em-websocket (0.5.1)
-      eventmachine (>= 0.12.9)
-      http_parser.rb (~> 0.6.0)
-    eventmachine (1.2.7)
-    ffi (1.10.0)
-    forwardable-extended (2.6.0)
-    htmlbeautifier (1.3.1)
-    htmlcompressor (0.4.0)
-    http_parser.rb (0.6.0)
-    i18n (0.9.5)
-      concurrent-ruby (~> 1.0)
-    jekyll (3.8.5)
-      addressable (~> 2.4)
-      colorator (~> 1.0)
-      em-websocket (~> 0.5)
-      i18n (~> 0.7)
-      jekyll-sass-converter (~> 1.0)
-      jekyll-watch (~> 2.0)
-      kramdown (~> 1.14)
-      liquid (~> 4.0)
-      mercenary (~> 0.3.3)
-      pathutil (~> 0.9)
-      rouge (>= 1.7, < 4)
-      safe_yaml (~> 1.0)
-    jekyll-random (0.0.3)
-      jekyll (~> 3.3)
-    jekyll-redirect-from (0.14.0)
-      jekyll (~> 3.3)
-    jekyll-sass-converter (1.5.2)
-      sass (~> 3.4)
-    jekyll-tidy (0.2.2)
-      htmlbeautifier
-      htmlcompressor
-      jekyll
-    jekyll-timeago (0.12.3)
-      mini_i18n (>= 0.8.0)
-    jekyll-watch (2.1.2)
-      listen (~> 3.0)
-    kramdown (1.17.0)
-    liquid (4.0.1)
-    listen (3.1.5)
-      rb-fsevent (~> 0.9, >= 0.9.4)
-      rb-inotify (~> 0.9, >= 0.9.7)
-      ruby_dep (~> 1.2)
-    mercenary (0.3.6)
-    mini_i18n (0.8.0)
-    pathutil (0.16.2)
-      forwardable-extended (~> 2.6)
-    public_suffix (3.0.3)
-    rb-fsevent (0.10.3)
-    rb-inotify (0.10.0)
-      ffi (~> 1.0)
-    rouge (3.3.0)
-    ruby_dep (1.5.0)
-    safe_yaml (1.0.4)
-    sass (3.7.3)
-      sass-listen (~> 4.0.0)
-    sass-listen (4.0.0)
-      rb-fsevent (~> 0.9, >= 0.9.4)
-      rb-inotify (~> 0.9, >= 0.9.7)
-
-PLATFORMS
-  ruby
-
-DEPENDENCIES
-  htmlbeautifier (~> 1.3)
-  jekyll (>= 3.8.5)
-  jekyll-random (~> 0.0.3)
-  jekyll-redirect-from
-  jekyll-tidy
-  jekyll-timeago
-
-BUNDLED WITH
-   2.0.1

_config.yml

@@ -11,6 +11,7 @@ plugins:
 - jekyll-tidy
 - jekyll-timeago
 - jekyll-redirect-from
+- jekyll-include-cache
 
 keep_files:
 - css/ui-kit.css
@@ -51,3 +52,62 @@ defaults:
     values:
       layout: docs
 
+
+colors:
+  blue:
+    hex: '#467fcf'
+    name: Blue
+  azure:
+    hex: '#45aaf2'
+    name: Azure
+  indigo:
+    hex: '#6574cd'
+    name: Indigo
+  purple:
+    hex: '#a55eea'
+    name: Purple
+  pink:
+    hex: '#f66d9b'
+    name: Pink
+  red:
+    hex: '#cd201f'
+    name: Red
+  orange:
+    hex: '#fd9644'
+    name: Orange
+  yellow:
+    hex: '#f1c40f'
+    name: Yellow
+  lime:
+    hex: '#7bd235'
+    name: Lime
+  green:
+    hex: '#5eba00'
+    name: Green
+  teal:
+    hex: '#2bcbba'
+    name: Teal
+  cyan:
+    hex: '#17a2b8'
+    name: Cyan
+  gray:
+    hex: '#868e96'
+    name: Gray
+  dark:
+    hex: '#354051'
+    name: Dark
+
+variants: [primary, secondary, success, info, warning, danger, dark]
+socials: [facebook, twitter, google, youtube, vimeo, dribbble, github, instagram, pinterest, vk, rss, flickr, bitbucket]
+
+months_short: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+months_long: ['January', 'Febuary', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+
+
+docs-menu:
+- title: Getting started
+  pages: [index]
+- title: Components
+  pages: [avatars, badges, buttons, carousel, spinners, steps, toasts, tooltips, typography]
+
+

build/browsersync.js

@@ -0,0 +1,19 @@
+const bs = require('browser-sync').create();
+
+bs.init({
+  watch: true,
+  server: {
+    routes: {
+      "/": "tmp",
+      "/dist": "dist",
+      "/libs": "static/libs",
+      "/img": "static/img",
+    }
+  },
+  files: ["tmp/**/*", "dist/css/*.css", "dist/js/*.js"],
+  watchOptions: {
+    ignoreInitial: true
+  },
+  notify: false
+});
+

build/rollup.config.js

@@ -1,15 +1,15 @@
-'use strict'
+'use strict';
 
-const path = require('path')
-const babel = require('rollup-plugin-babel')
-const resolve = require('rollup-plugin-node-resolve')
-const banner = require('./banner.js')
+const path = require('path');
+const babel = require('rollup-plugin-babel');
+const resolve = require('rollup-plugin-node-resolve');
+const banner = require('./banner.js');
 
-const BUNDLE = process.env.BUNDLE === 'true'
-const ESM = process.env.ESM === 'true'
+const BUNDLE = process.env.BUNDLE === 'true';
+const ESM = process.env.ESM === 'true';
 
-let fileDest = `tabler${ESM ? '.esm' : ''}`
-const external = ['popper.js']
+let fileDest = `tabler${ESM ? '.esm' : ''}`;
+const external = ['popper.js'];
 const plugins = [
   babel({
     // Only transpile our source code
@@ -23,16 +23,17 @@ const plugins = [
       'objectSpread'
     ]
   })
-]
+];
+
 const globals = {
   'popper.js': 'Popper'
-}
+};
 
 if (BUNDLE) {
-  fileDest += '.bundle'
+  fileDest += '.bundle';
   // Remove last entry in external array to bundle Popper
-  external.pop()
-  delete globals['popper.js']
+  external.pop();
+  delete globals['popper.js'];
   plugins.push(resolve())
 }
 

config.yml

@@ -1,73 +0,0 @@
-languageCode:           "en"
-title:                  "Tabler"
-baseURL:                "https://tabler.io"
-enableInlineShortcodes: true
-
-enableRobotsTXT:        true
-metaDataFormat:         "yaml"
-disableKinds:           ["404", "home", "taxonomy", "taxonomyTerm", "RSS"]
-
-publishDir:             "_gh_pages"
-archetypeDir:           "site/archetypes"
-contentDir:             "site/pages"
-assetDir:               "site/assets"
-staticDir:              "site/static"
-layoutDir:              "site/layouts"
-
-params:
-  colors:
-    blue:
-      hex: '#467fcf'
-      name: Blue
-    azure:
-      hex: '#45aaf2'
-      name: Azure
-    indigo:
-      hex: '#6574cd'
-      name: Indigo
-    purple:
-      hex: '#a55eea'
-      name: Purple
-    pink:
-      hex: '#f66d9b'
-      name: Pink
-    red:
-      hex: '#cd201f'
-      name: Red
-    orange:
-      hex: '#fd9644'
-      name: Orange
-    yellow:
-      hex: '#f1c40f'
-      name: Yellow
-    lime:
-      hex: '#7bd235'
-      name: Lime
-    green:
-      hex: '#5eba00'
-      name: Green
-    teal:
-      hex: '#2bcbba'
-      name: Teal
-    cyan:
-      hex: '#17a2b8'
-      name: Cyan
-    gray:
-      hex: '#868e96'
-      name: Gray
-    dark:
-      hex: '#354051'
-      name: Dark
-
-  variants: [primary, secondary, success, info, warning, danger, dark]
-  socials: [facebook, twitter, google, youtube, vimeo, dribbble, github, instagram, pinterest, vk, rss, flickr, bitbucket]
-
-  months_short: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
-  months_long: ['January', 'Febuary', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
-
-
-  docs-menu:
-  - title: Getting started
-    pages: [index]
-  - title: Components
-    pages: [avatars, badges, buttons, carousel, spinners, steps, toasts, tooltips, typography]

gulpfile.js

@@ -1,249 +0,0 @@
-const gulp = require('gulp'),
-    sass = require('gulp-sass'),
-    minifycss = require('gulp-clean-css'),
-    uglify = require('gulp-uglify'),
-    htmlmin = require('gulp-htmlmin'),
-    htmlclean = require('gulp-htmlclean'),
-    imagemin = require('gulp-imagemin'),
-    autoprefixer = require('gulp-autoprefixer'),
-    child = require('child_process'),
-    clean = require('gulp-clean'),
-    del = require('del'),
-    concat = require('gulp-concat'),
-    banner = require('gulp-banner'),
-    gs = require('gulp-selectors'),
-    rename = require('gulp-rename'),
-    replace = require('gulp-replace'),
-    useref = require('gulp-useref'),
-    gulpif = require('gulp-if'),
-
-    browserSync = require('browser-sync').create(),
-    pkg = require('./package.json');
-
-const comment = '/*!\n' +
-    ' * <%= pkg.name %> <%= pkg.version %>\n' +
-    ' * <%= pkg.description %>\n' +
-    ' * <%= pkg.homepage %>\n' +
-    ' *\n' +
-    ' * Copyright 2018, <%= pkg.author %>\n' +
-    ' * Released under the <%= pkg.license %> license.\n' +
-    '*/\n\n';
-
-const baseJsFile = 'ui-kit.js';
-
-let BUILD = false;
-
-let getDistDir = function () {
-    if (BUILD) {
-        return './dist';
-    }
-
-    return './tmp';
-};
-
-gulp.task('clean', function () {
-    return del('dist/**', {force:true});
-});
-
-gulp.task('clean:libs', function () {
-    return del('libs/**', {force:true});
-});
-
-gulp.task('banner', function (fn) {
-    fn();
-
-    return true;
-    return gulp.src('./dist/{js,css}/**/*')
-        .pipe(banner(comment, {
-            pkg: pkg
-        }))
-        .pipe(gulp.dest('./dist'));
-});
-
-gulp.task('obfuscate', function () {
-    const ignores = {
-        ids: '*',
-        classes: [
-            'dropdown', 'dropdown-menu', 'dropdown-menu-right', 'dropdown-toggle', 'dropdown-item',
-            'active', 'disabled', 'show',
-            'list-group', 'list-group-item',
-            'nav', 'nav-link', 'nav-item',
-            'popover', 'popover-header', 'popover-body',
-            'tooltip'
-        ]
-    };
-
-    return gulp.src(['./dist/**/*.css', './dist/**/*.html'])
-        .pipe(gs.run({
-            'css': ['css'],
-            'html': ['html']
-        }, ignores))
-        .pipe(gulp.dest('./dist'));
-});
-
-gulp.task('sass', function () {
-    return gulp.src('./scss/**/*.scss')
-        .pipe(sass({
-            precision: 8,
-            outputStyle: 'expanded'
-        }).on('error', sass.logError))
-        .pipe(autoprefixer({
-            browsers: ['last 2 versions']
-        }))
-        .pipe(gulp.dest(getDistDir() + '/css'));
-});
-
-gulp.task('js', function () {
-    return gulp.src(['./js/vendor/*.js', './js/' + baseJsFile])
-        .pipe(concat(baseJsFile))
-        .pipe(gulp.dest(getDistDir() + '/js'));
-});
-
-gulp.task('minify-css', function () {
-    return gulp.src('./dist/**/*.css')
-        .pipe(minifycss({level: {1: {specialComments: 0}}}))
-        .pipe(gulp.dest('./dist'));
-});
-
-gulp.task('minify-html', function () {
-    return gulp.src('./dist/**/*.html')
-        .pipe(htmlclean())
-        .pipe(htmlmin({
-            removeComments: true,
-            minifyJS: true,
-            minifyCSS: true,
-            minifyURLs: true
-        }))
-        .pipe(gulp.dest('./dist'));
-});
-
-gulp.task('fix-html', function () {
-    return gulp.src('./dist/**/*.html')
-        .pipe(replace('href="#"', 'href="javascript:void(0)"'))
-        .pipe(replace(' class=""', ''))
-        .pipe(replace(/^\s*[\r\n]/gm, ''))
-        .pipe(gulp.dest('./dist'));
-});
-
-gulp.task('minify-js', function () {
-    return gulp.src('./dist/**/*.js')
-        .pipe(uglify())
-        .pipe(gulp.dest('./dist'));
-});
-
-gulp.task('babel-js', () =>
-    gulp.src('./dist/**/*.js')
-        .pipe(babel({
-            presets: ['@babel/env']
-        }))
-        .pipe(gulp.dest('dist'))
-);
-
-gulp.task('minify-img', function () {
-    return gulp.src('./dist/img/*')
-        .pipe(imagemin())
-        .pipe(gulp.dest('./dist/img'));
-});
-
-gulp.task('copy-images', function () {
-    return gulp.src('./img/**/*')
-        .pipe(gulp.dest('./dist/img'));
-});
-
-gulp.task('copy-js', function (fn) {
-    gulp.src('./js/**/*')
-        .pipe(gulp.dest('./dist/js'));
-    gulp.src('./libs/**/*')
-        .pipe(gulp.dest('./dist/libs'));
-
-    return fn();
-});
-
-gulp.task('jekyll', function (done) {
-    let productionEnv = process.env;
-
-    if (BUILD) {
-        productionEnv.JEKYLL_ENV = 'production';
-    }
-
-    child.spawn('bundle', ['exec', 'jekyll', 'build', '--destination', getDistDir()], {stdio: 'inherit', env: productionEnv})
-        .on('close', function () {
-            done();
-        });
-});
-
-// TODO: we need to improve it
-// gulp.task('icon-sprite', function () {
-// 	return gulp.src('icons/*.svg')
-// 		.pipe(svgSprite({
-// 			svgId: 'svg-%f',
-// 			sprite: 'icons-sprite.svg',
-// 			mode: 'symbol',
-// 			preview: false
-// 		}))
-// 		.pipe(rename('icons-sprite.svg'))
-// 		.pipe(gulp.dest('./pages/_includes'));
-// });
-
-gulp.task('copy', gulp.series(function (cb) {
-    const scripts = {
-        'bootstrap': 'bootstrap/dist/**/*.{js,min.js}',
-        'apexcharts': 'apexcharts/dist/**/*.{js,min.js}',
-        'jquery': 'jquery/dist/**/jquery.{js,min.js}',
-        'peity': 'peity/jquery.peity.min.js',
-        'jqvmap': 'jqvmap/dist/**/*.{js,css}',
-        'selectize': 'selectize/dist/**/*.{js,css}',
-    };
-
-    for (let destinationDir in scripts) {
-        gulp.src('./node_modules/' + scripts[destinationDir])
-            .pipe(gulp.dest('./libs/' + destinationDir));
-    }
-
-    cb();
-}));
-
-gulp.task('useref', function () {
-    return gulp.src('./dist/**/*.html')
-        .pipe(useref({
-            searchPath: ['./dist'],
-            allowEmpty: true
-        }))
-        .pipe(gulp.dest('./dist'));
-});
-
-gulp.task('serve', function () {
-    browserSync.init({
-        files: ['tmp/**'],
-        port: 4567,
-        watch: true,
-        open: 'local',
-        notify: false,
-        server: {
-            baseDir: 'tmp/',
-            routes: {
-                '/img': './img',
-                '/libs': './libs',
-                '/js': './js',
-            }
-        }
-    });
-});
-
-gulp.task('watch', function () {
-    gulp.watch('pages/**/*', gulp.series('jekyll'));
-    gulp.watch('_config.yml', gulp.series('jekyll'));
-    gulp.watch('scss/**/*', gulp.series('sass'));
-    gulp.watch('js/**/*', gulp.series('js'));
-    gulp.watch('libs/**/*', gulp.series('js'));
-});
-
-gulp.task('set-production', function (cb) {
-    BUILD = true;
-    cb();
-});
-
-gulp.task('compress', gulp.series(gulp.series('fix-html', /*'minify-html',*/ 'minify-css', /*'babel-js',*/ 'minify-js', 'minify-img'), 'banner'));
-gulp.task('build', gulp.series('set-production', 'clean', 'jekyll', 'sass', 'copy-js', 'copy-images'/*, 'useref'*/, 'compress'));
-
-gulp.task('default', gulp.series('sass', 'copy', /*'js',*/ 'jekyll', gulp.parallel('watch', 'serve')));

package.json

@@ -3,31 +3,34 @@
   "version": "1.0.0",
   "description": "Premium and Open Source dashboard template with responsive and high quality UI.",
   "scripts": {
-    "start": "npm-run-all --parallel watch docs-serve",
+    "start": "npm-run-all --parallel browsersync watch html-watch",
     "bundlesize": "bundlesize",
-    "linkinator": "linkinator _gh_pages --recurse --skip \"^(?!http://localhost)\"",
+    "html-watch": "JEKYLL_ENV=development bundle exec jekyll build --watch --incremental",
+    "browsersync": "node build/browsersync.js",
+
     "lint": "npm-run-all --parallel js-lint css-lint",
-    "docs-serve": "hugo server --port 9001 --disableFastRender",
     "css": "npm-run-all css-compile css-prefix css-minify css-copy",
-    "css-compile": "node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/tabler.scss dist/css/tabler.css && npm run css-copy",
+    "css-compile": "echo 'CSS COMPILE' && node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/tabler.scss dist/css/tabler.css",
     "css-prefix": "postcss --config build/postcss.config.js --replace \"dist/css/*.css\" \"!dist/css/*.min.css\"",
     "css-minify": "cleancss --level 1 --format breakWith=lf --source-map --source-map-inline-sources --output dist/css/tabler.min.css dist/css/tabler.css",
-    "css-copy": "cross-env-shell shx mkdir -p site/static/docs/$npm_package_version_short/dist/ && cross-env-shell shx cp -r dist/css/ site/static/docs/$npm_package_version_short/dist/",
+    "css-copy": "cross-env-shell shx mkdir -p site/static/dist/ && cross-env-shell shx cp -r dist/css/ site/static/dist/",
     "css-lint": "stylelint \"scss/**/*.scss\" --cache --cache-location .cache/.stylelintcache",
-    "css-main": "npm-run-all css-lint css-compile css-prefix css-minify css-copy",
-    "js-lint": "eslint --cache --cache-location .cache/.eslintcache js/src build/",
-    "js-compile": "npm-run-all --parallel js-compile-* --sequential js-copy",
-    "js-compile-standalone": "rollup --environment BUNDLE:false --config build/rollup.config.js --sourcemap",
-    "js-compile-standalone-esm": "rollup --environment ESM:true,BUNDLE:false --config build/rollup.config.js --sourcemap",
-    "js-compile-bundle": "rollup --environment BUNDLE:true --config build/rollup.config.js --sourcemap",
-    "js-copy": "cross-env-shell shx mkdir -p site/static/docs/$npm_package_version_short/dist/ && cross-env-shell shx cp -r dist/js/ site/static/docs/$npm_package_version_short/dist/",
-    "js-minify": "npm-run-all js-minify-standalone* js-minify-bundle",
-    "js-minify-standalone": "terser --compress typeofs=false --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler.js.map,includeSources,url=tabler.min.js.map\" --output dist/js/tabler.min.js dist/js/tabler.js",
-    "js-minify-standalone-esm": "terser --compress --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler.esm.js.map,includeSources,url=tabler.esm.min.js.map\" --output dist/js/tabler.esm.min.js dist/js/tabler.esm.js",
-    "js-minify-bundle": "terser --compress typeofs=false --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler.bundle.js.map,includeSources,url=tabler.bundle.min.js.map\" --output dist/js/tabler.bundle.min.js dist/js/tabler.bundle.js",
+    "css-main": "npm-run-all css-compile css-copy",
+    "css-main-build": "npm-run-all css-lint css-compile css-prefix css-minify css-copy",
     "watch": "npm-run-all --parallel watch-*",
     "watch-css": "nodemon --watch scss/ --ext scss --exec \"npm run css-main\"",
-    "watch-js": "nodemon --watch js/src/ --ext js --exec \"npm run js-compile\""
+    "watch-js": "nodemon --watch js/src/ --ext js --exec \"npm run js-compile-standalone\"",
+
+
+    "v1-html-build": "JEKYLL_ENV=development bundle exec jekyll build --watch --incremental",
+    "v1-js-lint": "eslint --cache --cache-location .cache/.eslintcache js/src build/",
+    "v1-js-compile": "npm-run-all --parallel js-compile-* --sequential js-copy",
+    "js-compile-standalone": "rollup --environment BUNDLE:false --config build/rollup.config.js --sourcemap",
+    "v1-js-compile-bundle": "rollup --environment BUNDLE:true --config build/rollup.config.js --sourcemap",
+    "v1-js-copy": "cross-env-shell shx mkdir -p site/static/dist/ && cross-env-shell shx cp -r dist/js/ site/static/dist/",
+    "v1-js-minify": "npm-run-all js-minify-standalone* js-minify-bundle",
+    "v1-js-minify-standalone": "terser --compress typeofs=false --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler.js.map,includeSources,url=tabler.min.js.map\" --output dist/js/tabler.min.js dist/js/tabler.js",
+    "v1-js-minify-bundle": "terser --compress typeofs=false --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler.bundle.js.map,includeSources,url=tabler.bundle.min.js.map\" --output dist/js/tabler.bundle.min.js dist/js/tabler.bundle.js"
   },
   "repository": {
     "type": "git",
@@ -73,6 +76,7 @@
     "terser": "3.17.0"
   },
   "dependencies": {
+    "browser-sync": "^2.26.5",
     "cross-env": "^5.2.0"
   }
 }

pages/_includes/layout/css.html

@@ -0,0 +1,2 @@
+<link href="{{ site.base }}/dist/css/tabler.css" rel="stylesheet" />
+<link href="{{ site.base }}/dist/libs/jqvmap/jqvmap.css" />

pages/_includes/layout/debug.html

@@ -5,8 +5,32 @@
    <a href="#" data-debug="folded">Folded sidebar</a>
    <a href="#" data-debug="fullscreen">Fullscreen</a>
    <a href="#" data-debug="header-sticky">Sticky header</a>
+
+   <div class="debug-info">Jekyll {{ jekyll.version }}</div>
 </div>
 <style>
+   .card-debug {
+      position: absolute;
+      right: 0;
+      top: 0;
+      line-height: 1;
+      font-size: 11px;
+      display: none;
+   }
+
+   .debug-info {
+      margin-left: auto;
+   }
+
+   .card-debug a {
+      display: inline-block;
+      padding: 2px;
+   }
+
+   .card-debug a:hover {
+      text-decoration: underline;
+   }
+
    .debug {
       position: fixed;
       bottom: 0;
@@ -19,8 +43,11 @@
       direction: ltr;
       text-align: left;
       z-index: 1000;
+      display: flex;
    }
 
+
+
    .debug a {
       color: inherit;
       margin-right: 1rem;
@@ -103,5 +130,31 @@
             e.preventDefault();
             return false;
          });
+
+
+      $('.card').each(function () {
+         var $card = $(this),
+            htmlCode = $card[0].innerHTML.replace(/(^[ \t]*\n)/gm, '');
+
+         var $button = $('<div class="card-debug"><a href="#" class="text-muted-light" data-code>code</a></div>'),
+            $codeLink = $button.find('[data-code]');
+
+         $codeLink
+         // .data('htmlCode', htmlCode)
+            .on('click', function(e){
+
+               var $modal = $('<div class="modal hide"><div class="modal-dialog modal-lg"><div class="modal-content"><div class="modal-body"><pre class="m-0"></pre></div></div></div></div>');
+               $modal.find('pre').text(htmlCode);
+               $('body').append($modal);
+               console.log();
+
+               $modal.modal('show');
+
+               e.preventDefault();
+               return false;
+            });
+
+         $card.prepend($button);
+      });
    });
 </script>

pages/_includes/layout/js.html

@@ -0,0 +1,16 @@
+<script src="{{ site.base }}/libs/jquery/jquery.js"></script>
+<script src="{{ site.base }}/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
+
+<script src="{{ site.base }}/libs/apexcharts/apexcharts.min.js"></script>
+<script src="{{ site.base }}/libs/peity/jquery.peity.min.js"></script>
+
+
+<script src="{{ site.base }}/js/tabler.js"></script>
+<script src="{{ site.base }}/js/app/charts.js"></script>
+
+<script>
+   window.tabler = window.tabler || {};
+   window.tabler.colors = { {% for color in site.colors %}
+      '{{ color[0] }}': '{{ color[1].hex }}',{% endfor %}
+   };
+</script>

pages/_layouts/base.html

@@ -18,24 +18,20 @@
 	<link rel="icon" href="{{ site.base }}/favicon.ico" type="image/x-icon"/>
 	<link rel="shortcut icon" href="{{ site.base }}/favicon.ico" type="image/x-icon"/>
 
-	<!-- Generated: {{ site.time }} -->
-
 	<title>{% if page.title %}{{ page.title }} - {% endif %}{% if layout.title %}{{ layout.title }} - {% endif %}{% if site.title %}{{ site.title }} - {% endif %}{{ site.description }}</title>
 
-	{% include layout/css.html %}
-	{% include layout/js.html %}
+	{% include_cached layout/css.html %}
+	{% include_cached layout/js.html %}
 </head>
 <body class="antialiased{% if page.dark-theme %} theme-dark{% endif %}">
 
-{{ content}}
-
-
-{% if site.debug %}
-{% if jekyll.environment == 'development' %}
-{% include layout/debug-footer.html %}
-{% endif %}
-{% endif %}
+   {{ content}}
 
+   {% if site.debug %}
+      {% if jekyll.environment == 'development' %}
+         {% include layout/debug.html %}
+      {% endif %}
+   {% endif %}
 
 </body>
 </html>

pages/_layouts/default.html

@@ -4,43 +4,46 @@ layout: base
 
 <div class="d-flex h-auto min-h-screen">
    {% comment %}
-   {% include layout/sidenav.html %}
+   {% include_cached layout/sidenav.html %}
    {% endcomment %}
 
-	<div class="flex-fill d-flex flex-column mw-100">
-		{% include layout/header.html %}
+   <div class="flex-fill d-flex flex-column mw-100">
+      {% include_cached layout/header.html %}
 
-		<div class="d-flex flex-fill">
+      <div class="d-flex flex-fill">
 
-			<div class="flex-fill px-lg-2 mw-100">
-				<div class="container{% if page.container-size %} container-{{ page.container-size }}{% endif %}{% if page.fluid %}-fluid{% endif %} my-4">
-					{% include layout/page-title.html %}
-					{{ content }}
-				</div>
-			</div>
-		</div>
+         <div class="flex-fill px-lg-2 mw-100">
+            <div class="container{% if page.container-size %} container-{{ page.container-size }}{% endif %}{% if page.fluid %}-fluid{% endif %} my-4">
+               {% include layout/page-title.html %}
 
-    <footer class="footer">
-      <div class="container">
-        <div class="row align-items-center flex-row-reverse">
-          <div class="col-auto ml-lg-auto">
-            <div class="row align-items-center">
-              <div class="col-auto">
-                <ul class="list-inline list-inline-dots mb-0">
-                  <li class="list-inline-item"><a href="./docs/index.html">Documentation</a></li>
-                  <li class="list-inline-item"><a href="./faq.html">FAQ</a></li>
-                </ul>
-              </div>
-              <div class="col-auto">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-primary btn-sm">Source code</a>
-              </div>
+               {{ content }}
             </div>
-          </div>
-          <div class="col-12 col-lg-auto mt-3 mt-lg-0 text-center">
-            Copyright © 2018 <a href=".">Tabler</a>. Theme by <a href="https://codecalm.net" target="_blank">codecalm.net</a> All rights reserved.
-          </div>
-        </div>
+         </div>
       </div>
-    </footer>
-	</div>
+
+      <footer class="footer">
+         <div class="container">
+            <div class="row align-items-center flex-row-reverse">
+               <div class="col-auto ml-lg-auto">
+                  <div class="row align-items-center">
+                     <div class="col-auto">
+                        <ul class="list-inline list-inline-dots mb-0">
+                           <li class="list-inline-item"><a href="./docs/index.html">Documentation</a></li>
+                           <li class="list-inline-item"><a href="./faq.html">FAQ</a></li>
+                        </ul>
+                     </div>
+                     <div class="col-auto">
+                        <a href="https://github.com/tabler/tabler" class="btn btn-outline-primary btn-sm">Source
+                           code</a>
+                     </div>
+                  </div>
+               </div>
+               <div class="col-12 col-lg-auto mt-3 mt-lg-0 text-center">
+                  Copyright © 2018 <a href=".">Tabler</a>. Theme by <a href="https://codecalm.net" target="_blank">codecalm.net</a>
+                  All rights reserved.
+               </div>
+            </div>
+         </div>
+      </footer>
+   </div>
 </div>

pages/index.html

@@ -3,7 +3,7 @@ title: Dashboard
 page-title: Dashboard
 ---
 
-{{/*<div class="row row-cards">
+<div class="row row-cards">
 
    <div class="col-6 col-sm-4 col-lg-2">
       {% include cards/small-stats-3.html number=43 title="New Tickets" percentage=6 %}
@@ -114,4 +114,3 @@ page-title: Dashboard
       {% include cards/invoices.html %}
    </div>
 </div>
-*/}}

scss/_dark.scss

@@ -1,3 +1,5 @@
+// stylelint-disable declaration-no-important
+
 body.theme-dark {
   color: #afbdd1;
   background: $dark;
@@ -8,7 +10,7 @@ body.theme-dark {
   .sidenav,
   .topnav,
   .dropdown-menu {
-    background: rgba(0, 0, 0, 0.1);
+    background: rgba(0, 0, 0, .1);
     border-color: transparent;
   }
 

scss/_variables.scss

@@ -174,11 +174,13 @@ $pagination-disabled-color: rgba($text-muted-light, .5) !default;
 //sidenav
 $sidenav-bg: $white !default;
 $sidenav-border-color: $border-color !default;
-
 $sidenav-dark-bg: $dark !default;
-
 $sidenav-link-padding-x: .5rem !default;
 
+//steps
+$steps-border-width: 2px !default;
+$steps-color-inactive: #f3f5f5 !default;
+
 //spinner
 $spinner-width: 1.5rem !default;
 $spinner-height: 1.5rem !default;

scss/layout/_core.scss

@@ -1,16 +1,14 @@
+// stylelint-disable property-no-vendor-prefix
 html {
   height: 100%;
 }
 
 body {
+  overflow-y: scroll;
+  touch-action: manipulation;
   -webkit-tap-highlight-color: transparent;
   -webkit-text-size-adjust: none;
-  -ms-touch-action: manipulation;
-  touch-action: manipulation;
-  -webkit-font-feature-settings: "liga" 0;
   font-feature-settings: "liga" 0;
-
-  overflow-y: scroll;
 }
 
 body *::-webkit-scrollbar {

scss/layout/_navbar.scss

@@ -10,11 +10,11 @@
 }
 
 .navbar-brand {
-  padding: 0;
-  margin: 0;
   display: flex;
   align-items: center;
   justify-content: center;
+  padding: 0;
+  margin: 0;
 
   @at-root a#{&} {
     transition: .3s opacity;

scss/layout/_sidenav.scss

@@ -2,21 +2,21 @@
 Sidebar
  */
 .sidenav {
-  background: $sidenav-bg;
   width: 16rem;
   min-width: 16rem;
-  border-right: 1px solid $sidenav-border-color;
   padding: .75rem 1rem;
+  background: $sidenav-bg;
+  border-right: 1px solid $sidenav-border-color;
 
   .nav-link {
-    color: $text-muted;
     display: flex;
     align-items: center;
+    color: $text-muted;
 
     &.active,
     &:hover {
-      background: rgba($link-color, .04);
       color: $link-color;
+      background: rgba($link-color, .04);
     }
 
     > .icon {
@@ -25,14 +25,14 @@ Sidebar
   }
 
   .navbar-brand {
-    text-align: center;
     padding-top: 1rem;
     padding-bottom: 1rem;
+    text-align: center;
   }
 
-  .navbar-divider {
-
-  }
+  //.navbar-divider {
+  //
+  //}
 
   .navbar-heading {
     padding: .5rem 0;
@@ -50,8 +50,8 @@ Narrow sidebar
   padding: .5rem;
 
   .navbar-brand {
-    padding: 0;
     min-height: 2.5rem;
+    padding: 0;
   }
 }
 
@@ -60,17 +60,17 @@ Right sidebar
  */
 .sidenav-right {
   order: 9;
-  border-left: 1px solid $sidenav-border-color;
   border-right: none;
+  border-left: 1px solid $sidenav-border-color;
 }
 
 /*
 Dark sidebar
  */
 .sidenav-dark {
+  color: #fff;
   background-color: $sidenav-dark-bg;
   border: none;
-  color: #fff;
 
   .navbar-brand {
     filter: brightness(0) invert(1);
@@ -85,8 +85,8 @@ Dark sidebar
 
     &.active,
     &:hover {
-      background: rgba($white, .04);
       color: $white;
+      background: rgba($white, .04);
     }
   }
 }
@@ -97,13 +97,13 @@ Dark sidebar
     display: none;
 
     @include media-breakpoint-up(#{$breakpoint}) {
-      padding-left: 0;
-      padding-right: 0;
       display: block;
+      padding-right: 0;
+      padding-left: 0;
 
       .navbar-nav {
-        margin-left: 0;
         margin-right: 0;
+        margin-left: 0;
       }
 
       .navbar-nav .nav-link {
@@ -112,20 +112,20 @@ Dark sidebar
         &.active {
           position: relative;
 
-          &:before {
+          &::before {
             top: auto;
-            left: $sidenav-link-padding-x;
             right: $sidenav-link-padding-x;
             bottom: calc(-#{$navbar-padding-y} - #{$border-width});
-            border-left: 0;
+            left: $sidenav-link-padding-x;
             border-bottom: 1px solid $primary;
+            border-left: 0;
           }
         }
       }
 
       .sidenav > [class*="container"] {
-        padding-left: 0;
         padding-right: 0;
+        padding-left: 0;
       }
     }
   }

scss/ui/_avatars.scss

@@ -27,8 +27,8 @@
   .avatar-#{$avatar-size} {
     width: $size;
     height: $size;
-    line-height: $size;
     font-size: $size / 2;
+    line-height: $size;
   }
 }
 
@@ -66,10 +66,7 @@
 
 .avatar-list-stacked {
   .avatar {
-    margin-right: -.5em !important;
-  }
-
-  .avatar {
+    margin-right: -.5em;
     box-shadow: 0 0 0 2px #fff;
   }
 }

scss/ui/_buttons.scss

@@ -1,12 +1,15 @@
 .btn {
-  box-shadow: 0 1px 1px rgba(0, 0, 0, .03);
   letter-spacing: .03em;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, .03);
 }
 
 .btn-avatar {
-  width: 1.25rem !important;
-  height: 1.25rem !important;
   margin: 0 .25rem 0 -.25rem;
+
+  @at-root .btn #{&} {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
 }
 
 .btn-pill {
@@ -15,6 +18,7 @@
   border-radius: 10rem;
 }
 
+// stylelint-disable declaration-no-important
 .btn-link {
   box-shadow: none !important;
 }

scss/ui/_calendars.scss

@@ -1,8 +1,8 @@
 .calendar {
-  border: 1px solid $border-color;
-  border-radius: $border-radius;
   display: block;
   font-size: $font-size-sm;
+  border: 1px solid $border-color;
+  border-radius: $border-radius;
 }
 
 .calendar-nav {
@@ -20,7 +20,7 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;
-  padding: .5rem 0
+  padding: .5rem 0;
 }
 
 .calendar-header {
@@ -28,11 +28,11 @@
 }
 
 .calendar-date {
-  text-align: center;
   flex: 0 0 (100% / 7);
   max-width: (100% / 7);
-  border: 0;
   padding: .2rem;
+  text-align: center;
+  border: 0;
 
   &.prev-month,
   &.next-month {
@@ -40,57 +40,57 @@
   }
 
   .date-item {
+    position: relative;
     display: inline-block;
+    width: 1.4rem;
+    height: 1.4rem;
+    line-height: 1.4rem;
+    color: #66758c;
+    text-align: center;
+    text-decoration: none;
+    white-space: nowrap;
+    vertical-align: middle;
+    cursor: pointer;
     background: 0 0;
     border: 1px solid transparent;
     border-radius: 50%;
-    color: #66758c;
-    cursor: pointer;
-    height: 1.4rem;
-    line-height: 1.4rem;
-    width: 1.4rem;
     outline: 0;
-    position: relative;
-    text-align: center;
-    text-decoration: none;
-    vertical-align: middle;
-    white-space: nowrap;
     transition: background .3s, border .3s, box-shadow .32s, color .3s;
 
     &:hover {
-      background: #fefeff;
-      border-color: $border-color;
       color: $primary;
       text-decoration: none;
+      background: #fefeff;
+      border-color: $border-color;
     }
   }
 
   .date-today {
-    border-color: $border-color;
     color: $primary;
+    border-color: $border-color;
   }
 }
 
 .calendar-range {
   position: relative;
 
-  &:before {
+  &::before {
+    position: absolute;
+    top: 50%;
+    right: 0;
+    left: 0;
+    height: 1.4rem;
     content: "";
     background: rgba($primary, .1);
-    height: 1.4rem;
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 50%;
     transform: translateY(-50%);
   }
 
   &.range-start,
   &.range-end {
     .date-item {
+      color: #fff;
       background: $primary;
       border-color: $primary;
-      color: #fff;
     }
   }
 

scss/ui/_cards.scss

@@ -63,8 +63,8 @@
 .card-header {
   display: flex;
   align-items: center;
-  background: transparent;
   min-height: 3.5rem;
+  background: transparent;
 }
 
 .card-header-tabs {
@@ -123,10 +123,10 @@ Card optinos
 }
 
 .card-options-link {
-  margin-left: .25rem;
-  color: $text-muted-light;
   display: inline-block;
   min-width: 1rem;
+  margin-left: .25rem;
+  color: $text-muted-light;
 }
 
 /**
@@ -197,7 +197,7 @@ Card code
 Card chart
  */
 .card-chart {
-  height: 3.5rem;
   position: relative;
   z-index: 1;
+  height: 3.5rem;
 }

scss/ui/_charts.scss

@@ -54,20 +54,22 @@
   }
 }
 
+
+// stylelint-disable declaration-no-important
 .apexcharts-tooltip {
-  background: $dark !important;
+  line-height: 1;
   color: #fff;
+  background: $dark !important;
   border: 0 !important;
   border-radius: 3px !important;
-  line-height: 1;
 }
 
 .apexcharts-tooltip-title {
+  margin: 0 !important;
   background: transparent !important;
   border: 0 !important;
-  margin: 0 !important;
 }
 
 .apexcharts-tooltip-series-group {
-  padding: 0 8px !important
+  padding: 0 8px !important;
 }

scss/ui/_colors.scss

@@ -5,12 +5,12 @@ COLORS VARIATIONS
  */
 @if $generate-color-hues {
   @each $color, $value in $colors {
-    .bg-#{$color}-lightest { background: mix($value, #ffffff, 10%) };
-    .bg-#{$color}-lighter { background: mix($value, #ffffff, 30%) };
-    .bg-#{$color}-light { background: mix($value, #ffffff, 70%) };
-    .bg-#{$color}-dark {background: mix($value, #000000, 80%) };
-    .bg-#{$color}-darker { background: mix($value, #000000, 40%) };
-    .bg-#{$color}-darkest { background: mix($value, #000000, 20%) };
+    .bg-#{$color}-lightest { background: mix($value, #fff, 10%); }
+    .bg-#{$color}-lighter { background: mix($value, #fff, 30%); }
+    .bg-#{$color}-light { background: mix($value, #fff, 70%); }
+    .bg-#{$color}-dark { background: mix($value, #000, 80%); }
+    .bg-#{$color}-darker { background: mix($value, #000, 40%); }
+    .bg-#{$color}-darkest { background: mix($value, #000, 20%); }
 
     .bg-#{$color}-lt {
       color: $value !important;

scss/ui/_dropdowns.scss

@@ -5,51 +5,51 @@
 }
 
 .dropdown-menu {
-  box-shadow: $box-shadow;
   min-width: 12rem;
+  box-shadow: $box-shadow;
 }
 
 .dropdown-menu-arrow {
   margin-top: .75rem;
 
-  &:before {
+  &::before {
     position: absolute;
     top: -6px;
     left: 12px;
     display: inline-block;
+    content: "";
     border-right: 5px solid transparent;
     border-bottom: 5px solid $border-color;
+    border-bottom-color: rgba(0, 0, 0, .2);
     border-left: 5px solid transparent;
-    border-bottom-color: rgba(0, 0, 0, 0.2);
-    content: '';
   }
 
-  &:after {
+  &::after {
     position: absolute;
     top: -5px;
     left: 12px;
     display: inline-block;
+    content: "";
     border-right: 5px solid transparent;
     border-bottom: 5px solid #fff;
     border-left: 5px solid transparent;
-    content: '';
   }
 
   &.dropdown-menu-right {
-    &:before,
-    &:after {
-      left: auto;
+    &::before,
+    &::after {
       right: 12px;
+      left: auto;
     }
   }
 }
 
 .dropdown-icon {
-  color: $text-muted;
+  display: inline-block;
+  width: 1em;
   margin-right: .5rem;
   margin-left: -.5rem;
-  width: 1em;
-  display: inline-block;
+  color: $text-muted;
   text-align: center;
   vertical-align: -1px;
   stroke-width: 1.75px;

scss/ui/_examples.scss

@@ -1,8 +1,8 @@
 .example {
   padding: 1.5rem;
+  margin: 1rem 0 0;
   border: 1px solid $border-color;
   border-radius: 3px 3px 0 0;
-  margin: 1rem 0 0;
 }
 
 .example-bg {

scss/ui/_highlight.scss

@@ -12,6 +12,7 @@
     background-color: transparent;
   }
 
+  // stylelint-disable selector-class-pattern
   .hll {
     background-color: #ffc;
   }

scss/ui/_inputs.custom.scss

@@ -189,16 +189,16 @@ Selectgroup
   }
 
   .selectgroup-button {
-    border-radius: 50px !important;
+    border-radius: 50px;
   }
 }
 
 /*
 Switch
  */
-$custom-switch-width: 2.25rem;
-$custom-switch-height: 1.25rem;
-$custom-switch-padding: 1px;
+$custom-switch-width: 2.25rem !default;
+$custom-switch-height: 1.25rem !default;
+$custom-switch-padding: 1px !default;
 
 .custom-switch {
   display: inline-flex;

scss/ui/_inputs.scss

@@ -24,8 +24,8 @@ textarea {
 }
 
 .form-control-light {
-  background-color: $min-black !important;
-  border-color: $min-black !important;
+  background-color: $min-black;
+  border-color: $min-black;
 }
 
 .form-footer {

scss/ui/_lists.scss

@@ -116,10 +116,6 @@
 }
 
 
-.list-separated {
-
-}
-
 .list-separated-item {
   padding: 1rem 0;
 

scss/ui/_loaders.scss

@@ -16,24 +16,13 @@
   color: $blue;
   vertical-align: middle;
 
-  //&:before,
   &::after {
-    //margin: (- $loader-size / 2) 0 0 (- $loader-size / 2);
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     content: "";
-  }
-
-  //&:before {
-  //	border-radius: 50%;
-  //	border: 3px solid currentColor;
-  //	opacity: .15;
-  //}
-
-  &::after {
     border: 1px solid;
     border-color: transparent;
     border-top-color: currentColor;

scss/ui/_media.scss

@@ -1,3 +1,5 @@
+// stylelint-disable property-no-vendor-prefix
+
 .media {
   position: relative;
   display: block;
@@ -6,7 +8,6 @@
   overflow: hidden;
   border-top-left-radius: inherit;
   border-top-right-radius: inherit;
-  -ms-flex-negative: 0;
 
   &::after {
     display: block;

scss/ui/_pagination.scss

@@ -3,8 +3,8 @@
 }
 
 .page-link {
-  border-radius: $border-radius;
   min-width: px2rem(26px);
+  border-radius: $border-radius;
 
   &:hover {
     background: transparent;
@@ -27,10 +27,10 @@
 }
 
 .page-item-subtitle {
+  margin-bottom: 2px;
+  font-size: 12px;
   color: $text-muted;
   text-transform: uppercase;
-  font-size: 12px;
-  margin-bottom: 2px;
 
   .page-item.disabled &{
     color: $pagination-disabled-color;
@@ -38,9 +38,9 @@
 }
 
 .page-item-title {
-  color: $text-color;
-  font-weight: 400;
   font-size: $h3-font-size;
+  font-weight: 400;
+  color: $text-color;
 
   .page-link:hover & {
     color: $link-color;

scss/ui/_ribbons.scss

@@ -1,3 +1,5 @@
+// stylelint-disable declaration-no-important
+
 .ribbon {
   position: absolute;
   top: .75rem;

scss/ui/_spinners.scss

@@ -1 +0,0 @@
-

scss/ui/_steps.scss

@@ -1,16 +1,15 @@
-$steps-border-width: 2px;
-$steps-color-inactive: #f3f5f5;
+// stylelint-disable declaration-no-important
 
 @mixin step-size($border-width, $dot-size: 1rem) {
   .step-item {
     padding-top: calc(#{$dot-size} + 4px);
 
-    &:after {
-      height: $border-width;
+    &::after {
       top: calc(#{$dot-size / 2} + 2px);
+      height: $border-width;
     }
 
-    &:before {
+    &::before {
       width: $dot-size;
       height: $dot-size;
     }
@@ -19,26 +18,26 @@ $steps-color-inactive: #f3f5f5;
 
 @mixin step-color($color) {
   .step-item {
-    &:after,
-    &:before {
-      background: $color;
+    &::after,
+    &::before {
       color: $white;
+      background: $color;
     }
 
-    &.active:before {
-      border-color: $color;
+    &.active::before {
       color: inherit;
+      border-color: $color;
     }
   }
 }
 
 .steps {
-  list-style: none;
   display: flex;
   flex-wrap: nowrap;
-  margin: 2rem 0;
-  padding: 0;
   width: 100%;
+  padding: 0;
+  margin: 2rem 0;
+  list-style: none;
   @include step-size(2px, .5rem);
   @include step-color($primary);
 }
@@ -50,12 +49,12 @@ $steps-color-inactive: #f3f5f5;
 }
 
 .step-item {
-  flex: 1 1 0;
-  margin-top: 0;
-  min-height: 1rem;
-  text-align: center;
   position: relative;
+  flex: 1 1 0;
+  min-height: 1rem;
+  margin-top: 0;
   color: inherit;
+  text-align: center;
   cursor: default;
 
   @at-root a#{&} {
@@ -66,43 +65,43 @@ $steps-color-inactive: #f3f5f5;
     }
   }
 
-  &:not(:first-child):after {
-    content: '';
+  &:not(:first-child)::after {
     position: absolute;
     left: -50%;
     width: 100%;
+    content: "";
     transform: translateY(-50%);
   }
 
-  &:before {
-    content: '';
-    border: 2px solid #fff;
-    box-sizing: content-box;
-    border-radius: 50%;
-    display: block;
+  &::before {
     position: absolute;
-    left: 50%;
     top: 0;
-    transform: translateX(-50%);
+    left: 50%;
     z-index: 1;
+    box-sizing: content-box;
+    display: block;
+    content: "";
+    border: 2px solid #fff;
+    border-radius: 50%;
+    transform: translateX(-50%);
   }
 
   &.active {
     font-weight: 600;
 
-    &:before {
+    &::before {
       background: #fff;
     }
 
     & ~ .step-item {
       color: $text-muted-light;
 
-      &:after,
-      &:before {
+      &::after,
+      &::before {
         background: $steps-color-inactive;
       }
 
-      &:before {
+      &::before {
         color: $text-muted-light !important;
       }
     }
@@ -116,14 +115,14 @@ $steps-color-inactive: #f3f5f5;
   .step-item {
     counter-increment: steps;
 
-    &:before {
-      content: counter(steps);
-      line-height: 1.5rem;
+    &::before {
       font-size: 1rem;
+      line-height: 1.5rem;
+      content: counter(steps);
     }
 
     &.active ~ .step-item {
-      &:before {
+      &::before {
         background: #fff;
       }
     }

scss/ui/_typo.scss

@@ -137,8 +137,3 @@ Selection
   color: #fff;
   background-color: lighten($primary, 8%);
 }
-
-::-moz-selection {
-  color: #fff;
-  background-color: lighten($primary, 8%);
-}

scss/utils/_opacity.scss

@@ -1,3 +1,5 @@
+// stylelint-disable declaration-no-important
+
 @for $i from 0 through 20 {
   .opacity-#{$i * 5} {
     opacity: $i * 5 / 100 !important;

scss/utils/_shadow.scss

@@ -1,11 +1,9 @@
-.shadow-sm,
+// stylelint-disable declaration-no-important
+
 .hover-shadow-sm:hover { box-shadow: $box-shadow-sm !important; }
 
-.shadow,
 .hover-shadow:hover{ box-shadow: $box-shadow !important; }
 
-.shadow-lg,
 .hover-shadow-lg:hover { box-shadow: $box-shadow-lg !important; }
 
-.shadow-none,
 .hover-shadow-none:hover{ box-shadow: none !important; }

scss/utils/_sizing.scss

@@ -43,17 +43,7 @@
 .w-64	{ width: 16rem !important; }
 .w-auto	{ width: auto !important; }
 .w-px	{ width: 1px !important; }
-.w-1\/2	{ width: 50% !important; }
-.w-1\/3	{ width: 33.33333% !important; }
-.w-2\/3	{ width: 66.66667% !important; }
-.w-1\/4	{ width: 25% !important; }
-.w-3\/4	{ width: 75% !important; }
-.w-1\/5	{ width: 20% !important; }
-.w-2\/5	{ width: 40% !important; }
-.w-3\/5	{ width: 60% !important; }
-.w-4\/5	{ width: 80% !important; }
-.w-1\/6	{ width: 16.66667% !important; }
-.w-5\/6	{ width: 83.33333% !important; }
+
 .w-full	{ width: 100% !important; }
 .w-screen	{ width: 100vw !important; }
 

scss/utils/_text.scss

@@ -13,17 +13,17 @@
 .text-muted-light { color: $text-muted-light !important; }
 
 .text-subheader {
-  color: $text-muted;
   font-size: $h6-font-size;
+  font-weight: 600;
+  color: $text-muted;
   text-transform: uppercase;
   letter-spacing: .04em;
-  font-weight: 600;
 }
 
 .text-label {
+  font-size: $h6-font-size;
   color: $text-muted;
   text-transform: uppercase;
-  font-size: $h6-font-size;
 }
 
 .tracking-tight		{ letter-spacing: -.05em !important; }

site/layouts/_default/base.html

@@ -1 +0,0 @@
-base

site/layouts/_default/page.html

@@ -1,45 +0,0 @@
-<!doctype html>
-<html lang="en"{{ if .Params.rtl }} dir="rtl"{{ end }}>
-<head>
-   <meta charset="UTF-8" />
-   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
-   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-   <meta http-equiv="Content-Language" content="{{ .Site.Language }}" />
-
-   <meta name="author" content="{{ .Site.Params.authors }}" />
-
-   <meta name="msapplication-TileColor" content="#4188c9" />
-   <meta name="theme-color" content="#4188c9" />
-
-   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
-   <meta name="apple-mobile-web-app-capable" content="yes" />
-   <meta name="mobile-web-app-capable" content="yes" />
-   <meta name="HandheldFriendly" content="True" />
-   <meta name="MobileOptimized" content="320" />
-
-   {{ .Hugo.Generator }}
-
-   <link rel="icon" href="{{ .Site.BaseURL }}favicon.ico" type="image/x-icon" />
-   <link rel="shortcut icon" href="{{ .Site.BaseURL }}favicon.ico" type="image/x-icon" />
-
-   <link rel="canonical" href="{{ .Permalink }}" />
-
-   {{ with .Params.robots -}}
-   <meta name="robots" content="{{ . }}" />
-   {{- end }}
-
-   <title>{{ if .Title }}{{ .Title }} - {{ end }}{{ .Site.Title }}{{ if .Site.Params.description }} - {{ .Site.Params.description }}{{ end }}</title>
-
-   {{ partial "css" . }}
-</head>
-<body class="antialiased{{ if .Params.DarkTheme }} theme-dark{{ end }}">
-
-{{ .Content}}
-
-{{ if eq (getenv "HUGO_ENV") "development" }}
-   {{ partial "debug-footer" }}
-{{ end }}
-
-{{ partial "js" . }}
-</body>
-</html>

site/layouts/partials/css.html

@@ -1,2 +0,0 @@
-<link href="{{ .Site.BaseURL }}css/ui-kit.css" rel="stylesheet" />
-<link href="{{ .Site.BaseURL }}libs/jqvmap/jqvmap.css" />

site/layouts/partials/debug-header.html

@@ -1,47 +0,0 @@
-<style>
-	.card-debug {
-		position: absolute;
-		right: 0;
-		top: 0;
-		line-height: 1;
-		font-size: 11px;
-      display: none;
-	}
-
-	.card-debug a {
-		display: inline-block;
-		padding: 2px;
-	}
-
-	.card-debug a:hover {
-		text-decoration: underline;
-	}
-</style>
-<script>
-	$(document).ready(function () {
-		$('.card').each(function () {
-			var $card = $(this),
-				htmlCode = $card[0].innerHTML.replace(/(^[ \t]*\n)/gm, '');
-			
-			var $button = $('<div class="card-debug"><a href="#" class="text-muted-light" data-code>code</a></div>'),
-				$codeLink = $button.find('[data-code]');
-
-			$codeLink
-				// .data('htmlCode', htmlCode)
-				.on('click', function(e){
-
-					var $modal = $('<div class="modal hide"><div class="modal-dialog modal-lg"><div class="modal-content"><div class="modal-body"><pre class="m-0"></pre></div></div></div></div>');
-					$modal.find('pre').text(htmlCode);
-					$('body').append($modal);
-					console.log();
-
-					$modal.modal('show');
-
-					e.preventDefault();
-					return false;
-				});
-			
-			$card.prepend($button);
-		});
-	});
-</script>

site/layouts/partials/js.html

@@ -1,24 +0,0 @@
-<script src="{{ .Site.BaseURL }}libs/jquery/jquery.js"></script>
-<script src="{{ .Site.BaseURL }}libs/bootstrap/js/bootstrap.bundle.min.js"></script>
-
-<script src="{{ .Site.BaseURL }}libs/apexcharts/apexcharts.min.js"></script>
-<script src="{{ .Site.BaseURL }}libs/peity/jquery.peity.min.js"></script>
-
-
-{{ if eq (getenv "HUGO_ENV") "development" }}
-{{/*
-include layout/debug-header.html
-*/}}
-{{ end }}
-
-<script src="{{ .Site.BaseURL }}js/ui-kit.js"></script>
-<script src="{{ .Site.BaseURL }}js/app/charts.js"></script>
-
-<script>
-   window.tabler = window.tabler || {};
-   window.tabler.colors = { {{ range $color, $val := .Site.Params.colors }}
-      '{{ $color }}': '{{ $val.hex }}',{{ end }}
-   };
-</script>
-
-{{ getenv "HUGO_ENV" }}

site/layouts/robots.txt

@@ -1,8 +0,0 @@
-# www.robotstxt.org
-
-{{ if (eq (getenv "HUGO_ENV") "production") -}}
-# Allow crawling of all content
-{{- end }}
-User-agent: *
-Disallow:{{ if (ne (getenv "HUGO_ENV") "production") }} /{{ end }}
-Sitemap: {{ .Site.BaseURL }}/sitemap.xml

site/layouts/sitemap.xml

@@ -1,9 +0,0 @@
-<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">
-  {{- range .Data.Pages -}}{{ if ne .Params.sitemap_exclude true }}
-  <url>
-    <loc>{{ .Permalink }}</loc>{{ if not .Lastmod.IsZero }}
-    <lastmod>{{ safeHTML (.Lastmod.Format "2006-01-02T15:04:05-07:00") }}</lastmod>{{ end }}{{ with .Sitemap.ChangeFreq }}
-    <changefreq>{{ . }}</changefreq>{{ end }}{{ if ge .Sitemap.Priority 0.0 }}
-    <priority>{{ .Sitemap.Priority }}</priority>{{ end }}
-  </url>{{ end }}{{ end }}
-</urlset>

site/pages/index.html

@@ -1,5 +0,0 @@
----
-layout: page
----
-
-sdsdf sdf