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 = {
-  watch: ['source/style/**/*.scss', 'source/templates/**/*.+(html|njk)', 'source/pages/**/*.+(html|njk)'],
-  styles: ['source/style/example.scss', 'source/style/maintenance.scss'],
-  scripts: ['source/code/variables.js', 'source/code/functions.js', 'source/code/global.js', 'source/code/**/*.coffee', '!source/vendor/**/*', ],
+var source_folder = {
+  watch: ['source/style/hippie/**/*.scss', 'source/style/**/*.scss', 'source/templates/**/*.+(html|njk)', 'source/pages/**/*.+(html|njk)'],
+  styles: ['source/style/hippie/*.+(scss|sass)', 'source/style/**/*.+(scss|sass)'],
+  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'),
-pump = require('pump'),
+// concat = require('gulp-concat'),
+// 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'),
-composer = require('gulp-uglify/composer'),
+// uglifyjs = require('uglify-es'),
+// composer = require('gulp-uglify/composer'),
 // imagemin = require('gulp-imagemin'),
 spritesmith = require('gulp.spritesmith'),
-cache = require('gulp-cached'),
-remember = require('gulp-remember'),
-changed = require('gulp-changed'),
-newer = require('gulp-newer'),
+// cache = require('gulp-cached'),
+// remember = require('gulp-remember'),
+// changed = require('gulp-changed'),
+// 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('*.scss', gulp.dest('source/style/modules/media')));
+  .pipe(gulpif('*.png', gulp.dest(build_folder.images)))
+  .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,104 +136,23 @@ gulp.task('lint:scss', function() {
   }))
 })
 
+
+// cleans the build folder
 gulp.task('clean:dev', function() {
   del.sync([
-    'build/css',
-    'build/*.html'
+    build_folder.styles,
+    build_folder.root+'/*.html'
   ]);
 });
 
 
 
 
-
-
-// Task - Clean build directory
-gulp.task('clean', function() {
-  return del([build.scripts, build.styles, build.images]);
-});
-
-// Task - Styles
-gulp.task('styles', () => rubysass(source.styles, {sourcemap: true})
-.on('error', rubysass.logError)
-// .pipe(newer({dest: build.styles, ext: '.css'}))
-.pipe(prefix('last 2 version'))
-.pipe(gulp.dest(build.styles))
-.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'}))
-);
-
-// Task - Scripts
-gulp.task('scripts', function(cb) {
-  pump([
-    gulp.src(source.scripts),
-    cache('scripts'),
-    jshint('.jshintrc'),
-    jshint.reporter('default'),
-    sourcemap.init(),
-    minify(),
-    remember('scripts'),
-    concat('all.min.js'),
-    sourcemap.write(),
-    gulp.dest(build.scripts),
-    browsersync.stream()
-  ], cb);
-});
-
-// Task - Images
-gulp.task('images', function() {
-  return gulp.src(source.images)
-  .pipe(changed(build.images))
-  // .pipe(cache(imagemin({
-    //   optimizationLevel: 3,
-    //   progressive: true,
-    //   interlaced: true })))
-    // )
-    .pipe(gulp.dest(build.images))
-    // .pipe(notify({ message: 'Images task complete' }))
-    ;
-  });
-
-  // Task - Vendor
-  gulp.task('vendor', function() {
-    return gulp.src(source.vendor)
-    .pipe(plumbError())
-    .pipe(gulp.dest(build.vendor))
-    ;
-  });
-
-  //Task - Nunjucks
-  gulp.task('oldnunjucks', function() {
-    return gulp.src(source.pages)
-    // .pipe(changed(build.root))
-    .pipe(nunjucks({
-      path: ['source/templates'],
-      envOptions: {
-        trimBlocks: true
-      }
-    }))
-    .pipe(gulp.dest(build.root))
-  });
-
-  // a task that ensures the other task is complete before reloading browsers
-  gulp.task('overwatch', ['oldnunjucks', 'styles'], function(done) {
-    browsersync.reload();
-    done();
-  });
-
-
-
-  // TEST - Watch
+// watch over changes and react
+// split up into sub tasks
 gulp.task('watch-js', ['lint:js'], browsersync.reload);
 
-  gulp.task('testwatch', function() {
+gulp.task('overwatch', function() {
   gulp.watch('source/code/**/*.js', ['watch-js'])
   gulp.watch('source/style/**/*.+(scss|sass)', ['sass', 'lint:scss']);
   gulp.watch([
@@ -239,56 +163,18 @@ gulp.task('images', function() {
 });
 
 
-
-  // Old watch for file changes
-  gulp.task('watch', ['styles', 'scripts', 'oldnunjucks'], function() {
-    browsersync.init({
-      open: false,
-      server: build.root,
-      // proxy: "http://verser.vrt/virtual/"
-    });
-
-    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(source.watch, ['overwatch']);
-    gulp.watch(source.watch, ['styles', 'oldnunjucks']).on('change', browsersync.reload);
-    // gulp.watch(source.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'],
+    ['syncreload', 'overwatch'],
     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({
@@ -299,3 +185,136 @@ gulp.task('images', function() {
     })
   });
 }
+
+
+
+
+
+
+
+
+// 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('vendor', 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');
+    // }

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 "settings"; // EDIT
-@import "global/config"; // DO NOT EDIT
+@import "global/config";
 
 
 
 // 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/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
+@import "modules/maintenance/maintenance_module";

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 @@
-/*
- * # 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 "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";
-
+// 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/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>