hippie/source/screens/demo/components.liquid

---
title: Components
tags:
- demoIndex
order: 3
---
{% layout 'hippie/page.liquid' %}

{% block title %}Komponenten{% endblock %}

{% block main %}
<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_tabletPortraitOnly">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 üblicherweise 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>
		<hgroup>
			<h2>Überschrift 1 oder 2</h2>
			<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 üblicherweise Klassen zur Positionierung und der Abmessungen zugewiesen.</p>
		<footer>Fußbereich</footer>
		<div style="position:relative;height:256px;background-color:#b7e0f0;">
			{% render 'hippie/partials/footer-pinned.liquid' %}
		</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.hidden+hr.dotted+hr.double</code></pre>
		<hr class="hidden">
		<hr class="dotted">
		<hr class="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.link>(li>a)*2</code></pre>
		<ul class="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 einer Box mit dem Typ <i>Information</i>.</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.fix>(thead>tr>th.pre[scope="col"]+th[scope="col"]*3)+tbody>tr>td.pre+td*3</code></pre>
		<table class="width_full fix">
			<thead>
			<tr>
				<th class="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="pre">Vorspalte</td>
				<td>Eine</td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td class="pre">1</td>
				<td></td>
				<td>erweiterte</td>
				<td></td>
			</tr>
			<tr>
				<td class="pre">2</td>
				<td></td>
				<td></td>
				<td>Tabelle</td>
			</tr>
			</tbody>
		</table>
		<pre class="pre_code"><code>table.width_full.stripe.fix.free>tr>td*3</code></pre>
		<table class="width_full stripe fix 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>(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>
		<pre class="pre_code"><code>table>tr>td+td.ellipsis+td[style="width: 50%"]</code></pre>
		<table class="width_full fix">
			<tr>
				<td>Index</td>
				<td class="ellipsis">Zelle mit viel Inhalt der nicht umbricht und eingeschränkt wird.</td>
				<td style="width: 50%">Zelle mit Angabe der Breite.</td>
			</tr>
		</table>
		<pre class="pre_code"><code>table.flexible>tr>td+td.truncate.ellipsis+td</code></pre>
		<table class="flexible">
			<tr>
				<td>Index</td>
				<td class="truncate ellipsis">Zelle mit viel Inhalt der nicht umbricht und eingeschränkt wird.</td>
				<td>Zelle mit Angabe der Breite.</td>
			</tr>
		</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 id="inpPass" type="password"/>
				<span id="hintPass" style="visibility:hidden"><kbd>Shift</kbd> is pressed.</span>
				<br>
				<input id="inpText" type="text"/>
				<span id="hintText"><kbd>CapsLock</kbd> 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 %}
{{ block.super -}}
<script>
	const capsHint = document.getElementById('hintPass');
	let isShiftPressed = false;

	document.getElementById('inpPass').addEventListener('keydown', shiftDetect);

	function shiftDetect(event) {
		if (event.getModifierState('Shift')) {
			isShiftPressed = true;
			capsHint.style.visibility = 'visible';
		} else {
			isShiftPressed = false;
			capsHint.style.visibility = 'hidden';
		}

		console.log('Shift', isShiftPressed);
	}

	document.getElementById('inpPass').addEventListener('keyup', (event) => {
		if (event.key === 'Shift') {
			isShiftPressed = false;
			capsHint.style.visibility = 'hidden';
		}
	});

	function capsDetect() {
		const capsHint = document.getElementById('hintText');
		let isCapsOn = false;

		document.getElementById('inpText').addEventListener('keyup', function (e) {
			if (event.getModifierState('CapsLock')) {
				capsHint.style.display = 'inline';
				isCapsOn = true;
			} else {
				capsHint.style.display = 'none';
				isCapsOn = false;
			}

			console.log('CapsLock', isCapsOn);
		});
	}

	capsDetect();
</script>
{% endblock %}