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:
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
1034
package-lock.json
generated
1034
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"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
<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_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>
|
||||
|
|
@ -60,7 +60,6 @@
|
|||
</article>
|
||||
</section>
|
||||
</div>
|
||||
{% include "hippie/partials/_footer.njk" %}
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -137,7 +137,7 @@
|
|||
<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">
|
||||
<form method="get">
|
||||
<p class="label">
|
||||
Show me a <select name="F">
|
||||
<option value="0"> Plain list</option>
|
||||
|
|
@ -183,7 +183,7 @@
|
|||
</thead>
|
||||
<tbody>
|
||||
<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_date" rowspan="2">YYYY-MM-DD</td>
|
||||
</tr>
|
||||
|
|
@ -195,7 +195,7 @@
|
|||
</tbody>
|
||||
<tbody>
|
||||
<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_date" rowspan="2">YYYY-MM-DD</td>
|
||||
</tr>
|
||||
|
|
@ -208,7 +208,8 @@
|
|||
</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">
|
||||
<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>
|
||||
|
|
@ -223,7 +224,6 @@
|
|||
</article>
|
||||
</section>
|
||||
</div>
|
||||
{% include "hippie/partials/_footer.njk" %}
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<li><bdo dir="rtl">كائن بشري</bdo></li>
|
||||
<li><bdo dir="rtl">إنسان آلي</bdo></li>
|
||||
</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>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,7 +239,6 @@
|
|||
<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>
|
||||
|
|
@ -248,12 +246,10 @@
|
|||
<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="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">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Eine</td>
|
||||
<td>freie (nicht fixierte)</td>
|
||||
|
|
@ -261,11 +257,9 @@
|
|||
<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>
|
||||
|
|
@ -273,9 +267,8 @@
|
|||
<tr>
|
||||
<td colspan="2">Linien</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</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,9 +343,8 @@
|
|||
</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>
|
||||
|
|
@ -373,7 +365,6 @@
|
|||
<td></td>
|
||||
<td>Streifen</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</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,7 +419,6 @@
|
|||
<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>
|
||||
|
|
@ -437,11 +427,9 @@
|
|||
<td><label for="demo__raw_b">Beta:</label></td>
|
||||
<td><input type="text" id="demo__raw_b"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</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>
|
||||
|
|
@ -460,7 +448,6 @@
|
|||
<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>
|
||||
</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