diff --git a/gulpfile.js b/gulpfile.js
index bcc8bd9..c7ed93f 100644
--- a/gulpfile.js
+++ b/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,36 +136,99 @@ 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'
]);
});
+// 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)
- .pipe(changed(build.images))
+ return gulp.src(oldsource.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)
- // .pipe(changed(build.root))
+ return gulp.src(oldsource.pages)
+ // .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(source.watch, ['styles', 'oldnunjucks']).on('change', browsersync.reload);
- // gulp.watch(source.images, ['images']);
+ // 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']);
-
-
-
-
-
- // 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
- })
- });
- }
diff --git a/source/code/functions.js b/source/code/hippie/functions.js
similarity index 99%
rename from source/code/functions.js
rename to source/code/hippie/functions.js
index 9cb6821..d120d16 100644
--- a/source/code/functions.js
+++ b/source/code/hippie/functions.js
@@ -1,4 +1,4 @@
-'use strict';
+"use strict";
function setup() {
if($('#js_tph').length && full_view_hover) {
diff --git a/source/code/global.js b/source/code/hippie/global.js
similarity index 93%
rename from source/code/global.js
rename to source/code/hippie/global.js
index a4d1e19..1b8e7de 100644
--- a/source/code/global.js
+++ b/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( "" );
$( this ).html( tempContent +""+ i +"" );
i++;
}
- })
+ });
});
diff --git a/source/code/variables.js b/source/code/hippie/variables.js
similarity index 95%
rename from source/code/variables.js
rename to source/code/hippie/variables.js
index 5934344..3aa9cd6 100644
--- a/source/code/variables.js
+++ b/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);
diff --git a/source/data.json b/source/data.json
index 0086589..5c43ee8 100644
--- a/source/data.json
+++ b/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"
diff --git a/source/pages/elements.njk b/source/pages/demo/elements.njk
similarity index 100%
rename from source/pages/elements.njk
rename to source/pages/demo/elements.njk
diff --git a/source/style/_settings.scss b/source/style/_demo_config.scss
similarity index 59%
rename from source/style/_settings.scss
rename to source/style/_demo_config.scss
index 6239a8e..ed30d63 100644
--- a/source/style/_settings.scss
+++ b/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;
diff --git a/source/style/elements/_new.scss b/source/style/_new.scss
similarity index 100%
rename from source/style/elements/_new.scss
rename to source/style/_new.scss
diff --git a/source/style/demo.scss b/source/style/demo.scss
new file mode 100644
index 0000000..5da0ada
--- /dev/null
+++ b/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";
diff --git a/source/style/example.scss b/source/style/example.scss
deleted file mode 100644
index b6635d9..0000000
--- a/source/style/example.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-// Add hippie
-// ------------------------------------------------------------------------------
-@import "hippie";
-
-// NOTE // No css rules allowed in here
diff --git a/source/style/_abovethefold.scss b/source/style/hippie/_abovethefold.scss
similarity index 100%
rename from source/style/_abovethefold.scss
rename to source/style/hippie/_abovethefold.scss
diff --git a/source/style/_hippie.scss b/source/style/hippie/_basic.scss
similarity index 58%
rename from source/style/_hippie.scss
rename to source/style/hippie/_basic.scss
index 578d2bb..6837a65 100644
--- a/source/style/_hippie.scss
+++ b/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";
diff --git a/source/style/hippie/_hippie.scss b/source/style/hippie/_hippie.scss
new file mode 100644
index 0000000..ad96e38
--- /dev/null
+++ b/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";
diff --git a/source/style/elements/_embedded.scss b/source/style/hippie/elements/_embedded.scss
similarity index 100%
rename from source/style/elements/_embedded.scss
rename to source/style/hippie/elements/_embedded.scss
diff --git a/source/style/elements/_grouping.scss b/source/style/hippie/elements/_grouping.scss
similarity index 100%
rename from source/style/elements/_grouping.scss
rename to source/style/hippie/elements/_grouping.scss
diff --git a/source/style/elements/_interactive.scss b/source/style/hippie/elements/_interactive.scss
similarity index 100%
rename from source/style/elements/_interactive.scss
rename to source/style/hippie/elements/_interactive.scss
diff --git a/source/style/elements/_sections.scss b/source/style/hippie/elements/_sections.scss
similarity index 100%
rename from source/style/elements/_sections.scss
rename to source/style/hippie/elements/_sections.scss
diff --git a/source/style/elements/_tables.scss b/source/style/hippie/elements/_tables.scss
similarity index 100%
rename from source/style/elements/_tables.scss
rename to source/style/hippie/elements/_tables.scss
diff --git a/source/style/elements/_textlevel.scss b/source/style/hippie/elements/_textlevel.scss
similarity index 100%
rename from source/style/elements/_textlevel.scss
rename to source/style/hippie/elements/_textlevel.scss
diff --git a/source/style/elements/_typography.scss b/source/style/hippie/elements/_typography.scss
similarity index 100%
rename from source/style/elements/_typography.scss
rename to source/style/hippie/elements/_typography.scss
diff --git a/source/style/functions/_all.scss b/source/style/hippie/functions/_all.scss
similarity index 100%
rename from source/style/functions/_all.scss
rename to source/style/hippie/functions/_all.scss
diff --git a/source/style/functions/_color.scss b/source/style/hippie/functions/_color.scss
similarity index 100%
rename from source/style/functions/_color.scss
rename to source/style/hippie/functions/_color.scss
diff --git a/source/style/functions/_shade.scss b/source/style/hippie/functions/_shade.scss
similarity index 100%
rename from source/style/functions/_shade.scss
rename to source/style/hippie/functions/_shade.scss
diff --git a/source/style/functions/_tint.scss b/source/style/hippie/functions/_tint.scss
similarity index 100%
rename from source/style/functions/_tint.scss
rename to source/style/hippie/functions/_tint.scss
diff --git a/source/style/global/_common.scss b/source/style/hippie/global/_common.scss
similarity index 100%
rename from source/style/global/_common.scss
rename to source/style/hippie/global/_common.scss
diff --git a/source/style/global/_config.scss b/source/style/hippie/global/_config.scss
similarity index 100%
rename from source/style/global/_config.scss
rename to source/style/hippie/global/_config.scss
diff --git a/source/style/mixins/_all.scss b/source/style/hippie/mixins/_all.scss
similarity index 100%
rename from source/style/mixins/_all.scss
rename to source/style/hippie/mixins/_all.scss
diff --git a/source/style/mixins/_color.scss b/source/style/hippie/mixins/_color.scss
similarity index 100%
rename from source/style/mixins/_color.scss
rename to source/style/hippie/mixins/_color.scss
diff --git a/source/style/mixins/_flow.scss b/source/style/hippie/mixins/_flow.scss
similarity index 100%
rename from source/style/mixins/_flow.scss
rename to source/style/hippie/mixins/_flow.scss
diff --git a/source/style/mixins/_media_query.scss b/source/style/hippie/mixins/_media_query.scss
similarity index 100%
rename from source/style/mixins/_media_query.scss
rename to source/style/hippie/mixins/_media_query.scss
diff --git a/source/style/mixins/_user_agent.scss b/source/style/hippie/mixins/_user_agent.scss
similarity index 100%
rename from source/style/mixins/_user_agent.scss
rename to source/style/hippie/mixins/_user_agent.scss
diff --git a/source/style/modules/_vendor.scss b/source/style/hippie/modules/_vendor.scss
similarity index 100%
rename from source/style/modules/_vendor.scss
rename to source/style/hippie/modules/_vendor.scss
diff --git a/source/style/modules/breakpoint/_breakpoint_module.scss b/source/style/hippie/modules/breakpoint/_breakpoint_module.scss
similarity index 100%
rename from source/style/modules/breakpoint/_breakpoint_module.scss
rename to source/style/hippie/modules/breakpoint/_breakpoint_module.scss
diff --git a/source/style/modules/card/_card_module.scss b/source/style/hippie/modules/card/_card_module.scss
similarity index 100%
rename from source/style/modules/card/_card_module.scss
rename to source/style/hippie/modules/card/_card_module.scss
diff --git a/source/style/modules/card/_extends.scss b/source/style/hippie/modules/card/_extends.scss
similarity index 100%
rename from source/style/modules/card/_extends.scss
rename to source/style/hippie/modules/card/_extends.scss
diff --git a/source/style/modules/card/_mixins.scss b/source/style/hippie/modules/card/_mixins.scss
similarity index 100%
rename from source/style/modules/card/_mixins.scss
rename to source/style/hippie/modules/card/_mixins.scss
diff --git a/source/style/modules/editor/_editor_module.scss b/source/style/hippie/modules/editor/_editor_module.scss
similarity index 100%
rename from source/style/modules/editor/_editor_module.scss
rename to source/style/hippie/modules/editor/_editor_module.scss
diff --git a/source/style/modules/editor/_extends.scss b/source/style/hippie/modules/editor/_extends.scss
similarity index 100%
rename from source/style/modules/editor/_extends.scss
rename to source/style/hippie/modules/editor/_extends.scss
diff --git a/source/style/modules/editor/_mixins.scss b/source/style/hippie/modules/editor/_mixins.scss
similarity index 100%
rename from source/style/modules/editor/_mixins.scss
rename to source/style/hippie/modules/editor/_mixins.scss
diff --git a/source/style/modules/explanation/_explanation_module.scss b/source/style/hippie/modules/explanation/_explanation_module.scss
similarity index 100%
rename from source/style/modules/explanation/_explanation_module.scss
rename to source/style/hippie/modules/explanation/_explanation_module.scss
diff --git a/source/style/modules/explanation/_extends.scss b/source/style/hippie/modules/explanation/_extends.scss
similarity index 100%
rename from source/style/modules/explanation/_extends.scss
rename to source/style/hippie/modules/explanation/_extends.scss
diff --git a/source/style/modules/explanation/_mixins.scss b/source/style/hippie/modules/explanation/_mixins.scss
similarity index 100%
rename from source/style/modules/explanation/_mixins.scss
rename to source/style/hippie/modules/explanation/_mixins.scss
diff --git a/source/style/modules/maintenance/_maintenance_module.scss b/source/style/hippie/modules/maintenance/_maintenance_module.scss
similarity index 100%
rename from source/style/modules/maintenance/_maintenance_module.scss
rename to source/style/hippie/modules/maintenance/_maintenance_module.scss
diff --git a/source/style/modules/media/_media_module.scss b/source/style/hippie/modules/media/_media_module.scss
similarity index 100%
rename from source/style/modules/media/_media_module.scss
rename to source/style/hippie/modules/media/_media_module.scss
diff --git a/source/style/modules/media/_sprites.scss b/source/style/hippie/modules/media/_sprites.scss
similarity index 100%
rename from source/style/modules/media/_sprites.scss
rename to source/style/hippie/modules/media/_sprites.scss
diff --git a/source/style/modules/navigation/_nav_module.scss b/source/style/hippie/modules/navigation/_nav_module.scss
similarity index 100%
rename from source/style/modules/navigation/_nav_module.scss
rename to source/style/hippie/modules/navigation/_nav_module.scss
diff --git a/source/style/modules/print/_extends.scss b/source/style/hippie/modules/print/_extends.scss
similarity index 100%
rename from source/style/modules/print/_extends.scss
rename to source/style/hippie/modules/print/_extends.scss
diff --git a/source/style/modules/print/_mixins.scss b/source/style/hippie/modules/print/_mixins.scss
similarity index 100%
rename from source/style/modules/print/_mixins.scss
rename to source/style/hippie/modules/print/_mixins.scss
diff --git a/source/style/modules/print/_print_module.scss b/source/style/hippie/modules/print/_print_module.scss
similarity index 100%
rename from source/style/modules/print/_print_module.scss
rename to source/style/hippie/modules/print/_print_module.scss
diff --git a/source/style/modules/tables/_tables_module.scss b/source/style/hippie/modules/tables/_tables_module.scss
similarity index 100%
rename from source/style/modules/tables/_tables_module.scss
rename to source/style/hippie/modules/tables/_tables_module.scss
diff --git a/source/style/maintenance.scss b/source/style/maintenance.scss
index 0f4de74..320218f 100644
--- a/source/style/maintenance.scss
+++ b/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";
diff --git a/source/templates/default.njk b/source/templates/default.njk
index 5df467e..076ff87 100644
--- a/source/templates/default.njk
+++ b/source/templates/default.njk
@@ -17,7 +17,7 @@
-
+
{% endblock %}
diff --git a/source/templates/demo.njk b/source/templates/demo.njk
index c87b98a..a7a15d9 100644
--- a/source/templates/demo.njk
+++ b/source/templates/demo.njk
@@ -28,7 +28,7 @@
-
+
{% endblock %}