hippie/source/screens/demo/components.njk

---
title: Components
tags:
  - demoIndex
---
{% set pageBase = "../" %}
{% set pageId = page.fileSlug %}

{% extends "demo/_main.njk" %}
{% import "hippie/macros/_footer.njk" as footer %}

{% block title %}Komponenten{% endblock %}
{% block head %}
	{{ super() }}
{% endblock %}

{% block main %}
	<!-- {{ page.fileSlug }}.page -->
	<section class="sec_main_center">
		<header class="header_txt">
			<h1>Medienformat Abfragen</h1>
		</header>
		<article>
			<div class="demo__query_example">Umbruch bei&nbsp;</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://html.spec.whatwg.org/multipage/#toc-semantics">html.spec.whatwg.org/multipage/#toc-semantics</a>) verwendet.</p>
			<p>Zu jedem Element werden alle Attribute aufgelistet und die Umsetzung im HTML-Dokument als Emmet-Syntax dargestellt.</p>
		</header>
		<pre class="pre_code"><code>article>h1+p{Elemente:}+pre+h2{&lt;tag&gt;}+h4{Varianten}</code></pre>
		<article>
			<h1 id="sections">Bereiche</h1>
			<p>Elemente:</p>
			<pre>// body<br>// article<br>// section<br>// nav<br>// aside<br>// h1-h6<br>// header<br>// footer</pre>
			<h2>&lt;body&gt;</h2>
			<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
			<h2>&lt;article&gt;</h2>
			<article>Ein Artikel.</article>
			<h2>&lt;section&gt;</h2>
			<section>Ein Bereich.</section>
			<h4>Varianten</h4>
			<pre class="pre_code"><code>section.sec_main_center</code></pre>
			<section class="sec_main_center">
				<p class="float_right">Ende.</p>
				<p>Zentrierter Bereich.</p>
			</section>
			<pre class="pre_code"><code>section.sec_main_status</code></pre>
			<section class="sec_main_status">Status-Bereich</section>
			<h2>&lt;nav&gt;</h2>
			<nav>Navigation</nav>
			<h2>&lt;aside&gt;</h2>
			<p>Fließt um andere Inhalte. Klassen zur Positionierung und Kombination mit <code>.bside</code>.</p>
			<pre class="pre_code"><code>aside.right+div.bside</code></pre>
			<section>
				<aside class="right">Seitenbereich, recht ausgerichtet.</aside>
				<div class="bside">Hauptbereich</div>
			</section>
			<h2>&lt;h*&gt;</h2>
			<h1>Überschrift 1</h1>
			<h2>Überschrift 2</h2>
			<h3>Überschrift 3</h3>
			<h4>Überschrift 4</h4>
			<h5>Überschrift 5</h5>
			<hgroup>
				<h6>Überschrift 6</h6>
				<p>Mit Absatz innerhalb von <code>&lt;hgroup&gt;</code>.</p>
			</hgroup>
			<h2>&lt;header&gt;</h2>
			<header>Kopfbereich</header>
			<pre class="pre_code"><code>header.header_page</code></pre>
			<pre class="pre_code"><code>header.header_txt>h1</code></pre>
			<header class="header_txt">
				<h1>Überschrift 1</h1>
				<p>Innerhalb eines <code>&lt;header&gt;</code>.</p>
			</header>
			<h2>&lt;footer&gt;</h2>
			<p>Bekommt überlicherweise Klassen zur Positionierung und der Abmessungen zugewiesen.</p>
			<footer>Fußbereich</footer>
			<div style="position:relative;height:256px;background-color:#b7e0f0;">
				{{ footer.pinned() }}
			</div>
		</article>
		<article>
			<h1 id="grouping">Gruppierung</h1>
			<p>Elemente:</p>
			<pre>// p // address // hr // pre // blockquote // ol // ul // li // dl // dt // dd // figure // figcaption // main // div</pre>
			<h2>&lt;p&gt;</h2>
			<p>Ein Absatz. Ein <code>code</code> Element innerhalb wird besonders behandelt.</p>
			<h4>Varianten</h4>
			<pre class="pre_code"><code>p.column_2</code></pre>
			<p class="column_2">Spalten können angegeben werden.</p>
			<pre class="pre_code"><code>p.column_3.column_line</code></pre>
			<p class="column_3 column_line">Spalten können angegeben werden.</p>
			<h2>&lt;address&gt;</h2>
			<address>Anschrift, mit bestimmtem, ##### Format.</address>
			<h2>&lt;hr&gt;</h2>
			<hr>
			<h4>Varianten</h4>
			<pre class="pre_code"><code>hr.hr_hidden+hr.hr_dotted+hr.hr_double</code></pre>
			<hr class="hr_hidden">
			<hr class="hr_dotted">
			<hr class="hr_double">
			<pre class="pre_code"><code>hr.vertical</code></pre>
			<hr class="vertical">
			<h2>&lt;pre&gt;</h2>
			<pre>Vorformatierter Text.
	erhält Umbrüche und Einrückung.
			</pre>
			<pre class="pre_code"><code>pre.pre_code>code*2</code></pre>
			<pre class="pre_code"><code>let variable = true;</code>
<code>()(){}</code></pre>
			<h2>&lt;blockquote&gt;</h2>
			<blockquote>Ein Zitat ist eingerückt.</blockquote>
			<pre class="pre_code"><code>blockquote.quote_mark>p+p.quote_source</code></pre>
			<blockquote class="quote_mark">
				<p>Zitat mit automatischen Anführungszeichen</p>
				<p class="quote_source">und Quellenangabe.</p>
			</blockquote>
			<h2>&lt;dl&gt;, &lt;ol&gt;, &lt;ul&gt;</h2>
			<dl>
				<dt>Begriff</dt>
				<dd>Definition</dd>
			</dl>
			<ol>
				<li>Eins</li>
				<li>Zwei</li>
			</ol>
			<ul class="horizontal">
				<li>Obst</li>
				<li>Gemüse</li>
			</ul>
			<h4>Varianten</h4>
			<pre class="pre_code"><code>ul.list_basic.list_dash>li*2</code></pre>
			<ul class="list_basic list_dash">
				<li>Mehr Abstand und</li>
				<li>mit Unterstrichen.</li>
			</ul>
			<pre class="pre_code"><code>ul.list_link>(li>a)*2</code></pre>
			<ul class="list_link">
				<li>
					<a href="">Mit</a>
				</li>
				<li>
					<a href="">Verweisen</a>
				</li>
			</ul>
			<h2>&lt;figure&gt;</h2>
			<pre class="pre_code"><code>figure>figcaption+{element}</code></pre>
			<figure>
				<figcaption>Bezeichnung</figcaption>
				Grafisches Element.
			</figure>
			<h2>&lt;main&gt;</h2>
			<main>Hauptbereich</main>
			<h2>&lt;div&gt;</h2>
			<h4>Varianten</h4>
			<pre class="pre_code"><code>div.div_info>p</code></pre>
			<div class="div_info">
				<p>Absatz in Informationsbox.</p>
			</div>
			<pre class="pre_code"><code>div.box_space>div.box_cube>span</code></pre>
			<div class="box_space">
				<div class="box_cube">
					<span>Text</span></div>
			</div>
			<pre class="pre_code"><code>div.box_placeholder+hr+div.box_placeholder_bkg</code></pre>
			<div class="box_placeholder"></div>
			<hr>
			<div class="box_placeholder_bkg"></div>
		</article>
		<article>
			<h1 id="tabularData">Tabellen</h1>
			<p>Elemente:</p>
			<pre>// table // caption // colgroup // col // tbody // thead // tfoot // tr // td // th</pre>
			<h2>&lt;table&gt;</h2>
			<h4>Varianten</h4>
			<pre class="pre_code"><code>table.width_full.table_fix>(thead>tr>th.cell_pre[scope="col"]+th[scope="col"]*3)+tbody>tr>td.cell_pre+td*3</code></pre>
			<table class="width_full table_fix">
				<thead>
					<tr>
						<th class="cell_pre" scope="col"></th>
						<th scope="col">Kopfzeile</th>
						<th scope="col">A</th>
						<th scope="col">B</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td class="cell_pre">Vorspalte</td>
						<td>Eine</td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td class="cell_pre">1</td>
						<td></td>
						<td>erweiterte</td>
						<td></td>
					</tr>
					<tr>
						<td class="cell_pre">2</td>
						<td></td>
						<td></td>
						<td>Tabelle</td>
					</tr>
				</tbody>
			</table>
			<pre class="pre_code"><code>table.width_full.table_stripe.table_fix.table_free>tr>td*3</code></pre>
			<table class="width_full table_stripe table_fix table_free">
				<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>
			<pre class="pre_code"><code>table.width_full.table_fix>(thead>tr>th[scope="col"]*3)+(tbody>tr>td*2+td.txt_right)+tfoot>tr>th[colspan="2"]+td.txt_right</code></pre>
			<table>
				<caption>Die Verteilung der Zellen ist hier von ihrem Inhalt abhängig.</caption>
				<thead>
					<tr>
						<th scope="col">Bezeichnung</th>
						<th scope="col">Menge</th>
						<th scope="col">Wert</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>Alpha</td>
						<td>1</td>
						<td class="txt_right">8990</td>
					</tr>
					<tr>
						<td>Bravo</td>
						<td>10</td>
						<td class="txt_right">1</td>
					</tr>
					<tr>
						<td>Charlie</td>
						<td>1</td>
						<td class="txt_right">1</td>
					</tr>
				</tbody>
				<tfoot>
					<tr>
						<th colspan="2" class="txt_right" scope="row">Summe</th>
						<td class="txt_right" title=">9000">9001</td>
					</tr>
				</tfoot>
			</table>
		</article>
		<article>
			<h1 id="forms">Formulare</h1>
			<p>Elemente:</p>
			<pre>// form // label // input // button // select // datalist // optgroup // option // textarea // output // progress // meter // fieldset // legend</pre>
			<h2>&lt;input&gt;</h2>
			<div class="inline">
				<input value="Undefiniert"/>
				<input type="text" size="8" value="Text"/>
				<input type="text" size="8" value="Deaktiviert" disabled="disabled"/>
				<input type="button" value="Auswählen">
				<input type="submit" value="Senden" disabled="disabled"/>
			</div>
			<h4>Varianten</h4>
			<pre class="pre_code"><code>input.button_io+button.button_io</code></pre>
			<div class="inline">
				<input class="button_io" type="button" value="Input type button">
				<button class="button_io">Button</button>
			</div>
			<div class="inline">
				<input class="input_io" type="text" value="Nur lesbare Eingabe" readonly="readonly">
				<input class="input_io" type="text" value="Deaktivierte Eingabe" size="21" disabled="disabled">
				<button class="button_io" disabled="disabled">Deaktivierte Schaltfläche</button>
			</div>
			<div id="capsCheck">
				<form action="">
					<input type="password" onkeypress="capLock(event)"/>
					<div id="hint" style="visibility:hidden">Caps Lock is on.</div>
					<input type="text"/>
					<span id="error">Caps Lock is ON.</span>
				</form>
			</div>
			<h2>&lt;select&gt;</h2>
			<select name="F">
				<option value="0">
						Plain list</option>
				<option value="1" selected="selected">
						Fancy list</option>
				<option value="2">
						Table list</option>
			</select>
		</article>
	</section>
{% endblock %}

{% block script %}
	{{ super() }}
	<script>
		function capLock(e) {
			console.log('capLock');
			kc = e.keyCode
				? e.keyCode
				: e.which;
			sk = e.shiftKey
				? e.shiftKey
				: (
					(kc == 16)
					? true
					: false);

			if (((kc >= 65 && kc <= 90) && !sk) || ((kc >= 97 && kc <= 122) && sk)) {
				document
					.getElementById('hint')
					.style
					.visibility = 'visible';
			} else {
				document
					.getElementById('hint')
					.style
					.visibility = 'hidden';
			}
		}

		function capsDetect() {
			const body = document.getElementsByTagName('body')[0];
			const capsWarning = document.getElementById('error');
			let isShiftPressed = false;
			let isCapsOn = false;

			console.log(body);
			body.addEventListener('keydown', function (e) {
				var keyCode = e.keyCode
					? e.keyCode
					: e.which;
				if (keyCode === 16) {
					isShiftPressed = true;
				}
			});
			body.addEventListener('keyup', function (e) {
				var keyCode = e.keyCode
					? e.keyCode
					: e.which;
				if (keyCode === 16) {
					isShiftPressed = false;
				}
				if (keyCode === 20) {
					if (isCapsOn) {
						isCapsOn = false;
						capsWarning.style.display = 'none';
					} else {
						isCapsOn = true;
						capsWarning.style.display = 'inline-block';
					}
				}
			});
			body.addEventListener('keypress', function (e) {
				var keyCode = e.keyCode
					? e.keyCode
					: e.which;
				if (keyCode <= 40) 
					return;
				if (keyCode >= 65 && keyCode <= 90 && !isShiftPressed) {
					isCapsOn = true;
					capsWarning.style.display = 'inline-block';
				} else {
					capsWarning.style.display = 'none';
				}
			});
		}

		// TODO: Beide Varianten lauffähig machen
		// capsDetect();
	</script>
{% endblock %}