.gitignore

@@ -1,3 +1,16 @@
+# hippie
+###################
+###################
+
+build/**
+reports/**
+source/art/*.*
+source/art/images/*.*
+source/art/sprites/
+!source/art/**/demo/
+
+
+
 # https://gist.github.com/octocat/9257657
 ###################
 ###################
@@ -181,14 +194,3 @@ typings/
 ###################
 .sass-cache/
 *.css.map
-
-
-
-# https://interaktionsweise.de/
-###################
-###################
-build/
-source/art/*.*
-source/art/images/*.*
-source/art/sprites/
-!source/art/**/demo/

.jscsrc

@@ -1,3 +0,0 @@
-{
-	"preset": "google"
-}

.jshintrc

@@ -19,13 +19,13 @@
     "nonbsp"        : true,     // true: Prohibit "non-breaking whitespace" characters.
     "nonew"         : false,    // true: Prohibit use of constructors for side-effects (without assignment)
     "plusplus"      : false,    // true: Prohibit use of `++` and `--`
-    "quotmark"      : false,    // Quotation mark consistency:
+    "quotmark"      : true,    // Quotation mark consistency:
                                 //   false    : do nothing (default)
                                 //   true     : ensure whatever is used is consistent
                                 //   "single" : require single quotes
                                 //   "double" : require double quotes
     "undef"         : true,     // true: Require all non-global variables to be declared (prevents global leaks)
-    "unused"        : true,     // Unused variables:
+    "unused"        : false,     // Unused variables:
                                 //   true     : all variables, last function parameter
                                 //   "vars"   : all variables only
                                 //   "strict" : all variables, all function parameters
@@ -87,5 +87,5 @@
     "yui"           : false,    // Yahoo User Interface
 
     // Custom Globals
-    "globals"       : {}        // additional predefined global variables
+    "globals"       : {"hippie": true}        // additional predefined global variables
 }

.sass-lint.yml

@@ -1,178 +0,0 @@
-# sass-lint config generated by make-sass-lint-config v0.1.2
-#
-# The following scss-lint Linters are not yet supported by sass-lint:
-# DisableLinterReason, ElsePlacement, PropertyCount, SelectorDepth
-# SpaceAroundOperator, TrailingWhitespace, UnnecessaryParentReference, Compass::*
-#
-# The following settings/values are unsupported by sass-lint:
-# Linter Indentation, option "allow_non_nested_indentation"
-# Linter Indentation, option "character"
-# Linter NestingDepth, option "ignore_parent_selectors"
-# Linter PropertySortOrder, option "min_properties"
-# Linter PropertySortOrder, option "separate_groups"
-# Linter SpaceBeforeBrace, option "allow_single_line_padding"
-# Linter VendorPrefix, option "identifier_list"
-
-files:
-  include: '**/*.scss'
-options:
-  formatter: stylish
-  merge-default-rules: false
-rules:
-  bem-depth:
-    - 0
-    - max-depth: 1
-  border-zero:
-    - 1
-    - convention: zero
-  brace-style:
-    - 1
-    - allow-single-line: true
-  class-name-format:
-    - 1
-    - convention: hyphenatedlowercase
-  clean-import-paths:
-    - 1
-    - filename-extension: false
-      leading-underscore: false
-  empty-line-between-blocks:
-    - 1
-    - ignore-single-line-rulesets: true
-  extends-before-declarations: 1
-  extends-before-mixins: 1
-  final-newline:
-    - 1
-    - include: true
-  force-attribute-nesting: 1
-  force-element-nesting: 1
-  force-pseudo-nesting: 1
-  function-name-format:
-    - 1
-    - allow-leading-underscore: true
-      convention: hyphenatedlowercase
-  hex-length:
-    - 1
-    - style: short
-  hex-notation:
-    - 1
-    - style: lowercase
-  id-name-format:
-    - 1
-    - convention: hyphenatedlowercase
-  indentation:
-    - 1
-    - size: 2
-  leading-zero:
-    - 1
-    - include: false
-  mixin-name-format:
-    - 1
-    - allow-leading-underscore: true
-      convention: hyphenatedlowercase
-  mixins-before-declarations: 1
-  nesting-depth:
-    - 1
-    - max-depth: 3
-  no-color-keywords: 1
-  no-color-literals: 1
-  no-css-comments: 1
-  no-debug: 1
-  no-duplicate-properties: 1
-  no-empty-rulesets: 1
-  no-extends: 0
-  no-ids: 1
-  no-important: 1
-  no-invalid-hex: 1
-  no-mergeable-selectors: 1
-  no-misspelled-properties:
-    - 1
-    - extra-properties: []
-  no-qualifying-elements:
-    - 1
-    - allow-element-with-attribute: false
-      allow-element-with-class: false
-      allow-element-with-id: false
-  no-trailing-zero: 1
-  no-transition-all: 0
-  no-url-protocols: 1
-  no-vendor-prefixes:
-    - 1
-    - additional-identifiers: []
-      excluded-identifiers: []
-  placeholder-in-extend: 1
-  placeholder-name-format:
-    - 1
-    - convention: hyphenatedlowercase
-  property-sort-order:
-    - 1
-    - ignore-custom-properties: false
-  property-units:
-    - 1
-    - global:
-        - ch
-        - em
-        - ex
-        - rem
-        - cm
-        - in
-        - mm
-        - pc
-        - pt
-        - px
-        - q
-        - vh
-        - vw
-        - vmin
-        - vmax
-        - deg
-        - grad
-        - rad
-        - turn
-        - ms
-        - s
-        - Hz
-        - kHz
-        - dpi
-        - dpcm
-        - dppx
-        - '%'
-      per-property: {}
-  quotes:
-    - 1
-    - style: single
-  shorthand-values:
-    - 1
-    - allowed-shorthands:
-        - 1
-        - 2
-        - 3
-  single-line-per-selector: 1
-  space-after-bang:
-    - 1
-    - include: false
-  space-after-colon:
-    - 1
-    - include: true
-  space-after-comma:
-    - 1
-    - include: true
-  space-before-bang:
-    - 1
-    - include: true
-  space-before-brace:
-    - 1
-    - include: true
-  space-before-colon: 1
-  space-between-parens:
-    - 1
-    - include: false
-  trailing-semicolon: 1
-  url-quotes: 1
-  variable-for-property:
-    - 0
-    - properties: []
-  variable-name-format:
-    - 1
-    - allow-leading-underscore: true
-      convention: hyphenatedlowercase
-  zero-unit: 1

.sasslintrc

@@ -0,0 +1,55 @@
+{
+  "options": {
+    "merge-default-rules": false,
+    "formatter": "html"
+  },
+  "rules": {
+    "extends-before-mixins": 2,
+    "extends-before-declarations": 2,
+    "placeholder-in-extend": 2,
+    "mixins-before-declarations": [
+      2,
+      {
+        "exclude": [
+          "breakpoint",
+          "mq"
+        ]
+      }
+    ],
+    "no-warn": 1,
+    "no-debug": 1,
+    "no-ids": 2,
+    "no-important": 2,
+    "hex-notation": [
+      2,
+      {
+        "style": "uppercase"
+      }
+    ],
+    "indentation": [
+      2,
+      {
+        "size": 2
+      }
+    ],
+    "property-sort-order": [
+      1,
+      {
+        "order": [
+          "display",
+          "margin"
+        ],
+        "ignore-custom-properties": true
+      }
+    ],
+    "variable-for-property": [
+      2,
+      {
+        "properties": [
+          "margin",
+          "content"
+        ]
+      }
+    ]
+  }
+}

DEPRECATED.md

@@ -1,327 +0,0 @@
-# Deprecated stuff
-
-## Gulp
-
-### Packages
-
-```
-"gulp-ruby-sass": "^2.1.1",
-"gulp-cssnano": "^2.1.3",
-"gulp-rename": "^1.2.3",
-"gulp-changed": "^3.2.0",
-"gulp-newer": "^1.4.0",
-"gulp-useref": "^3.1.5",
-```
-
-### Code
-
-```
-// NOTE // to be deleted
-
-var oldsource = {
-  watch: ['source/style/hippie/**/*.scss', 'source/style/**/*.scss', 'source/templates/**/*.+(html|njk)', 'source/pages/**/*.+(html|njk)'],
-  styles: ['source/style/demo.scss', 'source/style/maintenance.scss'],
-  scripts: ['source/code/hippie/variables.js', 'source/code/hippie/functions.js', 'source/code/hippie/global.js', 'source/code/**/*.coffee', '!source/vendor/**/*', ],
-  images: 'source/art/**/*',
-  pages: 'source/pages/**/*.+(html|njk)',
-  vendor: 'vendor/**/*'
-};
-var oldbuild = {
-  styles: 'build/css',
-  scripts: 'build/js',
-  images: 'build/art',
-  vendor: 'build/vendor',
-  root: 'build'
-}
-
-// Task - Clean build directory
-gulp.task('clean', function() {
-  return del([oldbuild.scripts, oldbuild.styles, oldbuild.images]);
-});
-
-// Task - Styles
-gulp.task('styles', () => rubysass(oldsource.styles, {sourcemap: true})
-.on('error', rubysass.logError)
-// .pipe(newer({dest: oldbuild.styles, ext: '.css'}))
-.pipe(prefix('last 2 version'))
-.pipe(gulp.dest(oldbuild.styles))
-.pipe(rename({suffix: '.min'}))
-.pipe(cssnano())
-.pipe(sourcemap.write('.', {
-  includeContent: false,
-  sourceRoot: 'source'
-}))
-.pipe(gulp.dest(oldbuild.styles))
-.pipe(browsersync.stream({match: '**/*.css'}))
-// .pipe(notify({message: 'Style task complete'}))
-);
-
-// Task - Scripts
-gulp.task('scripts', function(cb) {
-  pump([
-    gulp.src(oldsource.scripts),
-    cache('scripts'),
-    jshint('.jshintrc'),
-    jshint.reporter('default'),
-    sourcemap.init(),
-    minify(),
-    remember('scripts'),
-    concat('all.min.js'),
-    sourcemap.write(),
-    gulp.dest(oldbuild.scripts),
-    browsersync.stream()
-  ], cb);
-});
-
-// Task - Images
-gulp.task('images', function() {
-  return gulp.src(oldsource.images)
-  .pipe(changed(oldbuild.images))
-  // .pipe(cache(imagemin({
-    //   optimizationLevel: 3,
-    //   progressive: true,
-    //   interlaced: true })))
-    // )
-    .pipe(gulp.dest(oldbuild.images))
-    // .pipe(notify({ message: 'Images task complete' }))
-    ;
-  });
-
-  // Task - Vendor
-  gulp.task('oldvendor', function() {
-    return gulp.src(oldsource.vendor)
-    .pipe(plumbError())
-    .pipe(gulp.dest(oldbuild.vendor))
-    ;
-  });
-
-  //Task - Nunjucks
-  gulp.task('oldnunjucks', function() {
-    return gulp.src(oldsource.pages)
-    // .pipe(changed(oldbuild.root))
-    .pipe(nunjucks({
-      path: ['source/templates'],
-      envOptions: {
-        trimBlocks: true
-      }
-    }))
-    .pipe(gulp.dest(oldbuild.root))
-  });
-
-  // a task that ensures the other task is complete before reloading browsers
-  gulp.task('prewatch', ['oldnunjucks', 'styles'], function(done) {
-    browsersync.reload();
-    done();
-  });
-
-  // Old watch for file changes
-  gulp.task('oldwatch', ['styles', 'scripts', 'oldnunjucks'], function() {
-    browsersync.init({
-      open: false,
-      server: oldbuild.root,
-      // proxy: "http://verser.vrt/virtual/"
-    });
-
-    gulp.watch(oldsource.scripts, ['scripts']).on('change', function(event) {
-      if (event.type === 'deleted') {
-        delete cache.caches['scripts'][event.path];
-        remember.forget('scripts', event.path);
-      }
-    });
-    // gulp.watch(oldsource.watch, ['prewatch']);
-    gulp.watch(oldsource.watch, ['styles', 'oldnunjucks']).on('change', browsersync.reload);
-    // gulp.watch(oldsource.images, ['images']);
-  });
-
-  gulp.task('olddefault', ['clean', 'styles', 'scripts', 'images', 'nunjucks']);
-
-  // function errorHandler(err) {
-    //   // Logs out error in the command line
-    //   console.log(err.toString());
-    //   // Ends the current pipe, so Gulp watch doesn't break
-    //   this.emit('end');
-    // }
-```
-
-## Style
-
-```
-The config file is intended to allow users to quickly redefine core elements of the design
-that will cascade throughout the css to get your design up and running FAST!
-
-For instruction, please see https://github.com/Anotheruiguy/toadstool/blob/master/sass/doc-src/config.md
-
-///// Typography configuration///////
------------------------------------------------------------------------------
-$font_size: 12;
-
-$heading_1: 46;
-$heading_2: 32;
-$heading_3: 28;
-$heading_4: 18;
-$heading_5: 18;
-$heading_6: 18;
-
-$line: $font_size * 1.5;
-
-$small_point_size: 10;
-$large_point_size: 14;
-
-$primary_font_family: #{"Helvetica Neue", Arial, sans-serif};
-$secondary_font_family: #{"Helvetica Neue", Arial, sans-serif};
-$heading_font_family: #{"Helvetica Neue", Arial, sans-serif};
-
-$icon_font_alpha: #{'ico-fonts'};
-
-///// Default webfont directory///////
------------------------------------------------------------------------------
-$webfont_directory: "/fonts/";
-
-///// default image directory ///////
------------------------------------------------------------------------------
-In Sinatra, the images folder resides in the public directory.  This directory is not made publically accessible,
-so simply referencing the images directory will be fine.
-$imgDir: "/images/";
-
-///// OOCSS generic base colors///////
------------------------------------------------------------------------------
-Red, green, yellow, blue, accent and black is not law, but a common theme in most designs.
-Using Toadstool, all you need to do is edit these 6 hex values and everything else is created
-by magic, unicorns and fairy dust!
-
-$alpha_primary:   #5a2e2e;        // red
-$bravo_primary:   #3e4147;        // green
-$charlie_primary: #fffedf;        // yellow
-$delta_primary:   #2a2c31;        // blue
-$echo_primary:    #dfba69;        // accent
-
-$alpha_gray:      #333;           //black
-
-///// Toadstool color math ///////
------------------------------------------------------------------------------
-Local color functions to create default color palette
-@import "color/color_math";
-@import "color/grayscale_math";
-@import "color/color_defaults";
-
-///// Grid configuration ///////
------------------------------------------------------------------------------
-setting default units of measurement for Toadstool grid solution
-$grid_type:                  12;             // sets default column grid
-$grid_uom:                   percent;        // use either ``em`` or ``percent``
-$grid_padding_l:             0;              // sets default left/right padding inside grid block
-$grid_padding_r:             0;              // sets default left/right padding inside grid block
-$grid_padding_tb:            0;              // sets default top/bottom padding inside grid block
-$grid_border:                0;              // sets default border width on all grid blocks
-$grid_child:                 none;           // sets parent child relationship between grid blocks
-$grid_align:                 default;        // by default grids float left. Optional argument is ``center``
-$col_base:                   10;             // equal to 10px in the standard 960.gs
-$col_gutter:                 $col_base * 2;  // sets default grid gutter width
-$grid_960:                   960 / 100%;     // grid math for percentages
-
-
-
-///// HTML 5 feature colors ///////
------------------------------------------------------------------------------
-used with the `ins` tag
-http://www.w3schools.com/tags/tag_ins.asp
-$ins_color:                            $charlie_color;
-
-used with the `mark` tag
-http://www.w3schools.com/html5/tag_mark.asp
-$mark_color:                           $charlie_color;
-
-webkit tap highlight color
-$webkit_tap_hightlight:                $delta_color_bravo;
-
-overrides the default content selection color in the browser
-$selection_color:                      $charlie_color;
-$selection_text_color:                 $primary_text;
-
-
-
-///// Config defaults for forms ///////
------------------------------------------------------------------------------
-$alert_back_color:        $alpha_color;
-
-$input_disabled:                $bravo_gray;
-$input_disabled_bkg:            lighten($input_disabled, 75%);
-$input_disabled_border:         lighten($input_disabled, 50%);
-$input_disabled_text:           lighten($input_disabled, 50%);
-
-$form_field_back_color:   $brightest_color;
-$form_field_focus_color:        $brightest_color;
-$form_field_fail_bkg:           $alpha_color_juliet;
-
-$form_field_border:             $charlie_gray;
-$form_field_border_fail:        $alpha_color_echo;
-$form_field_focus_border_color: $charlie_gray;
-
-$form_field_text_fail:          $alpha_color_echo;
-$form_label_color:              $alpha_gray;
-$optional_field_text_color:     $delta_gray;
-$instructional_text:            $charlie_gray;
-$placeholder_text:              $hotel_gray;
-$inline_alert_bkg_color:        $alpha_color_delta;
-$inline_alert_text_color:       $brightest_color;
-
-Non-color defaults (currently not represented in the SG view)
----------------------------------------------------------
-$form_field_border_radius:      $standard_round_corner;
-$form_field_text:               $primary_text;
-$form_field_height:             35;
-$form_field_padding:            6;
-$form_label_weight:             bold;
-$form_label_lineheight:         20;
-$inline_alert_lineheight:       30;
-$inline_alert_left_padding:     12;
-$inline_alert_weight:           bold;
-$inline_alert_top_margin:       12;
-$inline_alert_border_width:     1;
-
-
-
-///// Config defaults for buttons ///////
------------------------------------------------------------------------------
-$button-color:  $delta-color;
-$button-text-color: $brightest_color;
-$button-line-height: 32;
-$button-border-radius: 3;
-$button-padding: 20;
-$button-font-size: 18;
-$button-weight: bold;
-$button-text-shadow: true;
-$button-box-shadow: true;
-
-///// Config defaults for ``standard_rounded_border`` mixin ///////
------------------------------------------------------------------------------
-$standard_round_corner:                3;                // sets default border radius
-$standard_corner_width:                1px;              // sets default border width
-$standard_border_color:                $border_color;    // sets default border color
-
-///// Config defaults for ``standard_block_spacing`` mixin ///////
------------------------------------------------------------------------------
-$default_block_spacing:                20;               // sets margin-bottom
-
-///// Config defaults for site border style ///////
------------------------------------------------------------------------------
-$standard_border_style:                solid;
-
-///// Config defaults for ``standard_hr`` mixin ///////
------------------------------------------------------------------------------
-$standard_hr_spacing:                  40;               // sets padding and margin bottom
-$standard_hr_color:                    $delta_gray;
-$standard_hr_width:                    1px;
-
-///// Config values for all default shadows ///////
------------------------------------------------------------------------------
-$h-shadow:                             0;                // horizontal shadow settings
-$v-shadow:                             2;                // vertical shaddow settings
-$blur:                                 3;                // blur settings
-
-$inset_color:                          $shadow_color;    // for use with ``dual_box_shadow`` mixin
-$ih-shadow:                            0;                // inset horizontal shadow settings
-$iv-shadow:                            2;                // inset vertical shaddow settings
-$is-shadow:                            2;                // inset spread shaddow settings
-$iblur:                                3;                // inset blur settings
-```

bower.json

@@ -1,24 +0,0 @@
-{
-  "name": "hippie",
-  "description": "Hippie interweaves preeminent personal interface elements",
-  "main": "gulpfile.js",
-  "authors": [
-    "Interaktionsweise"
-  ],
-  "license": "ISC",
-  "homepage": "https://github.com/sthag/hippie",
-  "private": true,
-  "ignore": [
-    "**/.*",
-    "node_modules",
-    "bower_components",
-    "build/bower_components",
-    "build/vendor",
-    "test",
-    "tests"
-  ],
-  "dependencies": {
-    "jquery": "^3.2.1",
-    "normalize-css": "^7.0.0"
-  }
-}

gulpfile.js

@@ -1,243 +1,404 @@
 // Setup project
-var source_folder = {
+const hippie = {
-  watch: ['source/style/hippie/**/*.scss', 'source/style/**/*.scss', 'source/templates/**/*.+(html|njk)', 'source/pages/**/*.+(html|njk)'],
+  brand: 'hippie',
-  styles: ['source/style/hippie/*.+(scss|sass)', 'source/style/**/*.+(scss|sass)'],
+  jsFile: 'main',
-  scripts: ['source/code/hippie/variables.js', 'source/code/hippie/functions.js', 'source/code/hippie/global.js', 'source/code/**/*.coffee', '!source/vendor/**/*', ],
+  dbFile: 'db'
-  images: 'source/art/images/**/*',
-  pages: 'source/pages/**/*.+(html|njk)',
-  vendor: 'vendor/**/*',
-  root: 'source'
-};
-var build_folder = {
-  styles: 'build/css',
-  scripts: 'build/js',
-  art: 'build/art',
-  vendor: 'build/vendor',
-  pages: 'build/**/*.html',
-  root: 'build'
 }
 
-// Load plugins
+// Gulp requirements
-const fs = require('fs');
+const { watch, series, parallel } = require('gulp');
-const gulp = require('gulp');
+const { src, dest } = require('gulp');
-// const rename = require('gulp-rename');
-const del = require('del');
-const gulpif = require('gulp-if');
-const sequencer = require('run-sequence');
-const sourcemap = require('gulp-sourcemaps');
-const prefix = require('gulp-autoprefixer');
-const sass = require('gulp-sass');
-// const rubysass = require('gulp-ruby-sass');
-const nunjucks = require('gulp-nunjucks-render');
-// const cssnano = require('gulp-cssnano');
-const jshint = require('gulp-jshint');
-const jscs = require('gulp-jscs');
-// const useref = require('gulp-useref');
-const sasslint = require('gulp-sass-lint');
-// const imagemin = require('gulp-imagemin');
-const spritesmith = require('gulp.spritesmith');
-// const changed = require('gulp-changed');
-// const newer = require('gulp-newer');
-const plumber = require('gulp-plumber');
-const notify = require('gulp-notify');
-const data = require('gulp-data');
-const browsersync = require('browser-sync').create();
 
-// only used for js task
+const fs = require('fs');
-const concat = require('gulp-concat');
+const del = require('del');
+const plumber = require('gulp-plumber');
+// const notify = require('gulp-notify');
+
+const nunjucksRender = require('gulp-nunjucks-render');
+const data = require('gulp-data');
+const jsonConcat = require('gulp-json-concat');
+const browserSync = require('browser-sync'), server = browserSync.create();
+const sass = require('gulp-sass');
+const autoprefixer = require('gulp-autoprefixer');
+const sassLint = require('gulp-sass-lint');
+const rename = require('gulp-rename');
+const cleanCss = require('gulp-clean-css');
 const pump = require('pump');
-const composer = require('gulp-uglify/composer');
-const uglifyjs = require('uglify-es');
-const minify = composer(uglifyjs, console);
 const cache = require('gulp-cached');
 const remember = require('gulp-remember');
+const concat = require('gulp-concat');
+const uglify = require('gulp-uglify');
+const jshint = require('gulp-jshint');
+const gulpif = require('gulp-if');
+const changed = require('gulp-changed');
+const merge = require('merge-stream');
+// const spritesmith = require('gulp.spritesmith');
+// const buffer = require('vinyl-buffer');
+// const imagemin = require('gulp-imagemin');
 
+// Paths to data
+const input = {
+  root: 'source',
+  screens: 'source/screens/**/*.+(njk|html)',
+  templates: 'source/templates',
+  data: {
+    hippie: 'source/data/demo.json',
+    app: ['source/data/**/*.json', '!source/data/demo_data.json'],
+    watch: 'source/data/**/*.json',
+  },
+  style: 'source/style/**/*.s+(a|c)ss',
+  code: ['source/code/hippie/variables.js', 'source/code/hippie/functions.js', 'source/code/hippie/global.js', '!source/vendor/**/*'],
+  fonts: 'node_modules/@fortawesome/fontawesome-free/webfonts/**/*',
+  art: {
+    favicons: 'source/art/favicons/**/*.+(ico|png)',
+    sprites: 'source/art/sprites/**/*.png',
+    images: 'source/art/images/**/*.+(png|gif|jpg)'
+  },
+  vendor: 'vendor/**/*'
+  // watch: ['source/style/hippie/**/*.scss', 'source/style/**/*.scss', 'source/templates/**/*.+(html|njk)', 'source/screens/**/*.+(html|njk)']
+};
 
+const output = {
+  root: 'build',
+  screens: 'build/**/*.html',
+  data: 'build/json',
+  style: 'build/css',
+  code: 'build/js',
+  fonts: 'build/fonts',
+  art: 'build/art',
+  reports: 'reports',
+  vendor: 'build/vendor'
+};
 
+// Create tasks
 
-// this is for the looks
+// Clean build folder
-gulp.task('sass', function() {
+function clean() {
-  return gulp.src(source_folder.styles)
+  // You can use multiple globbing patterns as you would with `gulp.src`,
-  .pipe(plumbError('Error Running Sass'))
+  // for example if you are using del 2.0 or above, return its promise
-  .pipe(sourcemap.init())
+  return del(output.root +'/**');
+}
+// cleans the build folder
+// gulp.task('clean:dev', function() {
+//   return del.sync([
+//     output.style,
+//     output.screens,
+//     output.root+'/*.html'
+//   ]);
+// });
+
+// Automagically reload browsers
+function reload(done) {
+  server.reload();
+
+  done();
+}
+
+// Concatenate JSON files
+function json() {
+  return src(input.data.app)
+  .pipe(jsonConcat(jsonFile +'.json', function(data) {
+    return new Buffer(JSON.stringify(data));
+  }))
+  .pipe(gulp.dest(output.data));
+}
+
+// Transpile HTML
+function nunjucks() {
+	return src(input.screens)
+  .pipe(plumber())
+  .pipe(data(function() {
+    let data = JSON.parse(fs.readFileSync(input.data.hippie));
+    object = {hippie, data};
+    return object;
+  }))
+	.pipe(nunjucksRender({
+		path: input.templates,
+    envOptions: {
+      trimBlocks: true
+    }
+	}))
+	.pipe(dest(output.root));
+}
+// templating engine
+// gulp.task('nunjucks', function() {
+//   return gulp.src('source/screens/**/*.+(html|njk)')
+//   .pipe(plumbError('Error Running Nunjucks'))
+//   .pipe(data(function() {
+//     return JSON.parse(fs.readFileSync('./source/demo_data.json'))
+//   }))
+//   .pipe(nunjucks({
+//     path: output.templates,
+//     envOptions: {
+//       trimBlocks: true
+//     }
+//   }))
+//   .pipe(gulp.dest(output.root))
+//   .pipe(server.reload({
+//     stream: true
+//   }))
+// });
+
+// Serve files to the browser
+function serve(done) {
+  server.init({
+    index: "demo.html",
+    open: false,
+    server: output.root
+  });
+
+  done();
+}
+// automagically reload browsers
+// gulp.task('syncreload', function() {
+//   server.init({
+//     // ------------------------------------------------------------------------------
+//     // comment out the line below to get rid of the demo index page.
+//     // ------------------------------------------------------------------------------
+//     index: "demo.html",
+//     open: false,
+//     server: 'build'
+//     // online: false,
+//     // logLevel: "info",
+//     // proxy: "http://verser.vrt/virtual/",
+//     // watch: true,
+//   });
+// });
+
+// This is for the looks
+function style() {
+  return src(input.style)
+  .pipe(plumber())
+  // .pipe(plumbError('STYLE problems'))
   .pipe(sass({
-    includePaths: [source_folder.root+'/bower_components']
+    includePaths: [input.vendor +'/**/*.s+(a|c)ss']
   }))
-  .pipe(prefix(['>= 4%', 'last 2 version']))
+  .pipe(autoprefixer(['>= 4%', 'last 2 version']))
-  // .pipe(cssnano())
+  .pipe(dest(output.style))
-  .pipe(sourcemap.write())
+  .pipe(cleanCss())
-  .pipe(gulp.dest(build_folder.styles))
+  .pipe(rename({
-  .pipe(browsersync.reload({
+    suffix: '.min'
-    stream: true
   }))
+  .pipe(dest(output.style));
+}
+// Linting
+function styleLint() {
+  var file = fs.createWriteStream(output.reports +'/sass-lint.html');
+  var stream = src(input.style)
+  .pipe(plumber())
+  .pipe(sassLint({
+    configFile: '.sasslintrc',
+    files: {
+      ignore: input.vendor +'/**/*.s+(a|c)ss'
+    }
+  }))
+  .pipe(sassLint.format(file));
+
+  stream.on('finish', function() {
+    file.end();
   });
-// linting ...
-gulp.task('lint:scss', function() {
-  return gulp.src('source/style/**/*.scss')
-  .pipe(plumbError('SASSLint Error'))
-  .pipe(sasslint({
-    configFile: '.sass-lint.yml'
-  }))
-})
 
+  return stream;
+}
+// this is for the looks
+// gulp.task('sass', function() {
+//   return gulp.src(input.style)
+//   .pipe(plumbError('Error Running Sass'))
+//   .pipe(sourcemap.init())
+//   .pipe(sass({
+//     includePaths: [input.root+'/bower_components']
+//   }))
+//   .pipe(autoprefixer(['>= 4%', 'last 2 version']))
+//   // .pipe(cssnano())
+//   .pipe(sourcemap.write())
+//   .pipe(gulp.dest(output.style))
+//   .pipe(server.reload({
+//     stream: true
+//   }))
+// });
+// // linting ...
+// gulp.task('lint:scss', function() {
+//   return gulp.src('source/style/**/*.scss')
+//   .pipe(plumbError('SASSLint Error'))
+//   .pipe(sasslint({
+//     configFile: '.sass-lint.yml'
+//   }))
+// })
 
-// and this is functionality
+// Javascript for the win
-gulp.task('js', function(cb) {
+function code(cb) {
   pump([
-    gulp.src(source_folder.scripts),
+    src(input.code, { sourcemaps: true }),
-    cache('scripts'),
+    cache('code'),
-    // jshint('.jshintrc'),
+    concat(hippie.jsFile +'.js'),
-    // jshint.reporter('default'),
+    dest(output.code),
-    sourcemap.init(),
+    uglify(),
-    minify(),
+    remember('code'),
-    remember('scripts'),
+    rename({
-    concat('all.min.js'),
+      suffix: '.min'
-    sourcemap.write(),
+    }),
-    gulp.dest(build_folder.scripts),
+    dest(output.code, { sourcemaps: '.' }),
-    browsersync.stream()
   ], cb);
-});
+}
-// linting ...
+// Linting
-gulp.task('lint:js', function() {
+function codeLint() {
-  return gulp.src('source/code/**/*.js')
+  return src(input.code)
-  .pipe(plumbError('JSHint Error'))
+  .pipe(plumber())
   .pipe(jshint())
   .pipe(jshint.reporter('jshint-stylish'))
   .pipe(jshint.reporter('fail', {
     ignoreWarning: true,
     ignoreInfo: true
-  }))
+  }));
-  .pipe(jscs({
-    fix: false,
-    configPath: '.jscsrc'
-  }))
-  // .pipe(jscs.reporter());
-});
-
-
-// templating engine
-gulp.task('nunjucks', function() {
-  return gulp.src('source/pages/**/*.+(html|njk)')
-  .pipe(plumbError('Error Running Nunjucks'))
-  .pipe(data(function() {
-    return JSON.parse(fs.readFileSync('./source/demo_data.json'))
-  }))
-  .pipe(nunjucks({
-    path: ['source/templates'],
-    envOptions: {
-      trimBlocks: true
 }
-  }))
+// and this is functionality
-  .pipe(gulp.dest(build_folder.root))
+// gulp.task('js', function(cb) {
-  .pipe(browsersync.reload({
+//   pump([
-    stream: true
+//     gulp.src(input.code),
-  }))
+//     cache('code'),
-});
+//     // jshint('.jshintrc'),
+//     // jshint.reporter('default'),
+//     sourcemap.init(),
+//     minify(),
+//     remember('code'),
+//     concat('all.min.js'),
+//     sourcemap.write(),
+//     gulp.dest(output.code),
+//     server.stream()
+//   ], cb);
+// });
+// // linting ...
+// gulp.task('lint:js', function() {
+//   return gulp.src('source/code/**/*.js')
+//   .pipe(plumbError('JSHint Error'))
+//   .pipe(jshint())
+//   .pipe(jshint.reporter('jshint-stylish'))
+//   .pipe(jshint.reporter('fail', {
+//     ignoreWarning: true,
+//     ignoreInfo: true
+//   }))
+//   .pipe(jscs({
+//     fix: false,
+//     configPath: '.jscsrc'
+//   }))
+//   // .pipe(jscs.reporter());
+// });
 
+// Fonts
+function fonts() {
+  return src(input.fonts)
+  .pipe(plumber())
+  .pipe(dest(output.fonts))
+}
 
-// automagically reload browsers
+// Add art
-gulp.task('syncreload', function() {
+function art() {
-  browsersync.init({
+  // Move favicons to the root folder
-    // ------------------------------------------------------------------------------
+  let favicons = src(input.art.favicons)
-    // comment out the line below to get rid of the demo index page.
+  .pipe(changed(output.art))
-    // ------------------------------------------------------------------------------
+  .pipe(dest(output.root))
-    index: "demo.html",
-    open: false,
-    server: 'build'
-    // online: false,
-    // logLevel: "info",
-    // proxy: "http://verser.vrt/virtual/",
-    // watch: true,
-  });
-});
 
+  // Assemble sprites
 
+  // Move images to the root folder
+  let images = src(input.art.images)
+  .pipe(changed(output.art))
+  .pipe(dest(output.art))
+
+  return merge(favicons, images)
+}
 // creates sprites from files in art/sprites folder
-gulp.task('sprites', function() {
+// gulp.task('sprites', function() {
-  gulp.src('source/art/sprites/**/*')
+//   gulp.src('source/art/sprites/**/*')
-  .pipe(spritesmith({
+//   .pipe(spritesmith({
-    cssName: '_sprites.scss',
+//     cssName: '_sprites.scss',
-    imgName: 'sprites.png',
+//     imgName: 'sprites.png',
-    imgPath: '../art/sprites.png',
+//     imgPath: '../art/sprites.png',
-    // retinaSrcFilter:	'source/art/sprites/*@2x.png',
+//     // retinaSrcFilter:	'source/art/sprites/*@2x.png',
-    // retinaImgName:	'sprites@2x.png',
+//     // retinaImgName:	'sprites@2x.png',
-    // retinaImgPath:	'../art/sprites@2x.png'
+//     // retinaImgPath:	'../art/sprites@2x.png'
-  }))
+//   }))
-  .pipe(gulpif('*.png', gulp.dest(build_folder.art)))
+//   .pipe(gulpif('*.png', gulp.dest(output.art)))
-  .pipe(gulpif('*.scss', gulp.dest('source/style/hippie/mixins')));
+//   .pipe(gulpif('*.scss', gulp.dest('source/style/hippie/mixins')));
-});
+// });
-
 // copy art files
-gulp.task('art', function() {
+// gulp.task('art', function() {
-  return gulp.src(source_folder.images)
+//   return gulp.src(input.art)
-  .pipe(plumbError())
+//   .pipe(plumbError())
-  .pipe(gulp.dest(build_folder.art))
+//   .pipe(gulp.dest(output.art))
-  ;
+//   ;
-});
+// });
-
-// copy vendor files
-gulp.task('vendor', function() {
-  return gulp.src(source_folder.vendor)
-  .pipe(plumbError())
-  .pipe(gulp.dest(build_folder.vendor))
-  ;
-});
-
 // copy additional files
-gulp.task('favicon', function() {
+// gulp.task('favicon', function() {
-  return gulp.src('source/favicon.ico')
+//   return gulp.src('source/favicon.ico')
-  .pipe(plumbError())
+//   .pipe(plumbError())
-  .pipe(gulp.dest(build_folder.root))
+//   .pipe(gulp.dest(output.root))
-  ;
+//   ;
-});
+// });
-
-
-// cleans the build folder
-gulp.task('clean:dev', function() {
-  return del.sync([
-    build_folder.styles,
-    build_folder.pages,
-    build_folder.root+'/*.html'
-  ]);
-});
 
+// Gather dependencies for tools
+function vendor() {
+  return src(input.vendor)
+  .pipe(plumber())
+  .pipe(dest(output.vendor))
+}
+// copy vendor files
+// gulp.task('vendor', function() {
+//   return gulp.src(input.vendor)
+//   .pipe(plumbError())
+//   .pipe(gulp.dest(output.vendor))
+//   ;
+// });
 
+function overview() {
+  watch([input.screens, input.data.watch], series(nunjucks, reload));
+  watch(input.style, series(styleLint, style, reload));
+  watch(input.code, series(codeLint, code, reload));
+  watch(input.fonts, series(fonts, reload));
+  watch([input.art.favicons, input.art.sprites, input.art.images], series(art, reload));
+  // watch(input.data.app, series(json, reload));
+}
 
+const assets = parallel(fonts, art, vendor);
+const build = series(clean, assets, parallel(nunjucks, series(styleLint, style), series(codeLint, code)));
 
+exports.lint = parallel(styleLint, codeLint);
+exports.assets = assets;
+exports.build = build;
+exports.default = series(build, serve, overview);
 // watch over changes and react
 // split up into sub tasks
-gulp.task('watch-js', ['lint:js', 'js'], browsersync.reload);
+// gulp.task('watch-js', ['lint:js', 'js'], server.reload);
+//
+// gulp.task('overwatch', function() {
+//   gulp.watch('source/code/**/*.js', ['watch-js'])
+//   gulp.watch('source/style/**/*.+(scss|sass)', ['sass', 'lint:scss']);
+//   gulp.watch([
+//     'source/templates/**/*',
+//     'source/screens/**/*.+(html|njk)',
+//     'source/demo_data.json'
+//   ], ['nunjucks']);
+//   gulp.watch('source/art/**/*', ['sprites']);
+// });
+//
+//
+// // The default task (called when you run `gulp` from cli)
+// gulp.task('default', function(callback) {
+//   sequencer(
+//     'clean:dev',
+//     ['sprites', 'art', 'vendor', 'favicon', 'lint:js', 'lint:scss'],
+//     ['sass', 'js', 'nunjucks'],
+//     ['syncreload', 'overwatch'],
+//     callback
+//   )
+// });
 
-gulp.task('overwatch', function() {
+// function plumbError(errTitle) {
-  gulp.watch('source/code/**/*.js', ['watch-js'])
+//   return plumber({
-  gulp.watch('source/style/**/*.+(scss|sass)', ['sass', 'lint:scss']);
+//     errorHandler: notify.onError({
-  gulp.watch([
+//       // Customizing error title
-    'source/templates/**/*',
+//       title: errTitle || "GULP GENERAL PROBLEM",
-    'source/pages/**/*.+(html|njk)',
+//       message: "<%= error.message %>"
-    'source/demo_data.json'
+//     })
-  ], ['nunjucks']);
+//   });
-  gulp.watch('source/art/**/*', ['sprites']);
+// }
-});
-
-
-// The default task (called when you run `gulp` from cli)
-gulp.task('default', function(callback) {
-  sequencer(
-    'clean:dev',
-    ['sprites', 'art', 'vendor', 'favicon', 'lint:js', 'lint:scss'],
-    ['sass', 'js', 'nunjucks'],
-    ['syncreload', 'overwatch'],
-    callback
-  )
-});
-
-
-function plumbError(errTitle) {
-  return plumber({
-    errorHandler: notify.onError({
-      // Customizing error title
-      title: errTitle || "Error running Gulp",
-      message: "<%= error.message %>"
-    })
-  });
-}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hippie",
-  "version": "0.3.3",
+  "version": "0.4.0",
   "description": "Hippie interweaves preeminent personal interface elements",
   "main": "gulpfile.js",
   "scripts": {
@@ -10,37 +10,38 @@
     "type": "git",
     "url": "git+https://github.com/sthag/hippie.git"
   },
-  "author": "Interaktionsweise",
+  "author": "Stephan Hagedorn",
-  "license": "ISC",
+  "license": "MIT",
   "bugs": {
     "url": "https://github.com/sthag/hippie/issues"
   },
   "homepage": "https://github.com/sthag/hippie#readme",
   "devDependencies": {
-    "browser-sync": "^2.24.4",
+    "browser-sync": "^2.26.3",
-    "del": "^3.0.0",
+    "del": "^4.0.0",
-    "gulp": "^3.9.1",
+    "gulp": "^4.0.0",
-    "gulp-autoprefixer": "^4.1.0",
+    "gulp-autoprefixer": "^6.0.0",
     "gulp-cached": "^1.1.1",
+    "gulp-changed": "^3.2.0",
+    "gulp-clean-css": "^4.0.0",
     "gulp-concat": "^2.6.1",
     "gulp-data": "^1.3.1",
     "gulp-if": "^2.0.2",
-    "gulp-jscs": "^4.1.0",
     "gulp-jshint": "^2.1.0",
+    "gulp-json-concat": "^0.1.1",
     "gulp-notify": "^3.2.0",
     "gulp-nunjucks-render": "^2.2.2",
-    "gulp-plumber": "^1.2.0",
+    "gulp-plumber": "^1.2.1",
-    "gulp-remember": "^0.3.1",
+    "gulp-remember": "^1.0.1",
-    "gulp-sass": "^4.0.1",
+    "gulp-rename": "^1.4.0",
+    "gulp-sass": "^4.0.2",
     "gulp-sass-lint": "^1.4.0",
-    "gulp-sourcemaps": "^2.6.4",
+    "gulp-uglify": "^3.0.2",
-    "gulp-uglify": "^3.0.0",
     "gulp.spritesmith": "^6.9.0",
-    "jshint": "^2.9.5",
+    "jshint": "^2.10.2",
     "jshint-stylish": "^2.2.1",
-    "pump": "^1.0.3",
+    "merge-stream": "^1.0.1",
-    "run-sequence": "^2.2.1",
+    "pump": "^3.0.0"
-    "uglify-es": "^3.3.10"
   },
   "dependencies": {}
 }

source/code/hippie/functions.js

@@ -11,14 +11,14 @@ function setup() {
 }
 
 // get document coordinates of the element
-function getCoords(elem) {
+// function getCoords(elem) {
-	let box = elem.getBoundingClientRect();
+// 	let box = elem.getBoundingClientRect();
-
+//
-	return {
+// 	return {
-		top: box.top + pageYOffset,
+// 		top: box.top + pageYOffset,
-		left: box.left + pageXOffset
+// 		left: box.left + pageXOffset
-	};
+// 	};
-}
+// }
 
 // https://stackoverflow.com/a/488073/1444149
 function Utils() {}

source/screens/demo.njk

@@ -12,7 +12,7 @@
 {% block body_content %}
 <div class="wrap">
   <div class="hello">
-    <h2>This is HIPPIE</h2>
+    <h2>This is {{hippie.brand | upper}}</h2>
     <p>You can start using it by replacing this file with your own index page.</p>
     <p>To do this you need to open the file <code>/gulpfile.js</code> and comment out the line <code>index: "demo.html",</code>. Then you need to place your index file (<code>index.njk</code>) into the folder <code>/source/pages</code>.</p>
     <p>For a very basic start you can make a copy of the demo page <code>blank.njk</code>. You can find it at <code>/source/pages/demo</code>.</p>
@@ -20,7 +20,7 @@
     <h3>Overview</h3>
     <ul class="list_link">
       <!-- Loops through "demoadditionallinks" array -->
-      {% for link in demoadditionallinks %}
+      {% for link in data.demoadditionallinks %}
       <li><a href="{{link.href}}">{{link.text}}</a></li>
       {% endfor %}
     </ul>
@@ -33,7 +33,7 @@ C(")(")</pre>
   </div>
     <ul class="list_link">
       <!-- Loops through "demo-links" array -->
-      {% for link in demolinks %}
+      {% for link in data.demolinks %}
       <li><a href="{{link.href}}">{{link.text}}</a></li>
       {% endfor %}
     </ul>
@@ -43,7 +43,7 @@ C(")(")</pre>
 
 {% block script %}
 {{ super() }}
-<script src="./js/all.min.js" type="text/javascript"></script>
+<script src="./js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
 <script type="text/javascript">
 // Page specific
 // ------------------------------------------------------------------------------

source/screens/demo/elements.njk

@@ -67,7 +67,7 @@
 {% block script %}
 {{ super() }}
 <script src="../vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
-<script src="../js/all.min.js" type="text/javascript"></script>
+<script src="../js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
 <script type="text/javascript">
 // Page specific
 // ------------------------------------------------------------------------------

source/screens/demo/examples.njk

@@ -230,7 +230,7 @@
 {% block script %}
 {{ super() }}
 <script src="../vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
-<script src="../js/all.min.js" type="text/javascript"></script>
+<script src="../js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
 <script type="text/javascript">
 // Page specific
 // ------------------------------------------------------------------------------

source/screens/demo/intro.njk

@@ -586,7 +586,7 @@
 
 {% block script %}
 {{ super() }}
-<script src="../js/all.min.js" type="text/javascript"></script>
+<script src="../js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
 <script type="text/javascript">
 // Page specific
 // ------------------------------------------------------------------------------

source/screens/demo/os.njk

@@ -138,7 +138,7 @@
 {% block script %}
 {{ super() }}
 <script src="../vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
-<script src="../js/all.min.js" type="text/javascript"></script>
+<script src="../js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
 <script type="text/javascript">
 // Page specific
 // ------------------------------------------------------------------------------

source/screens/demo/tests.njk

@@ -34,7 +34,7 @@
 
 {% block script %}
 {{ super() }}
-<script src="../js/all.min.js" type="text/javascript"></script>
+<script src="../js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
 <script type="text/javascript">
 // Page specific
 // ------------------------------------------------------------------------------