update and vaildation
* updated dependencies * added html validator * checked html results * new readme
This commit is contained in:
Stephan
parent
d18254b61d
commit
9b9b0cb1c6
10 changed files with 1519 additions and 723 deletions
194
.jshintrc
194
.jshintrc
|
|
@ -1,97 +1,97 @@
|
||||||
{
|
{
|
||||||
// JSHint Default Configuration File (as on JSHint website)
|
// JSHint Default Configuration File (as on JSHint website)
|
||||||
// See http://jshint.com/docs/ for more details
|
// See http://jshint.com/docs/ for more details
|
||||||
|
|
||||||
"maxerr" : 50, // {int} Maximum error before stopping
|
"maxerr" : 50, // {int} Maximum error before stopping
|
||||||
|
|
||||||
// Enforcing
|
// Enforcing
|
||||||
"bitwise" : true, // true: Prohibit bitwise operators (&, |, ^, etc.)
|
"bitwise" : true, // true: Prohibit bitwise operators (&, |, ^, etc.)
|
||||||
"camelcase" : false, // true: Identifiers must be in camelCase
|
"camelcase" : false, // true: Identifiers must be in camelCase
|
||||||
"curly" : true, // true: Require {} for every new block or scope
|
"curly" : true, // true: Require {} for every new block or scope
|
||||||
"eqeqeq" : true, // true: Require triple equals (===) for comparison
|
"eqeqeq" : true, // true: Require triple equals (===) for comparison
|
||||||
"forin" : true, // true: Require filtering for..in loops with obj.hasOwnProperty()
|
"forin" : true, // true: Require filtering for..in loops with obj.hasOwnProperty()
|
||||||
"freeze" : true, // true: prohibits overwriting prototypes of native objects such as Array, Date etc.
|
"freeze" : true, // true: prohibits overwriting prototypes of native objects such as Array, Date etc.
|
||||||
"immed" : false, // true: Require immediate invocations to be wrapped in parens e.g. `(function () { } ());`
|
"immed" : false, // true: Require immediate invocations to be wrapped in parens e.g. `(function () { } ());`
|
||||||
"latedef" : false, // true: Require variables/functions to be defined before being used
|
"latedef" : false, // true: Require variables/functions to be defined before being used
|
||||||
"newcap" : false, // true: Require capitalization of all constructor functions e.g. `new F()`
|
"newcap" : false, // true: Require capitalization of all constructor functions e.g. `new F()`
|
||||||
"noarg" : true, // true: Prohibit use of `arguments.caller` and `arguments.callee`
|
"noarg" : true, // true: Prohibit use of `arguments.caller` and `arguments.callee`
|
||||||
"noempty" : true, // true: Prohibit use of empty blocks
|
"noempty" : true, // true: Prohibit use of empty blocks
|
||||||
"nonbsp" : true, // true: Prohibit "non-breaking whitespace" characters.
|
"nonbsp" : true, // true: Prohibit `non-breaking whitespace` characters.
|
||||||
"nonew" : false, // true: Prohibit use of constructors for side-effects (without assignment)
|
"nonew" : false, // true: Prohibit use of constructors for side-effects (without assignment)
|
||||||
"plusplus" : false, // true: Prohibit use of `++` and `--`
|
"plusplus" : false, // true: Prohibit use of `++` and `--`
|
||||||
"quotmark" : false, // Quotation mark consistency:
|
"quotmark" : false, // Quotation mark consistency:
|
||||||
// false : do nothing (default)
|
// false : do nothing (default)
|
||||||
// true : ensure whatever is used is consistent
|
// true : ensure whatever is used is consistent
|
||||||
// "single" : require single quotes
|
// "single" : require single quotes
|
||||||
// "double" : require double quotes
|
// "double" : require double quotes
|
||||||
"undef" : true, // true: Require all non-global variables to be declared (prevents global leaks)
|
"undef" : true, // true: Require all non-global variables to be declared (prevents global leaks)
|
||||||
"unused" : false, // Unused variables:
|
"unused" : false, // Unused variables:
|
||||||
// true : all variables, last function parameter
|
// true : all variables, last function parameter
|
||||||
// "vars" : all variables only
|
// "vars" : all variables only
|
||||||
// "strict" : all variables, all function parameters
|
// "strict" : all variables, all function parameters
|
||||||
"strict" : true, // true: Requires all functions run in ES5 Strict Mode
|
"strict" : true, // true: Requires all functions run in ES5 Strict Mode
|
||||||
"maxparams" : false, // {int} Max number of formal params allowed per function
|
"maxparams" : false, // {int} Max number of formal params allowed per function
|
||||||
"maxdepth" : false, // {int} Max depth of nested blocks (within functions)
|
"maxdepth" : false, // {int} Max depth of nested blocks (within functions)
|
||||||
"maxstatements" : false, // {int} Max number statements per function
|
"maxstatements" : false, // {int} Max number statements per function
|
||||||
"maxcomplexity" : false, // {int} Max cyclomatic complexity per function
|
"maxcomplexity" : false, // {int} Max cyclomatic complexity per function
|
||||||
"maxlen" : false, // {int} Max number of characters per line
|
"maxlen" : false, // {int} Max number of characters per line
|
||||||
"varstmt" : false, // true: Disallow any var statements. Only `let` and `const` are allowed.
|
"varstmt" : false, // true: Disallow any var statements. Only `let` and `const` are allowed.
|
||||||
|
|
||||||
// Relaxing
|
// Relaxing
|
||||||
"asi" : false, // true: Tolerate Automatic Semicolon Insertion (no semicolons)
|
"asi" : false, // true: Tolerate Automatic Semicolon Insertion (no semicolons)
|
||||||
"boss" : false, // true: Tolerate assignments where comparisons would be expected
|
"boss" : false, // true: Tolerate assignments where comparisons would be expected
|
||||||
"debug" : false, // true: Allow debugger statements e.g. browser breakpoints.
|
"debug" : false, // true: Allow debugger statements e.g. browser breakpoints.
|
||||||
"eqnull" : false, // true: Tolerate use of `== null`
|
"eqnull" : false, // true: Tolerate use of `== null`
|
||||||
"esversion" : 5, // {int} Specify the ECMAScript version to which the code must adhere.
|
"esversion" : 5, // {int} Specify the ECMAScript version to which the code must adhere.
|
||||||
"moz" : false, // true: Allow Mozilla specific syntax (extends and overrides esnext features)
|
"moz" : false, // true: Allow Mozilla specific syntax (extends and overrides esnext features)
|
||||||
// (ex: `for each`, multiple try/catch, function expression…)
|
// (ex: `for each`, multiple try/catch, function expression…)
|
||||||
"evil" : false, // true: Tolerate use of `eval` and `new Function()`
|
"evil" : false, // true: Tolerate use of `eval` and `new Function()`
|
||||||
"expr" : false, // true: Tolerate `ExpressionStatement` as Programs
|
"expr" : false, // true: Tolerate `ExpressionStatement` as Programs
|
||||||
"funcscope" : false, // true: Tolerate defining variables inside control statements
|
"funcscope" : false, // true: Tolerate defining variables inside control statements
|
||||||
"globalstrict" : false, // true: Allow global "use strict" (also enables 'strict')
|
"globalstrict" : false, // true: Allow global "use strict" (also enables 'strict')
|
||||||
"iterator" : false, // true: Tolerate using the `__iterator__` property
|
"iterator" : false, // true: Tolerate using the `__iterator__` property
|
||||||
"lastsemic" : false, // true: Tolerate omitting a semicolon for the last statement of a 1-line block
|
"lastsemic" : false, // true: Tolerate omitting a semicolon for the last statement of a 1-line block
|
||||||
"laxbreak" : false, // true: Tolerate possibly unsafe line breakings
|
"laxbreak" : false, // true: Tolerate possibly unsafe line breakings
|
||||||
"laxcomma" : false, // true: Tolerate comma-first style coding
|
"laxcomma" : false, // true: Tolerate comma-first style coding
|
||||||
"loopfunc" : false, // true: Tolerate functions being defined in loops
|
"loopfunc" : false, // true: Tolerate functions being defined in loops
|
||||||
"multistr" : false, // true: Tolerate multi-line strings
|
"multistr" : false, // true: Tolerate multi-line strings
|
||||||
"noyield" : false, // true: Tolerate generator functions with no yield statement in them.
|
"noyield" : false, // true: Tolerate generator functions with no yield statement in them.
|
||||||
"notypeof" : false, // true: Tolerate invalid typeof operator values
|
"notypeof" : false, // true: Tolerate invalid typeof operator values
|
||||||
"proto" : false, // true: Tolerate using the `__proto__` property
|
"proto" : false, // true: Tolerate using the `__proto__` property
|
||||||
"scripturl" : false, // true: Tolerate script-targeted URLs
|
"scripturl" : false, // true: Tolerate script-targeted URLs
|
||||||
"shadow" : false, // true: Allows re-define variables later in code e.g. `var x=1; x=2;`
|
"shadow" : false, // true: Allows re-define variables later in code e.g. `var x=1; x=2;`
|
||||||
"sub" : false, // true: Tolerate using `[]` notation when it can still be expressed in dot notation
|
"sub" : false, // true: Tolerate using `[]` notation when it can still be expressed in dot notation
|
||||||
"supernew" : false, // true: Tolerate `new function () { ... };` and `new Object;`
|
"supernew" : false, // true: Tolerate `new function () { ... };` and `new Object;`
|
||||||
"validthis" : false, // true: Tolerate using this in a non-constructor function
|
"validthis" : false, // true: Tolerate using this in a non-constructor function
|
||||||
|
|
||||||
// Environments
|
// Environments
|
||||||
"browser" : true, // Web Browser (window, document, etc)
|
"browser" : true, // Web Browser (window, document, etc)
|
||||||
"browserify" : false, // Browserify (node.js code in the browser)
|
"browserify" : false, // Browserify (node.js code in the browser)
|
||||||
"couch" : false, // CouchDB
|
"couch" : false, // CouchDB
|
||||||
"devel" : true, // Development/debugging (alert, confirm, etc)
|
"devel" : true, // Development/debugging (alert, confirm, etc)
|
||||||
"dojo" : false, // Dojo Toolkit
|
"dojo" : false, // Dojo Toolkit
|
||||||
"jasmine" : false, // Jasmine
|
"jasmine" : false, // Jasmine
|
||||||
"jquery" : true, // jQuery
|
"jquery" : true, // jQuery
|
||||||
"mocha" : true, // Mocha
|
"mocha" : true, // Mocha
|
||||||
"mootools" : false, // MooTools
|
"mootools" : false, // MooTools
|
||||||
"node" : false, // Node.js
|
"node" : false, // Node.js
|
||||||
"nonstandard" : false, // Widely adopted globals (escape, unescape, etc)
|
"nonstandard" : false, // Widely adopted globals (escape, unescape, etc)
|
||||||
"phantom" : false, // PhantomJS
|
"phantom" : false, // PhantomJS
|
||||||
"prototypejs" : false, // Prototype and Scriptaculous
|
"prototypejs" : false, // Prototype and Scriptaculous
|
||||||
"qunit" : false, // QUnit
|
"qunit" : false, // QUnit
|
||||||
"rhino" : false, // Rhino
|
"rhino" : false, // Rhino
|
||||||
"shelljs" : false, // ShellJS
|
"shelljs" : false, // ShellJS
|
||||||
"typed" : false, // Globals for typed array constructions
|
"typed" : false, // Globals for typed array constructions
|
||||||
"worker" : false, // Web Workers
|
"worker" : false, // Web Workers
|
||||||
"wsh" : false, // Windows Scripting Host
|
"wsh" : false, // Windows Scripting Host
|
||||||
"yui" : false, // Yahoo User Interface
|
"yui" : false, // Yahoo User Interface
|
||||||
|
|
||||||
// Custom Globals
|
// Custom globals
|
||||||
"globals" : {
|
"globals" : {
|
||||||
"debugOn": true,
|
"debugOn": true,
|
||||||
"hippie": true,
|
"hippie": true,
|
||||||
"viewHover": true,
|
"viewHover": true,
|
||||||
"basicEase": true
|
"basicEase": true
|
||||||
},
|
},
|
||||||
"esversion" : 6 // additional predefined global variables
|
"esversion" : 6 // additional predefined global variables
|
||||||
}
|
}
|
||||||
|
|
|
||||||
49
README.md
49
README.md
|
|
@ -1,19 +1,30 @@
|
||||||
# HIPPIE
|
# HIPPIE
|
||||||
|
|
||||||
## USE (work in progress (it is not ready to be used))
|
> WORK IN PROGRESS (it is not ready to be used)
|
||||||
|
|
||||||
Clone the repo `https://github.com/sthag/hippie.git`.
|
This is a [node.js](https://nodejs.org/) based generator for static HTML based sites.
|
||||||
|
|
||||||
Change to the newly created folder. By default this would be *hippie*.
|
It uses the [gulp](https://gulpjs.com/) module to fiddle everything together. Styling is powered by the CSS extension language [SASS](https://sass-lang.com/). The HTML pages itself are made with the templating engine [Nunjucks](https://mozilla.github.io/nunjucks/).
|
||||||
|
|
||||||
Run the command `npm install`.
|
## USAGE
|
||||||
This will install all nodejs dependencies into the filder *node_modules*.
|
|
||||||
|
Clone the repo `https://github.com/sthag/hippie.git` to a folder to create your build environment.
|
||||||
Run the command `gulp`.
|
|
||||||
This will create a folder *build* with the resulting files.
|
Change to the newly created folder. By default this would be *hippie*.
|
||||||
|
|
||||||
## LOGIC
|
Run the command `npm install`.
|
||||||
|
This will install all node.js dependencies into the folder *node_modules*.
|
||||||
Klassennamen enthalten Objektnamen und Funktionen
|
|
||||||
Sie sind mit `-` und `_` unterteilt.
|
The command `gulp --tasks` will give you an overview of possible actions.
|
||||||
Der Bindestrich `-` trennt Objektnamen von Funktionen. Der Unterstrich `_` wiederum unterteilt Funktionsbezeichnungen.
|
|
||||||
|
Run the command `gulp` for a live development environment.
|
||||||
|
This will create a folder *build* with the resulting files to use.
|
||||||
|
Also the source files will be watched for changes which are reflected live at [localhost:3000](htpp://localhost:3000)
|
||||||
|
|
||||||
|
`gulp build` will create the resulting *build* directory ready for deployment.
|
||||||
|
|
||||||
|
## LOGIC
|
||||||
|
|
||||||
|
> Klassennamen enthalten Objektnamen und Funktionen
|
||||||
|
> Sie sind mit `-` und `_` unterteilt.
|
||||||
|
> Der Bindestrich `-` trennt Objektnamen von Funktionen. Der Unterstrich `_` wiederum unterteilt Funktionsbezeichnungen.
|
||||||
|
|
|
||||||
12
gulpfile.js
12
gulpfile.js
|
|
@ -35,10 +35,11 @@ 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');
|
||||||
|
|
||||||
// Paths to data
|
// Data variables
|
||||||
const input = {
|
const input = {
|
||||||
root: 'source',
|
root: 'source',
|
||||||
screens: 'source/screens/**/*.+(njk|html)',
|
screens: 'source/screens/**/*.+(njk|html)',
|
||||||
|
|
@ -94,8 +95,6 @@ if (fs.existsSync('source/data/data.json')) {
|
||||||
|
|
||||||
// Clean build folder
|
// Clean build folder
|
||||||
function clean () {
|
function clean () {
|
||||||
// You can use multiple globbing patterns as you would with `gulp.src`,
|
|
||||||
// for example if you are using del 2.0 or above, return its promise
|
|
||||||
return del(output.root +'/**');
|
return del(output.root +'/**');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -134,6 +133,12 @@ function nunjucks () {
|
||||||
.pipe(dest(output.root));
|
.pipe(dest(output.root));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function validate () {
|
||||||
|
return src('build/**/*.html')
|
||||||
|
.pipe(htmlValidator())
|
||||||
|
.pipe(htmlValidator.reporter());
|
||||||
|
}
|
||||||
|
|
||||||
// Serve files to the browser
|
// Serve files to the browser
|
||||||
function serve (done) {
|
function serve (done) {
|
||||||
server.init({
|
server.init({
|
||||||
|
|
@ -285,6 +290,7 @@ const build = series(clean, assets, parallel(nunjucks, style, code));
|
||||||
const dev = series(clean, assets, parallel(nunjucks, series(styleLint, style), series(codeLint, code)));
|
const dev = series(clean, assets, parallel(nunjucks, series(styleLint, style), series(codeLint, code)));
|
||||||
|
|
||||||
exports.lint = parallel(series(style, styleLint), series(code, codeLint));
|
exports.lint = parallel(series(style, styleLint), series(code, codeLint));
|
||||||
|
exports.validate = series(nunjucks, validate);
|
||||||
exports.assets = assets;
|
exports.assets = assets;
|
||||||
exports.build = build;
|
exports.build = build;
|
||||||
exports.dev = dev;
|
exports.dev = dev;
|
||||||
|
|
|
||||||
1036
package-lock.json
generated
1036
package-lock.json
generated
File diff suppressed because it is too large
Load diff
11
package.json
11
package.json
|
|
@ -20,16 +20,16 @@
|
||||||
"@babel/core": "^7.7.2",
|
"@babel/core": "^7.7.2",
|
||||||
"@babel/preset-env": "^7.7.1",
|
"@babel/preset-env": "^7.7.1",
|
||||||
"browser-sync": "^2.26.7",
|
"browser-sync": "^2.26.7",
|
||||||
"del": "^4.1.1",
|
"del": "^5.1.0",
|
||||||
"gulp": "^4.0.2",
|
"gulp": "^4.0.2",
|
||||||
"gulp-autoprefixer": "^6.1.0",
|
"gulp-autoprefixer": "^7.0.1",
|
||||||
"gulp-babel": "^8.0.0",
|
"gulp-babel": "^8.0.0",
|
||||||
"gulp-cached": "^1.1.1",
|
"gulp-cached": "^1.1.1",
|
||||||
"gulp-changed": "^3.2.0",
|
"gulp-changed": "^4.0.2",
|
||||||
"gulp-clean-css": "^4.2.0",
|
"gulp-clean-css": "^4.2.0",
|
||||||
"gulp-concat": "^2.6.1",
|
"gulp-concat": "^2.6.1",
|
||||||
"gulp-data": "^1.3.1",
|
"gulp-data": "^1.3.1",
|
||||||
"gulp-if": "^2.0.2",
|
"gulp-if": "^3.0.0",
|
||||||
"gulp-jshint": "^2.1.0",
|
"gulp-jshint": "^2.1.0",
|
||||||
"gulp-json-concat": "^0.1.1",
|
"gulp-json-concat": "^0.1.1",
|
||||||
"gulp-notify": "^3.2.0",
|
"gulp-notify": "^3.2.0",
|
||||||
|
|
@ -40,10 +40,11 @@
|
||||||
"gulp-sass": "^4.0.2",
|
"gulp-sass": "^4.0.2",
|
||||||
"gulp-sass-lint": "^1.4.0",
|
"gulp-sass-lint": "^1.4.0",
|
||||||
"gulp-uglify": "^3.0.2",
|
"gulp-uglify": "^3.0.2",
|
||||||
|
"gulp-w3c-html-validator": "^1.4.4",
|
||||||
"gulp.spritesmith": "^6.11.0",
|
"gulp.spritesmith": "^6.11.0",
|
||||||
"jshint": "^2.10.3",
|
"jshint": "^2.10.3",
|
||||||
"jshint-stylish": "^2.2.1",
|
"jshint-stylish": "^2.2.1",
|
||||||
"merge-stream": "^1.0.1",
|
"merge-stream": "^2.0.0",
|
||||||
"node-sass": "^4.13.0",
|
"node-sass": "^4.13.0",
|
||||||
"pump": "^3.0.0"
|
"pump": "^3.0.0"
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -1,80 +1,79 @@
|
||||||
<!-- elements.page -->
|
<!-- elements.page -->
|
||||||
{% set pageId = "elements" %}
|
{% set pageId = "elements" %}
|
||||||
|
|
||||||
{% extends "demo/_extended.njk" %}
|
{% extends "demo/_extended.njk" %}
|
||||||
|
|
||||||
{% 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>
|
<span class="span_solo">?</span>
|
||||||
</div> -->
|
</div> -->
|
||||||
{% include "hippie/partials/_body_nav.njk" %}
|
{% include "hippie/partials/_body_nav.njk" %}
|
||||||
</div>
|
</div>
|
||||||
<div id="begin" class="">
|
<div id="begin" class="">
|
||||||
<section class="sec_main_center">
|
<section class="sec_main_center">
|
||||||
<header class="header_txt">
|
<header class="header_txt">
|
||||||
<h1>Medienformat Abfragen</h1>
|
<h1>Medienformat Abfragen</h1>
|
||||||
</header>
|
</header>
|
||||||
<article>
|
<article>
|
||||||
<div class="demo__query_example">Umbruch bei </div>
|
<div class="demo__query_example">Umbruch bei </div>
|
||||||
<div class="demo__queries">
|
<div class="demo__queries">
|
||||||
<p class="query_phoneUp">Telefone und größer</p>
|
<p class="query_phoneUp">Telefone und größer</p>
|
||||||
<p class="query_phoneOnly">Nur Telefone</p>
|
<p class="query_phoneOnly">Nur Telefone</p>
|
||||||
<p class="query_tabletPortaitOnly"Nur >Schreibtafeln hochkant</p>
|
<p class="query_tabletPortaitOnly">Nur Schreibtafeln hochkant</p>
|
||||||
<p class="query_tabletPortraitUp">Schreibtafeln und größer</p>
|
<p class="query_tabletPortraitUp">Schreibtafeln und größer</p>
|
||||||
<p class="query_tabletLandscapeOnly">Schreibtafeln im Querformat</p>
|
<p class="query_tabletLandscapeOnly">Schreibtafeln im Querformat</p>
|
||||||
<p class="query_tabletLandscapeUp">Schreibtafeln quer und größer</p>
|
<p class="query_tabletLandscapeUp">Schreibtafeln quer und größer</p>
|
||||||
<p class="query_desktopOnly">Nur Arbeitsplatzrechner</p>
|
<p class="query_desktopOnly">Nur Arbeitsplatzrechner</p>
|
||||||
<p class="query_desktopUp">Arbeitsplatzrechner und größer</p>
|
<p class="query_desktopUp">Arbeitsplatzrechner und größer</p>
|
||||||
<p class="query_bigDesktopUp">Richtige Monitore und größer</p>
|
<p class="query_bigDesktopUp">Richtige Monitore und größer</p>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</section>
|
</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><body></h2>
|
<h2><body></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><article></h2>
|
<h2><article></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><section></h2>
|
<h2><section></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><h3></h2>
|
<h2><h3></h2>
|
||||||
<h2><h4></h2>
|
<h2><h4></h2>
|
||||||
</article>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
{% include "hippie/partials/_footer.njk" %}
|
{% endblock %}
|
||||||
{% endblock %}
|
|
||||||
|
{% block script %}
|
||||||
{% block script %}
|
{{ super() }}
|
||||||
{{ super() }}
|
<script src="../vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
|
||||||
<script src="../vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
|
<script src="../js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
|
||||||
<script src="../js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
|
<script type="text/javascript">
|
||||||
<script type="text/javascript">
|
// Page specific
|
||||||
// Page specific
|
// ------------------------------------------------------------------------------
|
||||||
// ------------------------------------------------------------------------------
|
$( document ).ready(function () {
|
||||||
$( document ).ready(function () {
|
// jq-sticky-anything
|
||||||
// jq-sticky-anything
|
$('#js_demo_fix').stickThis({
|
||||||
$('#js_demo_fix').stickThis({
|
pushup: '#js_demo_stop'
|
||||||
pushup: '#js_demo_stop'
|
});
|
||||||
});
|
});
|
||||||
});
|
</script>
|
||||||
</script>
|
{% endblock %}
|
||||||
{% endblock %}
|
|
||||||
|
|
|
||||||
|
|
@ -1,23 +1,23 @@
|
||||||
<!-- error-404.page -->
|
<!-- error-404.page -->
|
||||||
{% set pageId = "404" %}
|
{% set pageId = "404" %}
|
||||||
{% set bodyClass = "body_status" %}
|
{% set bodyClass = "body_status" %}
|
||||||
|
|
||||||
{% extends "demo/_maintenance.njk" %}
|
{% extends "demo/_maintenance.njk" %}
|
||||||
|
|
||||||
{% block title %}{{ pageId }}{% endblock %}
|
{% block title %}{{ pageId }}{% endblock %}
|
||||||
{% block head %}
|
{% block head %}
|
||||||
{{ super() }}
|
{{ super() }}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block main %}
|
{% block main %}
|
||||||
<main class="main_site">
|
<main class="main_site">
|
||||||
<h1>{{ pageId }}</h1>
|
<h1>{{ pageId }}</h1>
|
||||||
<h3>Client-Fehler</h3>
|
<h3>Client-Fehler</h3>
|
||||||
<p>Hier ist nichts. <dfn>Not Found</dfn></br>
|
<p>Hier ist nichts. <dfn>Not Found</dfn></p>
|
||||||
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
|
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
|
||||||
<p>Die angeforderte Ressource wurde nicht gefunden. Dieser Statuscode kann ebenfalls verwendet werden, um eine Anfrage ohne näheren Grund abzuweisen. Links, welche auf solche Fehlerseiten verweisen, werden auch als Tote Links bezeichnet.</p>
|
<p>Die angeforderte Ressource wurde nicht gefunden. Dieser Statuscode kann ebenfalls verwendet werden, um eine Anfrage ohne näheren Grund abzuweisen. Links, welche auf solche Fehlerseiten verweisen, werden auch als Tote Links bezeichnet.</p>
|
||||||
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
|
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
|
||||||
</blockquote>
|
</blockquote>
|
||||||
</main>
|
</main>
|
||||||
{{ super() }}
|
{{ super() }}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
||||||
|
|
@ -1,243 +1,243 @@
|
||||||
<!-- elements.page -->
|
<!-- elements.page -->
|
||||||
{% set pageId = "examples" %}
|
{% set pageId = "examples" %}
|
||||||
|
|
||||||
{% extends "demo/_extended.njk" %}
|
{% extends "demo/_extended.njk" %}
|
||||||
|
|
||||||
{% 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>
|
<span class="span_solo">?</span>
|
||||||
</div> -->
|
</div> -->
|
||||||
{% include "hippie/partials/_body_nav.njk" %}
|
{% include "hippie/partials/_body_nav.njk" %}
|
||||||
</div>
|
</div>
|
||||||
<div id="begin" class="">
|
<div id="begin" class="">
|
||||||
<section class="sec_main_center">
|
<section class="sec_main_center">
|
||||||
<header class="header_txt">
|
<header class="header_txt">
|
||||||
<h1>Sammlung formatierter Elemente</h1>
|
<h1>Sammlung formatierter Elemente</h1>
|
||||||
<p>Die Elemente werden fortlaufend komplexer</p>
|
<p>Die Elemente werden fortlaufend komplexer</p>
|
||||||
</header>
|
</header>
|
||||||
<article>
|
<article>
|
||||||
<h2><h3></h2>
|
<h2><h3></h2>
|
||||||
<h4>Beispiele</h4>
|
<h4>Beispiele</h4>
|
||||||
<pre class="pre_code"><code>h3.txt_color_dark+p</code></pre>
|
<pre class="pre_code"><code>h3.txt_color_dark+p</code></pre>
|
||||||
<h3 class="txt_color_dark">Dunkle Überschrift</h3>
|
<h3 class="txt_color_dark">Dunkle Überschrift</h3>
|
||||||
<p>Mit normalem Textabsatz</p>
|
<p>Mit normalem Textabsatz</p>
|
||||||
<h2><h4></h2>
|
<h2><h4></h2>
|
||||||
<h4>Beispiele</h4>
|
<h4>Beispiele</h4>
|
||||||
<pre class="pre_code"><code>a>h4</code></pre>
|
<pre class="pre_code"><code>a>h4</code></pre>
|
||||||
<a href=""><h4>Überschrift als Block-Verweis</h4></a>
|
<a href=""><h4>Überschrift als Block-Verweis</h4></a>
|
||||||
<h2><section></h2>
|
<h2><section></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="../art/demo/flag_websafe_128x80.gif" width="256" height="160" alt="Fahne von interaktionsweise"></div>
|
<div class="float_space_left demo__avatar"><img src="../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><p>+49 (0)123 1337 0000<br><a class="lineLink" href="mailto:name@domain.tld">name@domain.tld</a></p>
|
||||||
</section>
|
</section>
|
||||||
<pre class="pre_code"><code>div.space_left_fourth</code></pre>
|
<pre class="pre_code"><code>div.space_left_fourth</code></pre>
|
||||||
<div class="space_left_fourth">
|
<div class="space_left_fourth">
|
||||||
<hr/>
|
<hr/>
|
||||||
<p>Eingerückter Inhalt</p>
|
<p>Eingerückter Inhalt</p>
|
||||||
<hr/>
|
<hr/>
|
||||||
</div>
|
</div>
|
||||||
<pre class="pre_code"><code>nav>ul>(li>a.a_button{Punkt $})*4nav>ul>(li>a.a_button_border{Stufe $})*4</code></pre>
|
<pre class="pre_code"><code>nav>ul>(li>a.a_button{Punkt $})*4nav>ul>(li>a.a_button_border{Stufe $})*4</code></pre>
|
||||||
<div class="overflow">
|
<div class="overflow">
|
||||||
<nav class="float_space_left">
|
<nav class="float_space_left">
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="" class="a_button" data-hippie-button-value="1">Erster Punkt</a></li>
|
<li><a href="" class="a_button" data-hippie-button-value="1">Erster Punkt</a></li>
|
||||||
<li><a href="" class="a_button" data-hippie-button-value="2">Zweiter Punkt</a></li>
|
<li><a href="" class="a_button" data-hippie-button-value="2">Zweiter Punkt</a></li>
|
||||||
<li><a href="" class="a_button" data-hippie-button-value="3">Dritter Punkt</a></li>
|
<li><a href="" class="a_button" data-hippie-button-value="3">Dritter Punkt</a></li>
|
||||||
<li><a href="" class="a_button" data-hippie-button-value="4">Vierter Punkt</a></li>
|
<li><a href="" class="a_button" data-hippie-button-value="4">Vierter Punkt</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="" class="a_button_border">Stufe 1</a></li>
|
<li><a href="" class="a_button_border">Stufe 1</a></li>
|
||||||
<li><a href="" class="a_button_border">Stufe 2</a></li>
|
<li><a href="" class="a_button_border">Stufe 2</a></li>
|
||||||
<li><a href="" class="a_button_border">Stufe 3</a></li>
|
<li><a href="" class="a_button_border">Stufe 3</a></li>
|
||||||
<li><a href="" class="a_button_border">Stufe 4</a></li>
|
<li><a href="" class="a_button_border">Stufe 4</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
<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>
|
<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>
|
||||||
<nav class="nav_horizontal">
|
<nav class="nav_horizontal">
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="" class="a_button">Abschnitt 1</a></li>
|
<li><a href="" class="a_button">Abschnitt 1</a></li>
|
||||||
<li><a href="" class="a_button">Abschnitt 2</a></li>
|
<li><a href="" class="a_button">Abschnitt 2</a></li>
|
||||||
<li><a href="" class="a_button">Abschnitt 3</a></li>
|
<li><a href="" class="a_button">Abschnitt 3</a></li>
|
||||||
<li><a href="" class="a_button">Abschnitt 4</a></li>
|
<li><a href="" class="a_button">Abschnitt 4</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
<div class="overflow">
|
<div class="overflow">
|
||||||
<nav class="nav_center_old">
|
<nav class="nav_center_old">
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="" class="a_button">Typ 1</a></li>
|
<li><a href="" class="a_button">Typ 1</a></li>
|
||||||
<li><a href="" class="a_button">Typ 2</a></li>
|
<li><a href="" class="a_button">Typ 2</a></li>
|
||||||
<li><a href="" class="a_button">Typ 3</a></li>
|
<li><a href="" class="a_button">Typ 3</a></li>
|
||||||
<li><a href="" class="a_button">Typ 4</a></li>
|
<li><a href="" class="a_button">Typ 4</a></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>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>
|
||||||
<header class="header_page demo__header header_fancy">
|
<header class="header_page demo__header header_fancy">
|
||||||
<h1>Aufmacher</h1>
|
<h1>Aufmacher</h1>
|
||||||
<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>
|
<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>
|
||||||
<nav class="nav_separate_right">
|
<nav class="nav_separate_right">
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="" class="a_button">Mensch</a></li>
|
<li><a href="" class="a_button">Mensch</a></li>
|
||||||
<li><a href="" class="a_button">Pflanze</a></li>
|
<li><a href="" class="a_button">Pflanze</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
<nav class="nav_right">
|
<nav class="nav_right">
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="" class="a_button">Blau</a></li>
|
<li><a href="" class="a_button">Blau</a></li>
|
||||||
<li><a href="" class="a_button">Gelb</a></li>
|
<li><a href="" class="a_button">Gelb</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
<pre class="pre_code"><code>header.header_page>nav.nav_right>ul>(li>a.a_button{Nav $})*4</code></pre>
|
<pre class="pre_code"><code>header.header_page>nav.nav_right>ul>(li>a.a_button{Nav $})*4</code></pre>
|
||||||
<div class="box_space h_basic">
|
<div class="box_space h_basic">
|
||||||
<header id="js_demo_fix" class="header_page demo__header header_fix">
|
<header id="js_demo_fix" class="header_page demo__header header_fix">
|
||||||
<nav class="nav_right">
|
<nav class="nav_right">
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="" class="a_button">Eins</a></li>
|
<li><a href="" class="a_button">Eins</a></li>
|
||||||
<li><a href="" class="a_button">Zwei</a></li>
|
<li><a href="" class="a_button">Zwei</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
<div class="pos_abs pin_bottom width_full">
|
<div class="pos_abs pin_bottom width_full">
|
||||||
<pre class="pre_code"><code>footer.pos_abs.pin_bottom>nav.nav_column>ul>(li>a.a_button_text)*4</code></pre>
|
<pre class="pre_code"><code>footer.pos_abs.pin_bottom>nav.nav_column>ul>(li>a.a_button_text)*4</code></pre>
|
||||||
<footer id="js_demo_stop" class="demo_footer">
|
<footer id="js_demo_stop" class="demo_footer">
|
||||||
<nav class="nav_column nav_separate">
|
<nav class="nav_column nav_separate">
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="" class="a_button_text">Alpha</a></li>
|
<li><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">Bravo</a></li>
|
||||||
<li><a href="" class="a_button_text">Charlie</a></li>
|
<li><a href="" class="a_button_text">Charlie</a></li>
|
||||||
<li><a href="" class="a_button_text">Delta</a></li>
|
<li><a href="" class="a_button_text">Delta</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</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>
|
<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>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex">
|
<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 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>
|
||||||
<div class="flex_column_wrap">
|
<div class="flex_column_wrap">
|
||||||
<div class="flex_column"><input value="Undefiniert"/></div>
|
<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="Text"/></div>
|
||||||
<div class="flex_column"><input type="text" size="8" value="Deaktiviert" disabled/></div>
|
<div class="flex_column"><input type="text" size="8" value="Deaktiviert" disabled/></div>
|
||||||
<div class="flex_column"><input type="button" value="Auswählen"></div>
|
<div class="flex_column"><input type="button" value="Auswählen"></div>
|
||||||
<div class="flex_column"><input type="submit" value="Senden" disabled/></div>
|
<div class="flex_column"><input type="submit" value="Senden" disabled/></div>
|
||||||
</div>
|
</div>
|
||||||
<form action="" method="get">
|
<form method="get">
|
||||||
<p class="label">
|
<p class="label">
|
||||||
Show me a <select name="F">
|
Show me a <select name="F">
|
||||||
<option value="0"> Plain list</option>
|
<option value="0"> Plain list</option>
|
||||||
<option value="1" selected="selected"> Fancy list</option>
|
<option value="1" selected="selected"> Fancy list</option>
|
||||||
<option value="2"> Table list</option>
|
<option value="2"> Table list</option>
|
||||||
</select>
|
</select>
|
||||||
Sorted by <select name="C">
|
Sorted by <select name="C">
|
||||||
<option value="N" selected="selected"> Name</option>
|
<option value="N" selected="selected"> Name</option>
|
||||||
<option value="M"> Date Modified</option>
|
<option value="M"> Date Modified</option>
|
||||||
<option value="S"> Size</option>
|
<option value="S"> Size</option>
|
||||||
<option value="D"> Description</option>
|
<option value="D"> Description</option>
|
||||||
</select>
|
</select>
|
||||||
<select name="O">
|
<select name="O">
|
||||||
<option value="A" selected="selected"> Ascending</option>
|
<option value="A" selected="selected"> Ascending</option>
|
||||||
<option value="D"> Descending</option>
|
<option value="D"> Descending</option>
|
||||||
</select>
|
</select>
|
||||||
<select name="V">
|
<select name="V">
|
||||||
<option value="0" selected="selected"> in Normal order</option>
|
<option value="0" selected="selected"> in Normal order</option>
|
||||||
<option value="1"> in Version order</option>
|
<option value="1"> in Version order</option>
|
||||||
</select>
|
</select>
|
||||||
Matching <input type="text" name="P" value="*" />
|
Matching <input type="text" name="P" value="*" />
|
||||||
<input type="submit" name="X" value="Go" />
|
<input type="submit" name="X" value="Go" />
|
||||||
</p>
|
</p>
|
||||||
</form>
|
</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="../art/letter.gif" alt="">name@domain.tld</a></li>
|
<li><a href=""><img src="../art/letter.gif" alt="">name@domain.tld</a></li>
|
||||||
<li><a href="">Work</a></li>
|
<li><a href="">Work</a></li>
|
||||||
<li><a href="">Projects</a></li>
|
<li><a href="">Projects</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<h2>Tabellen</h2>
|
<h2>Tabellen</h2>
|
||||||
<pre class="pre_code"><code>table.table_link>thead>tr>th{&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{&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> </th>
|
<th> </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="" 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"><a href="" target="_blank">Name</a><a href="" target="_blank">URL</a></td>
|
||||||
<td class="cell_date" rowspan="2">YYYY-MM-DD</td>
|
<td class="cell_date" rowspan="2">YYYY-MM-DD</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td class="cell_text">
|
<td class="cell_text">
|
||||||
<div class="shorten">Beschreibung</div>
|
<div class="shorten">Beschreibung</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td class="cell_icon" rowspan="2"><img src="" 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"><a href="" target="_blank">Name</a><a href="" target="_blank">URL</a></td>
|
||||||
<td class="cell_date" rowspan="2">YYYY-MM-DD</td>
|
<td class="cell_date" rowspan="2">YYYY-MM-DD</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td class="cell_text">
|
<td class="cell_text">
|
||||||
<div class="shorten">Beschreibung</div>
|
<div class="shorten">Beschreibung</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
<h2>Eingebettet</h2>
|
<h2>Eingebettet</h2>
|
||||||
<div class="demo__flag">
|
<div class="demo__flag">
|
||||||
<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" alt="Background flag">
|
<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">
|
||||||
<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"></rect>
|
<desc>Background flag</desc>
|
||||||
<polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "></polygon>
|
<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"></rect>
|
||||||
<polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "></polygon>
|
<polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "></polygon>
|
||||||
<polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "></polygon>
|
<polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "></polygon>
|
||||||
<polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "></polygon>
|
<polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "></polygon>
|
||||||
<polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "></polygon>
|
<polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "></polygon>
|
||||||
<polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "></polygon>
|
<polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "></polygon>
|
||||||
<polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "></polygon>
|
<polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "></polygon>
|
||||||
<polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "></polygon>
|
<polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "></polygon>
|
||||||
</svg>
|
<polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "></polygon>
|
||||||
</div>
|
</svg>
|
||||||
</article>
|
</div>
|
||||||
</section>
|
</article>
|
||||||
</div>
|
</section>
|
||||||
{% include "hippie/partials/_footer.njk" %}
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block script %}
|
{% block script %}
|
||||||
{{ super() }}
|
{{ super() }}
|
||||||
<script src="../vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
|
<script src="../vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
|
||||||
<script src="../js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
|
<script src="../js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
// Page specific
|
// Page specific
|
||||||
// ------------------------------------------------------------------------------
|
// ------------------------------------------------------------------------------
|
||||||
$( document ).ready(function () {
|
$( document ).ready(function () {
|
||||||
// jq-sticky-anything
|
// jq-sticky-anything
|
||||||
$('#js_demo_fix').stickThis({
|
$('#js_demo_fix').stickThis({
|
||||||
pushup: '#js_demo_stop'
|
pushup: '#js_demo_stop'
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
||||||
|
|
@ -63,7 +63,7 @@
|
||||||
<p>Es ist auch eine unsichtbare Unterteilung möglich:</p>
|
<p>Es ist auch eine unsichtbare Unterteilung möglich:</p>
|
||||||
<hr class="hr_hidden js_pop"/><div class="exp_pop"><code class="code_solo">hr.hr_hidden</code></div>
|
<hr class="hr_hidden js_pop"/><div class="exp_pop"><code class="code_solo">hr.hr_hidden</code></div>
|
||||||
<p>Die Linie darf auch gepunkted sein. Zudem sind verschiedene Längen möglich. Diese sind immer ein Prozentwert der verfügbaren Breite. Hier in gleicher Reihenfolge 100%, 50% und 25%:</p>
|
<p>Die Linie darf auch gepunkted sein. Zudem sind verschiedene Längen möglich. Diese sind immer ein Prozentwert der verfügbaren Breite. Hier in gleicher Reihenfolge 100%, 50% und 25%:</p>
|
||||||
<hr class="hr_dotted js_pop" emmet/><div class="exp_pop"><code class="code_solo">hr.hr_dotted</code></div><!--hr.hr_dotted-->
|
<hr class="hr_dotted js_pop"/><div class="exp_pop"><code class="code_solo">hr.hr_dotted</code></div><!--hr.hr_dotted-->
|
||||||
<hr class="space_even_half js_pop"/><div class="exp_pop"><code class="code_solo">hr.space_even_half</code></div>
|
<hr class="space_even_half js_pop"/><div class="exp_pop"><code class="code_solo">hr.space_even_half</code></div>
|
||||||
<hr class="hr_dotted space_even_fourth js_pop"/><div class="exp_pop"><code class="code_solo">hr.hr_dotted.space_even_fourth</code></div>
|
<hr class="hr_dotted space_even_fourth js_pop"/><div class="exp_pop"><code class="code_solo">hr.hr_dotted.space_even_fourth</code></div>
|
||||||
<p class="column_2 js_pop">Zur horizontalen Unterteilung kommt natürlich auch eine vertikale Trennung hinzu. Text kann so zum Beispiel in mehrere Spalten unterteilt werden. Dies ist hilfreich, wenn ein Text durch eine breite Fläche sehr lange Zeilen bekommen würde. Es ist dann schwer den neuen Zeilanfang zu finden. Die vertikale Trennung dient in erster Linie dazu, diesem Umstand zu begegnen. Auch hier kann die Unterteilung viele Formen annehmen.</p><div class="exp_pop"><code class="code_solo">p.column_2</code></div>
|
<p class="column_2 js_pop">Zur horizontalen Unterteilung kommt natürlich auch eine vertikale Trennung hinzu. Text kann so zum Beispiel in mehrere Spalten unterteilt werden. Dies ist hilfreich, wenn ein Text durch eine breite Fläche sehr lange Zeilen bekommen würde. Es ist dann schwer den neuen Zeilanfang zu finden. Die vertikale Trennung dient in erster Linie dazu, diesem Umstand zu begegnen. Auch hier kann die Unterteilung viele Formen annehmen.</p><div class="exp_pop"><code class="code_solo">p.column_2</code></div>
|
||||||
|
|
@ -106,7 +106,8 @@
|
||||||
<p>Auch Inhalte, die nicht in Textform sind, können durch einen Bezug integriert werden. Wie diese Fahne werden sie mit <code><figure></code> umschlossen und tragen eine Bezeichnung, welche mit <code><figcaption></code> ausgezeichnet wird.</p>
|
<p>Auch Inhalte, die nicht in Textform sind, können durch einen Bezug integriert werden. Wie diese Fahne werden sie mit <code><figure></code> umschlossen und tragen eine Bezeichnung, welche mit <code><figcaption></code> ausgezeichnet wird.</p>
|
||||||
<figure class="js_pop">
|
<figure class="js_pop">
|
||||||
<figcaption>Fahne</figcaption>
|
<figcaption>Fahne</figcaption>
|
||||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="10%" height="10%" viewBox="0 0 1920 1200" preserveAspectRatio="xMinYMax slice" alt="Background flag">
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="10%" height="10%" viewBox="0 0 1920 1200" preserveAspectRatio="xMinYMax slice">
|
||||||
|
<desc>Flag</desc>
|
||||||
<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 "/>
|
||||||
|
|
@ -154,13 +155,13 @@
|
||||||
<p><dfn><abbr title="Hippie interweaves preeminent personal interface elements">Hippie</abbr></dfn> is an recursive acronym for <dfn>Hippie interweaves preeminent personal interface elements</dfn>.</p>
|
<p><dfn><abbr title="Hippie interweaves preeminent personal interface elements">Hippie</abbr></dfn> is an recursive acronym for <dfn>Hippie interweaves preeminent personal interface elements</dfn>.</p>
|
||||||
<p>Die besondere Auszeichnungen <code><ruby></code> <q cite="https://de.wikipedia.org/wiki/Ruby_Annotation">bezeichnet ein Anmerkungssystem, bei dem der Text zusammen mit seiner Anmerkung in einer Zeile erscheint.</q> Das System verwendet die folgenden weiteren Elemente mit spezifischer Bedeutung:</p>
|
<p>Die besondere Auszeichnungen <code><ruby></code> <q cite="https://de.wikipedia.org/wiki/Ruby_Annotation">bezeichnet ein Anmerkungssystem, bei dem der Text zusammen mit seiner Anmerkung in einer Zeile erscheint.</q> Das System verwendet die folgenden weiteren Elemente mit spezifischer Bedeutung:</p>
|
||||||
<dl>
|
<dl>
|
||||||
<df><code><rb></code></df>
|
<dt><code><rb></code></dt>
|
||||||
<dd>Basis Textkomponente</dd>
|
<dd>Basis Textkomponente</dd>
|
||||||
<df><code><rt></code></df>
|
<dt><code><rt></code></dt>
|
||||||
<dd>Annotation</dd>
|
<dd>Annotation</dd>
|
||||||
<df><code><rtc></code></df>
|
<dt><code><rtc></code></dt>
|
||||||
<dd>Einzelne Komponente einer Annotation</dd>
|
<dd>Einzelne Komponente einer Annotation</dd>
|
||||||
<df><code><rp></code></df>
|
<dt><code><rp></code></dt>
|
||||||
<dd>Alternative bei fehlender Unterstützung</dd>
|
<dd>Alternative bei fehlender Unterstützung</dd>
|
||||||
</dl>
|
</dl>
|
||||||
<hr class="hr_dotted space_even_half">
|
<hr class="hr_dotted space_even_half">
|
||||||
|
|
@ -177,7 +178,7 @@
|
||||||
<p>Wikipedia erklärt dies ausführlicher unter <a href="https://de.wikipedia.org/wiki/Ruby_Annotation">Ruby Annotation</a>.</p>
|
<p>Wikipedia erklärt dies ausführlicher unter <a href="https://de.wikipedia.org/wiki/Ruby_Annotation">Ruby Annotation</a>.</p>
|
||||||
<p>Es gibt auch mehrere besondere Elemente um Maschinensprache oder Programmkode zu bezeichnen. Dabei wird unterschieden, ob der Inhalt nur für Menschen ausgezeichnet wird oder auch maschinen-lesbar sein soll. Die Elemente <code><data></code> und <code><time></code> enthalten eine maschinen-lesbare Repräsentation des Inhaltes:</p>
|
<p>Es gibt auch mehrere besondere Elemente um Maschinensprache oder Programmkode zu bezeichnen. Dabei wird unterschieden, ob der Inhalt nur für Menschen ausgezeichnet wird oder auch maschinen-lesbar sein soll. Die Elemente <code><data></code> und <code><time></code> enthalten eine maschinen-lesbare Repräsentation des Inhaltes:</p>
|
||||||
<dl>
|
<dl>
|
||||||
<dt><data>0</data> ≠ <data>NULL</data></dt>
|
<dt><data value="0">0</data> ≠ <data value="">NULL</data></dt>
|
||||||
<dd><code><data>0</data> ≠ <data>NULL</data></code></dd>
|
<dd><code><data>0</data> ≠ <data>NULL</data></code></dd>
|
||||||
<dt>Der Wert <data value="NULL">NULL</data> mit Attribut</dt>
|
<dt>Der Wert <data value="NULL">NULL</data> mit Attribut</dt>
|
||||||
<dd><code><data value="NULL">NULL</data></code></dd>
|
<dd><code><data value="NULL">NULL</data></code></dd>
|
||||||
|
|
@ -200,12 +201,10 @@
|
||||||
<p class="txt_center">Bei<mark class="mark_cursor">spiel zum mark</mark>ieren 😉.</p>
|
<p class="txt_center">Bei<mark class="mark_cursor">spiel zum mark</mark>ieren 😉.</p>
|
||||||
<p>Eine Markierung kann, mittels <code><mark></code>, auch durch den Autor geschehen. Diese stellt sich ein wenig anders dar: <mark>Diese Worte sind markiert.</mark></p>
|
<p>Eine Markierung kann, mittels <code><mark></code>, auch durch den Autor geschehen. Diese stellt sich ein wenig anders dar: <mark>Diese Worte sind markiert.</mark></p>
|
||||||
<p>Um Text, dessen schreibweise nicht vorhersehbar ist, zu markieren wie z.B. Benutzernamen <bdi>كائن بشري</bdi>, die auch rechtsbündig geschrieben sein können, wird das <code><bdi></code> Element eingesetzt.<br>Die Schreibweise kann auch auch vom Author vorgegeben und expliziert geändert werden. Dies wird dem <code><bdo></code> Element umgesetzt. Die Richtung wird dann mit dem Attribut <code>dir</code> angegeben.</p>
|
<p>Um Text, dessen schreibweise nicht vorhersehbar ist, zu markieren wie z.B. Benutzernamen <bdi>كائن بشري</bdi>, die auch rechtsbündig geschrieben sein können, wird das <code><bdi></code> Element eingesetzt.<br>Die Schreibweise kann auch auch vom Author vorgegeben und expliziert geändert werden. Dies wird dem <code><bdo></code> Element umgesetzt. Die Richtung wird dann mit dem Attribut <code>dir</code> angegeben.</p>
|
||||||
<bdo dir="rtl">
|
<ul>
|
||||||
<ul>
|
<li><bdo dir="rtl">كائن بشري</bdo></li>
|
||||||
<li>كائن بشري</li>
|
<li><bdo dir="rtl">إنسان آلي</bdo></li>
|
||||||
<li>إنسان آلي</li>
|
</ul>
|
||||||
</ul>
|
|
||||||
</bdo>
|
|
||||||
<p>Neben den vielen speziellen Elementen gibt es auch ein Element, das keine vordefinierte Bedeutung hat. Es ist das <code><span></code> Element.<br>Es dient dazu ganz individuelle Auszeichnungen zu ermöglichen die eher optische Auswirkungen haben und eben keine inhaltlichen. Mit den Attributen <code>id</code> oder <code>class</code> werden dazu eigene Typen des Elements definiert. Diese Möglichkeit der Definition von individuellen Elementen ist ein Grundprinzip der Auszeichnungssprache <abbr title="Hypertext Markup Language" >HTML</abbr>.</p>
|
<p>Neben den vielen speziellen Elementen gibt es auch ein Element, das keine vordefinierte Bedeutung hat. Es ist das <code><span></code> Element.<br>Es dient dazu ganz individuelle Auszeichnungen zu ermöglichen die eher optische Auswirkungen haben und eben keine inhaltlichen. Mit den Attributen <code>id</code> oder <code>class</code> werden dazu eigene Typen des Elements definiert. Diese Möglichkeit der Definition von individuellen Elementen ist ein Grundprinzip der Auszeichnungssprache <abbr title="Hypertext Markup Language" >HTML</abbr>.</p>
|
||||||
<p>Mit der Einführung von Absätzen wurde auch schon das <code><br></code> 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.</p>
|
<p>Mit der Einführung von Absätzen wurde auch schon das <code><br></code> 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.</p>
|
||||||
<p>Eine besondere Form des Zeilenumbruchs kann mit <code><wbr></code> 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.</p>
|
<p>Eine besondere Form des Zeilenumbruchs kann mit <code><wbr></code> 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.</p>
|
||||||
|
|
@ -240,42 +239,36 @@
|
||||||
<h1>Tabellen</h1>
|
<h1>Tabellen</h1>
|
||||||
<p>Tabellen bieten besonders geordnete Struktur. Häufig werden in ihnen Text und Daten kombiniert dargestellt. Dies erfordert individuelle Formatierungen. Einige grundlegende Eigenschaften werden im folgenden aufgezeigt. Tabellen sind in ihrer Größe entweder vordefiniert (fixiert) oder richten sich nach ihrem Inhalt. Das bedeutet, die Spaltenbreite entspricht der breitesten ihrer Zellen.</p>
|
<p>Tabellen bieten besonders geordnete Struktur. Häufig werden in ihnen Text und Daten kombiniert dargestellt. Dies erfordert individuelle Formatierungen. Einige grundlegende Eigenschaften werden im folgenden aufgezeigt. Tabellen sind in ihrer Größe entweder vordefiniert (fixiert) oder richten sich nach ihrem Inhalt. Das bedeutet, die Spaltenbreite entspricht der breitesten ihrer Zellen.</p>
|
||||||
<table class="width_full js_pop">
|
<table class="width_full js_pop">
|
||||||
<tbody>
|
<tr>
|
||||||
|
<td>Eine</td>
|
||||||
|
<td>einfache</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td colspan="2">Tabelle</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
<div class="exp_pop"><code class="code_solo">table.width_full>tr>td*2^tr>td[colspan=2]</code></div>
|
||||||
|
<div class="overflow">
|
||||||
|
<table class="float_space_left js_pop">
|
||||||
<tr>
|
<tr>
|
||||||
<td>Eine</td>
|
<td>Eine</td>
|
||||||
<td>einfache</td>
|
<td>freie (nicht fixierte)</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td colspan="2">Tabelle</td>
|
<td colspan="2">Tabelle</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
<div class="exp_pop"><code class="code_solo">table.width_full>tbody>tr>td*2^tr>td[colspan=2]</code></div>
|
|
||||||
<div class="overflow">
|
|
||||||
<table class="float_space_left js_pop">
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>Eine</td>
|
|
||||||
<td>freie (nicht fixierte)</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td colspan="2">Tabelle</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
</table>
|
||||||
<div class="exp_pop"><code class="code_solo">table>tbody>tr>td*2^tr>td[colspan=2]</code></div>
|
<div class="exp_pop"><code class="code_solo">table>tr>td*2^tr>td[colspan=2]</code></div>
|
||||||
<table class="table_blank float_space_left js_pop">
|
<table class="table_blank float_space_left js_pop">
|
||||||
<tbody>
|
<tr>
|
||||||
<tr>
|
<td>Mit</td>
|
||||||
<td>Mit</td>
|
<td>ohne</td>
|
||||||
<td>ohne</td>
|
</tr>
|
||||||
</tr>
|
<tr>
|
||||||
<tr>
|
<td colspan="2">Linien</td>
|
||||||
<td colspan="2">Linien</td>
|
</tr>
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
</table>
|
||||||
<div class="exp_pop"><code class="code_solo">table.table_blank>tbody>tr>td*2^tr>td[colspan=2]</code></div>
|
<div class="exp_pop"><code class="code_solo">table.table_blank>tr>td*2^tr>td[colspan=2]</code></div>
|
||||||
</div>
|
</div>
|
||||||
<p>Die nächste Tabelle verwendet alle zur Auszeichnung verfügbaren Elemente und hat eine starre Zellverteilung:</p>
|
<p>Die nächste Tabelle verwendet alle zur Auszeichnung verfügbaren Elemente und hat eine starre Zellverteilung:</p>
|
||||||
<table class="width_full table_fix js_pop">
|
<table class="width_full table_fix js_pop">
|
||||||
|
|
@ -287,13 +280,6 @@
|
||||||
<th>B</th>
|
<th>B</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tfoot>
|
|
||||||
<tr>
|
|
||||||
<td>Fußzeile</td>
|
|
||||||
<td>A</td>
|
|
||||||
<td>B</td>
|
|
||||||
</tr>
|
|
||||||
</tfoot>
|
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Tabelle</td>
|
<td>Tabelle</td>
|
||||||
|
|
@ -316,8 +302,15 @@
|
||||||
<td>Fußzeile</td>
|
<td>Fußzeile</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
|
<tfoot>
|
||||||
|
<tr>
|
||||||
|
<td>Fußzeile</td>
|
||||||
|
<td>A</td>
|
||||||
|
<td>B</td>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
</table>
|
</table>
|
||||||
<div class="exp_pop"><code class="code_solo">table.width_full.table_fix>caption+thead>tr>th*3^^tfoot>tr>td*3^^tbody>(tr>td*3)*3</code></div>
|
<div class="exp_pop"><code class="code_solo">table.width_full.table_fix>caption+thead>tr>th*3^^tbody>(tr>td*3)*3^^tfoot>tr>td*3</code></div>
|
||||||
<hr class="hr_hidden">
|
<hr class="hr_hidden">
|
||||||
<p>Viele weitere Formate sind möglich. Hier nur einige typische Beispiele:</p>
|
<p>Viele weitere Formate sind möglich. Hier nur einige typische Beispiele:</p>
|
||||||
<table class="width_full table_fix js_pop">
|
<table class="width_full table_fix js_pop">
|
||||||
|
|
@ -350,30 +343,28 @@
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
<div class="exp_pop"><code class="code_solo">table.width_full.table_stripe.table_free>tbody>tr>td*3</code></div>
|
<div class="exp_pop"><code class="code_solo">table.width_full.table_stripe.table_free>tr>td*3</code></div>
|
||||||
<table class="width_full table_stripe table_fix table_free">
|
<table class="width_full table_stripe table_fix table_free">
|
||||||
<tbody>
|
<tr>
|
||||||
<tr>
|
<td>Tabelle</td>
|
||||||
<td>Tabelle</td>
|
<td></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td></td>
|
</tr>
|
||||||
</tr>
|
<tr>
|
||||||
<tr>
|
<td>ohne</td>
|
||||||
<td>ohne</td>
|
<td>Rahmen</td>
|
||||||
<td>Rahmen</td>
|
<td></td>
|
||||||
<td></td>
|
</tr>
|
||||||
</tr>
|
<tr>
|
||||||
<tr>
|
<td></td>
|
||||||
<td></td>
|
<td>jedoch</td>
|
||||||
<td>jedoch</td>
|
<td>mit</td>
|
||||||
<td>mit</td>
|
</tr>
|
||||||
</tr>
|
<tr>
|
||||||
<tr>
|
<td></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td></td>
|
<td>Streifen</td>
|
||||||
<td>Streifen</td>
|
</tr>
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
</table>
|
||||||
<table>
|
<table>
|
||||||
<caption>Die Verteilung der Zellen ist hier von ihrem Inhalt abhängig.</caption>
|
<caption>Die Verteilung der Zellen ist hier von ihrem Inhalt abhängig.</caption>
|
||||||
|
|
@ -384,13 +375,6 @@
|
||||||
<th>>9000</th>
|
<th>>9000</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tfoot>
|
|
||||||
<tr>
|
|
||||||
<td>Summe</td>
|
|
||||||
<td></td>
|
|
||||||
<td>9001</td>
|
|
||||||
</tr>
|
|
||||||
</tfoot>
|
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Alpha</td>
|
<td>Alpha</td>
|
||||||
|
|
@ -408,6 +392,13 @@
|
||||||
<td>1</td>
|
<td>1</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
|
<tfoot>
|
||||||
|
<tr>
|
||||||
|
<td>Summe</td>
|
||||||
|
<td></td>
|
||||||
|
<td>9001</td>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
</table>
|
</table>
|
||||||
</article>
|
</article>
|
||||||
<article>
|
<article>
|
||||||
|
|
@ -428,39 +419,35 @@
|
||||||
<div class="overflow">
|
<div class="overflow">
|
||||||
<div class="float_left">
|
<div class="float_left">
|
||||||
<table class="table_fix table_blank">
|
<table class="table_fix table_blank">
|
||||||
<tbody>
|
<tr>
|
||||||
<tr>
|
<td><label for="demo__raw_a">Alpha:</label></td>
|
||||||
<td><label for="demo__raw_a">Alpha:</label></td>
|
<td><input type="text" id="demo__raw_a"></td>
|
||||||
<td><input type="text" id="demo__raw_a"></td>
|
</tr>
|
||||||
</tr>
|
<tr>
|
||||||
<tr>
|
<td><label for="demo__raw_b">Beta:</label></td>
|
||||||
<td><label for="demo__raw_b">Beta:</label></td>
|
<td><input type="text" id="demo__raw_b"></td>
|
||||||
<td><input type="text" id="demo__raw_b"></td>
|
</tr>
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
<table class="float_right">
|
<table class="float_right">
|
||||||
<tbody>
|
<tr>
|
||||||
<tr>
|
<td class="txt_right demo__td_no_br demo__td_pl"><input class="io_input" type="text" id="demo__io_d" value="11.966504" size="10"></td>
|
||||||
<td class="txt_right demo__td_no_br demo__td_pl"><input class="io_input" type="text" id="demo__io_d" value="11.966504" size="10"></td>
|
<td class="demo__td_pr"><label for="demo__io_a">x</label></td>
|
||||||
<td class="demo__td_pr"><label for="demo__io_a">x</label></td>
|
<td class="txt_right demo__td_no_br demo__td_pl"><input class="io_input" type="number" id="demo__io_a" value="10" min="0" max="1000"></td>
|
||||||
<td class="txt_right demo__td_no_br demo__td_pl"><input class="io_input" type="number" id="demo__io_a" value="10" min="0" max="1000"></td>
|
<td class="demo__td_pr"><label for="demo__io_a">Breite</label></td>
|
||||||
<td class="demo__td_pr"><label for="demo__io_a">Breite</label></td>
|
</tr>
|
||||||
</tr>
|
<tr>
|
||||||
<tr>
|
<td class="txt_right demo__td_no_br demo__td_pl"><input class="io_input" type="text" id="demo__io_e" value="51.503491" size="10"></td>
|
||||||
<td class="txt_right demo__td_no_br demo__td_pl"><input class="io_input" type="text" id="demo__io_e" value="51.503491" size="10"></td>
|
<td class="demo__td_pr"><label for="demo__io_b">y</label></td>
|
||||||
<td class="demo__td_pr"><label for="demo__io_b">y</label></td>
|
<td class="txt_right demo__td_no_br demo__td_pl"><input class="io_input" type="number" id="demo__io_b" value="10" min="0" max="1000"></td>
|
||||||
<td class="txt_right demo__td_no_br demo__td_pl"><input class="io_input" type="number" id="demo__io_b" value="10" min="0" max="1000"></td>
|
<td class="demo__td_pr"><label for="demo__io_b">Tiefe</label></td>
|
||||||
<td class="demo__td_pr"><label for="demo__io_b">Tiefe</label></td>
|
</tr>
|
||||||
</tr>
|
<tr>
|
||||||
<tr>
|
<td class="txt_right demo__td_no_br demo__td_pl"><input class="io_input" type="text" id="demo__io_f" value="88" size="10"></td>
|
||||||
<td class="txt_right demo__td_no_br demo__td_pl"><input class="io_input" type="text" id="demo__io_f" value="88" size="10"></td>
|
<td class="demo__td_pr"><label for="demo__io_c">z</label></td>
|
||||||
<td class="demo__td_pr"><label for="demo__io_c">z</label></td>
|
<td class="txt_right demo__td_no_br demo__td_pl"><input class="io_input" type="number" id="demo__io_c" value="48" min="0" max="1000"></td>
|
||||||
<td class="txt_right demo__td_no_br demo__td_pl"><input class="io_input" type="number" id="demo__io_c" value="48" min="0" max="1000"></td>
|
<td class="demo__td_pr"><label for="demo__io_c">Höhe</label></td>
|
||||||
<td class="demo__td_pr"><label for="demo__io_c">Höhe</label></td>
|
</tr>
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
<p>Zusätzlich zur Beschriftung einzelner Elemente gibt es auch die Möglichkeit Gruppierungen zu schaffen. Diese werden mit <code><fieldset></code> realisiert.</p>
|
<p>Zusätzlich zur Beschriftung einzelner Elemente gibt es auch die Möglichkeit Gruppierungen zu schaffen. Diese werden mit <code><fieldset></code> realisiert.</p>
|
||||||
|
|
@ -522,20 +509,20 @@
|
||||||
<p>Innerhalb einer Gruppe können nicht nur Ein- und Ausgabefelder platziert werden. Andere Elemente ergänzen Information oder lockern das Erscheinungsbild auf.</p>
|
<p>Innerhalb einer Gruppe können nicht nur Ein- und Ausgabefelder platziert werden. Andere Elemente ergänzen Information oder lockern das Erscheinungsbild auf.</p>
|
||||||
<p>Hier nun eine Liste weiterer Arten von Eingabefeldern:</p>
|
<p>Hier nun eine Liste weiterer Arten von Eingabefeldern:</p>
|
||||||
<div class="grid grid_column_2">
|
<div class="grid grid_column_2">
|
||||||
<label for="" class="">Farbauswahl<br><code><input[type="color"]></code></label><div><input class="" type="color"></div>
|
<label class="">Farbauswahl<br><code><input[type="color"]></code></label><div><input class="" type="color"></div>
|
||||||
<label for="" class="">Bereichsauswahl<br><code><input[type="range"]></code></label><div><input class="" type="range"></div>
|
<label class="">Bereichsauswahl<br><code><input[type="range"]></code></label><div><input class="" type="range"></div>
|
||||||
<label for="" class="">Datum<br><code><input[type="date"]></code></label><div><input class="io_input" type="date"></div>
|
<label class="">Datum<br><code><input[type="date"]></code></label><div><input class="io_input" type="date"></div>
|
||||||
<label for="" class="">Uhrzeit<br><code><input[type="time"]></code></label><div><input class="io_input" type="time"></div>
|
<label class="">Uhrzeit<br><code><input[type="time"]></code></label><div><input class="io_input" type="time"></div>
|
||||||
<label for="" class="">Datum und Zeit<br><code><input[type="datetime-local"]></code></label><div><input class="io_input" type="datetime-local"></div>
|
<label class="">Datum und Zeit<br><code><input[type="datetime-local"]></code></label><div><input class="io_input" type="datetime-local"></div>
|
||||||
<label for="" class="">Kalendermonat<br><code><input[type="month"]></code></label><div><input class="io_input" type="month"></div>
|
<label class="">Kalendermonat<br><code><input[type="month"]></code></label><div><input class="io_input" type="month"></div>
|
||||||
<label for="" class="">Kalenderwoche<br><code><input[type="week"]></code></label><div><input class="io_input" type="week"></div>
|
<label class="">Kalenderwoche<br><code><input[type="week"]></code></label><div><input class="io_input" type="week"></div>
|
||||||
<label for="" class="">@dresse<br><code><input[type="email"]></code></label><div><input class="io_input" type="email" placeholder="@"></div>
|
<label class="">@dresse<br><code><input[type="email"]></code></label><div><input class="io_input" type="email" placeholder="@"></div>
|
||||||
<label for="" class="">Passwort<br><code><input[type="password"]></code></label><div><input class="io_input" type="password" value="admin"></div>
|
<label class="">Passwort<br><code><input[type="password"]></code></label><div><input class="io_input" type="password" value="admin"></div>
|
||||||
<label for="" class="">Telefonnummer<br><code><input[type="tel"]></code></label><div><input class="io_input" type="tel" value="0190123456"></div>
|
<label class="">Telefonnummer<br><code><input[type="tel"]></code></label><div><input class="io_input" type="tel" value="0190123456"></div>
|
||||||
<label for="" class="">URL<br><code><input[type="url"]></code></label><div><input class="io_input" type="url" placeholder="url://"></div>
|
<label class="">URL<br><code><input[type="url"]></code></label><div><input class="io_input" type="url" placeholder="url://"></div>
|
||||||
<label for="" class="">Suche<br><code><input[type="search"]></code></label><div><input class="io_input" type="search"></div>
|
<label class="">Suche<br><code><input[type="search"]></code></label><div><input class="io_input" type="search"></div>
|
||||||
<label for="" class="">Datei<br><code><input[type="file"]></code></label><div><input class="" type="file"></div>
|
<label class="">Datei<br><code><input[type="file"]></code></label><div><input class="" type="file"></div>
|
||||||
<label for="" class="">Bild</label><input class="" type="image" value="Alternativer Text"/>
|
<label class="">Bild</label><input class="" type="image" alt="Alternativer Text"/>
|
||||||
</div>
|
</div>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
<!-- meta.partial -->
|
<!-- meta.partial -->
|
||||||
<meta name="author" content="Interaktionsweise">
|
<meta name="author" content="Interaktionsweise">
|
||||||
<meta name="generator" content="Atom, Notepad++">
|
<meta name="generator" content="Atom, Notepad++">
|
||||||
<meta name="description" content="Hippie interweaves preeminent personal interface elements">
|
<meta name="description" content="Hippie interweaves preeminent personal interface elements">
|
||||||
<meta name="robots" content="noindex">
|
<meta name="robots" content="noindex">
|
||||||
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
{# <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> #}
|
{# <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> #}
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" />
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue