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

{% extends "demo/_main.njk" %}
{% import "hippie/macros/_placeholder.njk" as ph %}

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

{% block main %}
	<!-- {{ page.fileSlug }}.page -->
	<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</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">{{ ph.flag('img', '', '', 'Avatar', '256') }}</div>
				<p>{{ ph.name() }}<br>{{ ph.address() }}</p>
				<p>{{ ph.phone() }}<br>{{ ph.email('lineLink') }}</p>
			</section>
			<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>
			<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>
			<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 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>

			<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>
			<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.hr_dotted.space_even_fourth</code></pre>
			<hr class="hr_dotted space_even_fourth">
			<h3>ul</h3>
			<pre class="pre_code"><code>ul.list_link>(li>a)+li>a>img+span</code></pre>
			<nav>
				<ul class="list_link">
					<li>{{ ph.email('', '📧 name@domain.tld') }}</li>
					<li>
						<a href=""><img src="{{ pageBase }}art/bullet.gif" alt="">{{ ph.name() }}</a>
					</li>
				</ul>
			</nav>

			<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">
				{{ ph.flag() }}
			</div>
		</article>
	</section>
{% endblock %}

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