From 8dc9724a3ea0e3384656c17ec491770a5623dd51 Mon Sep 17 00:00:00 2001 From: Stephan Date: Thu, 21 Mar 2019 20:22:22 +0100 Subject: [PATCH] Update everything gulpjs * new spritesmith plugin * reworked exports * new nunjucks-render version fixing dependency issues! File structure New naming scheme for nunjucks files. Underscore used for files which are imported and not directly displayed. Nunjucks blocks where renamed and are placed differently. New macro for navigational elements. --- gulpfile.js | 48 +- package-lock.json | 1101 ++--------------- package.json | 4 +- source/screens/demo.njk | 25 +- source/screens/demo/blank.njk | 4 +- source/screens/demo/elements.njk | 8 +- source/screens/demo/error/304.njk | 4 +- source/screens/demo/error/400.njk | 4 +- source/screens/demo/error/403.njk | 4 +- source/screens/demo/error/404.njk | 4 +- source/screens/demo/error/500.njk | 4 +- source/screens/demo/examples.njk | 10 +- source/screens/demo/intro.njk | 11 +- source/screens/demo/maintenance.njk | 4 +- source/screens/demo/os.njk | 6 +- source/screens/demo/tests.njk | 8 +- source/style/hippie/elements/_grouping.scss | 1 + source/style/hippie/mixins/_all.scss | 2 +- .../mixins/{_sprites.scss => _sprite.scss} | 45 +- source/templates/demo/_default.njk | 29 + source/templates/demo/_extended.njk | 49 + .../{maintenance.njk => _maintenance.njk} | 4 +- source/templates/demo/data.json | 12 +- source/templates/demo/default.njk | 35 - source/templates/demo/extended.njk | 50 - source/templates/demo/macros/_nav.njk | 10 + source/templates/demo/macros/nav-macro.njk | 10 - source/templates/demo/partials/_meta.njk | 13 + source/templates/demo/partials/head-meta.njk | 8 - .../{page-hover.njk => _body_hover.njk} | 2 +- .../templates/hippie/partials/_body_nav.njk | 28 + source/templates/hippie/partials/_footer.njk | 4 + source/templates/hippie/partials/_header.njk | 3 + source/templates/hippie/partials/footer.njk | 2 - .../hippie/partials/nav-page-meta.njk | 26 - 35 files changed, 332 insertions(+), 1250 deletions(-) rename source/style/hippie/mixins/{_sprites.scss => _sprite.scss} (69%) create mode 100644 source/templates/demo/_default.njk create mode 100644 source/templates/demo/_extended.njk rename source/templates/demo/{maintenance.njk => _maintenance.njk} (95%) delete mode 100644 source/templates/demo/default.njk delete mode 100644 source/templates/demo/extended.njk create mode 100644 source/templates/demo/macros/_nav.njk delete mode 100644 source/templates/demo/macros/nav-macro.njk create mode 100644 source/templates/demo/partials/_meta.njk delete mode 100644 source/templates/demo/partials/head-meta.njk rename source/templates/hippie/partials/{page-hover.njk => _body_hover.njk} (61%) create mode 100644 source/templates/hippie/partials/_body_nav.njk create mode 100644 source/templates/hippie/partials/_footer.njk create mode 100644 source/templates/hippie/partials/_header.njk delete mode 100644 source/templates/hippie/partials/footer.njk delete mode 100644 source/templates/hippie/partials/nav-page-meta.njk diff --git a/gulpfile.js b/gulpfile.js index b3f9391..0629a1e 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -32,7 +32,7 @@ const jshint = require('gulp-jshint'); const gulpif = require('gulp-if'); const changed = require('gulp-changed'); const merge = require('merge-stream'); -// const spritesmith = require('gulp.spritesmith'); +const spritesmith = require('gulp.spritesmith'); // const buffer = require('vinyl-buffer'); // const imagemin = require('gulp-imagemin'); @@ -48,7 +48,7 @@ const input = { art: { favicons: 'source/art/favicons/**/*.+(ico|png)', sprites: 'source/art/sprites/**/*.png', - images: 'source/art/images/**/*.+(png|gif|jpg)' + images: 'source/art/images/**/*.+(png|gif|jpg|webp)' }, vendor: 'vendor/**/*', demo: { @@ -201,19 +201,42 @@ function fonts() { function art() { // Move favicons to the root folder let favicons = src(input.art.favicons) + .pipe(plumber()) .pipe(changed(output.art)) .pipe(dest(output.root)) - // Assemble sprites - // Move images to the root folder let images = src(input.art.images) + .pipe(plumber()) .pipe(changed(output.art)) - .pipe(dest(output.art)) + .pipe(dest(output.art)); return merge(favicons, images) } +function sprites() { + // Assemble sprites + let sprites = src(input.art.sprites) + .pipe(plumber()) + .pipe(changed(output.art)) + .pipe(spritesmith({ + imgName: 'sprite.png', + imgPath: '../art/sprite.png', + cssName: '_sprite.scss' + })); + + var imgStream = sprites.img + // DEV: We must buffer our stream into a Buffer for `imagemin` + // .pipe(buffer()) + // .pipe(imagemin()) + .pipe(dest(output.art)); + + var cssStream = sprites.css + .pipe(dest('source/style/hippie/mixins/')); + + return merge(imgStream, cssStream); +} + // Gather dependencies for tools function vendor() { return src(input.vendor) @@ -222,21 +245,24 @@ function vendor() { } function overview() { - watch([input.screens, input.demo.data], series(nunjucks, reload)); + watch([input.templates, input.screens, input.demo.data], series(nunjucks, reload)); watch(input.style, series(styleLint, style, reload)); watch(input.code, series(codeLint, code, reload)); watch(input.fonts, series(fonts, reload)); - watch([input.art.favicons, input.art.sprites, input.art.images], series(art, reload)); + watch(input.art.sprites, series(parallel(sprites, style), reload)); + watch([input.art.favicons, input.art.images], series(art, reload)); watch(input.data, series(json, reload)); } -const assets = parallel(fonts, art, json, vendor); -const build = series(clean, assets, parallel(nunjucks, series(styleLint, style), series(codeLint, code))); +const assets = parallel(fonts, art, sprites, json, vendor); +const build = series(clean, assets, parallel(nunjucks, style, code)); +const dev = series(clean, assets, parallel(nunjucks, series(styleLint, style), series(codeLint, code))); -exports.lint = parallel(styleLint, codeLint); +exports.lint = parallel(series(style, styleLint), series(code, codeLint)); exports.assets = assets; exports.build = build; -exports.default = series(build, serve, overview); +exports.dev = dev; +exports.default = series(dev, serve, overview); // function plumbError(errTitle) { // return plumber({ diff --git a/package-lock.json b/package-lock.json index 80d2ee5..61db205 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2991,9 +2991,9 @@ "dev": true }, "object-keys": { - "version": "1.0.12", - "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.0.12.tgz", - "integrity": "sha512-FTMyFUm2wBcGHnH2eXmz7tC6IwlqQZ6mVZ+6dm6vZ4IQIHjs6FdNsQBuKGPuUUUY6NfJw2PshC08Tn6LzLDOag==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.0.tgz", + "integrity": "sha512-6OO5X1+2tYkNyNEx6TsCxEqFfRWaqx6EtMiSbGrw8Ob8v9Ne+Hl8rBAgLBZn5wjEz3s/s6U1WXFUFOcxxAwUpg==", "dev": true } } @@ -3361,554 +3361,6 @@ "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=", "dev": true }, - "fsevents": { - "version": "1.2.4", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.4.tgz", - "integrity": "sha512-z8H8/diyk76B7q5wg+Ud0+CqzcAF3mBBI/bA5ne5zrRUUIvNkJY//D3BqyH571KuAC4Nr7Rw7CjWX4r0y9DvNg==", - "dev": true, - "optional": true, - "requires": { - "nan": "^2.9.2", - "node-pre-gyp": "^0.10.0" - }, - "dependencies": { - "abbrev": { - "version": "1.1.1", - "bundled": true, - "dev": true, - "optional": true - }, - "ansi-regex": { - "version": "2.1.1", - "bundled": true, - "dev": true, - "optional": true - }, - "aproba": { - "version": "1.2.0", - "bundled": true, - "dev": true, - "optional": true - }, - "are-we-there-yet": { - "version": "1.1.4", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "delegates": "^1.0.0", - "readable-stream": "^2.0.6" - } - }, - "balanced-match": { - "version": "1.0.0", - "bundled": true, - "dev": true, - "optional": true - }, - "brace-expansion": { - "version": "1.1.11", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "balanced-match": "^1.0.0", - "concat-map": "0.0.1" - } - }, - "chownr": { - "version": "1.0.1", - "bundled": true, - "dev": true, - "optional": true - }, - "code-point-at": { - "version": "1.1.0", - "bundled": true, - "dev": true, - "optional": true - }, - "concat-map": { - "version": "0.0.1", - "bundled": true, - "dev": true, - "optional": true - }, - "console-control-strings": { - "version": "1.1.0", - "bundled": true, - "dev": true, - "optional": true - }, - "core-util-is": { - "version": "1.0.2", - "bundled": true, - "dev": true, - "optional": true - }, - "debug": { - "version": "2.6.9", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "ms": "2.0.0" - } - }, - "deep-extend": { - "version": "0.5.1", - "bundled": true, - "dev": true, - "optional": true - }, - "delegates": { - "version": "1.0.0", - "bundled": true, - "dev": true, - "optional": true - }, - "detect-libc": { - "version": "1.0.3", - "bundled": true, - "dev": true, - "optional": true - }, - "fs-minipass": { - "version": "1.2.5", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "minipass": "^2.2.1" - } - }, - "fs.realpath": { - "version": "1.0.0", - "bundled": true, - "dev": true, - "optional": true - }, - "gauge": { - "version": "2.7.4", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "aproba": "^1.0.3", - "console-control-strings": "^1.0.0", - "has-unicode": "^2.0.0", - "object-assign": "^4.1.0", - "signal-exit": "^3.0.0", - "string-width": "^1.0.1", - "strip-ansi": "^3.0.1", - "wide-align": "^1.1.0" - } - }, - "glob": { - "version": "7.1.2", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "fs.realpath": "^1.0.0", - "inflight": "^1.0.4", - "inherits": "2", - "minimatch": "^3.0.4", - "once": "^1.3.0", - "path-is-absolute": "^1.0.0" - } - }, - "has-unicode": { - "version": "2.0.1", - "bundled": true, - "dev": true, - "optional": true - }, - "iconv-lite": { - "version": "0.4.21", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "safer-buffer": "^2.1.0" - } - }, - "ignore-walk": { - "version": "3.0.1", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "minimatch": "^3.0.4" - } - }, - "inflight": { - "version": "1.0.6", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "once": "^1.3.0", - "wrappy": "1" - } - }, - "inherits": { - "version": "2.0.3", - "bundled": true, - "dev": true, - "optional": true - }, - "ini": { - "version": "1.3.5", - "bundled": true, - "dev": true, - "optional": true - }, - "is-fullwidth-code-point": { - "version": "1.0.0", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "number-is-nan": "^1.0.0" - } - }, - "isarray": { - "version": "1.0.0", - "bundled": true, - "dev": true, - "optional": true - }, - "minimatch": { - "version": "3.0.4", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "brace-expansion": "^1.1.7" - } - }, - "minimist": { - "version": "0.0.8", - "bundled": true, - "dev": true, - "optional": true - }, - "minipass": { - "version": "2.2.4", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "safe-buffer": "^5.1.1", - "yallist": "^3.0.0" - } - }, - "minizlib": { - "version": "1.1.0", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "minipass": "^2.2.1" - } - }, - "mkdirp": { - "version": "0.5.1", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "minimist": "0.0.8" - } - }, - "ms": { - "version": "2.0.0", - "bundled": true, - "dev": true, - "optional": true - }, - "needle": { - "version": "2.2.0", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "debug": "^2.1.2", - "iconv-lite": "^0.4.4", - "sax": "^1.2.4" - } - }, - "node-pre-gyp": { - "version": "0.10.0", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "detect-libc": "^1.0.2", - "mkdirp": "^0.5.1", - "needle": "^2.2.0", - "nopt": "^4.0.1", - "npm-packlist": "^1.1.6", - "npmlog": "^4.0.2", - "rc": "^1.1.7", - "rimraf": "^2.6.1", - "semver": "^5.3.0", - "tar": "^4" - } - }, - "nopt": { - "version": "4.0.1", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "abbrev": "1", - "osenv": "^0.1.4" - } - }, - "npm-bundled": { - "version": "1.0.3", - "bundled": true, - "dev": true, - "optional": true - }, - "npm-packlist": { - "version": "1.1.10", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "ignore-walk": "^3.0.1", - "npm-bundled": "^1.0.1" - } - }, - "npmlog": { - "version": "4.1.2", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "are-we-there-yet": "~1.1.2", - "console-control-strings": "~1.1.0", - "gauge": "~2.7.3", - "set-blocking": "~2.0.0" - } - }, - "number-is-nan": { - "version": "1.0.1", - "bundled": true, - "dev": true, - "optional": true - }, - "object-assign": { - "version": "4.1.1", - "bundled": true, - "dev": true, - "optional": true - }, - "once": { - "version": "1.4.0", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "wrappy": "1" - } - }, - "os-homedir": { - "version": "1.0.2", - "bundled": true, - "dev": true, - "optional": true - }, - "os-tmpdir": { - "version": "1.0.2", - "bundled": true, - "dev": true, - "optional": true - }, - "osenv": { - "version": "0.1.5", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "os-homedir": "^1.0.0", - "os-tmpdir": "^1.0.0" - } - }, - "path-is-absolute": { - "version": "1.0.1", - "bundled": true, - "dev": true, - "optional": true - }, - "process-nextick-args": { - "version": "2.0.0", - "bundled": true, - "dev": true, - "optional": true - }, - "rc": { - "version": "1.2.7", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "deep-extend": "^0.5.1", - "ini": "~1.3.0", - "minimist": "^1.2.0", - "strip-json-comments": "~2.0.1" - }, - "dependencies": { - "minimist": { - "version": "1.2.0", - "bundled": true, - "dev": true, - "optional": true - } - } - }, - "readable-stream": { - "version": "2.3.6", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "core-util-is": "~1.0.0", - "inherits": "~2.0.3", - "isarray": "~1.0.0", - "process-nextick-args": "~2.0.0", - "safe-buffer": "~5.1.1", - "string_decoder": "~1.1.1", - "util-deprecate": "~1.0.1" - } - }, - "rimraf": { - "version": "2.6.2", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "glob": "^7.0.5" - } - }, - "safe-buffer": { - "version": "5.1.1", - "bundled": true, - "dev": true, - "optional": true - }, - "safer-buffer": { - "version": "2.1.2", - "bundled": true, - "dev": true, - "optional": true - }, - "sax": { - "version": "1.2.4", - "bundled": true, - "dev": true, - "optional": true - }, - "semver": { - "version": "5.5.0", - "bundled": true, - "dev": true, - "optional": true - }, - "set-blocking": { - "version": "2.0.0", - "bundled": true, - "dev": true, - "optional": true - }, - "signal-exit": { - "version": "3.0.2", - "bundled": true, - "dev": true, - "optional": true - }, - "string-width": { - "version": "1.0.2", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "code-point-at": "^1.0.0", - "is-fullwidth-code-point": "^1.0.0", - "strip-ansi": "^3.0.0" - } - }, - "string_decoder": { - "version": "1.1.1", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "safe-buffer": "~5.1.0" - } - }, - "strip-ansi": { - "version": "3.0.1", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "ansi-regex": "^2.0.0" - } - }, - "strip-json-comments": { - "version": "2.0.1", - "bundled": true, - "dev": true, - "optional": true - }, - "tar": { - "version": "4.4.1", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "chownr": "^1.0.1", - "fs-minipass": "^1.2.5", - "minipass": "^2.2.4", - "minizlib": "^1.1.0", - "mkdirp": "^0.5.0", - "safe-buffer": "^5.1.1", - "yallist": "^3.0.2" - } - }, - "util-deprecate": { - "version": "1.0.2", - "bundled": true, - "dev": true, - "optional": true - }, - "wide-align": { - "version": "1.1.2", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "string-width": "^1.0.2" - } - }, - "wrappy": { - "version": "1.0.2", - "bundled": true, - "dev": true, - "optional": true - }, - "yallist": { - "version": "3.0.2", - "bundled": true, - "dev": true, - "optional": true - } - } - }, "fstream": { "version": "1.0.11", "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.11.tgz", @@ -4535,40 +3987,28 @@ } }, "gulp-nunjucks-render": { - "version": "2.2.2", - "resolved": "https://registry.npmjs.org/gulp-nunjucks-render/-/gulp-nunjucks-render-2.2.2.tgz", - "integrity": "sha512-L4BiPLm5MSDhBmG+qJ13aNBcyqdI9Ligz9tFqh7R+ZyYK0Gi7pCUYoiWXxY2yFCFHUkQE4UbxYFdzR5A6MKPRQ==", + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/gulp-nunjucks-render/-/gulp-nunjucks-render-2.2.3.tgz", + "integrity": "sha512-YHrmwiwPw2DN16WJVj8S2tgUanB1ssZE8e5rRF6rH1T41mhO7r59iAqw92Yz5WSZXYB9G+uYXDTCODgixYPIRw==", "dev": true, "requires": { - "lodash": "^3.10.0", - "nunjucks": "^3.0.0", - "plugin-error": "^0.1.2", + "lodash": "^4.17.11", + "nunjucks": "^3.1.2", + "plugin-error": "^1.0.1", "replace-ext": "^1.0.0", - "through2": "~0.4.0" + "through2": "^2.0.3" }, "dependencies": { - "isarray": { - "version": "0.0.1", - "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", - "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=", - "dev": true - }, - "lodash": { - "version": "3.10.1", - "resolved": "http://registry.npmjs.org/lodash/-/lodash-3.10.1.tgz", - "integrity": "sha1-W/Rejkm6QYnhfUgnid/RW9FAt7Y=", - "dev": true - }, - "readable-stream": { - "version": "1.0.34", - "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz", - "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=", + "plugin-error": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/plugin-error/-/plugin-error-1.0.1.tgz", + "integrity": "sha512-L1zP0dk7vGweZME2i+EeakvUNqSrdiI3F91TwEoYiGrAfUXmVv6fJIq4g82PAXxNsWOp0J7ZqQy/3Szz0ajTxA==", "dev": true, "requires": { - "core-util-is": "~1.0.0", - "inherits": "~2.0.1", - "isarray": "0.0.1", - "string_decoder": "~0.10.x" + "ansi-colors": "^1.0.1", + "arr-diff": "^4.0.0", + "arr-union": "^3.1.0", + "extend-shallow": "^3.0.2" } }, "replace-ext": { @@ -4576,31 +4016,6 @@ "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-1.0.0.tgz", "integrity": "sha1-3mMSg3P8v3w8z6TeWkgMRaZ5WOs=", "dev": true - }, - "string_decoder": { - "version": "0.10.31", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz", - "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=", - "dev": true - }, - "through2": { - "version": "0.4.2", - "resolved": "https://registry.npmjs.org/through2/-/through2-0.4.2.tgz", - "integrity": "sha1-2/WGYDEVHsg1K7bE22SiKSqEC5s=", - "dev": true, - "requires": { - "readable-stream": "~1.0.17", - "xtend": "~2.1.1" - } - }, - "xtend": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/xtend/-/xtend-2.1.2.tgz", - "integrity": "sha1-bv7MKk2tjmlixJAbM3znuoe10os=", - "dev": true, - "requires": { - "object-keys": "~0.4.0" - } } } }, @@ -4917,9 +4332,9 @@ } }, "handlebars": { - "version": "4.0.12", - "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.0.12.tgz", - "integrity": "sha512-RhmTekP+FZL+XNhwS1Wf+bTTZpdLougwt5pcgA1tuz6Jcx0fpH/7z0qd71RKnZHBCxIRBHfBOnio4gViPemNzA==", + "version": "4.0.13", + "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.0.13.tgz", + "integrity": "sha512-uydY0jy4Z3wy/iGXsi64UtLD4t1fFJe16c/NFxsYE4WdQis8ZCzOXUZaPQNG0e5bgtLQV41QTfqBindhEjnpyQ==", "dev": true, "requires": { "async": "^2.5.0", @@ -4929,37 +4344,19 @@ }, "dependencies": { "async": { - "version": "2.6.1", - "resolved": "https://registry.npmjs.org/async/-/async-2.6.1.tgz", - "integrity": "sha512-fNEiL2+AZt6AlAw/29Cr0UDe4sRAHCpEHh54WMz+Bb7QfNcFw4h3loofyJpLeQs4Yx7yuqu/2dLgM5hKOs6HlQ==", + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/async/-/async-2.6.2.tgz", + "integrity": "sha512-H1qVYh1MYhEEFLsP97cVKqCGo7KfCyTt6uEWqsTBr9SO84oK9Uwbyd/yCW+6rKJLHksBNUVWZDAjfS+Ccx0Bbg==", "dev": true, "requires": { - "lodash": "^4.17.10" + "lodash": "^4.17.11" } }, - "commander": { - "version": "2.17.1", - "resolved": "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz", - "integrity": "sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==", - "dev": true, - "optional": true - }, "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true - }, - "uglify-js": { - "version": "3.4.9", - "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.9.tgz", - "integrity": "sha512-8CJsbKOtEbnJsTyv6LE6m6ZKniqMiFWmm9sRbopbkGs3gMPPfd3Fh8iIA4Ykv5MgaTbqHr4BaoGLJLZNhsrW1Q==", - "dev": true, - "optional": true, - "requires": { - "commander": "~2.17.1", - "source-map": "~0.6.1" - } } } }, @@ -6016,13 +5413,6 @@ "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=", "dev": true }, - "lodash.debounce": { - "version": "4.0.8", - "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", - "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=", - "dev": true, - "optional": true - }, "lodash.defaults": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz", @@ -6896,397 +6286,23 @@ "dev": true }, "nunjucks": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/nunjucks/-/nunjucks-3.1.3.tgz", - "integrity": "sha512-UtlKKAzg9vdtvURdNy9DjGhiB7qYf2R7Ez+hsucOQG5gYJexSggXSSZ+9IpSDyKOlWu/4rMVPH2oVoANOSqNKA==", + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/nunjucks/-/nunjucks-3.2.0.tgz", + "integrity": "sha512-YS/qEQ6N7qCnUdm6EoYRBfJUdWNT0PpKbbRnogV2XyXbBm2STIP1O6yrdZHgwMVK7fIYUx7i8+yatEixnXSB1w==", "dev": true, "requires": { "a-sync-waterfall": "^1.0.0", "asap": "^2.0.3", "chokidar": "^2.0.0", - "postinstall-build": "^5.0.1", "yargs": "^3.32.0" }, "dependencies": { - "anymatch": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz", - "integrity": "sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==", - "dev": true, - "optional": true, - "requires": { - "micromatch": "^3.1.4", - "normalize-path": "^2.1.1" - } - }, - "arr-diff": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz", - "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=", - "dev": true, - "optional": true - }, - "array-unique": { - "version": "0.3.2", - "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz", - "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=", - "dev": true, - "optional": true - }, - "braces": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz", - "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==", - "dev": true, - "optional": true, - "requires": { - "arr-flatten": "^1.1.0", - "array-unique": "^0.3.2", - "extend-shallow": "^2.0.1", - "fill-range": "^4.0.0", - "isobject": "^3.0.1", - "repeat-element": "^1.1.2", - "snapdragon": "^0.8.1", - "snapdragon-node": "^2.0.1", - "split-string": "^3.0.2", - "to-regex": "^3.0.1" - }, - "dependencies": { - "extend-shallow": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", - "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", - "dev": true, - "optional": true, - "requires": { - "is-extendable": "^0.1.0" - } - } - } - }, "camelcase": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-2.1.1.tgz", "integrity": "sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8=", "dev": true }, - "chokidar": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.0.4.tgz", - "integrity": "sha512-z9n7yt9rOvIJrMhvDtDictKrkFHeihkNl6uWMmZlmL6tJtX9Cs+87oK+teBx+JIgzvbX3yZHT3eF8vpbDxHJXQ==", - "dev": true, - "optional": true, - "requires": { - "anymatch": "^2.0.0", - "async-each": "^1.0.0", - "braces": "^2.3.0", - "fsevents": "^1.2.2", - "glob-parent": "^3.1.0", - "inherits": "^2.0.1", - "is-binary-path": "^1.0.0", - "is-glob": "^4.0.0", - "lodash.debounce": "^4.0.8", - "normalize-path": "^2.1.1", - "path-is-absolute": "^1.0.0", - "readdirp": "^2.0.0", - "upath": "^1.0.5" - } - }, - "expand-brackets": { - "version": "2.1.4", - "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz", - "integrity": "sha1-t3c14xXOMPa27/D4OwQVGiJEliI=", - "dev": true, - "optional": true, - "requires": { - "debug": "^2.3.3", - "define-property": "^0.2.5", - "extend-shallow": "^2.0.1", - "posix-character-classes": "^0.1.0", - "regex-not": "^1.0.0", - "snapdragon": "^0.8.1", - "to-regex": "^3.0.1" - }, - "dependencies": { - "define-property": { - "version": "0.2.5", - "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz", - "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=", - "dev": true, - "optional": true, - "requires": { - "is-descriptor": "^0.1.0" - } - }, - "extend-shallow": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", - "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", - "dev": true, - "optional": true, - "requires": { - "is-extendable": "^0.1.0" - } - }, - "is-accessor-descriptor": { - "version": "0.1.6", - "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz", - "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=", - "dev": true, - "optional": true, - "requires": { - "kind-of": "^3.0.2" - }, - "dependencies": { - "kind-of": { - "version": "3.2.2", - "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", - "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", - "dev": true, - "optional": true, - "requires": { - "is-buffer": "^1.1.5" - } - } - } - }, - "is-data-descriptor": { - "version": "0.1.4", - "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz", - "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=", - "dev": true, - "optional": true, - "requires": { - "kind-of": "^3.0.2" - }, - "dependencies": { - "kind-of": { - "version": "3.2.2", - "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", - "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", - "dev": true, - "optional": true, - "requires": { - "is-buffer": "^1.1.5" - } - } - } - }, - "is-descriptor": { - "version": "0.1.6", - "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz", - "integrity": "sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==", - "dev": true, - "optional": true, - "requires": { - "is-accessor-descriptor": "^0.1.6", - "is-data-descriptor": "^0.1.4", - "kind-of": "^5.0.0" - } - }, - "kind-of": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz", - "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==", - "dev": true, - "optional": true - } - } - }, - "extglob": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz", - "integrity": "sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==", - "dev": true, - "optional": true, - "requires": { - "array-unique": "^0.3.2", - "define-property": "^1.0.0", - "expand-brackets": "^2.1.4", - "extend-shallow": "^2.0.1", - "fragment-cache": "^0.2.1", - "regex-not": "^1.0.0", - "snapdragon": "^0.8.1", - "to-regex": "^3.0.1" - }, - "dependencies": { - "define-property": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz", - "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=", - "dev": true, - "optional": true, - "requires": { - "is-descriptor": "^1.0.0" - } - }, - "extend-shallow": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", - "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", - "dev": true, - "optional": true, - "requires": { - "is-extendable": "^0.1.0" - } - } - } - }, - "fill-range": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz", - "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=", - "dev": true, - "optional": true, - "requires": { - "extend-shallow": "^2.0.1", - "is-number": "^3.0.0", - "repeat-string": "^1.6.1", - "to-regex-range": "^2.1.0" - }, - "dependencies": { - "extend-shallow": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", - "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", - "dev": true, - "optional": true, - "requires": { - "is-extendable": "^0.1.0" - } - } - } - }, - "glob-parent": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz", - "integrity": "sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=", - "dev": true, - "optional": true, - "requires": { - "is-glob": "^3.1.0", - "path-dirname": "^1.0.0" - }, - "dependencies": { - "is-glob": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz", - "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=", - "dev": true, - "optional": true, - "requires": { - "is-extglob": "^2.1.0" - } - } - } - }, - "is-accessor-descriptor": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz", - "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==", - "dev": true, - "optional": true, - "requires": { - "kind-of": "^6.0.0" - } - }, - "is-data-descriptor": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz", - "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==", - "dev": true, - "optional": true, - "requires": { - "kind-of": "^6.0.0" - } - }, - "is-descriptor": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz", - "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==", - "dev": true, - "optional": true, - "requires": { - "is-accessor-descriptor": "^1.0.0", - "is-data-descriptor": "^1.0.0", - "kind-of": "^6.0.2" - } - }, - "is-extglob": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", - "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=", - "dev": true, - "optional": true - }, - "is-glob": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.0.tgz", - "integrity": "sha1-lSHHaEXMJhCoUgPd8ICpWML/q8A=", - "dev": true, - "optional": true, - "requires": { - "is-extglob": "^2.1.1" - } - }, - "is-number": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz", - "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=", - "dev": true, - "optional": true, - "requires": { - "kind-of": "^3.0.2" - }, - "dependencies": { - "kind-of": { - "version": "3.2.2", - "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", - "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", - "dev": true, - "optional": true, - "requires": { - "is-buffer": "^1.1.5" - } - } - } - }, - "isobject": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz", - "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=", - "dev": true, - "optional": true - }, - "kind-of": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz", - "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==", - "dev": true, - "optional": true - }, - "micromatch": { - "version": "3.1.10", - "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz", - "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==", - "dev": true, - "optional": true, - "requires": { - "arr-diff": "^4.0.0", - "array-unique": "^0.3.2", - "braces": "^2.3.1", - "define-property": "^2.0.2", - "extend-shallow": "^3.0.2", - "extglob": "^2.0.4", - "fragment-cache": "^0.2.1", - "kind-of": "^6.0.2", - "nanomatch": "^1.2.9", - "object.pick": "^1.3.0", - "regex-not": "^1.0.0", - "snapdragon": "^0.8.1", - "to-regex": "^3.0.2" - } - }, "window-size": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.4.tgz", @@ -7295,7 +6311,7 @@ }, "yargs": { "version": "3.32.0", - "resolved": "http://registry.npmjs.org/yargs/-/yargs-3.32.0.tgz", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.32.0.tgz", "integrity": "sha1-AwiOnr+edWtpdRYR0qXvWRSCyZU=", "dev": true, "requires": { @@ -7948,9 +6964,9 @@ "dev": true }, "pngjs": { - "version": "3.3.3", - "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-3.3.3.tgz", - "integrity": "sha512-1n3Z4p3IOxArEs1VRXnZ/RXdfEniAUS9jb68g58FIXMNkPJeZd+Qh4Uq7/e0LVxAQGos1eIUrqrt4FpjdnEd+Q==", + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-3.4.0.tgz", + "integrity": "sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==", "dev": true }, "pngjs-nozlib": { @@ -8040,12 +7056,6 @@ "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==", "dev": true }, - "postinstall-build": { - "version": "5.0.3", - "resolved": "https://registry.npmjs.org/postinstall-build/-/postinstall-build-5.0.3.tgz", - "integrity": "sha512-vPvPe8TKgp4FLgY3+DfxCE5PIfoXBK2lyLfNCxsRbDsV6vS4oU5RG/IWxrblMn6heagbnMED3MemUQllQ2bQUg==", - "dev": true - }, "prelude-ls": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz", @@ -9533,16 +8543,16 @@ "dev": true }, "spritesheet-templates": { - "version": "10.2.2", - "resolved": "https://registry.npmjs.org/spritesheet-templates/-/spritesheet-templates-10.2.2.tgz", - "integrity": "sha1-6J2ihbvM20HFm1eYFnTikGeJrWY=", + "version": "10.2.4", + "resolved": "https://registry.npmjs.org/spritesheet-templates/-/spritesheet-templates-10.2.4.tgz", + "integrity": "sha512-J3CpCiU93NeMvRCfqn+yFo0vw1xrJarVjODuHVTAOHuKAhuvgZVcB2Su/O41N8Avwivurq3vNMPDY+gyukobQQ==", "dev": true, "requires": { "handlebars": "~4.0.5", "handlebars-layouts": "~1.1.0", "json-content-demux": "~0.1.2", "underscore": "~1.4.2", - "underscore.string": "~3.0.3" + "underscore.string": "~3.3.0" }, "dependencies": { "underscore": { @@ -10166,6 +9176,33 @@ "integrity": "sha512-uRdSdu1oA1rncCQL7sCj8vSyZkgtL7faaw9Tc9rZ3mGgraQ7+Pdx7w5mnOSF3gw9ZNG6oc+KXfkon3bKuROm0g==", "dev": true }, + "uglify-js": { + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.5.0.tgz", + "integrity": "sha512-kY2sHdru6BcIDg+i1SCZ1bpPhZJ6yiE0bEKLEJDC4M/lDSMhr/zVJeuEzvHJGjAXJCizSzUVh9atREf2jnR7yQ==", + "dev": true, + "optional": true, + "requires": { + "commander": "~2.19.0", + "source-map": "~0.6.1" + }, + "dependencies": { + "commander": { + "version": "2.19.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.19.0.tgz", + "integrity": "sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==", + "dev": true, + "optional": true + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true, + "optional": true + } + } + }, "uglify-to-browserify": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz", @@ -10192,10 +9229,14 @@ "dev": true }, "underscore.string": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/underscore.string/-/underscore.string-3.0.3.tgz", - "integrity": "sha1-Rhe4waJQz25QZPu7Nj0PqWzxRVI=", - "dev": true + "version": "3.3.5", + "resolved": "https://registry.npmjs.org/underscore.string/-/underscore.string-3.3.5.tgz", + "integrity": "sha512-g+dpmgn+XBneLmXXo+sGlW5xQEt4ErkS3mgeN2GFbremYeMBSJKr9Wf2KJplQVaiPY/f7FN6atosWYNm9ovrYg==", + "dev": true, + "requires": { + "sprintf-js": "^1.0.3", + "util-deprecate": "^1.0.2" + } }, "undertaker": { "version": "1.2.0", diff --git a/package.json b/package.json index 2397c40..ad08a24 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hippie", - "version": "0.4.0", + "version": "0.4.1", "description": "Hippie interweaves preeminent personal interface elements", "main": "gulpfile.js", "scripts": { @@ -30,7 +30,7 @@ "gulp-jshint": "^2.1.0", "gulp-json-concat": "^0.1.1", "gulp-notify": "^3.2.0", - "gulp-nunjucks-render": "^2.2.2", + "gulp-nunjucks-render": "^2.2.3", "gulp-plumber": "^1.2.1", "gulp-remember": "^1.0.1", "gulp-rename": "^1.4.0", diff --git a/source/screens/demo.njk b/source/screens/demo.njk index 112103a..2b9eb62 100644 --- a/source/screens/demo.njk +++ b/source/screens/demo.njk @@ -2,14 +2,14 @@ {% set pageId = "index" %} {% set pageClass = "height_full" %} -{% extends "demo/default.njk" %} +{% extends "demo/_default.njk" %} {% block title %}Index{% endblock %} {% block head %} {{ super() }} {% endblock %} -{% block body_content %} +{% block body %}

This is {{hippie.brand | upper}}

@@ -18,19 +18,18 @@

For a very basic start you can make a copy of the demo page blank.njk. You can find it at /source/pages/demo.

The demo folder contains an overview of all elements and also examples for style combinations and even whole page layouts.
Follow the white rabbit.

Overview

-
    - - {% for link in data.demoadditionallinks %} -
  • {{link.text}}
    • - {% endfor %} -
+
- 
-  ()()
-  (..)
-C(")(")
+ 
  ()()
  (..)
C(")(")

Demo Pages

-
+
-

Neben den vielen speziellen Elmenten gibt es auch ein Element, das keine vordefinierte Bedeutung hat. Es ist das <span> Element.
Es dient dazu ganz individuelle Auszeichnungen zu ermöglichen die eher optische Auswirkungen haben und eben keine inhaltlichen. Mit den Attributen id oder class werden dazu eigene Typen des Elements definiert. Diese Möglichkeit der Definition von individuellen Elementen ist ein Grundprinzip der Auszeichnungssprache HTML.

+

Neben den vielen speziellen Elementen gibt es auch ein Element, das keine vordefinierte Bedeutung hat. Es ist das <span> Element.
Es dient dazu ganz individuelle Auszeichnungen zu ermöglichen die eher optische Auswirkungen haben und eben keine inhaltlichen. Mit den Attributen id oder class werden dazu eigene Typen des Elements definiert. Diese Möglichkeit der Definition von individuellen Elementen ist ein Grundprinzip der Auszeichnungssprache HTML.

Mit der Einführung von Absätzen wurde auch schon das <br> Element erwähnt und seitdem häufig benutzt. Es erzeugt einen Zeilenumbruch. Es wird dadurch kein neuer Absatz erstellt. Es dient auch nicht dazu optischen Abstand zu erzeugen, sondern innerhalb eines Absatzes den Text umzubrechen.

Eine besondere Form des Zeilenumbruchs kann mit <wbr> eingesetzt werden. Es stellt die Möglichkeit für einen Zeilenumbruch dar. Da das Format eines HTML-Dokumentes häufig nicht vorhersehbar ist, kann solch ein Element einen Umbruch erzeugen falls ein Wort zu lang für eine Textzeile sein sollte.

Und der Löwe brüllte "RRRRrrrrooooooooaaaaAAAAAAAAHHHHhhhhrrrrrrrrr"!

@@ -581,7 +579,6 @@ -{% include "hippie/partials/footer.njk" %} {% endblock %} {% block script %} diff --git a/source/screens/demo/maintenance.njk b/source/screens/demo/maintenance.njk index 169137d..52d7df9 100644 --- a/source/screens/demo/maintenance.njk +++ b/source/screens/demo/maintenance.njk @@ -2,7 +2,7 @@ {% set pageId = "blank" %} {% set pageClass = "height_full" %} -{% extends "demo/maintenance.njk" %} +{% extends "demo/_maintenance.njk" %} {% block title %}Maintenance{% endblock %} @@ -10,7 +10,7 @@ {{ super() }} {% endblock %} -{% block body_content %} +{% block main %}

HIPPIE

diff --git a/source/screens/demo/os.njk b/source/screens/demo/os.njk index 03d9514..63710ac 100644 --- a/source/screens/demo/os.njk +++ b/source/screens/demo/os.njk @@ -2,15 +2,14 @@ {% set pageId = "os" %} {% set pageClass = "" %} -{% extends "demo/extended.njk" %} +{% extends "demo/_extended.njk" %} {% block title %}OS{% endblock %} {% block head %} {{ super() }} {% endblock %} -{% block body_content %} -{# {% include "partials/page-hover.njk" %} #} +{% block main %}
@@ -132,7 +131,6 @@
-{% include "hippie/partials/footer.njk" %} {% endblock %} {% block script %} diff --git a/source/screens/demo/tests.njk b/source/screens/demo/tests.njk index 4122e28..34449ff 100644 --- a/source/screens/demo/tests.njk +++ b/source/screens/demo/tests.njk @@ -2,7 +2,8 @@ {% set pageId = "tests" %} {% set pageClass = "height_full" %} -{% extends "demo/default.njk" %} +{% extends "demo/_default.njk" %} +{% import "demo/macros/_nav.njk" as nav %} {% block title %}Tests{% endblock %} {% block head %} @@ -19,7 +20,7 @@ {% endblock %} -{% block body_content %} +{% block body %} @@ -28,8 +29,7 @@

Navigation

-{% import "demo/macros/nav-macro.njk" as forms %} -{{ forms.active('Beispiel') }} +{{ nav.main(data.demoadditionallinks, 'Tests') }} {% endblock %} {% block script %} diff --git a/source/style/hippie/elements/_grouping.scss b/source/style/hippie/elements/_grouping.scss index a9a6850..ba80867 100644 --- a/source/style/hippie/elements/_grouping.scss +++ b/source/style/hippie/elements/_grouping.scss @@ -78,6 +78,7 @@ hr { // ----------------------------------------------------------------------------- pre { @extend %basic_mono; + white-space: pre-wrap; } .pre_code { diff --git a/source/style/hippie/mixins/_all.scss b/source/style/hippie/mixins/_all.scss index 9f88744..b3bd5e8 100644 --- a/source/style/hippie/mixins/_all.scss +++ b/source/style/hippie/mixins/_all.scss @@ -1,5 +1,5 @@ @import "media_query"; -@import "sprites"; +@import "sprite"; @import "flow"; @import "color"; @import "user_agent"; diff --git a/source/style/hippie/mixins/_sprites.scss b/source/style/hippie/mixins/_sprite.scss similarity index 69% rename from source/style/hippie/mixins/_sprites.scss rename to source/style/hippie/mixins/_sprite.scss index c867dec..6068269 100644 --- a/source/style/hippie/mixins/_sprites.scss +++ b/source/style/hippie/mixins/_sprite.scss @@ -10,27 +10,27 @@ // At the bottom of this section, we provide information about the spritesheet itself // $spritesheet: width height image $spritesheet-sprites; $down-name: 'down'; -$down-x: 32px; +$down-x: 64px; $down-y: 0px; -$down-offset-x: -32px; +$down-offset-x: -64px; $down-offset-y: 0px; $down-width: 32px; $down-height: 32px; -$down-total-width: 64px; +$down-total-width: 96px; $down-total-height: 64px; -$down-image: '../art/sprites.png'; -$down: (32px, 0px, -32px, 0px, 32px, 32px, 64px, 64px, '../art/sprites.png', 'down', ); +$down-image: '../art/sprite.png'; +$down: (64px, 0px, -64px, 0px, 32px, 32px, 96px, 64px, '../art/sprite.png', 'down', ); $meta-name: 'meta'; -$meta-x: 32px; +$meta-x: 64px; $meta-y: 32px; -$meta-offset-x: -32px; +$meta-offset-x: -64px; $meta-offset-y: -32px; $meta-width: 32px; $meta-height: 32px; -$meta-total-width: 64px; +$meta-total-width: 96px; $meta-total-height: 64px; -$meta-image: '../art/sprites.png'; -$meta: (32px, 32px, -32px, -32px, 32px, 32px, 64px, 64px, '../art/sprites.png', 'meta', ); +$meta-image: '../art/sprite.png'; +$meta: (64px, 32px, -64px, -32px, 32px, 32px, 96px, 64px, '../art/sprite.png', 'meta', ); $up-name: 'up'; $up-x: 0px; $up-y: 0px; @@ -38,15 +38,26 @@ $up-offset-x: 0px; $up-offset-y: 0px; $up-width: 32px; $up-height: 64px; -$up-total-width: 64px; +$up-total-width: 96px; $up-total-height: 64px; -$up-image: '../art/sprites.png'; -$up: (0px, 0px, 0px, 0px, 32px, 64px, 64px, 64px, '../art/sprites.png', 'up', ); -$spritesheet-width: 64px; +$up-image: '../art/sprite.png'; +$up: (0px, 0px, 0px, 0px, 32px, 64px, 96px, 64px, '../art/sprite.png', 'up', ); +$up2-name: 'up2'; +$up2-x: 32px; +$up2-y: 0px; +$up2-offset-x: -32px; +$up2-offset-y: 0px; +$up2-width: 32px; +$up2-height: 64px; +$up2-total-width: 96px; +$up2-total-height: 64px; +$up2-image: '../art/sprite.png'; +$up2: (32px, 0px, -32px, 0px, 32px, 64px, 96px, 64px, '../art/sprite.png', 'up2', ); +$spritesheet-width: 96px; $spritesheet-height: 64px; -$spritesheet-image: '../art/sprites.png'; -$spritesheet-sprites: ($down, $meta, $up, ); -$spritesheet: (64px, 64px, '../art/sprites.png', $spritesheet-sprites, ); +$spritesheet-image: '../art/sprite.png'; +$spritesheet-sprites: ($down, $meta, $up, $up2, ); +$spritesheet: (96px, 64px, '../art/sprite.png', $spritesheet-sprites, ); // The provided mixins are intended to be used with the array-like variables // diff --git a/source/templates/demo/_default.njk b/source/templates/demo/_default.njk new file mode 100644 index 0000000..b485bda --- /dev/null +++ b/source/templates/demo/_default.njk @@ -0,0 +1,29 @@ + + + + + + + {% block head %} + {% block title %}{% endblock %} - HIPPIE + + {% include "demo/partials/_meta.njk" %} + + {% block link %}{% endblock %} + + + + {% endblock %} + + + + {% block body %}{% endblock %} + + {% block script %} + + {% endblock %} + + diff --git a/source/templates/demo/_extended.njk b/source/templates/demo/_extended.njk new file mode 100644 index 0000000..4a583a3 --- /dev/null +++ b/source/templates/demo/_extended.njk @@ -0,0 +1,49 @@ + + + + + + + {% block head %} + {% block title %}{% endblock %} - HIPPIE + + {% include "demo/partials/_meta.njk" %} + + + + + + + {% block link %}{% endblock %} + + + + + {% endblock %} + + + + {% include "hippie/partials/_body_hover.njk" %} +
+ {% include "hippie/partials/_header.njk" %} + +
+ {% block main %}{% endblock %} +
+ + {% include "hippie/partials/_footer.njk" %} +
+ + {% block script %} + + {# #} + {% endblock %} + + diff --git a/source/templates/demo/maintenance.njk b/source/templates/demo/_maintenance.njk similarity index 95% rename from source/templates/demo/maintenance.njk rename to source/templates/demo/_maintenance.njk index 0579237..fbf6366 100644 --- a/source/templates/demo/maintenance.njk +++ b/source/templates/demo/_maintenance.njk @@ -7,7 +7,7 @@ {% block head %} {% block title %}{% endblock %} - HIPPIE - {% include "demo/partials/head-meta.njk" %} + {% include "demo/partials/_meta.njk" %} @@ -18,7 +18,7 @@ - {% block body_content %} + {% block main %} {% import "hippie/macros/footer-status.njk" as status %} {{ status.footer() }} diff --git a/source/templates/demo/data.json b/source/templates/demo/data.json index 6623626..ba498a4 100644 --- a/source/templates/demo/data.json +++ b/source/templates/demo/data.json @@ -1,19 +1,23 @@ { "demoadditionallinks": [ { - "href": "demo/intro.html", + "href": "/demo.html", + "text": "Index" + }, + { + "href": "/demo/intro.html", "text": "Intro" }, { - "href": "demo/elements.html", + "href": "/demo/elements.html", "text": "Elements" }, { - "href": "demo/examples.html", + "href": "/demo/examples.html", "text": "Examples" }, { - "href": "demo/tests.html", + "href": "/demo/tests.html", "text": "Tests" } ], diff --git a/source/templates/demo/default.njk b/source/templates/demo/default.njk deleted file mode 100644 index e8ee016..0000000 --- a/source/templates/demo/default.njk +++ /dev/null @@ -1,35 +0,0 @@ - - - - - - - {% block head %} - {% block title %}{% endblock %} - HIPPIE - - {% include "demo/partials/head-meta.njk" %} - - - - - - {% block link %}{% endblock %} - - - - {% endblock %} - - - - {% block body_content %}{% endblock %} - - {% block script %} - - {# #} - - {% endblock %} - - diff --git a/source/templates/demo/extended.njk b/source/templates/demo/extended.njk deleted file mode 100644 index 3918148..0000000 --- a/source/templates/demo/extended.njk +++ /dev/null @@ -1,50 +0,0 @@ - - - - - - - {% block head %} - {% block title %}{% endblock %} - HIPPIE - - {% include "demo/partials/head-meta.njk" %} - - - - - - - - - - {% block link %}{% endblock %} - - - - {% endblock %} - - - - {% include "hippie/partials/page-hover.njk" %} -
-
- {% block body_header %} - - {% endblock %} -
-
- {% block body_content %}{% endblock %} -
-
- - {# #} - {% block script %}{% endblock %} - - diff --git a/source/templates/demo/macros/_nav.njk b/source/templates/demo/macros/_nav.njk new file mode 100644 index 0000000..0178835 --- /dev/null +++ b/source/templates/demo/macros/_nav.njk @@ -0,0 +1,10 @@ + +{% macro main(data, active='') %} + +{% endmacro %} diff --git a/source/templates/demo/macros/nav-macro.njk b/source/templates/demo/macros/nav-macro.njk deleted file mode 100644 index 8888224..0000000 --- a/source/templates/demo/macros/nav-macro.njk +++ /dev/null @@ -1,10 +0,0 @@ -{% set item = [['one', 'filename'], ['two', 'filename']] %} -{% macro active(activePage='') %} - -{%- endmacro %} diff --git a/source/templates/demo/partials/_meta.njk b/source/templates/demo/partials/_meta.njk new file mode 100644 index 0000000..1c6f05c --- /dev/null +++ b/source/templates/demo/partials/_meta.njk @@ -0,0 +1,13 @@ + + + + + + + +{# #} + + +{# #} + + diff --git a/source/templates/demo/partials/head-meta.njk b/source/templates/demo/partials/head-meta.njk deleted file mode 100644 index f38f8ae..0000000 --- a/source/templates/demo/partials/head-meta.njk +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/source/templates/hippie/partials/page-hover.njk b/source/templates/hippie/partials/_body_hover.njk similarity index 61% rename from source/templates/hippie/partials/page-hover.njk rename to source/templates/hippie/partials/_body_hover.njk index c1558e8..4ea86a4 100644 --- a/source/templates/hippie/partials/page-hover.njk +++ b/source/templates/hippie/partials/_body_hover.njk @@ -1,2 +1,2 @@ - +
diff --git a/source/templates/hippie/partials/_body_nav.njk b/source/templates/hippie/partials/_body_nav.njk new file mode 100644 index 0000000..dd40374 --- /dev/null +++ b/source/templates/hippie/partials/_body_nav.njk @@ -0,0 +1,28 @@ + +
+ +
+{#
+ ? +
#} diff --git a/source/templates/hippie/partials/_footer.njk b/source/templates/hippie/partials/_footer.njk new file mode 100644 index 0000000..c646022 --- /dev/null +++ b/source/templates/hippie/partials/_footer.njk @@ -0,0 +1,4 @@ + + diff --git a/source/templates/hippie/partials/_header.njk b/source/templates/hippie/partials/_header.njk new file mode 100644 index 0000000..c04d2df --- /dev/null +++ b/source/templates/hippie/partials/_header.njk @@ -0,0 +1,3 @@ + +
+
diff --git a/source/templates/hippie/partials/footer.njk b/source/templates/hippie/partials/footer.njk deleted file mode 100644 index ee305b2..0000000 --- a/source/templates/hippie/partials/footer.njk +++ /dev/null @@ -1,2 +0,0 @@ - -
diff --git a/source/templates/hippie/partials/nav-page-meta.njk b/source/templates/hippie/partials/nav-page-meta.njk deleted file mode 100644 index fe2a213..0000000 --- a/source/templates/hippie/partials/nav-page-meta.njk +++ /dev/null @@ -1,26 +0,0 @@ - - -{#
- ? -
#}