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
|
|
@ -16,7 +16,7 @@
|
|||
"newcap" : false, // true: Require capitalization of all constructor functions e.g. `new F()`
|
||||
"noarg" : true, // true: Prohibit use of `arguments.caller` and `arguments.callee`
|
||||
"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)
|
||||
"plusplus" : false, // true: Prohibit use of `++` and `--`
|
||||
"quotmark" : false, // Quotation mark consistency:
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
// "single" : require single quotes
|
||||
// "double" : require double quotes
|
||||
"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
|
||||
// "vars" : all variables only
|
||||
// "strict" : all variables, all function parameters
|
||||
|
|
@ -71,7 +71,7 @@
|
|||
"devel" : true, // Development/debugging (alert, confirm, etc)
|
||||
"dojo" : false, // Dojo Toolkit
|
||||
"jasmine" : false, // Jasmine
|
||||
"jquery" : true, // jQuery
|
||||
"jquery" : true, // jQuery
|
||||
"mocha" : true, // Mocha
|
||||
"mootools" : false, // MooTools
|
||||
"node" : false, // Node.js
|
||||
|
|
@ -86,7 +86,7 @@
|
|||
"wsh" : false, // Windows Scripting Host
|
||||
"yui" : false, // Yahoo User Interface
|
||||
|
||||
// Custom Globals
|
||||
// Custom globals
|
||||
"globals" : {
|
||||
"debugOn": true,
|
||||
"hippie": true,
|
||||
|
|
|
|||
27
README.md
27
README.md
|
|
@ -1,19 +1,30 @@
|
|||
# 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.
|
||||
|
||||
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/).
|
||||
|
||||
## USAGE
|
||||
|
||||
Clone the repo `https://github.com/sthag/hippie.git` to a folder to create your build environment.
|
||||
|
||||
Change to the newly created folder. By default this would be *hippie*.
|
||||
|
||||
Run the command `npm install`.
|
||||
This will install all nodejs dependencies into the filder *node_modules*.
|
||||
This will install all node.js dependencies into the folder *node_modules*.
|
||||
|
||||
Run the command `gulp`.
|
||||
This will create a folder *build* with the resulting files.
|
||||
The command `gulp --tasks` will give you an overview of possible actions.
|
||||
|
||||
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.
|
||||
> 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 spritesmith = require('gulp.spritesmith');
|
||||
const babel = require('gulp-babel');
|
||||
const htmlValidator = require('gulp-w3c-html-validator');
|
||||
// const buffer = require('vinyl-buffer');
|
||||
// const imagemin = require('gulp-imagemin');
|
||||
|
||||
// Paths to data
|
||||
// Data variables
|
||||
const input = {
|
||||
root: 'source',
|
||||
screens: 'source/screens/**/*.+(njk|html)',
|
||||
|
|
@ -94,8 +95,6 @@ if (fs.existsSync('source/data/data.json')) {
|
|||
|
||||
// Clean build folder
|
||||
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 +'/**');
|
||||
}
|
||||
|
||||
|
|
@ -134,6 +133,12 @@ function nunjucks () {
|
|||
.pipe(dest(output.root));
|
||||
}
|
||||
|
||||
function validate () {
|
||||
return src('build/**/*.html')
|
||||
.pipe(htmlValidator())
|
||||
.pipe(htmlValidator.reporter());
|
||||
}
|
||||
|
||||
// Serve files to the browser
|
||||
function serve (done) {
|
||||
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)));
|
||||
|
||||
exports.lint = parallel(series(style, styleLint), series(code, codeLint));
|
||||
exports.validate = series(nunjucks, validate);
|
||||
exports.assets = assets;
|
||||
exports.build = build;
|
||||
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/preset-env": "^7.7.1",
|
||||
"browser-sync": "^2.26.7",
|
||||
"del": "^4.1.1",
|
||||
"del": "^5.1.0",
|
||||
"gulp": "^4.0.2",
|
||||
"gulp-autoprefixer": "^6.1.0",
|
||||
"gulp-autoprefixer": "^7.0.1",
|
||||
"gulp-babel": "^8.0.0",
|
||||
"gulp-cached": "^1.1.1",
|
||||
"gulp-changed": "^3.2.0",
|
||||
"gulp-changed": "^4.0.2",
|
||||
"gulp-clean-css": "^4.2.0",
|
||||
"gulp-concat": "^2.6.1",
|
||||
"gulp-data": "^1.3.1",
|
||||
"gulp-if": "^2.0.2",
|
||||
"gulp-if": "^3.0.0",
|
||||
"gulp-jshint": "^2.1.0",
|
||||
"gulp-json-concat": "^0.1.1",
|
||||
"gulp-notify": "^3.2.0",
|
||||
|
|
@ -40,10 +40,11 @@
|
|||
"gulp-sass": "^4.0.2",
|
||||
"gulp-sass-lint": "^1.4.0",
|
||||
"gulp-uglify": "^3.0.2",
|
||||
"gulp-w3c-html-validator": "^1.4.4",
|
||||
"gulp.spritesmith": "^6.11.0",
|
||||
"jshint": "^2.10.3",
|
||||
"jshint-stylish": "^2.2.1",
|
||||
"merge-stream": "^1.0.1",
|
||||
"merge-stream": "^2.0.0",
|
||||
"node-sass": "^4.13.0",
|
||||
"pump": "^3.0.0"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -10,57 +10,56 @@
|
|||
|
||||
{% block main %}
|
||||
<div class="temp_layer">
|
||||
<!-- <div class="exp_overlay_btn exp_help_btn">
|
||||
<span class="span_solo">?</span>
|
||||
<!-- <div class="exp_overlay_btn exp_help_btn">
|
||||
<span class="span_solo">?</span>
|
||||
</div> -->
|
||||
{% include "hippie/partials/_body_nav.njk" %}
|
||||
</div>
|
||||
<div id="begin" class="">
|
||||
<section class="sec_main_center">
|
||||
<header class="header_txt">
|
||||
<h1>Medienformat Abfragen</h1>
|
||||
</header>
|
||||
<article>
|
||||
<div class="demo__query_example">Umbruch bei </div>
|
||||
<div class="demo__queries">
|
||||
<p class="query_phoneUp">Telefone und größer</p>
|
||||
<p class="query_phoneOnly">Nur Telefone</p>
|
||||
<p class="query_tabletPortaitOnly"Nur >Schreibtafeln hochkant</p>
|
||||
<p class="query_tabletPortraitUp">Schreibtafeln und größer</p>
|
||||
<p class="query_tabletLandscapeOnly">Schreibtafeln im Querformat</p>
|
||||
<p class="query_tabletLandscapeUp">Schreibtafeln quer und größer</p>
|
||||
<p class="query_desktopOnly">Nur Arbeitsplatzrechner</p>
|
||||
<p class="query_desktopUp">Arbeitsplatzrechner und größer</p>
|
||||
<p class="query_bigDesktopUp">Richtige Monitore und größer</p>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
<section class="sec_main_center">
|
||||
<header class="header_txt">
|
||||
<h1>Medienformat Abfragen</h1>
|
||||
</header>
|
||||
<article>
|
||||
<div class="demo__query_example">Umbruch bei </div>
|
||||
<div class="demo__queries">
|
||||
<p class="query_phoneUp">Telefone und größer</p>
|
||||
<p class="query_phoneOnly">Nur Telefone</p>
|
||||
<p class="query_tabletPortaitOnly">Nur Schreibtafeln hochkant</p>
|
||||
<p class="query_tabletPortraitUp">Schreibtafeln und größer</p>
|
||||
<p class="query_tabletLandscapeOnly">Schreibtafeln im Querformat</p>
|
||||
<p class="query_tabletLandscapeUp">Schreibtafeln quer und größer</p>
|
||||
<p class="query_desktopOnly">Nur Arbeitsplatzrechner</p>
|
||||
<p class="query_desktopUp">Arbeitsplatzrechner und größer</p>
|
||||
<p class="query_bigDesktopUp">Richtige Monitore und größer</p>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="sec_main_center">
|
||||
<header class="header_txt">
|
||||
<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>Zu jedem Element werden alle Attribute aufgelistet und die Umsetzung im HTML Dokument als Emmet Syntax dargestellt.</p>
|
||||
</header>
|
||||
<article>
|
||||
<h1>Bereiche</h1>
|
||||
<p>Elemente:</p>
|
||||
<pre>// body<br>// article<br>// section<br>// nav<br>// aside<br>// h1-h6<br>// header<br>// footer</pre>
|
||||
<h2><body></h2>
|
||||
<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
|
||||
<h2><article></h2>
|
||||
<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
|
||||
<h2><section></h2>
|
||||
<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
|
||||
<h4>Varianten</h4>
|
||||
<pre class="pre_code"><code>section.sec_main_center</code></pre>
|
||||
<pre class="pre_code"><code>section.sec_main_status</code></pre>
|
||||
<h2><h3></h2>
|
||||
<h2><h4></h2>
|
||||
</article>
|
||||
</section>
|
||||
<section class="sec_main_center">
|
||||
<header class="header_txt">
|
||||
<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>Zu jedem Element werden alle Attribute aufgelistet und die Umsetzung im HTML Dokument als Emmet Syntax dargestellt.</p>
|
||||
</header>
|
||||
<article>
|
||||
<h1>Bereiche</h1>
|
||||
<p>Elemente:</p>
|
||||
<pre>// body<br>// article<br>// section<br>// nav<br>// aside<br>// h1-h6<br>// header<br>// footer</pre>
|
||||
<h2><body></h2>
|
||||
<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
|
||||
<h2><article></h2>
|
||||
<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
|
||||
<h2><section></h2>
|
||||
<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
|
||||
<h4>Varianten</h4>
|
||||
<pre class="pre_code"><code>section.sec_main_center</code></pre>
|
||||
<pre class="pre_code"><code>section.sec_main_status</code></pre>
|
||||
<h2><h3></h2>
|
||||
<h2><h4></h2>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
{% include "hippie/partials/_footer.njk" %}
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
|
|
@ -71,10 +70,10 @@
|
|||
// Page specific
|
||||
// ------------------------------------------------------------------------------
|
||||
$( document ).ready(function () {
|
||||
// jq-sticky-anything
|
||||
$('#js_demo_fix').stickThis({
|
||||
pushup: '#js_demo_stop'
|
||||
});
|
||||
// jq-sticky-anything
|
||||
$('#js_demo_fix').stickThis({
|
||||
pushup: '#js_demo_stop'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<main class="main_site">
|
||||
<h1>{{ pageId }}</h1>
|
||||
<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">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -10,220 +10,220 @@
|
|||
|
||||
{% block main %}
|
||||
<div class="temp_layer">
|
||||
<!-- <div class="exp_overlay_btn exp_help_btn">
|
||||
<span class="span_solo">?</span>
|
||||
<!-- <div class="exp_overlay_btn exp_help_btn">
|
||||
<span class="span_solo">?</span>
|
||||
</div> -->
|
||||
{% include "hippie/partials/_body_nav.njk" %}
|
||||
</div>
|
||||
<div id="begin" class="">
|
||||
<section class="sec_main_center">
|
||||
<header class="header_txt">
|
||||
<h1>Sammlung formatierter Elemente</h1>
|
||||
<p>Die Elemente werden fortlaufend komplexer</p>
|
||||
</header>
|
||||
<article>
|
||||
<h2><h3></h2>
|
||||
<h4>Beispiele</h4>
|
||||
<pre class="pre_code"><code>h3.txt_color_dark+p</code></pre>
|
||||
<h3 class="txt_color_dark">Dunkle Überschrift</h3>
|
||||
<p>Mit normalem Textabsatz</p>
|
||||
<h2><h4></h2>
|
||||
<h4>Beispiele</h4>
|
||||
<pre class="pre_code"><code>a>h4</code></pre>
|
||||
<a href=""><h4>Überschrift als Block-Verweis</h4></a>
|
||||
<h2><section></h2>
|
||||
<pre class="pre_code"><code>section>div.float_space_left>img^p+p</code></pre>
|
||||
<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>
|
||||
<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>
|
||||
<pre class="pre_code"><code>div.space_left_fourth</code></pre>
|
||||
<div class="space_left_fourth">
|
||||
<hr/>
|
||||
<p>Eingerückter Inhalt</p>
|
||||
<hr/>
|
||||
</div>
|
||||
<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">
|
||||
<nav class="float_space_left">
|
||||
<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="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="4">Vierter Punkt</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav>
|
||||
<ul>
|
||||
<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 3</a></li>
|
||||
<li><a href="" class="a_button_border">Stufe 4</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</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>
|
||||
<nav class="nav_horizontal">
|
||||
<ul>
|
||||
<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 3</a></li>
|
||||
<li><a href="" class="a_button">Abschnitt 4</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="overflow">
|
||||
<nav class="nav_center_old">
|
||||
<ul>
|
||||
<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 3</a></li>
|
||||
<li><a href="" class="a_button">Typ 4</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</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>
|
||||
<header class="header_page demo__header header_fancy">
|
||||
<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>
|
||||
<nav class="nav_separate_right">
|
||||
<ul>
|
||||
<li><a href="" class="a_button">Mensch</a></li>
|
||||
<li><a href="" class="a_button">Pflanze</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav class="nav_right">
|
||||
<ul>
|
||||
<li><a href="" class="a_button">Blau</a></li>
|
||||
<li><a href="" class="a_button">Gelb</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<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">
|
||||
<header id="js_demo_fix" class="header_page demo__header header_fix">
|
||||
<nav class="nav_right">
|
||||
<ul>
|
||||
<li><a href="" class="a_button">Eins</a></li>
|
||||
<li><a href="" class="a_button">Zwei</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<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>
|
||||
<footer id="js_demo_stop" class="demo_footer">
|
||||
<nav class="nav_column nav_separate">
|
||||
<ul>
|
||||
<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">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/></div>
|
||||
<div class="flex_column"><input type="button" value="Auswählen"></div>
|
||||
<div class="flex_column"><input type="submit" value="Senden" disabled/></div>
|
||||
</div>
|
||||
<form action="" 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>
|
||||
<section class="sec_main_center">
|
||||
<header class="header_txt">
|
||||
<h1>Sammlung formatierter Elemente</h1>
|
||||
<p>Die Elemente werden fortlaufend komplexer</p>
|
||||
</header>
|
||||
<article>
|
||||
<h2><h3></h2>
|
||||
<h4>Beispiele</h4>
|
||||
<pre class="pre_code"><code>h3.txt_color_dark+p</code></pre>
|
||||
<h3 class="txt_color_dark">Dunkle Überschrift</h3>
|
||||
<p>Mit normalem Textabsatz</p>
|
||||
<h2><h4></h2>
|
||||
<h4>Beispiele</h4>
|
||||
<pre class="pre_code"><code>a>h4</code></pre>
|
||||
<a href=""><h4>Überschrift als Block-Verweis</h4></a>
|
||||
<h2><section></h2>
|
||||
<pre class="pre_code"><code>section>div.float_space_left>img^p+p</code></pre>
|
||||
<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>
|
||||
<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>
|
||||
<pre class="pre_code"><code>div.space_left_fourth</code></pre>
|
||||
<div class="space_left_fourth">
|
||||
<hr/>
|
||||
<p>Eingerückter Inhalt</p>
|
||||
<hr/>
|
||||
</div>
|
||||
<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">
|
||||
<nav class="float_space_left">
|
||||
<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="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="4">Vierter Punkt</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav>
|
||||
<ul>
|
||||
<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 3</a></li>
|
||||
<li><a href="" class="a_button_border">Stufe 4</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</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>
|
||||
<nav class="nav_horizontal">
|
||||
<ul>
|
||||
<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 3</a></li>
|
||||
<li><a href="" class="a_button">Abschnitt 4</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="overflow">
|
||||
<nav class="nav_center_old">
|
||||
<ul>
|
||||
<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 3</a></li>
|
||||
<li><a href="" class="a_button">Typ 4</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</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>
|
||||
<header class="header_page demo__header header_fancy">
|
||||
<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>
|
||||
<nav class="nav_separate_right">
|
||||
<ul>
|
||||
<li><a href="" class="a_button">Mensch</a></li>
|
||||
<li><a href="" class="a_button">Pflanze</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav class="nav_right">
|
||||
<ul>
|
||||
<li><a href="" class="a_button">Blau</a></li>
|
||||
<li><a href="" class="a_button">Gelb</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<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">
|
||||
<header id="js_demo_fix" class="header_page demo__header header_fix">
|
||||
<nav class="nav_right">
|
||||
<ul>
|
||||
<li><a href="" class="a_button">Eins</a></li>
|
||||
<li><a href="" class="a_button">Zwei</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<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>
|
||||
<footer id="js_demo_stop" class="demo_footer">
|
||||
<nav class="nav_column nav_separate">
|
||||
<ul>
|
||||
<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">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/></div>
|
||||
<div class="flex_column"><input type="button" value="Auswählen"></div>
|
||||
<div class="flex_column"><input type="submit" value="Senden" 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>
|
||||
<pre class="pre_code"><code>ul.list_link>(li>a>img)*2+li>a</code></pre>
|
||||
<ul class="list_link">
|
||||
<li><a href=""><img src="../art/letter.gif" alt="">name@domain.tld</a></li>
|
||||
<li><a href="">Work</a></li>
|
||||
<li><a href="">Projects</a></li>
|
||||
</ul>
|
||||
<h2>Gruppierung</h2>
|
||||
<pre class="pre_code"><code>ul.list_link>(li>a>img)*2+li>a</code></pre>
|
||||
<ul class="list_link">
|
||||
<li><a href=""><img src="../art/letter.gif" alt="">name@domain.tld</a></li>
|
||||
<li><a href="">Work</a></li>
|
||||
<li><a href="">Projects</a></li>
|
||||
</ul>
|
||||
|
||||
<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>
|
||||
<table class="table_link js_pop">
|
||||
<thead>
|
||||
<tr>
|
||||
<th> </th>
|
||||
<th>Ab / Zy</th>
|
||||
<th>Neu / Alt</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="cell_icon" rowspan="2"><img src="" 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_date" rowspan="2">YYYY-MM-DD</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell_text">
|
||||
<div class="shorten">Beschreibung</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="cell_icon" rowspan="2"><img src="" 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_date" rowspan="2">YYYY-MM-DD</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell_text">
|
||||
<div class="shorten">Beschreibung</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2>Eingebettet</h2>
|
||||
<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">
|
||||
<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"></rect>
|
||||
<polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "></polygon>
|
||||
<polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "></polygon>
|
||||
<polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "></polygon>
|
||||
<polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "></polygon>
|
||||
<polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "></polygon>
|
||||
<polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "></polygon>
|
||||
<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>
|
||||
<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>
|
||||
<table class="table_link js_pop">
|
||||
<thead>
|
||||
<tr>
|
||||
<th> </th>
|
||||
<th>Ab / Zy</th>
|
||||
<th>Neu / Alt</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<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_date" rowspan="2">YYYY-MM-DD</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell_text">
|
||||
<div class="shorten">Beschreibung</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr>
|
||||
<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_date" rowspan="2">YYYY-MM-DD</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell_text">
|
||||
<div class="shorten">Beschreibung</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2>Eingebettet</h2>
|
||||
<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">
|
||||
<desc>Background flag</desc>
|
||||
<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"></rect>
|
||||
<polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "></polygon>
|
||||
<polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "></polygon>
|
||||
<polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "></polygon>
|
||||
<polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "></polygon>
|
||||
<polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "></polygon>
|
||||
<polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "></polygon>
|
||||
<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>
|
||||
{% include "hippie/partials/_footer.njk" %}
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
|
|
@ -234,10 +234,10 @@
|
|||
// Page specific
|
||||
// ------------------------------------------------------------------------------
|
||||
$( document ).ready(function () {
|
||||
// jq-sticky-anything
|
||||
$('#js_demo_fix').stickThis({
|
||||
pushup: '#js_demo_stop'
|
||||
});
|
||||
// jq-sticky-anything
|
||||
$('#js_demo_fix').stickThis({
|
||||
pushup: '#js_demo_stop'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@
|
|||
<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>
|
||||
<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="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>
|
||||
|
|
@ -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>
|
||||
<figure class="js_pop">
|
||||
<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"/>
|
||||
<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 "/>
|
||||
|
|
@ -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>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>
|
||||
<df><code><rb></code></df>
|
||||
<dt><code><rb></code></dt>
|
||||
<dd>Basis Textkomponente</dd>
|
||||
<df><code><rt></code></df>
|
||||
<dt><code><rt></code></dt>
|
||||
<dd>Annotation</dd>
|
||||
<df><code><rtc></code></df>
|
||||
<dt><code><rtc></code></dt>
|
||||
<dd>Einzelne Komponente einer Annotation</dd>
|
||||
<df><code><rp></code></df>
|
||||
<dt><code><rp></code></dt>
|
||||
<dd>Alternative bei fehlender Unterstützung</dd>
|
||||
</dl>
|
||||
<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>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>
|
||||
<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>
|
||||
<dt>Der Wert <data value="NULL">NULL</data> mit Attribut</dt>
|
||||
<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>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>
|
||||
<bdo dir="rtl">
|
||||
<ul>
|
||||
<li>كائن بشري</li>
|
||||
<li>إنسان آلي</li>
|
||||
</ul>
|
||||
</bdo>
|
||||
<ul>
|
||||
<li><bdo dir="rtl">كائن بشري</bdo></li>
|
||||
<li><bdo dir="rtl">إنسان آلي</bdo></li>
|
||||
</ul>
|
||||
<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>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>
|
||||
<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">
|
||||
<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>
|
||||
<td>Eine</td>
|
||||
<td>einfache</td>
|
||||
<td>freie (nicht fixierte)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">Tabelle</td>
|
||||
</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>
|
||||
<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">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Mit</td>
|
||||
<td>ohne</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">Linien</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tr>
|
||||
<td>Mit</td>
|
||||
<td>ohne</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">Linien</td>
|
||||
</tr>
|
||||
</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>
|
||||
<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">
|
||||
|
|
@ -287,13 +280,6 @@
|
|||
<th>B</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td>Fußzeile</td>
|
||||
<td>A</td>
|
||||
<td>B</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tabelle</td>
|
||||
|
|
@ -316,8 +302,15 @@
|
|||
<td>Fußzeile</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td>Fußzeile</td>
|
||||
<td>A</td>
|
||||
<td>B</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</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">
|
||||
<p>Viele weitere Formate sind möglich. Hier nur einige typische Beispiele:</p>
|
||||
<table class="width_full table_fix js_pop">
|
||||
|
|
@ -350,30 +343,28 @@
|
|||
</tr>
|
||||
</tbody>
|
||||
</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">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tabelle</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ohne</td>
|
||||
<td>Rahmen</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>jedoch</td>
|
||||
<td>mit</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>Streifen</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tr>
|
||||
<td>Tabelle</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ohne</td>
|
||||
<td>Rahmen</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>jedoch</td>
|
||||
<td>mit</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>Streifen</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Die Verteilung der Zellen ist hier von ihrem Inhalt abhängig.</caption>
|
||||
|
|
@ -384,13 +375,6 @@
|
|||
<th>>9000</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td>Summe</td>
|
||||
<td></td>
|
||||
<td>9001</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Alpha</td>
|
||||
|
|
@ -408,6 +392,13 @@
|
|||
<td>1</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td>Summe</td>
|
||||
<td></td>
|
||||
<td>9001</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</article>
|
||||
<article>
|
||||
|
|
@ -428,39 +419,35 @@
|
|||
<div class="overflow">
|
||||
<div class="float_left">
|
||||
<table class="table_fix table_blank">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><label for="demo__raw_a">Alpha:</label></td>
|
||||
<td><input type="text" id="demo__raw_a"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="demo__raw_b">Beta:</label></td>
|
||||
<td><input type="text" id="demo__raw_b"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tr>
|
||||
<td><label for="demo__raw_a">Alpha:</label></td>
|
||||
<td><input type="text" id="demo__raw_a"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="demo__raw_b">Beta:</label></td>
|
||||
<td><input type="text" id="demo__raw_b"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<table class="float_right">
|
||||
<tbody>
|
||||
<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="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="demo__td_pr"><label for="demo__io_a">Breite</label></td>
|
||||
</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="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="demo__td_pr"><label for="demo__io_b">Tiefe</label></td>
|
||||
</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="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="demo__td_pr"><label for="demo__io_c">Höhe</label></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<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="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="demo__td_pr"><label for="demo__io_a">Breite</label></td>
|
||||
</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="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="demo__td_pr"><label for="demo__io_b">Tiefe</label></td>
|
||||
</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="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="demo__td_pr"><label for="demo__io_c">Höhe</label></td>
|
||||
</tr>
|
||||
</table>
|
||||
</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>
|
||||
|
|
@ -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>Hier nun eine Liste weiterer Arten von Eingabefeldern:</p>
|
||||
<div class="grid grid_column_2">
|
||||
<label for="" 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 for="" 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 for="" 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 for="" 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 for="" 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 for="" 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 for="" 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="">Farbauswahl<br><code><input[type="color"]></code></label><div><input class="" type="color"></div>
|
||||
<label class="">Bereichsauswahl<br><code><input[type="range"]></code></label><div><input class="" type="range"></div>
|
||||
<label class="">Datum<br><code><input[type="date"]></code></label><div><input class="io_input" type="date"></div>
|
||||
<label class="">Uhrzeit<br><code><input[type="time"]></code></label><div><input class="io_input" type="time"></div>
|
||||
<label class="">Datum und Zeit<br><code><input[type="datetime-local"]></code></label><div><input class="io_input" type="datetime-local"></div>
|
||||
<label class="">Kalendermonat<br><code><input[type="month"]></code></label><div><input class="io_input" type="month"></div>
|
||||
<label class="">Kalenderwoche<br><code><input[type="week"]></code></label><div><input class="io_input" type="week"></div>
|
||||
<label class="">@dresse<br><code><input[type="email"]></code></label><div><input class="io_input" type="email" placeholder="@"></div>
|
||||
<label class="">Passwort<br><code><input[type="password"]></code></label><div><input class="io_input" type="password" value="admin"></div>
|
||||
<label class="">Telefonnummer<br><code><input[type="tel"]></code></label><div><input class="io_input" type="tel" value="0190123456"></div>
|
||||
<label class="">URL<br><code><input[type="url"]></code></label><div><input class="io_input" type="url" placeholder="url://"></div>
|
||||
<label class="">Suche<br><code><input[type="search"]></code></label><div><input class="io_input" type="search"></div>
|
||||
<label class="">Datei<br><code><input[type="file"]></code></label><div><input class="" type="file"></div>
|
||||
<label class="">Bild</label><input class="" type="image" alt="Alternativer Text"/>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,4 +6,4 @@
|
|||
|
||||
<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 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