Merge branch 'development' into testing-npm-scripts

- Added nunjucks-cli dependency
- Added npm script for nunjucks

package.json

@@ -2,53 +2,59 @@
   "name": "hippie",
   "version": "0.4.2",
   "description": "Hippie interweaves preeminent personal interface elements",
-  "main": "gulpfile.js",
+  "keywords": [
-  "scripts": {
+    "web",
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "frontend",
-    "preversion": "npm test",
+    "framework",
-    "version": "gulp build && git add -A dist",
+    "sass",
-    "postversion": "git push && git push --tags"
+    "css",
+    "html",
+    "js"
+  ],
+  "homepage": "https://github.com/sthag/hippie#readme",
+  "bugs": {
+    "url": "https://github.com/sthag/hippie/issues",
+    "email": "klarsichtweise@gmail.com"
   },
+  "license": "MIT",
+  "author": "Stephan Hagedorn",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/sthag/hippie.git"
   },
-  "author": "Stephan Hagedorn",
+  "scripts": {
-  "license": "MIT",
+    "hello": "echo -n \"This is \" && node -p \"process.env.npm_package_name\" | tr '[:lower:]' '[:upper:]'",
-  "bugs": {
+    "test": "echo \"Error: no test specified\" && exit 1",
-    "url": "https://github.com/sthag/hippie/issues"
+    "preversion": "npm test",
+    "version": "gulp build && git add -A dist",
+    "postversion": "git push && git push --tags",
+    "clean": "npm run clean:build & npm run clean:deploy & npm run clean:report & npm run clean:test",
+    "clean:build": "rm -rf build/*",
+    "clean:deploy": "rm -rf deploy/*",
+    "clean:report": "rm -rf report/*",
+    "clean:test": "rm -rf test/*",
+    "serve": "browser-sync start --no-open --index 'demo.html' --server 'build'",
+    "serve:watch": "browser-sync start --open false --index 'demo.html' --files 'build' --server 'build'",
+    "style": "npm run style:compile & npm run style:post",
+    "style:compile": "sass source/style:build/css --load-path=vendor",
+    "style:post": "postcss build/css/*.css -d deploy/css",
+    "style:watch": "sass --watch source/style:build/css --load-path=vendor",
+    "nunjucks": "nunjucks source/screens/**/*.njk -p source/templates -o build/test",
+    "develop": "npm run style:watch & npm run serve:watch"
+  },
+  "config": {
+    "port": "3000"
   },
-  "homepage": "https://github.com/sthag/hippie#readme",
   "devDependencies": {
-    "@babel/core": "~7",
+    "autoprefixer": "^10.4.8",
-    "@babel/preset-env": "~7",
     "browser-sync": "^2.27.10",
-    "del": "^7.0.0",
+    "cssnano": "^5.1.13",
-    "gulp": "^4.0.2",
-    "gulp-autoprefixer": "^8.0.0",
-    "gulp-babel": "~8.0",
-    "gulp-cached": "^1.1.1",
-    "gulp-changed": "^4.0.3",
-    "gulp-clean-css": "~4",
-    "gulp-concat": "^2.6.1",
-    "gulp-data": "^1.3.1",
-    "gulp-if": "~3",
-    "gulp-jshint": "~2",
-    "gulp-json-concat": "~0.2",
-    "gulp-notify": "^4.0.0",
-    "gulp-nunjucks-render": "^2.2.3",
-    "gulp-plumber": "^1.2.1",
-    "gulp-remember": "^1.0.1",
-    "gulp-rename": "~2",
-    "gulp-sass": "~5",
-    "gulp-sass-lint": "^1.4.0",
-    "gulp-uglify": "^3.0.2",
-    "gulp-useref": "^5.0.0",
-    "gulp.spritesmith": "^6.13.0",
     "jshint": "~2",
     "jshint-stylish": "^2.2.1",
-    "merge-stream": "^2.0.0",
+    "nunjucks-cli": "^1.0.0",
-    "pump": "^3.0.0",
+    "postcss": "^8.4.16",
-    "sass": "^1.54.0"
+    "postcss-cli": "^10.0.0",
-  }
+    "sass": "^1.54.4"
+  },
+  "private": true
 }

postcss.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  plugins: [
+    require('autoprefixer')({
+      env: '>= 4%, last 2 version'
+    }),
+    require('cssnano')({
+      preset: 'default',
+    }),
+  ],
+};

source/style/hippie-style

@@ -1 +1 @@
-Subproject commit 0214054c81aaa29150d97efa0d03b6328c0258fb
+Subproject commit bf818600f866abb2e1541aa70acc03ca2ebcd148

source/style/modules/demo/_demo_module.scss

@@ -180,31 +180,31 @@
 }
 
 .demo__query_example {
-	@include goingLarge($screen_tiny * 1px) {background-color: $alpha_color; }
+	@include goingLarge($screen_tiny) {background-color: $alpha_color; }
-	@include goingLarge($screen_small * 1px) {background-color: $bravo_color; }
+	@include goingLarge($screen_small) {background-color: $bravo_color; }
-	@include goingLarge($screen_medium * 1px) {background-color: $charlie_color; }
+	@include goingLarge($screen_medium) {background-color: $charlie_color; }
-	@include goingLarge($screen_large * 1px) {background-color: $delta_color; }
+	@include goingLarge($screen_large) {background-color: $delta_color; }
-	@include goingLarge($screen_huge * 1px) {background-color: $echo_color; }
+	@include goingLarge($screen_huge) {background-color: $echo_color; }
-	@include goingLarge($screen_gigantic * 1px) {background-color: $foxtrot_color; }
+	@include goingLarge($screen_gigantic) {background-color: $foxtrot_color; }
 	margin-bottom: $space_small;
 	padding: $space_small;
 	text-align: center;
 
 	&:after {
 		@extend code;
-		@include goingLarge($screen_tiny * 1px) {
+		@include goingLarge($screen_tiny) {
 			& { content: '768px'; }
 		}
-		@include goingLarge($screen_small * 1px) {
+		@include goingLarge($screen_small) {
 			& { content: '1024px'; }
 		}
-		@include goingLarge($screen_medium * 1px) {
+		@include goingLarge($screen_medium) {
 			& { content: '1280px'; }
 		}
-		@include goingLarge($screen_huge * 1px) {
+		@include goingLarge($screen_huge) {
 			& { content: '1680px'; }
 		}
-		@include goingLarge($screen_gigantic * 1px) {
+		@include goingLarge($screen_gigantic) {
 			& { content: '1920px'; }
 		}
 		content: '< 768px';

source/templates/hippie/partials/_head_script.njk

@@ -1,9 +1,9 @@
 <!-- head.script.partial -->
 <script>
   // Entry script at page init
-  var debugOn = false;
+  let debugOn = false;
-  var debugOnScreen = true;
+  let debugOnScreen = true;
-  var assetsLoaded = false;
+  let assetsLoaded = false;
 
   // Get the current time difference between page
   // load and when this func was invoked
@@ -19,12 +19,30 @@
       : new Array(width - n.length + 1).join(z) + n;
   }
 
-  // log message to console and add
+  // Log message to console and add
   // performance measuring information
   function logPerf(msg, arg) {
     if (debugOn) {
       if (debugOnScreen && assetsLoaded) {
-        if (!$('#jsLogPerf').length) {
+        if (!document.getElementById('jsLogPerf')) {
+          let wrap = document.createElement('div');
+          let box = document.createElement('div');
+
+          wrap.style.position = 'relative';
+          box.style.cssText = `position: fixed;
+            bottom: 16px;
+            right: 40px;
+            zIndex: 1000;
+            padding: 0 8px;
+            background: rgba(255,255,255,.6);
+            color: rgb(128);
+            fontSize: 1rem;`;
+          box.id = 'jsLogPerf';
+
+          wrap.prepend(box);
+          document.body.prepend(wrap);
+
+          /*
           $('<div><div></div></div>')
             .css('position', 'relative')
             .find('div')
@@ -41,21 +59,39 @@
             })
             .end()
             .prependTo('body');
+          */
           // $('body').prepend('<div style="position:relative;"></div>');
           // $('div').first().prepend('<div id="jslogPerf" style="position:fixed;bottom:8px;right:16px;z-index:1000;padding:8px;background:rgb(0,255,255,.5)"></div>');
         }
-        $('#jsLogPerf').append('<p class="code_solo txt_smaller"><b>' + pad(getTimeDiff(), 5) + '</b>ms :: ' + msg + '</p>');
+
-        // Alternative short-circuit evaluation
+        let code = document.createElement('code');
+
+        code.style.cssText = `display: block;
+          margin: 8px 0;
+          padding: 1px 4px;
+          background-color: transparent;
+          color: black;
+          font-size: 12px;
+          line-height: 1.1;`;
+        code.innerHTML = '<b>' + pad(getTimeDiff(), 5) + '</b>ms :: ' + msg + '';
+
+        document.getElementById('jsLogPerf').append(code);
+        // document.getElementById('jsLogPerf').append('<p class="code_solo txt_smaller"><b>' + pad(getTimeDiff(), 5) + '</b>ms :: ' + msg + '</p>');
+        // $('#jsLogPerf').append('<p class="code_solo txt_smaller"><b>' + pad(getTimeDiff(), 5) + '</b>ms :: ' + msg + '</p>');
+        
+        // NOTE: Alternative short-circuit evaluation
         // needs element in document but prevents error if not
         // $log = $log || $('#jslogPerf');
         // $log.append('<p style="margin-bottom:4px;font-size:.75em;"><b>' + getTimeDiff() + '</b>ms :: ' + msg);
       }
+
       if (window.console) {
         console.debug(pad(getTimeDiff(), 5) + 'ms :: ' + msg, (
           arg
           ? arg
           : ''));
-        // NOTE Non standard feature. Not available on IE
+
+        // NOTE: Non standard feature. Not available on IE
         if (console.timeStamp) {
           console.timeStamp(msg);
         }