329 lines
No EOL
9.5 KiB
Text
329 lines
No EOL
9.5 KiB
Text
---
|
|
title: Layouts
|
|
tags:
|
|
- demoIndex
|
|
order: 4
|
|
---
|
|
{% layout 'hippie-view/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 id="sections">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-view/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>
|
|
</article>
|
|
<article>
|
|
<h2 id="grouping">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.link>(li>a)+li>a>img+span</code></pre>
|
|
<nav>
|
|
<ul class="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>
|
|
</article>
|
|
<article>
|
|
<h2>Eingebettet</h2>
|
|
<div class="demo__flag">
|
|
{% render 'hippie-view/partials/placeholder-flag.liquid', type: '', width: '128', desc: 'Fahne von Interaktionsweise' %}
|
|
</div>
|
|
</article>
|
|
<article>
|
|
<h2 id="tabularData">Tabellen (tabular data)</h2>
|
|
<pre class="pre_code"><code>table.link>thead>tr>th{&nbsp;}+th{ab / zy}+th{neu / alt}^^(tbody>tr>td.icon[rowspan="2"]>img[width=16 height=16]^+td.link>span{name}+a[target=_blank]{url}^+td[rowspan="2"]{yyy-mm-dd}^tr>td.text>div.shorten{beschreibung})*2</code></pre>
|
|
<table class="link js_pop">
|
|
<thead>
|
|
<tr>
|
|
<th> </th>
|
|
<th>Ab / Zy</th>
|
|
<th>Neu / Alt</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="icon" rowspan="2">■</td>
|
|
<td class="link">
|
|
<span>Name</span>
|
|
<a href="" target="_blank">URL</a>
|
|
</td>
|
|
<td rowspan="2">YYYY-MM-DD</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="text">
|
|
<div class="shorten">Beschreibung</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody>
|
|
<tr>
|
|
<td class="icon" rowspan="2">■</td>
|
|
<td class="link">
|
|
<span>Name</span>
|
|
<a href="" target="_blank">URL</a>
|
|
</td>
|
|
<td rowspan="2">YYYY-MM-DD</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="text">
|
|
<div class="shorten">Beschreibung</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</article>
|
|
<article>
|
|
<h2 id="forms">Formulare (forms)</h2>
|
|
<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>
|
|
<hr class="hidden">
|
|
<form action="" name="login">
|
|
<div>
|
|
<p>Anmeldung</p>
|
|
<input placeholder="Benutzername" name="username" type="text" autocomplete="username">
|
|
<input placeholder="Passwort" name="password" type="password" autocomplete="current-password">
|
|
</div>
|
|
</form>
|
|
<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>
|
|
</article>
|
|
<article>
|
|
<h2 id="interactive">Interaktiv (interactive)</h2>
|
|
</article>
|
|
</section>
|
|
{% endblock %}
|
|
|
|
{% block assets %}
|
|
{{ block.super -}}
|
|
<script src="/vendor/jq-sticky-anything.min.js"></script>
|
|
{% endblock %}
|
|
{% block script %}
|
|
{{ block.super -}}
|
|
<script>
|
|
$(document).ready(function () {
|
|
// jq-sticky-anything
|
|
$('#js_demo_fix').stickThis({pushup: '#js_demo_stop'});
|
|
});
|
|
</script>
|
|
{% endblock %} |