styling with the new template

.gitignore

@@ -0,0 +1,91 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# IDEs and editors
+.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+.sass-cache
+connect.lock
+typings
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# next.js build output
+.next
+
+# Lerna
+lerna-debug.log
+
+# System Files
+.DS_Store
+Thumbs.db

gulpfile.js

@@ -0,0 +1,54 @@
+const { spawn } = require('child_process')
+const gulp = require('gulp')
+const sass = require('gulp-sass')
+const autoprefixer = require('gulp-autoprefixer')
+const run = require('gulp-run')
+const babel = require('gulp-babel')
+const uglify = require('gulp-uglify')
+const rename = require('gulp-rename')
+const nodemon = require('gulp-nodemon')
+const concat = require('gulp-concat')
+const path = require('path')
+const browserSync = require('browser-sync').create();
+
+gulp.task('sass', () => {
+  gulp.src('styles/app.sass')
+    .pipe(sass({
+      outputStyle: 'compressed',
+    }))
+    .pipe(autoprefixer())
+    .pipe(rename({ suffix: '.min' }))
+    .pipe(gulp.dest('static/styles'))
+})
+
+gulp.task('js', () => {
+  gulp.src(path.join('scripts/', '*.js'), { base: 'app' })
+    .pipe(concat('app.js'))
+    .pipe(babel({
+      presets: ['@babel/env'],
+    }))
+    .pipe(uglify())
+    .pipe(rename({ suffix: '.min' }))
+    .pipe(gulp.dest('static/scripts'))
+})
+
+gulp.task('docs', function() {
+  return run('cd .. && npm run docs').exec()
+})
+
+gulp.task('watch', () => {
+  gulp.watch('styles/**/*.sass', ['sass', 'docs'])
+  gulp.watch('scripts/**/*.js', ['js', 'docs'])
+  gulp.watch('tmpl/**/*.tmpl', ['docs'])
+})
+
+gulp.task('sync', () => {
+  browserSync.init({
+    server: {
+      baseDir: "../docs"
+    }
+  })
+  gulp.watch("../docs/*").on('change', browserSync.reload)
+})
+
+gulp.task('default', ['sass', 'js', 'docs', 'watch', 'sync'])