gulp and file structure overhaul

new gulp setup
including new npm packages
new file structure
moved all development files to source/
used files are in build/ now

.jshintrc

@@ -0,0 +1,7 @@
+{
+  "undef": true,
+  "unused": true,
+  "globals": {
+    
+  }
+}

build/css/example.css

@@ -19,7 +19,7 @@
  * - Modules
  *
  */
-@import url(other/normalize.css);
+@import url(../../vendor/normalize.css);
 .sym_glass::before {
   content: ""; }
 
@@ -155,6 +155,7 @@ textarea:not([disabled]):focus {
 
 .hover_back_change {
   background-color: #666666;
+  -webkit-transition: background-color .2s ease-in-out;
   transition: background-color .2s ease-in-out; }
   .hover_back_change:hover {
     background-color: gray; }
@@ -162,27 +163,41 @@ textarea:not([disabled]):focus {
 .hover_full_view_change {
   z-index: 100;
   background-color: rgba(0, 0, 0, 0.5);
+  -webkit-transition: background-color .2s ease-in-out;
   transition: background-color .2s ease-in-out;
   pointer-events: none; }
 
 .flex, .flex__wrap, .flex__row, .flex__column_wrap, .nav__column ul {
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex; }
 
 .flex__wrap {
-  flex-wrap: wrap; }
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap; }
 
 .flex__row {
-  flex-direction: column;
+  -webkit-box-orient: vertical;
-  justify-content: flex-start; }
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-pack: start;
+      -ms-flex-pack: start;
+          justify-content: flex-start; }
 
 .flex__child, .flex__column_wrap .column, .nav__column ul li {
-  flex: 0 1 auto; }
+  -webkit-box-flex: 0;
+      -ms-flex: 0 1 auto;
+          flex: 0 1 auto; }
 
 .flex__child_one {
-  flex: 1; }
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1; }
 
 .flex__child_end {
-  align-self: flex-end; }
+  -ms-flex-item-align: end;
+      align-self: flex-end; }
 
 .txt_light_color {
   color: #666666; }
@@ -249,7 +264,8 @@ html {
 
 body {
   position: relative;
-  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
   font-family: Roboto, Segoe UI, Liberation Sans, Source Sans, Trebuchet MS, Helvetica, Arial, sans-serif, sans;
   font-size: 17px;
   line-height: 1;
@@ -258,7 +274,8 @@ body {
   body *,
   body ::before,
   body ::after {
-    box-sizing: inherit; }
+    -webkit-box-sizing: inherit;
+            box-sizing: inherit; }
   body:hover .layer__hover {
     background-color: transparent; }
 
@@ -408,15 +425,20 @@ figure {
   margin-left: 25%; }
 
 .block__column_line {
-  column-rule: 1px solid black; }
+  -webkit-column-rule: 1px solid black;
+          column-rule: 1px solid black; }
 
 .block__column_2 {
-  column-count: 2;
+  -webkit-column-count: 2;
-  column-gap: 32px; }
+          column-count: 2;
+  -webkit-column-gap: 32px;
+          column-gap: 32px; }
 
 .block__column_3 {
-  column-count: 3;
+  -webkit-column-count: 3;
-  column-gap: 64px; }
+          column-count: 3;
+  -webkit-column-gap: 64px;
+          column-gap: 64px; }
 
 .box__space {
   position: relative;
@@ -452,7 +474,9 @@ figure {
   background-color: rgba(0, 0, 0, 0.1); }
 
 .flex__column_wrap .column {
-  flex-grow: 1; }
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1; }
 
 a {
   color: #52bed1;
@@ -466,6 +490,7 @@ a {
   border-color: black;
   background-color: transparent;
   color: black;
+  -webkit-transition: color 150ms ease;
   transition: color 150ms ease; }
   .a__line:active, .a__line:focus, .a__line:hover {
     background-color: #0c85ff;
@@ -754,7 +779,9 @@ nav li {
   .nav__column ul {
     margin: 0 128px; }
     .nav__column ul li {
-      flex-grow: 1;
+      -webkit-box-flex: 1;
+          -ms-flex-positive: 1;
+              flex-grow: 1;
       margin: 0;
       text-align: center; }
       .nav__column ul li a {
@@ -844,7 +871,8 @@ nav li {
   }
   */ }
   .card_body .bkg_box {
-    transition-duration: 800ms;
+    -webkit-transition-duration: 800ms;
+            transition-duration: 800ms;
     overflow: hidden;
     vertical-align: top;
     z-index: -1; }
@@ -852,18 +880,12 @@ nav li {
     position: relative; }
   .card_body .flex_wrap_center {
     display: -webkit-box;
-    display: -webkit-flex;
-    display: -moz-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
-    -webkit-align-items: center;
-    -moz-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: center;
-    -webkit-justify-content: center;
-    -moz-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     height: 100%; }
@@ -986,12 +1008,9 @@ nav li {
   left: 0;
   background-color: rgba(183, 224, 240, 0.1) !important;
   -webkit-transition: height 0.5s ease;
-  -ms-transition: height 0.5s ease;
-  -moz-transition: height 0.5s ease;
-  -o-transition: height 0.5s ease;
   transition: height 0.5s ease; }
 
-.print_body [class^="din"] {
+.print_body *[class^="din"] {
   background-color: white; }
 
 .print_body {
@@ -1050,18 +1069,27 @@ nav li {
     .print_body *[class^="din"] .page_head {
       page: cover; }
     .print_body *[class^="din"] .page_foot {
+      display: -webkit-box;
+      display: -ms-flexbox;
       display: flex;
-      flex-direction: row; }
+      -webkit-box-orient: horizontal;
+      -webkit-box-direction: normal;
+          -ms-flex-direction: row;
+              flex-direction: row; }
       .print_body *[class^="din"] .page_foot *:last-child {
         margin-bottom: 0; }
       .print_body *[class^="din"] .page_foot p, .print_body *[class^="din"] .page_foot .block__column_2, .print_body *[class^="din"] .page_foot .block__column_3, .print_body *[class^="din"] .page_foot caption {
-        flex: 1 0 auto;
+        -webkit-box-flex: 1;
+            -ms-flex: 1 0 auto;
+                flex: 1 0 auto;
         margin: 0;
         font-size: 8pt;
         line-height: 10pt;
         text-align: center; }
       .print_body *[class^="din"] .page_foot .page_no {
-        flex: 1 0 auto;
+        -webkit-box-flex: 1;
+            -ms-flex: 1 0 auto;
+                flex: 1 0 auto;
         font-size: 20pt;
         line-height: 1;
         text-align: right; }
@@ -1109,6 +1137,7 @@ nav li {
 .header__fix {
   position: relative;
   top: 0;
+  left: 0;
   width: 100%;
   background-color: rgba(39, 63, 139, 0.6); }
   .header__fix nav a:active, .header__fix nav a:focus, .header__fix nav a:hover {
@@ -1272,5 +1301,3 @@ nav li {
   padding: 0 4px; }
 
 
-
-/*# sourceMappingURL=example.css.map */

demo-explorer.html

@@ -11,9 +11,12 @@
 	<meta name="robots" content="noindex">
 
 	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" />
+	<link rel="icon" href="favicon.ico" type="image/vnd.microsoft.icon">
+	<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
 
 	<!--    <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,500italic,700' rel='stylesheet' type='text/css'>-->
-	<link rel="stylesheet" type="text/css" media="all" href="./example.css"/>
+	<link rel="stylesheet" type="text/css" media="all" href="./build/css/example.min.css"/>
 </head>
 
 <body>
@@ -143,10 +146,8 @@
 	  src="https://code.jquery.com/jquery-3.2.1.min.js"
 	  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
 	  crossorigin="anonymous"></script>
-	<script src="./code/vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
+	<script src="./vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
-	<script src="./code/variables.js" type="text/javascript"></script>
+	<script src="./build/js/all.min.js" type="text/javascript"></script>
-	<script src="./code/functions.js" type="text/javascript"></script>
-	<script src="./code/global.js" type="text/javascript"></script>
 	<script type="text/javascript">
 	// Page specific
 	// ------------------------------------------------------------------------------

demo-index.html

@@ -11,9 +11,12 @@
 	<meta name="robots" content="noindex">
 
 	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" />
+	<link rel="icon" href="favicon.ico" type="image/vnd.microsoft.icon">
+	<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
 
 	<!--    <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,500italic,700' rel='stylesheet' type='text/css'>-->
-	<link rel="stylesheet" type="text/css" media="all" href="./example.css"/>
+	<link rel="stylesheet" type="text/css" media="all" href="./build/css/example.min.css"/>
 </head>
 
 <body>
@@ -26,6 +29,7 @@
 		<nav class="nav__page_meta">
 			<ul>
 				<li class="magic"><a href="#begin" id="js_scrolltop" class="a_button_meta"><img src="./art/up.png" alt="" width="32" height="64"></a></li>
+				<li><button class="a_button_meta">Show Meta Information</button></li>
 				<li><a href="#end" id="js_scrolldown" class="a_button_meta"><img src="./art/down.png" alt="" width="32" height="32"></a></li>
 			</ul>
 		</nav>
@@ -629,14 +633,27 @@ nav.nav__center_old>ul>(li>a.a__button{Typ $})*4</code></pre>
 	  src="https://code.jquery.com/jquery-3.2.1.min.js"
 	  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
 	  crossorigin="anonymous"></script>
-	<script src="./code/vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
+	<script src="./vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
-	<script src="./code/variables.js" type="text/javascript"></script>
+	<script src="./build/js/all.min.js" type="text/javascript"></script>
-	<script src="./code/functions.js" type="text/javascript"></script>
-	<script src="./code/global.js" type="text/javascript"></script>
 	<script type="text/javascript">
 	// Page specific
 	// ------------------------------------------------------------------------------
+	$( document ).ready(function() {
+		// jq-sticky-anything
+		$('#js_demo_fix').stickThis({
+			pushup: '#js_demo_stop'
+		});
+	});
 
+	// $(window).scroll(function(){
+	// 	var windowTopPos = $(window).scrollTop();
+	// 	var footerTopPos = $('#js_demo_stop').offset().top;
+	// 	var navBottomPos = $('#js_demo_fix').offset().top + $('#js_demo_fix').outerHeight();
+	//
+	// 	if(navBottomPos >= footerTopPos) {
+	// 		$('#js_demo_fix').css('position', 'absolute');
+	// 	}
+	// });
 	</script>
 </body>
 </html>

demo-presentation.html

@@ -11,9 +11,12 @@
 	<meta name="robots" content="noindex">
 
 	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" />
+	<link rel="icon" href="favicon.ico" type="image/vnd.microsoft.icon">
+	<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
 
 	<!--    <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,500italic,700' rel='stylesheet' type='text/css'>-->
-	<link rel="stylesheet" type="text/css" media="all" href="./example.css"/>
+	<link rel="stylesheet" type="text/css" media="all" href="./build/css/example.min.css"/>
 </head>
 
 <body>
@@ -28,10 +31,8 @@
 	  src="https://code.jquery.com/jquery-3.2.1.min.js"
 	  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
 	  crossorigin="anonymous"></script>
-	<script src="./code/vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
+	<script src="./vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
-	<script src="./code/variables.js" type="text/javascript"></script>
+	<script src="./build/js/all.min.js" type="text/javascript"></script>
-	<script src="./code/functions.js" type="text/javascript"></script>
-	<script src="./code/global.js" type="text/javascript"></script>
 	<script type="text/javascript">
 	// Page specific
 	// ------------------------------------------------------------------------------

demo-raw.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+	<meta charset="utf-8">
+
+	<title>HIPPIE Dummy</title>
+
+	<meta name="author" content="Interaktionsweise">
+	<meta name="description" content="hippie example">
+	<meta name="generator" content="Notepad++, Atom">
+	<meta name="robots" content="noindex">
+
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" />
+	<link rel="icon" href="favicon.ico" type="image/vnd.microsoft.icon">
+	<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
+
+	<!--    <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,500italic,700' rel='stylesheet' type='text/css'>-->
+	<link rel="stylesheet" type="text/css" media="all" href="./build/css/example.min.css"/>
+</head>
+
+<body>
+
+	<script
+	  src="https://code.jquery.com/jquery-3.2.1.min.js"
+	  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
+	  crossorigin="anonymous"></script>
+	<script src="./build/js/all.min.js" type="text/javascript"></script>
+	<script type="text/javascript">
+	// Page specific
+	// ------------------------------------------------------------------------------
+
+	</script>
+</body>
+</html>

gulpfile.js

@@ -1,43 +1,105 @@
-const gulp = require('gulp');
+// Setup project
-const sass = require('gulp-ruby-sass');
+var source = {
-const sourcemaps = require('gulp-sourcemaps');
+  styles: 'source/style/example.scss',
-const plumber = require('gulp-plumber');
+  scripts: ['source/code/variables.js', 'source/code/functions.js', 'source/code/global.js', 'source/code/**/*.coffee', '!source/vendor/**/*', ],
-const notify = require('gulp-notify');
+  images: 'source/art/**/*'
-const livereload = require('gulp-livereload');
+};
+var build = {
+  styles: 'build/css',
+  scripts: 'build/js',
+  images: 'build/art'
+}
 
-gulp.task('default', function(){
+// Load plugins
-	console.log('default gulp task...')
+const gulp = require('gulp'),
+      rename = require('gulp-rename'),
+      del = require('del');
+      concat = require('gulp-concat'),
+      pump = require('pump'),
+      sourcemap = require('gulp-sourcemaps'),
+      prefix = require('gulp-autoprefixer'),
+      sass = require('gulp-ruby-sass'),
+      cssnano = require('gulp-cssnano'),
+      jshint = require('gulp-jshint'),
+      uglify = require('gulp-uglify'),
+      // imagemin = require('gulp-imagemin'),
+      cache = require('gulp-cached'),
+      remember = require('gulp-remember'),
+      changed = require('gulp-changed'),
+      notify = require('gulp-notify'),
+      browsersync = require('browser-sync').create();
+
+
+// Task - Clean build directory
+gulp.task('clean', function() {
+  return del([build.scripts, build.styles, 'build/**']);
 });
 
-gulp.task('sass', () =>
+// Task - Styles
-sass('./*.scss', {sourcemap: true})
+gulp.task('styles', () =>
-// .on('error', sass.logError)
+  sass(source.styles, {sourcemap: true})
-.pipe(plumber(errorReport("sass error")))
+  .on('error', sass.logError)
-.pipe(sourcemaps.write('./'))
+  .pipe(prefix('last 2 version'))
-.pipe(gulp.dest('./'))
+  .pipe(gulp.dest(build.styles))
-.pipe(livereload())
+  .pipe(rename({suffix: '.min'}))
+  .pipe(cssnano())
+  .pipe(sourcemap.write('.', {
+    includeContent: false,
+    sourceRoot: 'source'
+  }))
+  .pipe(gulp.dest(build.styles))
+  .pipe(browsersync.stream({match: '**/*.css'}))
+  // .pipe(notify({message: 'Style task complete'}))
 );
 
-gulp.task('watch', function() {
+// Task - Scripts
-	livereload.listen();
+gulp.task('scripts', function(cb) {
-	gulp.watch('./**/*.scss', ['sass']);
+  pump([
-	gulp.watch(['*.html']).on('change', livereload.changed);
+    gulp.src(source.scripts),
-	// gulp.watch('js/src/*.js', ['js']);
+    cache('scripts'),
-	// gulp.watch('img/src/*.{png,jpg,gif}', ['img']);
+    jshint('.jshintrc'),
-
+    jshint.reporter('default'),
+    sourcemap.init(),
+    uglify(),
+    remember('scripts'),
+    concat('all.min.js'),
+    sourcemap.write(),
+    gulp.dest(build.scripts),
+    browsersync.stream()
+  ], cb);
 });
 
-gulp.task('default', ['sass', 'watch']);
+// Task - Images
+gulp.task('images', function() {
+  return gulp.src(source.images)
+  .pipe(changed(cache(imagemin({
+    optimizationLevel: 3,
+    progressive: true,
+    interlaced: true })))
+  )
+  .pipe(gulp.dest(build.images))
+  .pipe(notify({ message: 'Images task complete' }))
+  ;
+});
 
+// Watch for file changes
+gulp.task('watch', ['clean', 'styles', 'scripts'], function() {
+  browsersync.init({
+    server: ".",
+    // proxy: "http://verser.vrt/virtual/"
+  });
 
+  gulp.watch(source.styles, ['styles']);
+  gulp.watch(source.scripts, ['scripts']).on('change', function(event) {
+    if (event.type === 'deleted') {
+      delete cache.caches['scripts'][event.path];
+      remember.forget('scripts', event.path);
+    }
+  });
+  gulp.watch("./*.html").on('change', browsersync.reload);
+  // gulp.watch(['build/**']).on('change', browsersync.reload);
+  // gulp.watch(source.images, ['images']);
+});
 
-function errorReport(errTitle) {
+// The default task (called when you run `gulp` from cli)
-	return plumber({
+gulp.task('default', ['clean', 'styles', 'scripts']);
-		errorHandler: notify.onError({
-			// Customizing error title
-			title: errTitle || "Error running Gulp",
-			message: "Error: <%= error.message %>",
-			sound: true
-		})
-	});
-}

package.json

@@ -17,12 +17,23 @@
   },
   "homepage": "https://github.com/sthag/hippie#readme",
   "devDependencies": {
+    "browser-sync": "^2.18.13",
+    "del": "^3.0.0",
     "gulp": "^3.9.1",
-    "gulp-livereload": "^3.8.1",
+    "gulp-autoprefixer": "^4.0.0",
+    "gulp-cached": "^1.1.1",
+    "gulp-changed": "^3.1.0",
+    "gulp-concat": "^2.6.1",
+    "gulp-cssnano": "^2.1.2",
+    "gulp-jshint": "^2.0.4",
     "gulp-notify": "^3.0.0",
-    "gulp-plumber": "^1.1.0",
+    "gulp-remember": "^0.3.1",
+    "gulp-rename": "^1.2.2",
     "gulp-ruby-sass": "^2.1.1",
-    "gulp-sourcemaps": "^2.6.0"
+    "gulp-sourcemaps": "^2.6.1",
+    "gulp-uglify": "^3.0.0",
+    "jshint": "^2.9.5",
+    "pump": "^1.0.2"
   },
   "dependencies": {}
 }

source/code/functions.js

@@ -6,14 +6,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/code/global.js

@@ -119,13 +119,6 @@ $( document ).ready(function() {
 
 
 
-	// jq-sticky-anything
-	$('#js_demo_fix').stickThis({
-		pushup: '#js_demo_stop'
-	});
-
-
-
 });
 
 

source/code/variables.js

@@ -1,5 +1,5 @@
-var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
+var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
-var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
+var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
 
 var full_view_hover = false;
 

source/style/_abovethefold.scss

@@ -8,9 +8,9 @@
 
 
 // Reset
-// Use a file outside of hippie i.e. other/normalize.css
+// Use a file outside of hippie i.e. vendor/normalize.css
 // -----------------------------------------------------------------------------
-// @import "other/normalize.css";
+// @import "vendor/normalize.css";
 
 
 

source/style/_hippie.scss

@@ -21,10 +21,10 @@
 
 
 // Reset
-// Use a file outside of hippie i.e. other/normalize.css
+// Use a file outside of hippie i.e. vendor/normalize.css
 // -----------------------------------------------------------------------------
-@import "other/normalize.css";
+@import "../../vendor/normalize.css";
-// @import "other/YOUR-FILES.css";
+// @import "vendor/YOUR-FILES.css";
 
 
 
@@ -39,7 +39,7 @@
 // Fonts
 // Use a central file outside of hippie for font definitions with @font-face
 // -----------------------------------------------------------------------------
-// @import "other/fonts.css";
+// @import "vendor/fonts.css";
 
 
 

source/style/modules/demo/_demo_module.scss

@@ -39,6 +39,7 @@
 .header__fix {
 	position: relative;
 	top: 0;
+	left: 0;
 	width: 100%;
 	background-color: transparentize($charlie_color, .4);