---
title: Layouts
tags:
- demoIndex
---
{% layout 'hippie/page.liquid' %}

{% block title %}Gestaltungen{% endblock %}

{%  block main %}
<section class="sec_main_center">
	<header class="header_txt">
		<h1>Sammlung formatierter Elemente</h1>
		<p>Die Elemente werden fortlaufend komplexer</p>
	</header>
	<article>
		<h2>Bereiche (sections)</h2>
		<h3>section</h3>
		<pre class="pre_code"><code>section.overflow>div.float_space_left>img^p+p>br+a.lineLink</code></pre>
		<section class="overflow">
			<div class="float_space_left demo__avatar">
				{% render 'hippie/partials/placeholder-flag.liquid', type: 'img', src: 'file', width: '256', desc: 'Avatar' %}
			</div>
			<p>{% text hippie.placeholders.name %}<br>{% text hippie.placeholders.address %}</p>
			<p>{% text hippie.placeholders.phone %}<br>{% link hippie.placeholders.mail, '', '', 'a_line' %}</p>
		</section>
		<h3>nav</h3>
		<pre class="pre_code"><code>div.overflow>(nav.float_space_left>ul>(li>a.a_button{punkt $})*4+nav>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 $})*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>
		<pre class="pre_code"><code>div.overflow>nav.nav_center_old>ul>(li>a.a_button{typ $})*4</code></pre>
		<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>
		<h3>header</h3>
		<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>

		<h2>Interaktiv (interactive)</h2>
		<h3>input</h3>
		<div class="flex 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>
		<h3>form</h3>
		<form method="get">
			<p>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 (grouping)</h2>
		<h3>p</h3>
		<pre class="pre_code"><code>p.txt_right+p.txt_center+p.txt_left</code></pre>
		<p class="txt_right">Rechts</p>
		<p class="txt_center">Mittig</p>
		<p class="txt_left">Links</p>
		<h3>h*</h3>
		<pre class="pre_code"><code>h3.txt_color_dark+p.txt_tiny</code></pre>
		<h3 class="txt_color_dark">Dunkle Überschrift</h3>
		<p class="txt_tiny">Mit winzigem Textabsatz</p>
		<pre class="pre_code"><code>a>h4</code></pre>
		<a href="">
			<h4>Überschrift als Block-Verweis</h4>
		</a>
		<h1>Überschrift 1</h1>
		<h1>Kann mehrmals, ohne großen Abstand oberhalb, untereinander stehen.</h1>
		<h2>Überschrift 2</h2>
		<h2>kann das ebenso.</h2>
		<h3>hr</h3>
		<pre class="pre_code"><code>hr.space_even_half</code></pre>
		<hr class="space_even_half">
		<pre class="pre_code"><code>hr.dotted.space_even_fourth</code></pre>
		<hr class="dotted space_even_fourth">
		<h3>ul</h3>
		<pre class="pre_code"><code>nav>ul.list_link>(li>a)+li>a>img+span</code></pre>
		<nav>
			<ul class="list_link">
				<li>{% link hippie.placeholders.mail, '📧 name@domain.tld' %}</li>
				<li>
					<a href=""><img src="/art/bullet.gif" alt="">{% text hippie.placeholders.name %}</a>
				</li>
			</ul>
		</nav>
		<h3>div</h3>
		<pre class="pre_code"><code>div.space_left_fourth>(hr+p+hr)</code></pre>
		<div class="space_left_fourth">
			<hr/>
			<p>Eingerückter Inhalt</p>
			<hr/>
		</div>

		<h2>Tabellen</h2>
		<pre class="pre_code"><code>table.table_link>thead>tr>th{&amp;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>&nbsp;</th>
				<th>Ab / Zy</th>
				<th>Neu / Alt</th>
			</tr>
			</thead>
			<tbody>
			<tr>
				<td class="cell_icon" rowspan="2">■</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">■</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">
			{% render 'hippie/partials/placeholder-flag.liquid', type: '', width: '128', desc: 'Fahne von Interaktionsweise' %}
		</div>
	</article>
</section>
{% endblock %}

{% block script %}
{{ block.super -}}
<script src="/vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
<script>
	assetsLoaded = true;
	logPerf('Assets loaded.', assetsLoaded);
	// Page specific
	// ------------------------------------------------------------------------------
	$(document).ready(function () {
		// jq-sticky-anything
		$('#js_demo_fix').stickThis({pushup: '#js_demo_stop'});
	});
</script>
{% endblock %}