demo.2

- restructured input files
- sorted gulpfile and separated old stuff
- next up are node module updates

gulpfile.js

@@ -1,13 +1,14 @@
 // Setup project
-var source = {
+var source_folder = {
-  watch: ['source/style/**/*.scss', 'source/templates/**/*.+(html|njk)', 'source/pages/**/*.+(html|njk)'],
+  watch: ['source/style/hippie/**/*.scss', 'source/style/**/*.scss', 'source/templates/**/*.+(html|njk)', 'source/pages/**/*.+(html|njk)'],
-  styles: ['source/style/example.scss', 'source/style/maintenance.scss'],
+  styles: ['source/style/hippie/*.+(scss|sass)', 'source/style/**/*.+(scss|sass)'],
-  scripts: ['source/code/variables.js', 'source/code/functions.js', 'source/code/global.js', 'source/code/**/*.coffee', '!source/vendor/**/*', ],
+  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/**/*'
+  vendor: 'vendor/**/*',
+  root: 'source'
 };
-var build = {
+var build_folder = {
   styles: 'build/css',
   scripts: 'build/js',
   images: 'build/art',
@@ -15,69 +16,60 @@ var build = {
   root: 'build'
 }
 
-
-var fs = require('fs');
 // Load plugins
+var fs = require('fs');
 const gulp = require('gulp'),
-rename = require('gulp-rename'),
+// rename = require('gulp-rename'),
 del = require('del');
 gulpif = require('gulp-if');
 sequencer = require('run-sequence');
-concat = require('gulp-concat'),
+// concat = require('gulp-concat'),
-pump = require('pump'),
+// pump = require('pump'),
 sourcemap = require('gulp-sourcemaps'),
 prefix = require('gulp-autoprefixer'),
 sass = require('gulp-sass'),
-rubysass = require('gulp-ruby-sass'),
+// rubysass = require('gulp-ruby-sass'),
 nunjucks = require('gulp-nunjucks-render');
-cssnano = require('gulp-cssnano'),
+// cssnano = require('gulp-cssnano'),
 jshint = require('gulp-jshint'),
 jscs = require('gulp-jscs'),
-useref = require('gulp-useref'),
+// useref = require('gulp-useref'),
 sasslint = require('gulp-sass-lint'),
-uglifyjs = require('uglify-es'),
+// uglifyjs = require('uglify-es'),
-composer = require('gulp-uglify/composer'),
+// composer = require('gulp-uglify/composer'),
 // imagemin = require('gulp-imagemin'),
 spritesmith = require('gulp.spritesmith'),
-cache = require('gulp-cached'),
+// cache = require('gulp-cached'),
-remember = require('gulp-remember'),
+// remember = require('gulp-remember'),
-changed = require('gulp-changed'),
+// changed = require('gulp-changed'),
-newer = require('gulp-newer'),
+// newer = require('gulp-newer'),
 plumber = require('gulp-plumber'),
 notify = require('gulp-notify'),
 data = require('gulp-data'),
 browsersync = require('browser-sync').create();
 
-var minify = composer(uglifyjs, console);
+// var minify = composer(uglifyjs, console);
 
 
 
-// Task for the looks
+
+// this is for the looks
 gulp.task('sass', function() {
-  return gulp.src('source/style/**/*.+(scss|sass)')
+  return gulp.src(source_folder.styles)
   .pipe(plumbError('Error Running Sass'))
   .pipe(sourcemap.init())
   .pipe(sass({
-    includePaths: ['source/bower_components']
+    includePaths: [source_folder.root+'/bower_components']
   }))
   .pipe(prefix(['>= 4%', 'last 2 version']))
   .pipe(sourcemap.write())
-  .pipe(gulp.dest('build/css'))
+  .pipe(gulp.dest(build_folder.styles))
   .pipe(browsersync.reload({
     stream: true
   }))
 });
 
 
-// Task for automagically reload browsers
-gulp.task('syncreload', function() {
-  browsersync.init({
-    open: false,
-    server: 'build',
-    // proxy: "http://verser.vrt/virtual/"
-  });
-});
-
 // templating engine
 gulp.task('nunjucks', function() {
   return gulp.src('source/pages/**/*.+(html|njk)')
@@ -91,22 +83,36 @@ gulp.task('nunjucks', function() {
       trimBlocks: true
     }
   }))
-  .pipe(gulp.dest('build'))
+  .pipe(gulp.dest(build_folder.root))
   .pipe(browsersync.reload({
     stream: true
   }))
 });
 
+
+// automagically reload browsers
+gulp.task('syncreload', function() {
+  browsersync.init({
+    open: false,
+    server: 'build',
+    // proxy: "http://verser.vrt/virtual/"
+  });
+});
+
+
+// creates sprites from files in art/sprites folder
 gulp.task('sprites', function() {
   gulp.src('source/art/sprites/**/*')
   .pipe(spritesmith({
     cssName: '_sprites.scss',
     imgName: 'sprites.png'
   }))
-  .pipe(gulpif('*.png', gulp.dest('build/images')))
+  .pipe(gulpif('*.png', gulp.dest(build_folder.images)))
-  .pipe(gulpif('*.scss', gulp.dest('source/style/modules/media')));
+  .pipe(gulpif('*.scss', gulp.dest('source/style/hippie/modules/media')));
 });
 
+
+// linting ...
 gulp.task('lint:js', function() {
   return gulp.src('source/code/**/*.js')
   .pipe(plumbError('JSHint Error'))
@@ -122,7 +128,6 @@ gulp.task('lint:js', function() {
   }))
   // .pipe(jscs.reporter());
 });
-
 gulp.task('lint:scss', function() {
   return gulp.src('source/style/**/*.scss')
   .pipe(plumbError('SASSLint Error'))
@@ -131,36 +136,99 @@ gulp.task('lint:scss', function() {
   }))
 })
 
+
+// cleans the build folder
 gulp.task('clean:dev', function() {
   del.sync([
-    'build/css',
+    build_folder.styles,
-    'build/*.html'
+    build_folder.root+'/*.html'
   ]);
 });
 
 
 
 
+// watch over changes and react
+// split up into sub tasks
+gulp.task('watch-js', ['lint:js'], browsersync.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/pages/**/*.+(html|njk)',
+    'source/data.json'
+  ], ['nunjucks']);
+});
+
+
+// The default task (called when you run `gulp` from cli)
+gulp.task('default', function(callback) {
+  sequencer(
+    'clean:dev',
+    ['sprites', 'lint:js', 'lint:scss'],
+    ['sass', 'nunjucks'],
+    ['syncreload', 'overwatch'],
+    callback
+  )
+});
+
+
+function plumbError(errTitle) {
+  return plumber({
+    errorHandler: notify.onError({
+      // Customizing error title
+      title: errTitle || "Error running Gulp",
+      message: "Error: <%= error.message %>",
+      sound: true
+    })
+  });
+}
+
+
+
+
+
+
+
+
+// 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([build.scripts, build.styles, build.images]);
+  return del([oldbuild.scripts, oldbuild.styles, oldbuild.images]);
 });
 
 // Task - Styles
-gulp.task('styles', () => rubysass(source.styles, {sourcemap: true})
+gulp.task('styles', () => rubysass(oldsource.styles, {sourcemap: true})
 .on('error', rubysass.logError)
-// .pipe(newer({dest: build.styles, ext: '.css'}))
+// .pipe(newer({dest: oldbuild.styles, ext: '.css'}))
 .pipe(prefix('last 2 version'))
-.pipe(gulp.dest(build.styles))
+.pipe(gulp.dest(oldbuild.styles))
 .pipe(rename({suffix: '.min'}))
 .pipe(cssnano())
 .pipe(sourcemap.write('.', {
   includeContent: false,
   sourceRoot: 'source'
 }))
-.pipe(gulp.dest(build.styles))
+.pipe(gulp.dest(oldbuild.styles))
 .pipe(browsersync.stream({match: '**/*.css'}))
 // .pipe(notify({message: 'Style task complete'}))
 );
@@ -168,7 +236,7 @@ gulp.task('styles', () => rubysass(source.styles, {sourcemap: true})
 // Task - Scripts
 gulp.task('scripts', function(cb) {
   pump([
-    gulp.src(source.scripts),
+    gulp.src(oldsource.scripts),
     cache('scripts'),
     jshint('.jshintrc'),
     jshint.reporter('default'),
@@ -177,125 +245,76 @@ gulp.task('scripts', function(cb) {
     remember('scripts'),
     concat('all.min.js'),
     sourcemap.write(),
-    gulp.dest(build.scripts),
+    gulp.dest(oldbuild.scripts),
     browsersync.stream()
   ], cb);
 });
 
 // Task - Images
 gulp.task('images', function() {
-  return gulp.src(source.images)
+  return gulp.src(oldsource.images)
-  .pipe(changed(build.images))
+  .pipe(changed(oldbuild.images))
   // .pipe(cache(imagemin({
     //   optimizationLevel: 3,
     //   progressive: true,
     //   interlaced: true })))
     // )
-    .pipe(gulp.dest(build.images))
+    .pipe(gulp.dest(oldbuild.images))
     // .pipe(notify({ message: 'Images task complete' }))
     ;
   });
 
   // Task - Vendor
   gulp.task('vendor', function() {
-    return gulp.src(source.vendor)
+    return gulp.src(oldsource.vendor)
     .pipe(plumbError())
-    .pipe(gulp.dest(build.vendor))
+    .pipe(gulp.dest(oldbuild.vendor))
     ;
   });
 
   //Task - Nunjucks
   gulp.task('oldnunjucks', function() {
-    return gulp.src(source.pages)
+    return gulp.src(oldsource.pages)
-    // .pipe(changed(build.root))
+    // .pipe(changed(oldbuild.root))
     .pipe(nunjucks({
       path: ['source/templates'],
       envOptions: {
         trimBlocks: true
       }
     }))
-    .pipe(gulp.dest(build.root))
+    .pipe(gulp.dest(oldbuild.root))
   });
 
   // a task that ensures the other task is complete before reloading browsers
-  gulp.task('overwatch', ['oldnunjucks', 'styles'], function(done) {
+  gulp.task('prewatch', ['oldnunjucks', 'styles'], function(done) {
     browsersync.reload();
     done();
   });
 
-
-
-  // TEST - Watch
-  gulp.task('watch-js', ['lint:js'], browsersync.reload);
-
-  gulp.task('testwatch', function() {
-    gulp.watch('source/code/**/*.js', ['watch-js'])
-    gulp.watch('source/style/**/*.+(scss|sass)', ['sass', 'lint:scss']);
-    gulp.watch([
-      'source/templates/**/*',
-      'source/pages/**/*.+(html|njk)',
-      'source/data.json'
-    ], ['nunjucks']);
-  });
-
-
-
   // Old watch for file changes
-  gulp.task('watch', ['styles', 'scripts', 'oldnunjucks'], function() {
+  gulp.task('oldwatch', ['styles', 'scripts', 'oldnunjucks'], function() {
     browsersync.init({
       open: false,
-      server: build.root,
+      server: oldbuild.root,
       // proxy: "http://verser.vrt/virtual/"
     });
 
-    gulp.watch(source.scripts, ['scripts']).on('change', function(event) {
+    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(source.watch, ['overwatch']);
+    // gulp.watch(oldsource.watch, ['prewatch']);
-    gulp.watch(source.watch, ['styles', 'oldnunjucks']).on('change', browsersync.reload);
+    gulp.watch(oldsource.watch, ['styles', 'oldnunjucks']).on('change', browsersync.reload);
-    // gulp.watch(source.images, ['images']);
+    // gulp.watch(oldsource.images, ['images']);
   });
 
   gulp.task('olddefault', ['clean', 'styles', 'scripts', 'images', 'nunjucks']);
 
-
-
-
-
-
-  // The default task (called when you run `gulp` from cli)
-  gulp.task('default', function(callback) {
-    sequencer(
-      'clean:dev',
-      ['sprites', 'lint:js', 'lint:scss'],
-      ['sass', 'nunjucks'],
-      ['syncreload', 'testwatch'],
-      callback
-    )
-  });
-
-
-
-
-
-
   // 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');
     // }
-
-    function plumbError(errTitle) {
-      return plumber({
-        errorHandler: notify.onError({
-          // Customizing error title
-          title: errTitle || "Error running Gulp",
-          message: "Error: <%= error.message %>",
-          sound: true
-        })
-      });
-    }

source/code/hippie/functions.js

@@ -1,4 +1,4 @@
-'use strict';
+"use strict";
 
 function setup() {
 	if($('#js_tph').length && full_view_hover) {

source/code/hippie/global.js

@@ -1,4 +1,4 @@
-'use strict';
+"use strict";
 
 // DOM ready
 // ------------------------------------------------------------------------------
@@ -22,9 +22,9 @@ $( document ).ready(function() {
 		function() {
 			var $this = $(this);
 
-			if($(this).attr("emmet")){
+			// if($(this).attr("emmet")){
-
+			//
-			}
+			// }
 
 			$(this).next(".exp_pop").show();
 		}, function() {
@@ -47,11 +47,11 @@ $( document ).ready(function() {
 	$(".exp_help_btn").click(function(e){
 		var $wrap, $pop;
 
-		if(exp_mode != true){
+		if(exp_mode !== true){
 			exp_mode = true;
 
 			$(".js_pop").each(function(i, e){
-				if($(this).css("position") == "static") {
+				if($(this).css("position") === "static") {
 					$(this).addClass("js_changed_pos");
 					$(this).css("position", "relative");
 				}
@@ -70,7 +70,7 @@ $( document ).ready(function() {
 				$(this).after($pop);
 				if($(this).hasClass("js_changed_pos")){
 					$(this).css("position", "");
-					if($(this).attr("style") == "") {
+					if($(this).attr("style") === "") {
 						$(this).removeAttr("style");
 					}
 					$(this).removeClass("js_changed_pos");
@@ -112,14 +112,14 @@ $( document ).ready(function() {
 	var i = 0;
 	$( ".pass-def dd" ).each(function() {
 		$( this ).find( "li" ).each(function( index ) {
-			if ( 0 == $( this ).children( "ul" ).length ) {
+			if ( 0 === $( this ).children( "ul" ).length ) {
 				//console.log( index + ": " + $( this ).text() );
 				var tempContent = $( this ).html();
 				//$( this ).html( "<span class=\"list-count\"></span>" );
 				$( this ).html( tempContent +"<span class=\"list-count\">"+ i +"</span>" );
 				i++;
 			}
-		})
+		});
 	});
 
 

source/code/hippie/variables.js

@@ -1,4 +1,4 @@
-'use strict';
+"use strict";
 
 var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
 var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

source/data.json

@@ -4,6 +4,10 @@
       "href": "demo/intro.html",
       "text": "Intro"
     },
+    {
+      "href": "demo/elements.html",
+      "text": "Elements"
+    },
     {
       "href": "demo/os.html",
       "text": "OS"
@@ -18,10 +22,6 @@
     }
   ],
   "links": [
-    {
-      "href": "elements.html",
-      "text": "Elements"
-    },
     {
       "href": "blank.html",
       "text": "Blank"

source/style/_demo_config.scss

@@ -1,4 +1,6 @@
 // Override for configuration file
+// All variables setup with !default in gloabl/_config.scss can be used
 // ------------------------------------------------------------------------------
 
+// $basic_back_color: yellow;
 // $basic_link_color: magenta;

source/style/demo.scss

@@ -0,0 +1,16 @@
+// Start a new project by creating YOUR-PROJECT.scss and _YOUR-CONFIG.scss
+// Then import your config and hippie
+// NOTE // No css rules allowed in here
+// ------------------------------------------------------------------------------
+@import "demo_config";
+@import "hippie/hippie";
+
+
+// Additional Modules and variables
+// in dependency to other basic styles
+// could be defined here
+// -----------------------------------------------------------------------------
+@import "modules/demo/demo_module";
+// @import "modules/YOUR-MODULE/YOUR-FILES";
+// New
+@import "new";

source/style/example.scss

@@ -1,5 +0,0 @@
-// Add hippie
-// ------------------------------------------------------------------------------
-@import "hippie";
-
-// NOTE // No css rules allowed in here

source/style/hippie/_basic.scss

@@ -1,30 +1,7 @@
-/*
- * # TABLE OF CONTENTS
- *
- * - Reset
- * - Global functions and mixins
- * - Configuration
- * - Special modules
- * - Basic styles
- *   - Common
- *   - Typography
- *
- *   - Sections
- *   - Grouping
- *   - Textlevel
- *   - Embedded
- *   - Tables
- *   - Interactive
- * - Modules
- *
- */
-
-
 // Reset
 // Use a file outside of hippie i.e. vendor/normalize.css
 // -----------------------------------------------------------------------------
 @import "../../vendor/normalizecss/normalize.css";
-// @import "vendor/YOUR-FILES.css";
 
 
 
@@ -39,26 +16,20 @@
 // Fonts
 // Use a central file outside of hippie for font definitions with @font-face
 // -----------------------------------------------------------------------------
-// @import "vendor/fonts.css";
+// @import "../../vendor/fonts.css";
 
 
 
 // Global configuration with default values
-// Adjustments can be made by copying values from _config.scss to _override.scss
-// Be careful though changes will get lost if hippie gets updated
 // -----------------------------------------------------------------------------
-// @import "global/default"; // DO NOT EDIT
+@import "global/config";
-@import "settings"; // EDIT
-@import "global/config"; // DO NOT EDIT
 
 
 
 // Modules and variables
-// Additional modules can be defined here
 // -----------------------------------------------------------------------------
 @import "modules/vendor";
 // @import modules/all deprecated because of the new vendor mixin
-// @import "modules/YOUR-MODULE/YOUR-FILES";
 
 // Basic styles - this is the core of definitions
 // Individual styles can be added her
@@ -73,29 +44,10 @@
 @import "elements/embedded";
 @import "elements/tables";
 @import "elements/interactive";
-// @import "YOU-NAME-IT";
 
 // Individual Modules and variables
 // in dependency to other styles
-// Additional modules can be defined here
 // -----------------------------------------------------------------------------
 @import "modules/breakpoint/breakpoint_module";
-@import "modules/navigation/nav_module";
 @import "modules/tables/tables_module";
-@import "modules/card/card_module";
+@import "modules/maintenance/maintenance_module";
-@import "modules/editor/editor_module";
-@import "modules/explanation/explanation_module";
-@import "modules/print/print_module";
-// @import "modules/YOUR-MODULE/YOUR-FILES";
-
-
-
-// Demonstration
-@import "modules/demo/demo_module";
-
-
-
-// Not yet sorted
-@import "elements/new";
-
-// NOTE // No css rules allowed in here

source/style/hippie/_hippie.scss

@@ -0,0 +1,33 @@
+/*
+ * # TABLE OF CONTENTS
+ *
+ * - Reset
+ * - Global functions and mixins
+ * - Configuration
+ * - Special modules
+ * - Basic styles
+ *   - Common
+ *   - Typography
+ *
+ *   - Sections
+ *   - Grouping
+ *   - Textlevel
+ *   - Embedded
+ *   - Tables
+ *   - Interactive
+ * - Modules
+    - Breakpoint
+    - Tables
+    - Maintenance
+*
+ */
+@import "basic";
+
+// Additional Modules and variables
+// in dependency to other basic styles
+// -----------------------------------------------------------------------------
+@import "modules/navigation/nav_module";
+@import "modules/card/card_module";
+@import "modules/editor/editor_module";
+@import "modules/explanation/explanation_module";
+@import "modules/print/print_module";

source/style/maintenance.scss

@@ -1,102 +1,16 @@
-/*
+// Start a new project by creating YOUR-PROJECT.scss and _YOUR-CONFIG.scss
- * # TABLE OF CONTENTS
+// Then import your config and hippie
- *
- * - Reset
- * - Global functions and mixins
- * - Configuration
- * - Special modules
- * - Basic styles
- *   - Common
- *   - Typography
- *
- *   - Sections
- *   - Grouping
- *   - Textlevel
- *   - Embedded
- *   - Tables
- *   - Interactive
- * - Modules
- *
- */
-
-
-// Reset
-// Use a file outside of hippie i.e. vendor/normalize.css
-// -----------------------------------------------------------------------------
-@import "../vendor/normalizecss/normalize.css";
-// @import "normalize-css/normalize.css";
-// @import "vendor/YOUR-FILES.css";
-
-
-
-// Functions and Mixins
-// Important code constructions
-// -----------------------------------------------------------------------------
-@import "functions/all";
-@import "mixins/all";
-
-
-
-// Fonts
-// Use a central file outside of hippie for font definitions with @font-face
-// -----------------------------------------------------------------------------
-// @import "vendor/fonts.css";
-
-
-
-// Global configuration with default values
-// Adjustments can be made by copying values from _config.scss to _override.scss
-// Be careful though changes will get lost if hippie gets updated
-// -----------------------------------------------------------------------------
-// @import "global/default"; // DO NOT EDIT
-@import "settings"; // EDIT
-@import "global/config"; // DO NOT EDIT
-
-
-
-// Modules and variables
-// Additional modules can be defined here
-// -----------------------------------------------------------------------------
-// @import "modules/vendor";
-// @import modules/all deprecated because of the new vendor mixin
-// @import "modules/YOUR-MODULE/YOUR-FILES";
-
-// Basic styles - this is the core of definitions
-// Individual styles can be added her
-// -----------------------------------------------------------------------------
-@import "global/common";
-@import "elements/typography";
-// Following the w3c document element structure
-// https://w3c.github.io/html/index.html#contents
-@import "elements/sections";
-@import "elements/grouping";
-@import "elements/textlevel";
-@import "elements/embedded";
-@import "elements/tables";
-@import "elements/interactive";
-// @import "YOU-NAME-IT";
-
-// Individual Modules and variables
-// in dependency to other styles
-// Additional modules can be defined here
-// -----------------------------------------------------------------------------
-@import "modules/breakpoint/breakpoint_module";
-// @import "modules/navigation/nav_module";
-@import "modules/tables/tables_module";
-// @import "modules/card/card_module";
-// @import "modules/editor/editor_module";
-// @import "modules/explanation/explanation_module";
-// @import "modules/print/print_module";
-// @import "modules/YOUR-MODULE/YOUR-FILES";
-
-
-
-// Demonstration
-@import "modules/maintenance/maintenance_module";
-
-
-
-// Not yet sorted
-// @import "elements/new";
-
 // NOTE // No css rules allowed in here
+// ------------------------------------------------------------------------------
+@import "demo_config";
+@import "hippie/basic";
+
+
+// Additional Modules and variables
+// in dependency to other basic styles
+// could be defined here
+// -----------------------------------------------------------------------------
+@import "modules/demo/demo_module";
+// @import "modules/YOUR-MODULE/YOUR-FILES";
+// New
+@import "new";

source/templates/default.njk

@@ -17,7 +17,7 @@
   <link rel="icon" href="./favicon.ico" type="image/vnd.microsoft.icon">
   <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
 
-  <link rel="stylesheet" type="text/css" media="all" href="./css/example.css"/>
+  <link rel="stylesheet" type="text/css" media="all" href="./css/demo.css"/>
   <!-- <link rel="stylesheet" type="text/css" media="print" href="./css/print.css"/> -->
   {% endblock %}
 </head>

source/templates/demo.njk

@@ -28,7 +28,7 @@
   <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="../css/example.css"/>
+  <link rel="stylesheet" type="text/css" media="all" href="../css/demo.css"/>
   <!-- <link rel="stylesheet" type="text/css" media="print" href="./css/print.css"/> -->
   {% endblock %}
 </head>