From ce6597b6d10a97fe1927e37515a0e9f079ac70f1 Mon Sep 17 00:00:00 2001 From: Stephan Date: Sat, 26 May 2018 14:29:50 +0200 Subject: [PATCH] demo.2 - restructured input files - sorted gulpfile and separated old stuff - next up are node module updates --- gulpfile.js | 241 ++++++++++-------- source/code/{ => hippie}/functions.js | 2 +- source/code/{ => hippie}/global.js | 18 +- source/code/{ => hippie}/variables.js | 2 +- source/data.json | 8 +- source/pages/{ => demo}/elements.njk | 0 .../{_settings.scss => _demo_config.scss} | 2 + source/style/{elements => }/_new.scss | 0 source/style/demo.scss | 16 ++ source/style/example.scss | 5 - source/style/{ => hippie}/_abovethefold.scss | 0 .../{_hippie.scss => hippie/_basic.scss} | 54 +--- source/style/hippie/_hippie.scss | 33 +++ .../{ => hippie}/elements/_embedded.scss | 0 .../{ => hippie}/elements/_grouping.scss | 0 .../{ => hippie}/elements/_interactive.scss | 0 .../{ => hippie}/elements/_sections.scss | 0 .../style/{ => hippie}/elements/_tables.scss | 0 .../{ => hippie}/elements/_textlevel.scss | 0 .../{ => hippie}/elements/_typography.scss | 0 source/style/{ => hippie}/functions/_all.scss | 0 .../style/{ => hippie}/functions/_color.scss | 0 .../style/{ => hippie}/functions/_shade.scss | 0 .../style/{ => hippie}/functions/_tint.scss | 0 source/style/{ => hippie}/global/_common.scss | 0 source/style/{ => hippie}/global/_config.scss | 0 source/style/{ => hippie}/mixins/_all.scss | 0 source/style/{ => hippie}/mixins/_color.scss | 0 source/style/{ => hippie}/mixins/_flow.scss | 0 .../{ => hippie}/mixins/_media_query.scss | 0 .../{ => hippie}/mixins/_user_agent.scss | 0 .../style/{ => hippie}/modules/_vendor.scss | 0 .../breakpoint/_breakpoint_module.scss | 0 .../modules/card/_card_module.scss | 0 .../{ => hippie}/modules/card/_extends.scss | 0 .../{ => hippie}/modules/card/_mixins.scss | 0 .../modules/editor/_editor_module.scss | 0 .../{ => hippie}/modules/editor/_extends.scss | 0 .../{ => hippie}/modules/editor/_mixins.scss | 0 .../explanation/_explanation_module.scss | 0 .../modules/explanation/_extends.scss | 0 .../modules/explanation/_mixins.scss | 0 .../maintenance/_maintenance_module.scss | 0 .../modules/media/_media_module.scss | 0 .../{ => hippie}/modules/media/_sprites.scss | 0 .../modules/navigation/_nav_module.scss | 0 .../{ => hippie}/modules/print/_extends.scss | 0 .../{ => hippie}/modules/print/_mixins.scss | 0 .../modules/print/_print_module.scss | 0 .../modules/tables/_tables_module.scss | 0 source/style/maintenance.scss | 116 ++------- source/templates/default.njk | 2 +- source/templates/demo.njk | 2 +- 53 files changed, 216 insertions(+), 285 deletions(-) rename source/code/{ => hippie}/functions.js (99%) rename source/code/{ => hippie}/global.js (93%) rename source/code/{ => hippie}/variables.js (95%) rename source/pages/{ => demo}/elements.njk (100%) rename source/style/{_settings.scss => _demo_config.scss} (59%) rename source/style/{elements => }/_new.scss (100%) create mode 100644 source/style/demo.scss delete mode 100644 source/style/example.scss rename source/style/{ => hippie}/_abovethefold.scss (100%) rename source/style/{_hippie.scss => hippie/_basic.scss} (58%) create mode 100644 source/style/hippie/_hippie.scss rename source/style/{ => hippie}/elements/_embedded.scss (100%) rename source/style/{ => hippie}/elements/_grouping.scss (100%) rename source/style/{ => hippie}/elements/_interactive.scss (100%) rename source/style/{ => hippie}/elements/_sections.scss (100%) rename source/style/{ => hippie}/elements/_tables.scss (100%) rename source/style/{ => hippie}/elements/_textlevel.scss (100%) rename source/style/{ => hippie}/elements/_typography.scss (100%) rename source/style/{ => hippie}/functions/_all.scss (100%) rename source/style/{ => hippie}/functions/_color.scss (100%) rename source/style/{ => hippie}/functions/_shade.scss (100%) rename source/style/{ => hippie}/functions/_tint.scss (100%) rename source/style/{ => hippie}/global/_common.scss (100%) rename source/style/{ => hippie}/global/_config.scss (100%) rename source/style/{ => hippie}/mixins/_all.scss (100%) rename source/style/{ => hippie}/mixins/_color.scss (100%) rename source/style/{ => hippie}/mixins/_flow.scss (100%) rename source/style/{ => hippie}/mixins/_media_query.scss (100%) rename source/style/{ => hippie}/mixins/_user_agent.scss (100%) rename source/style/{ => hippie}/modules/_vendor.scss (100%) rename source/style/{ => hippie}/modules/breakpoint/_breakpoint_module.scss (100%) rename source/style/{ => hippie}/modules/card/_card_module.scss (100%) rename source/style/{ => hippie}/modules/card/_extends.scss (100%) rename source/style/{ => hippie}/modules/card/_mixins.scss (100%) rename source/style/{ => hippie}/modules/editor/_editor_module.scss (100%) rename source/style/{ => hippie}/modules/editor/_extends.scss (100%) rename source/style/{ => hippie}/modules/editor/_mixins.scss (100%) rename source/style/{ => hippie}/modules/explanation/_explanation_module.scss (100%) rename source/style/{ => hippie}/modules/explanation/_extends.scss (100%) rename source/style/{ => hippie}/modules/explanation/_mixins.scss (100%) rename source/style/{ => hippie}/modules/maintenance/_maintenance_module.scss (100%) rename source/style/{ => hippie}/modules/media/_media_module.scss (100%) rename source/style/{ => hippie}/modules/media/_sprites.scss (100%) rename source/style/{ => hippie}/modules/navigation/_nav_module.scss (100%) rename source/style/{ => hippie}/modules/print/_extends.scss (100%) rename source/style/{ => hippie}/modules/print/_mixins.scss (100%) rename source/style/{ => hippie}/modules/print/_print_module.scss (100%) rename source/style/{ => hippie}/modules/tables/_tables_module.scss (100%) 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 %}