interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

Move tasks to separate files and simplify

Browse source
This commit is contained in:
Stephan Hagedorn 2021-03-09 22:54:56 +01:00
parent dde26ec45e
commit 06ba111392
12 changed files with 1560 additions and 1030 deletions
Download patch file Download diff file Expand all files Collapse all files

15
gulp/config.js
View file

@ -1,23 +1,24 @@
const src = 'source/'; const src = 'source/';
const dest = 'build/'; const dev = 'build/';
const dpl = 'deploy/';
const rep = 'reports/';
const config = { const config = {
src: src, src: src,
dest: dest, dev: dev,
dpl: dpl,
rep: rep,
demo: true, demo: true,
//these are not used while demo: true is set
index: 'index.html', index: 'index.html',
templateData: src + 'templates/data.json', templateData: src + 'templates/data.json',
frontendData: src + 'data/**/*.json', frontendData: src + 'data/**/*.json',
hippie: { hippie: {
brand: 'hippie', brand: 'hippie',
titlePrefix: ' - HIPPIE', titlePrefix: ' - HIPPIE',
pageBase: './', pageBase: './'
jsFile: 'main',
jsonFile: 'db'
} }
} }

25
gulp/modules/plumber.js Normal file
View file

@ -0,0 +1,25 @@
const plumber = require('gulp-plumber');
// const notify = require('gulp-notify');
// function catchErrors(errTitle) {
// return plumber({
// errorHandler: notify.onError({
// // Customizing error title
// title: errTitle || "GULP GENERAL PROBLEM",
// message: "<%= error.message %>"
// })
// });
// }
function catchErrors() {
return plumber({
errorHandler: function (err) {
// Logs error in console
console.log(err.message);
// Ends the current pipe, so Gulp watch doesn't break
this.emit('end');
}
});
}
module.exports = catchErrors;

9
gulp/tasks/clean.js Normal file
View file

@ -0,0 +1,9 @@
const config = require('../config');
const del = require('del');
// Clean output folders
function clean() {
return del([config.dev + '**', config.rep + '**', config.dpl + '**']);
}
module.exports = clean;

6
gulp/tasks/hello.js Normal file
View file

@ -0,0 +1,6 @@
function hello (cb) {
console.log('He Stephan', cb);
cb();
}
module.exports = hello;

25
gulp/tasks/sync.js Normal file
View file

@ -0,0 +1,25 @@
const config = require('../config');
const browserSync = require('browser-sync'), server = browserSync.create();
// Automagically reload browsers
function reload(done) {
server.reload();
done();
}
// Serve files to the browser
function serve(done) {
server.init({
index: config.index,
open: false,
server: config.dev
});
done();
}
module.exports = {
serve: serve,
reload: reload,
};

13
gulp/tasks/validate.js Normal file
View file

@ -0,0 +1,13 @@
const { src } = require('gulp');
const config = require('../config');
const plumber = require('../modules/plumber');
const htmlValidator = require('gulp-w3c-html-validator');
function validate() {
return src(config.dev + '**/*.html')
.pipe(plumber())
.pipe(htmlValidator())
.pipe(htmlValidator.reporter());
}
module.exports = validate;

105
gulpfile.js
View file

@ -1,20 +1,22 @@
// Setup project // Setup project
const config = require('./gulp/config'); const config = require('./gulp/config');
const hello = require('./gulp/tasks/hello');
const plumber = require('./gulp/modules/plumber');
const { serve, reload } = require('./gulp/tasks/sync');
const clean = require('./gulp/tasks/clean');
const validate = require("./gulp/tasks/validate");
// Gulp requirements // Gulp requirements
const { watch, series, parallel } = require('gulp'); const { watch, series, parallel } = require('gulp');
const { src, dest } = require('gulp'); const { src, dest } = require('gulp');
const fs = require('fs'); const fs = require('fs');
const del = require('del');
const plumber = require('gulp-plumber');
// const notify = require('gulp-notify');
const nunjucksRender = require('gulp-nunjucks-render'); const nunjucksRender = require('gulp-nunjucks-render');
// const nunjucks = require('gulp-nunjucks'); // const nunjucks = require('gulp-nunjucks');
const data = require('gulp-data'); const data = require('gulp-data');
const jsonConcat = require('gulp-json-concat'); const jsonConcat = require('gulp-json-concat');
const browserSync = require('browser-sync'), server = browserSync.create();
const sass = require('gulp-sass'); const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer'); const autoprefixer = require('gulp-autoprefixer');
const sassLint = require('gulp-sass-lint'); const sassLint = require('gulp-sass-lint');
@ -30,8 +32,7 @@ const gulpIf = require('gulp-if');
const changed = require('gulp-changed'); const changed = require('gulp-changed');
const merge = require('merge-stream'); const merge = require('merge-stream');
const spritesmith = require('gulp.spritesmith'); const spritesmith = require('gulp.spritesmith');
const babel = require('gulp-babel'); // const babel = require('gulp-babel');
const htmlValidator = require('gulp-w3c-html-validator');
// const buffer = require('vinyl-buffer'); // const buffer = require('vinyl-buffer');
// const imagemin = require('gulp-imagemin'); // const imagemin = require('gulp-imagemin');
const useref = require('gulp-useref'); const useref = require('gulp-useref');
@ -61,15 +62,12 @@ const input = {
}; };
const output = { const output = {
root: config.dest, data: config.dev + 'json',
screens: config.dest + '**/*.html', style: config.dev + 'css',
data: config.dest + 'json', code: config.dev + 'js',
style: config.dest + 'css', fonts: config.dev + 'fonts',
code: config.dest + 'js', art: config.dev + 'art',
fonts: config.dest + 'fonts', vendor: config.dev + 'vendor'
art: config.dest + 'art',
reports: 'reports/',
vendor: config.dest + 'vendor'
}; };
// Show demo content if configured // Show demo content if configured
@ -82,23 +80,11 @@ if (config.demo === true) {
// Create tasks // Create tasks
// Clean output folders
function clean() {
return del([output.root + '**', output.reports + '**', 'dist/']);
}
// Automagically reload browsers
function reload(done) {
server.reload();
done();
}
// Concatenate JSON files // Concatenate JSON files
function json() { function json() {
return src(config.frontendData) return src(config.frontendData)
.pipe(plumber()) .pipe(plumber())
.pipe(jsonConcat(config.hippie.jsonFile + '.json', function (data) { .pipe(jsonConcat('db.json', function (data) {
return new Buffer.from(JSON.stringify(data)); return new Buffer.from(JSON.stringify(data));
})) }))
.pipe(dest(output.data)); .pipe(dest(output.data));
@ -118,7 +104,7 @@ function manageEnvironment(environment) {
// // console.log(file.relative); // // console.log(file.relative);
// return { hippie, template }; // return { hippie, template };
// } // }
function getDataForTemplates(file) { function getDataForTemplates() {
const data = JSON.parse(fs.readFileSync(config.templateData)); const data = JSON.parse(fs.readFileSync(config.templateData));
return { data }; return { data };
} }
@ -126,8 +112,7 @@ function getDataForTemplates(file) {
// Transpile HTML // Transpile HTML
function nunjucks() { function nunjucks() {
return src(input.screens) return src(input.screens)
// .pipe(plumber()) .pipe(plumber())
.pipe(customPlumber())
// TODO only add data to pipe for necessary files // TODO only add data to pipe for necessary files
.pipe(data(getDataForTemplates)) .pipe(data(getDataForTemplates))
.pipe(nunjucksRender({ .pipe(nunjucksRender({
@ -137,30 +122,13 @@ function nunjucks() {
}, },
manageEnv: manageEnvironment manageEnv: manageEnvironment
})) }))
.pipe(dest(output.root)); .pipe(dest(config.dev));
}
function validate() {
return src(output.screens)
.pipe(htmlValidator())
.pipe(htmlValidator.reporter());
}
// Serve files to the browser
function serve(done) {
server.init({
index: config.index,
open: false,
server: output.root
});
done();
} }
// This is for the looks // This is for the looks
function style() { function style() {
return src(input.style) return src(input.style)
// .pipe(plumbError('STYLE PROBLEM')) .pipe(plumber())
.pipe(sass({ .pipe(sass({
includePaths: [input.vendor + '/**/*.s+(a|c)ss'] includePaths: [input.vendor + '/**/*.s+(a|c)ss']
}).on('error', sass.logError)) }).on('error', sass.logError))
@ -174,11 +142,11 @@ function style() {
} }
// Linting // Linting
function styleLint() { function styleLint() {
const dir = output.reports; const dir = config.rep;
if (!fs.existsSync(dir)) { if (!fs.existsSync(dir)) {
fs.mkdirSync(dir); fs.mkdirSync(dir);
} }
let file = fs.createWriteStream(output.reports + 'sass-lint.html'); let file = fs.createWriteStream(config.rep + 'sass-lint.html');
let stream = src(input.style) let stream = src(input.style)
.pipe(plumber()) .pipe(plumber())
.pipe(sassLint({ .pipe(sassLint({
@ -206,7 +174,7 @@ function code(cb) {
plumber(), plumber(),
// cache('code'), // cache('code'),
// babel({ presets: ['@babel/env'] }), // babel({ presets: ['@babel/env'] }),
concat(config.hippie.jsFile + '.js'), // concat(config.hippie.jsFile + 'main.js'),
dest(output.code), dest(output.code),
uglify(), uglify(),
// remember('code'), // remember('code'),
@ -242,7 +210,7 @@ function art() {
let favicons = src(input.art.favicons) let favicons = src(input.art.favicons)
.pipe(plumber()) .pipe(plumber())
.pipe(changed(output.art)) .pipe(changed(output.art))
.pipe(dest(output.root)) .pipe(dest(config.dev))
// Move images to the root folder // Move images to the root folder
let images = src(input.art.images) let images = src(input.art.images)
@ -256,8 +224,8 @@ function art() {
// // Move favicons and images to the root folder // // Move favicons and images to the root folder
// return src(input.art.favicons) // return src(input.art.favicons)
// .pipe(plumber()) // .pipe(plumber())
// .pipe(changed(output.root)) // .pipe(changed(config.dev))
// .pipe(dest(output.root)) // .pipe(dest(config.dev))
// .pipe(src(input.art.images)) // .pipe(src(input.art.images))
// .pipe(changed(output.art)) // .pipe(changed(output.art))
// .pipe(dest(output.art)); // .pipe(dest(output.art));
@ -295,8 +263,8 @@ function vendor() {
} }
// TODO for distribution // TODO for distribution
function code2 () { function code2() {
return src(output.screens) return src(config.dev + '**/*.html')
.pipe(useref()) .pipe(useref())
.pipe(cached('useref')) .pipe(cached('useref'))
.pipe(gulpIf('*.js', uglify())) .pipe(gulpIf('*.js', uglify()))
@ -328,25 +296,6 @@ exports.assets = assets;
exports.build = build; exports.build = build;
exports.dev = dev; exports.dev = dev;
exports.dist = series(clean, assets, parallel(nunjucks, style), code2); exports.dist = series(clean, assets, parallel(nunjucks, style), code2);
exports.serve = series(dev, serve);
exports.default = series(dev, serve, overview); exports.default = series(dev, serve, overview);
// function plumbError(errTitle) { exports.hello = hello;
// return plumber({
// errorHandler: notify.onError({
// // Customizing error title
// title: errTitle || "GULP GENERAL PROBLEM",
// message: "<%= error.message %>"
// })
// });
// }
function customPlumber() {
return plumber({
errorHandler: function (err) {
// Logs error in console
console.log(err.message);
// Ends the current pipe, so Gulp watch doesn't break
this.emit('end');
}
});
}

7
source/screens/demo.njk
View file

@ -60,10 +60,11 @@
{% block script %} {% block script %}
{{ super() }} {{ super() }}
<script src="{{ pageBase }}js/{{ hippie.jsFile }}.min.js"></script> {# <script src="{{ pageBase }}js/{{ hippie.jsFile }}.min.js"></script> #}
<!-- build:js js/main.concat.min.js --> <!-- build:js js/main.concat.min.js -->
{# <script src="{{ pageBase }}js/config.min.js" type="module"></script> #} <script src="{{ pageBase }}js/variables.js"></script>
{# <script src="{{ pageBase }}js/main.min.js"></script> #} <script src="{{ pageBase }}js/functions.js"></script>
<script src="{{ pageBase }}js/global.js"></script>
<!-- endbuild --> <!-- endbuild -->
<script> <script>
// Page specific // Page specific

167
source/screens/demo/card.njk
View file

@ -8,89 +8,102 @@
{% block title %}Karte{% endblock %} {% block title %}Karte{% endblock %}
{% block head %} {% block head %}
{{ super() }} {{ super() }}
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<div class="card_bkg"> <div class="card_bkg">
<div id="dither"></div> <div id="dither"></div>
<svg version="1.1" id="flag" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 1920 1200" preserveAspectRatio="xMinYMax slice" alt="Background flag"> <svg version="1.1" id="flag" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewbox="0 0 1920 1200" preserveaspectratio="xMinYMax slice">
{# <defs> {# <defs>
<filter id="turb3"> <filter id="turb3">
<feColorMatrix type="saturate" values="1" /> </filter> <feColorMatrix type="saturate" values="1" />
<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="2"/> <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="2"/>
</filter> </filter>
<symbol id="triangle-5"> <symbol id="triangle-5">
<rect y="0" fill="#273F8B" width="1920" height="1200"/> <rect y="0" fill="#273F8B" width="1920" height="1200"/>
</symbol> </symbol>
</defs> </defs>
<g> <g>
<use xlink:href="#triangle-5" style="filter: url(#turb3);" /> <use xlink:href="#triangle-5" style="filter: url(#turb3);" />
</g> #} </g> #}
<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"/> <rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"/>
<polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "/> <polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "/>
<polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "/> <polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "/>
<polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "/> <polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "/>
<polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "/> <polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "/>
<polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "/> <polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "/>
<polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "/> <polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "/>
<polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "/> <polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "/>
<polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "/> <polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "/>
</svg> </svg>
{# <img id="dither" src="art/flag_dither.png" width="1920" height="1200" alt="Background flag dithered"/> #} {# <img id="dither" src="art/flag_dither.png" width="1920" height="1200" alt="Background flag dithered"/> #}
</div> </div>
<div class="card_box"> <div class="card_box">
<div id="jsCardHover"> <div id="jsCardHover">
<p>Titel<br/>and description</p> <p>Titel<br/>and description</p>
<h1>Prename Surname</h1> <h1>Prename Surname</h1>
<p><a class="card_address" href="">name@domain.tld</a><br/><a class="decent" href="http://">site.tld</a> &middot; <span class="decent">Street No., Postcode City</span></p> <p>
</div> <a class="card_address" href="">name@domain.tld</a><br/>
</div> <a class="decent" href="http://site.tld">site.tld</a>
&middot;
<span class="decent">Street No., Postcode City</span></p>
</div>
</div>
{% endblock %} {% endblock %}
{% block script %} {% block script %}
{{ super() }} {{ super() }}
<script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script> {# <script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script> #}
<script type="text/javascript"> <!-- build:js js/main.concat.min.js -->
$(document).ready(function() { <script src="{{ pageBase }}js/variables.js"></script>
// composeMail('.card_address', 'neues', 'interaktionsweise', 'de', '', ''); <script src="{{ pageBase }}js/functions.js"></script>
<script src="{{ pageBase }}js/global.js"></script>
<!-- endbuild -->
<script>
$(document).ready(function () {
// composeMail('.card_address', 'neues', 'interaktionsweise', 'de', '', '');
var colors = new Array(); var colors = new Array();
var position = 0; var position = 0;
for (var i = 1; i <= $("#flag").children().length; i++) { for (var i = 1; i <= $("#flag").children().length; i++) {
colors.push($("#triangle-"+ i).attr("fill")); colors.push($("#triangle-" + i).attr("fill"));
} }
$('#jsCardHover').on({ $('#jsCardHover').on({
mouseenter: function() { mouseenter: function () {
// $('#flag').addClass('effect'); // $('#flag').addClass('effect');
// $('#flag').css('opacity', 0); // $('#flag').css('opacity', 0);
$('#flag').stop().fadeOut(10000); $('#flag')
this.iid = setInterval(function() { .stop()
for (var i = 1; i <= colors.length; i++) { .fadeOut(10000);
position++; this.iid = setInterval(function () {
if (position >= colors.length) { for (var i = 1; i <= colors.length; i++) {
position = 0; position++;
} if (position >= colors.length) {
$("#triangle-"+ i).attr("fill", colors[position]); position = 0;
} }
position++; $("#triangle-" + i).attr("fill", colors[position]);
if (position >= colors.length) { }
position = 0; position++;
} if (position >= colors.length) {
}, 600); position = 0;
}, }
mouseleave: function() { }, 600);
// $('#flag').removeClass('effect'); },
// $('#flag').css('opacity', 1); mouseleave: function () {
$('#flag').stop().fadeIn(1000); // $('#flag').removeClass('effect');
this.iid && clearInterval(this.iid); // $('#flag').css('opacity', 1);
}, $('#flag')
click: function() { .stop()
$("#dither").toggle(); .fadeIn(1000);
} this.iid && clearInterval(this.iid);
}); },
}); click: function () {
</script> $("#dither").toggle();
{% endblock %} }
});
});
</script>
{% endblock %}

131
source/screens/demo/elements.njk
View file

@ -6,75 +6,76 @@
{% block title %}Elements{% endblock %} {% block title %}Elements{% endblock %}
{% block head %} {% block head %}
{{ super() }} {{ super() }}
{% endblock %} {% endblock %}
{% block main %} {% block main %}
<div class="temp_layer"> <div class="temp_layer">
<!-- <div class="exp_overlay_btn exp_help_btn"> <!-- <div class="exp_overlay_btn exp_help_btn"> <span class="span_solo">?</span> </div> -->
<span class="span_solo">?</span> {% include "hippie/partials/_body_nav.njk" %}
</div> --> </div>
{% include "hippie/partials/_body_nav.njk" %} <div id="begin" class="">
</div> <section class="sec_main_center">
<div id="begin" class=""> <header class="header_txt">
<section class="sec_main_center"> <h1>Medienformat Abfragen</h1>
<header class="header_txt"> </header>
<h1>Medienformat Abfragen</h1> <article>
</header> <div class="demo__query_example">Umbruch bei&nbsp;</div>
<article> <div class="demo__queries">
<div class="demo__query_example">Umbruch bei&nbsp;</div> <p class="query_phoneUp">Telefone und größer</p>
<div class="demo__queries"> <p class="query_phoneOnly">Nur Telefone</p>
<p class="query_phoneUp">Telefone und größer</p> <p class="query_tabletPortaitOnly">Nur Schreibtafeln hochkant</p>
<p class="query_phoneOnly">Nur Telefone</p> <p class="query_tabletPortraitUp">Schreibtafeln und größer</p>
<p class="query_tabletPortaitOnly">Nur Schreibtafeln hochkant</p> <p class="query_tabletLandscapeOnly">Schreibtafeln im Querformat</p>
<p class="query_tabletPortraitUp">Schreibtafeln und größer</p> <p class="query_tabletLandscapeUp">Schreibtafeln quer und größer</p>
<p class="query_tabletLandscapeOnly">Schreibtafeln im Querformat</p> <p class="query_desktopOnly">Nur Arbeitsplatzrechner</p>
<p class="query_tabletLandscapeUp">Schreibtafeln quer und größer</p> <p class="query_desktopUp">Arbeitsplatzrechner und größer</p>
<p class="query_desktopOnly">Nur Arbeitsplatzrechner</p> <p class="query_bigDesktopUp">Richtige Monitore und größer</p>
<p class="query_desktopUp">Arbeitsplatzrechner und größer</p> </div>
<p class="query_bigDesktopUp">Richtige Monitore und größer</p> </article>
</div> </section>
</article>
</section>
<section class="sec_main_center"> <section class="sec_main_center">
<header class="header_txt"> <header class="header_txt">
<h1>Übersicht aller Elemente</h1> <h1>Übersicht aller Elemente</h1>
<p>Es werden alle grundlegenden Elemente sowie ihre gestalteten Varianten angegeben. Die Elemente sind in Gruppen eingeteilt, die auch das W3Consortium (<a href="https://www.w3.org/TR/2017/REC-html52-20171214/index.html#contents">www.w3.org/TR/2017/REC-html52-20171214/index.html#contents</a>) verwendet.</p> <p>Es werden alle grundlegenden Elemente sowie ihre gestalteten Varianten angegeben. Die Elemente sind in Gruppen eingeteilt, die auch das W3Consortium (<a href="https://www.w3.org/TR/2017/REC-html52-20171214/index.html#contents">www.w3.org/TR/2017/REC-html52-20171214/index.html#contents</a>) verwendet.</p>
<p>Zu jedem Element werden alle Attribute aufgelistet und die Umsetzung im HTML Dokument als Emmet Syntax dargestellt.</p> <p>Zu jedem Element werden alle Attribute aufgelistet und die Umsetzung im HTML Dokument als Emmet Syntax dargestellt.</p>
</header> </header>
<article> <article>
<h1>Bereiche</h1> <h1>Bereiche</h1>
<p>Elemente:</p> <p>Elemente:</p>
<pre>// body<br>// article<br>// section<br>// nav<br>// aside<br>// h1-h6<br>// header<br>// footer</pre> <pre>// body<br>// article<br>// section<br>// nav<br>// aside<br>// h1-h6<br>// header<br>// footer</pre>
<h2>&lt;body&gt;</h2> <h2>&lt;body&gt;</h2>
<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p> <p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
<h2>&lt;article&gt;</h2> <h2>&lt;article&gt;</h2>
<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p> <p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
<h2>&lt;section&gt;</h2> <h2>&lt;section&gt;</h2>
<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p> <p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
<h4>Varianten</h4> <h4>Varianten</h4>
<pre class="pre_code"><code>section.sec_main_center</code></pre> <pre class="pre_code"><code>section.sec_main_center</code></pre>
<pre class="pre_code"><code>section.sec_main_status</code></pre> <pre class="pre_code"><code>section.sec_main_status</code></pre>
<h2>&lt;h3&gt;</h2> <h2>&lt;h3&gt;</h2>
<h2>&lt;h4&gt;</h2> <h2>&lt;h4&gt;</h2>
</article> </article>
</section> </section>
</div> </div>
{% endblock %} {% endblock %}
{% block script %} {% block script %}
{{ super() }} {{ super() }}
<script src="{{ pageBase }}vendor/jq-sticky-anything.min.js" type="text/javascript"></script> <script src="{{ pageBase }}vendor/jq-sticky-anything.min.js"></script>
<script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script> {# <script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script> #}
<script type="text/javascript"> <!-- build:js js/main.concat.min.js -->
// Page specific <script src="{{ pageBase }}js/variables.js"></script>
// ------------------------------------------------------------------------------ <script src="{{ pageBase }}js/functions.js"></script>
$( document ).ready(function () { <script src="{{ pageBase }}js/global.js"></script>
// jq-sticky-anything <!-- endbuild -->
$('#js_demo_fix').stickThis({ <script>
pushup: '#js_demo_stop' // Page specific
}); // ------------------------------------------------------------------------------
}); $(document).ready(function () {
</script> // jq-sticky-anything
{% endblock %} $('#js_demo_fix').stickThis({pushup: '#js_demo_stop'});
});
</script>
{% endblock %}

546
source/screens/demo/examples.njk
View file

@ -6,239 +6,329 @@
{% block title %}Examples{% endblock %} {% block title %}Examples{% endblock %}
{% block head %} {% block head %}
{{ super() }} {{ super() }}
{% endblock %} {% endblock %}
{% block main %} {% block main %}
<div class="temp_layer"> <div class="temp_layer">
<!-- <div class="exp_overlay_btn exp_help_btn"> <!-- <div class="exp_overlay_btn exp_help_btn"> <span class="span_solo">?</span> </div> -->
<span class="span_solo">?</span> {% include "hippie/partials/_body_nav.njk" %}
</div> --> </div>
{% include "hippie/partials/_body_nav.njk" %} <div id="begin" class="">
</div> <section class="sec_main_center">
<div id="begin" class=""> <header class="header_txt">
<section class="sec_main_center"> <h1>Sammlung formatierter Elemente</h1>
<header class="header_txt"> <p>Die Elemente werden fortlaufend komplexer</p>
<h1>Sammlung formatierter Elemente</h1> </header>
<p>Die Elemente werden fortlaufend komplexer</p> <article>
</header> <h2>&lt;h3&gt;</h2>
<article> <h4>Beispiele</h4>
<h2>&lt;h3&gt;</h2> <pre class="pre_code"><code>h3.txt_color_dark+p</code></pre>
<h4>Beispiele</h4> <h3 class="txt_color_dark">Dunkle Überschrift</h3>
<pre class="pre_code"><code>h3.txt_color_dark+p</code></pre> <p>Mit normalem Textabsatz</p>
<h3 class="txt_color_dark">Dunkle Überschrift</h3> <h2>&lt;h4&gt;</h2>
<p>Mit normalem Textabsatz</p> <h4>Beispiele</h4>
<h2>&lt;h4&gt;</h2> <pre class="pre_code"><code>a>h4</code></pre>
<h4>Beispiele</h4> <a href="">
<pre class="pre_code"><code>a>h4</code></pre> <h4>Überschrift als Block-Verweis</h4>
<a href=""><h4>Überschrift als Block-Verweis</h4></a> </a>
<h2>&lt;section&gt;</h2> <h2>&lt;section&gt;</h2>
<pre class="pre_code"><code>section>div.float_space_left>img^p+p</code></pre> <pre class="pre_code"><code>section>div.float_space_left>img^p+p</code></pre>
<section class="overflow"> <section class="overflow">
<div class="float_space_left demo__avatar"><img src="{{ pageBase }}art/demo/flag_websafe_128x80.gif" width="256" height="160" alt="Fahne von interaktionsweise"></div> <div class="float_space_left demo__avatar"><img src="{{ pageBase }}art/demo/flag_websafe_128x80.gif" width="256" height="160" alt="Fahne von interaktionsweise"></div>
<p>Vorname Name<br>Straße 1, 01234 Stadt</p><p>+49 (0)123 1337 0000<br><a class="lineLink" href="mailto:name@domain.tld">name@domain.tld</a></p> <p>Vorname Name<br>Straße 1, 01234 Stadt</p>
</section> <p>+49 (0)123 1337 0000<br>
<pre class="pre_code"><code>div.space_left_fourth</code></pre> <a class="lineLink" href="mailto:name@domain.tld">name@domain.tld</a>
<div class="space_left_fourth"> </p>
<hr/> </section>
<p>Eingerückter Inhalt</p> <pre class="pre_code"><code>div.space_left_fourth</code></pre>
<hr/> <div class="space_left_fourth">
</div> <hr/>
<pre class="pre_code"><code>nav>ul>(li>a.a_button{Punkt $})*4nav>ul>(li>a.a_button_border{Stufe $})*4</code></pre> <p>Eingerückter Inhalt</p>
<div class="overflow"> <hr/>
<nav class="float_space_left"> </div>
<ul> <pre class="pre_code"><code>nav>ul>(li>a.a_button{punkt $})*4nav>ul>(li>a.a_button_border{stufe $})*4</code></pre>
<li><a href="" class="a_button" data-hippie-button-value="1">Erster Punkt</a></li> <div class="overflow">
<li><a href="" class="a_button" data-hippie-button-value="2">Zweiter Punkt</a></li> <nav class="float_space_left">
<li><a href="" class="a_button" data-hippie-button-value="3">Dritter Punkt</a></li> <ul>
<li><a href="" class="a_button" data-hippie-button-value="4">Vierter Punkt</a></li> <li>
</ul> <a href="" class="a_button" data-hippie-button-value="1">Erster Punkt</a>
</nav> </li>
<nav> <li>
<ul> <a href="" class="a_button" data-hippie-button-value="2">Zweiter Punkt</a>
<li><a href="" class="a_button_border">Stufe 1</a></li> </li>
<li><a href="" class="a_button_border">Stufe 2</a></li> <li>
<li><a href="" class="a_button_border">Stufe 3</a></li> <a href="" class="a_button" data-hippie-button-value="3">Dritter Punkt</a>
<li><a href="" class="a_button_border">Stufe 4</a></li> </li>
</ul> <li>
</nav> <a href="" class="a_button" data-hippie-button-value="4">Vierter Punkt</a>
</div> </li>
<pre class="pre_code"><code>nav.nav_horizontal>ul>(li>a.a_button{Abschnitt $})*4nav.nav_center_old>ul>(li>a.a_button{Typ $})*4</code></pre> </ul>
<nav class="nav_horizontal"> </nav>
<ul> <nav>
<li><a href="" class="a_button">Abschnitt 1</a></li> <ul>
<li><a href="" class="a_button">Abschnitt 2</a></li> <li>
<li><a href="" class="a_button">Abschnitt 3</a></li> <a href="" class="a_button_border">Stufe 1</a>
<li><a href="" class="a_button">Abschnitt 4</a></li> </li>
</ul> <li>
</nav> <a href="" class="a_button_border">Stufe 2</a>
<div class="overflow"> </li>
<nav class="nav_center_old"> <li>
<ul> <a href="" class="a_button_border">Stufe 3</a>
<li><a href="" class="a_button">Typ 1</a></li> </li>
<li><a href="" class="a_button">Typ 2</a></li> <li>
<li><a href="" class="a_button">Typ 3</a></li> <a href="" class="a_button_border">Stufe 4</a>
<li><a href="" class="a_button">Typ 4</a></li> </li>
</ul> </ul>
</nav> </nav>
</div> </div>
<pre class="pre_code"><code>header.header_page>h1+p+nav.nav_separate_right>ul>(li>a.a_button{Nav $})*4^+nav.nav_right>ul>(li>a.a_button{Nav $})*4</code></pre> <pre class="pre_code"><code>nav.nav_horizontal>ul>(li>a.a_button{abschnitt $})*4nav.nav_center_old>ul>(li>a.a_button{typ $})*4</code></pre>
<header class="header_page demo__header header_fancy"> <nav class="nav_horizontal">
<h1>Aufmacher</h1> <ul>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec consectetur diam. Sed nisl odio, volutpat nec nisi sit amet, commodo faucibus est. Donec lacinia vestibulum sapien. Morbi porttitor nibh quis imperdiet scelerisque. Praesent rutrum quam eu sodales luctus.</p> <li>
<nav class="nav_separate_right"> <a href="" class="a_button">Abschnitt 1</a>
<ul> </li>
<li><a href="" class="a_button">Mensch</a></li> <li>
<li><a href="" class="a_button">Pflanze</a></li> <a href="" class="a_button">Abschnitt 2</a>
</ul> </li>
</nav> <li>
<nav class="nav_right"> <a href="" class="a_button">Abschnitt 3</a>
<ul> </li>
<li><a href="" class="a_button">Blau</a></li> <li>
<li><a href="" class="a_button">Gelb</a></li> <a href="" class="a_button">Abschnitt 4</a>
</ul> </li>
</nav> </ul>
</header> </nav>
<pre class="pre_code"><code>header.header_page>nav.nav_right>ul>(li>a.a_button{Nav $})*4</code></pre> <div class="overflow">
<div class="box_space h_basic"> <nav class="nav_center_old">
<header id="js_demo_fix" class="header_page demo__header header_fix"> <ul>
<nav class="nav_right"> <li>
<ul> <a href="" class="a_button">Typ 1</a>
<li><a href="" class="a_button">Eins</a></li> </li>
<li><a href="" class="a_button">Zwei</a></li> <li>
</ul> <a href="" class="a_button">Typ 2</a>
</nav> </li>
</header> <li>
<div class="pos_abs pin_bottom width_full"> <a href="" class="a_button">Typ 3</a>
<pre class="pre_code"><code>footer.pos_abs.pin_bottom>nav.nav_column>ul>(li>a.a_button_text)*4</code></pre> </li>
<footer id="js_demo_stop" class="demo_footer"> <li>
<nav class="nav_column nav_separate"> <a href="" class="a_button">Typ 4</a>
<ul> </li>
<li><a href="" class="a_button_text">Alpha</a></li> </ul>
<li><a href="" class="a_button_text">Bravo</a></li> </nav>
<li><a href="" class="a_button_text">Charlie</a></li> </div>
<li><a href="" class="a_button_text">Delta</a></li> <pre class="pre_code"><code>header.header_page>h1+p+nav.nav_separate_right>ul>(li>a.a_button{nav $})*4^+nav.nav_right>ul>(li>a.a_button{nav $})*4</code></pre>
</ul> <header class="header_page demo__header header_fancy">
</nav> <h1>Aufmacher</h1>
<p class="txt_center demo__credits"><i class="i_bright">👨‍💻</i> mit <i class="i_bright">❤</i> von <a href="https://interaktionsweise.de">Interaktionsweise</a></p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec consectetur diam. Sed nisl odio, volutpat nec nisi sit amet, commodo faucibus est. Donec lacinia vestibulum sapien. Morbi porttitor nibh quis imperdiet scelerisque. Praesent rutrum quam eu sodales luctus.</p>
</footer> <nav class="nav_separate_right">
</div> <ul>
</div> <li>
<div class="flex"> <a href="" class="a_button">Mensch</a>
<div class="flex_child"></div> </li>
<div class="flex_child"></div> <li>
<div class="flex_child"></div> <a href="" class="a_button">Pflanze</a>
<div class="flex_child"></div> </li>
<div class="flex_child"></div> </ul>
</div> </nav>
<div class="flex_column_wrap"> <nav class="nav_right">
<div class="flex_column"><input value="Undefiniert"/></div> <ul>
<div class="flex_column"><input type="text" size="8" value="Text"/></div> <li>
<div class="flex_column"><input type="text" size="8" value="Deaktiviert" disabled/></div> <a href="" class="a_button">Blau</a>
<div class="flex_column"><input type="button" value="Auswählen"></div> </li>
<div class="flex_column"><input type="submit" value="Senden" disabled/></div> <li>
</div> <a href="" class="a_button">Gelb</a>
<form method="get"> </li>
<p class="label"> </ul>
Show me a <select name="F"> </nav>
<option value="0"> Plain list</option> </header>
<option value="1" selected="selected"> Fancy list</option> <pre class="pre_code"><code>header.header_page>nav.nav_right>ul>(li>a.a_button{nav $})*4</code></pre>
<option value="2"> Table list</option> <div class="box_space h_basic">
</select> <header id="js_demo_fix" class="header_page demo__header header_fix">
Sorted by <select name="C"> <nav class="nav_right">
<option value="N" selected="selected"> Name</option> <ul>
<option value="M"> Date Modified</option> <li>
<option value="S"> Size</option> <a href="" class="a_button">Eins</a>
<option value="D"> Description</option> </li>
</select> <li>
<select name="O"> <a href="" class="a_button">Zwei</a>
<option value="A" selected="selected"> Ascending</option> </li>
<option value="D"> Descending</option> </ul>
</select> </nav>
<select name="V"> </header>
<option value="0" selected="selected"> in Normal order</option> <div class="pos_abs pin_bottom width_full">
<option value="1"> in Version order</option> <pre class="pre_code"><code>footer.pos_abs.pin_bottom>nav.nav_column>ul>(li>a.a_button_text)*4</code></pre>
</select> <footer id="js_demo_stop" class="demo_footer">
Matching <input type="text" name="P" value="*" /> <nav class="nav_column nav_separate">
<input type="submit" name="X" value="Go" /> <ul>
</p> <li>
</form> <a href="" class="a_button_text">Alpha</a>
</li>
<li>
<a href="" class="a_button_text">Bravo</a>
</li>
<li>
<a href="" class="a_button_text">Charlie</a>
</li>
<li>
<a href="" class="a_button_text">Delta</a>
</li>
</ul>
</nav>
<p class="txt_center demo__credits">
<i class="i_bright">👨‍💻</i>
mit
<i class="i_bright">❤</i>
von
<a href="https://interaktionsweise.de">Interaktionsweise</a>
</p>
</footer>
</div>
</div>
<div class="flex">
<div class="flex_child"></div>
<div class="flex_child"></div>
<div class="flex_child"></div>
<div class="flex_child"></div>
<div class="flex_child"></div>
</div>
<div class="flex_column_wrap">
<div class="flex_column"><input value="Undefiniert"/></div>
<div class="flex_column"><input type="text" size="8" value="Text"/></div>
<div class="flex_column"><input type="text" size="8" value="Deaktiviert" disabled="disabled"/></div>
<div class="flex_column"><input type="button" value="Auswählen"></div>
<div class="flex_column"><input type="submit" value="Senden" disabled="disabled"/></div>
</div>
<form method="get">
<p class="label">
Show me a
<select name="F">
<option value="0">
Plain list</option>
<option value="1" selected="selected">
Fancy list</option>
<option value="2">
Table list</option>
</select>
Sorted by
<select name="C">
<option value="N" selected="selected">
Name</option>
<option value="M">
Date Modified</option>
<option value="S">
Size</option>
<option value="D">
Description</option>
</select>
<select name="O">
<option value="A" selected="selected">
Ascending</option>
<option value="D">
Descending</option>
</select>
<select name="V">
<option value="0" selected="selected">
in Normal order</option>
<option value="1">
in Version order</option>
</select>
Matching
<input type="text" name="P" value="*"/>
<input type="submit" name="X" value="Go"/>
</p>
</form>
<h2>Gruppierung</h2> <h2>Gruppierung</h2>
<pre class="pre_code"><code>ul.list_link>(li>a>img)*2+li>a</code></pre> <pre class="pre_code"><code>ul.list_link>(li>a>img)*2+li>a</code></pre>
<ul class="list_link"> <ul class="list_link">
<li><a href=""><img src="{{ pageBase }}art/letter.gif" alt="">name@domain.tld</a></li> <li>
<li><a href="">Work</a></li> <a href=""><img src="{{ pageBase }}art/letter.gif" alt="">name@domain.tld</a>
<li><a href="">Projects</a></li> </li>
</ul> <li>
<a href="">Work</a>
</li>
<li>
<a href="">Projects</a>
</li>
</ul>
<h2>Tabellen</h2> <h2>Tabellen</h2>
<pre class="pre_code"><code>table.table_link>thead>tr>th{&amp;nbsp;}+th{Ab / Zy}+th{Neu / Alt}^^(tbody>tr>td.cell_icon[rowspan="2"]>img[width=16 height=16]^+td.cell_link>a[target=_blank]{Name}+a[target=_blank]{URL}^+td.cell_date[rowspan="2"]{YYY-MM-DD}^tr>td.cell_text>div.shorten{Beschreibung})*2</code></pre> <pre class="pre_code"><code>table.table_link>thead>tr>th{&amp;nbsp;}+th{ab / zy}+th{neu / alt}^^(tbody>tr>td.cell_icon[rowspan="2"]>img[width=16 height=16]^+td.cell_link>a[target=_blank]{name}+a[target=_blank]{url}^+td.cell_date[rowspan="2"]{yyy-mm-dd}^tr>td.cell_text>div.shorten{beschreibung})*2</code></pre>
<table class="table_link js_pop"> <table class="table_link js_pop">
<thead> <thead>
<tr> <tr>
<th>&nbsp;</th> <th>&nbsp;</th>
<th>Ab / Zy</th> <th>Ab / Zy</th>
<th>Neu / Alt</th> <th>Neu / Alt</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td class="cell_icon" rowspan="2"><img src="/art/bullet.gif" alt="" width="16" height="16"></td> <td class="cell_icon" rowspan="2"><img src="/art/bullet.gif" alt="" width="16" height="16"></td>
<td class="cell_link"><a href="" target="_blank">Name</a><a href="" target="_blank">URL</a></td> <td class="cell_link">
<td class="cell_date" rowspan="2">YYYY-MM-DD</td> <a href="" target="_blank">Name</a>
</tr> <a href="" target="_blank">URL</a>
<tr> </td>
<td class="cell_text"> <td class="cell_date" rowspan="2">YYYY-MM-DD</td>
<div class="shorten">Beschreibung</div> </tr>
</td> <tr>
</tr> <td class="cell_text">
</tbody> <div class="shorten">Beschreibung</div>
<tbody> </td>
<tr> </tr>
<td class="cell_icon" rowspan="2"><img src="/art/bullet.gif" alt="" width="16" height="16"></td> </tbody>
<td class="cell_link"><a href="" target="_blank">Name</a><a href="" target="_blank">URL</a></td> <tbody>
<td class="cell_date" rowspan="2">YYYY-MM-DD</td> <tr>
</tr> <td class="cell_icon" rowspan="2"><img src="/art/bullet.gif" alt="" width="16" height="16"></td>
<tr> <td class="cell_link">
<td class="cell_text"> <a href="" target="_blank">Name</a>
<div class="shorten">Beschreibung</div> <a href="" target="_blank">URL</a>
</td> </td>
</tr> <td class="cell_date" rowspan="2">YYYY-MM-DD</td>
</tbody> </tr>
</table> <tr>
<h2>Eingebettet</h2> <td class="cell_text">
<div class="demo__flag"> <div class="shorten">Beschreibung</div>
<svg version="1.1" id="vector" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 1920 1200" preserveAspectRatio="xMinYMax slice"> </td>
<desc>Background flag</desc> </tr>
<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"></rect> </tbody>
<polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "></polygon> </table>
<polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "></polygon> <h2>Eingebettet</h2>
<polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "></polygon> <div class="demo__flag">
<polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "></polygon> <svg version="1.1" id="vector" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewbox="0 0 1920 1200" preserveaspectratio="xMinYMax slice">
<polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "></polygon> <desc>Background flag</desc>
<polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "></polygon> <rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"></rect>
<polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "></polygon> <polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "></polygon>
<polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "></polygon> <polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "></polygon>
</svg> <polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "></polygon>
</div> <polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "></polygon>
</article> <polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "></polygon>
</section> <polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "></polygon>
</div> <polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "></polygon>
<polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "></polygon>
</svg>
</div>
</article>
</section>
</div>
{% endblock %} {% endblock %}
{% block script %} {% block script %}
{{ super() }} {{ super() }}
<script src="{{ pageBase }}vendor/jq-sticky-anything.min.js" type="text/javascript"></script> <script src="{{ pageBase }}vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
<script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script> {# <script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script> #}
<script type="text/javascript"> <!-- build:js js/main.concat.min.js -->
// Page specific <script src="{{ pageBase }}js/variables.js"></script>
// ------------------------------------------------------------------------------ <script src="{{ pageBase }}js/functions.js"></script>
$( document ).ready(function () { <script src="{{ pageBase }}js/global.js"></script>
// jq-sticky-anything <!-- endbuild -->
$('#js_demo_fix').stickThis({ <script>
pushup: '#js_demo_stop' // Page specific
}); // ------------------------------------------------------------------------------
}); $(document).ready(function () {
</script> // jq-sticky-anything
{% endblock %} $('#js_demo_fix').stickThis({pushup: '#js_demo_stop'});
});
</script>
{% endblock %}

1541
source/screens/demo/intro.njk
View file

File diff suppressed because it is too large Load diff