interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

feat: Change and move content

Browse source 
- Add info to basics
- Move table variants from basic to components
This commit is contained in:
sthag 2025-04-12 14:25:55 +02:00
parent 4cf279bee5
commit b039c506a8
3 changed files with 133 additions and 100 deletions
Download patch file Download diff file Expand all files Collapse all files

122
source/screens/demo/components.njk
View file

@ -46,8 +46,9 @@ tags:
<p>Es werden alle grundlegenden Elemente sowie ihre gestalteten Varianten angegeben. Die Elemente sind in Gruppen eingeteilt, die auch das W3Consortium (<a href="https://www.w3.org/TR/2017/REC-html52-20171214/index.html#contents">www.w3.org/TR/2017/REC-html52-20171214/index.html#contents</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+h4{Varianten}</code></pre>
<article>
<h1>Bereiche</h1>
<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>
@ -62,6 +63,125 @@ tags:
<h2>&lt;h3&gt;</h2>
<h2>&lt;h4&gt;</h2>
</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>
<h4>Varianten</h4>
<pre class="pre_code"><code>p.txt_center</code></pre>
<pre class="pre_code"><code>p.txt_right</code></pre>
<pre class="pre_code"><code>p.column_2</code></pre>
<pre class="pre_code"><code>p.column_3.column_line</code></pre>
<h2>&lt;hr&gt;</h2>
<h4>Varianten</h4>
<pre class="pre_code"><code>hr.hr_hidden</code></pre>
<pre class="pre_code"><code>hr.hr_dotted</code></pre>
<pre class="pre_code"><code>hr.space_even_half</code></pre>
<pre class="pre_code"><code>hr.hr_dotted.space_even_fourth</code></pre>
<h2>&lt;blockquote&gt;</h2>
<pre class="pre_code"><code>blockquote>p+p.quote_source</code></pre>
<h2>&lt;figure&gt;</h2>
<pre class="pre_code"><code>figure>figcaption+{element}</code></pre>
<h2>&lt;div&gt;</h2>
<pre class="pre_code"><code>div.div_info>p</code></pre>
<h4>Varianten</h4>
</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 js_pop">
<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>
</section>
</div>
{% endblock %}