feat: Add content for components page
- New elements in sections part - Reindent
This commit is contained in:
parent
c98ebb44ca
commit
4d00d34d63
3 changed files with 461 additions and 452 deletions
|
|
@ -16,204 +16,226 @@ tags:
|
|||
|
||||
{% block main %}
|
||||
<!-- {{ page.fileSlug }}.page -->
|
||||
<section class="sec_main_center">
|
||||
<header class="header_txt">
|
||||
<h1>Medienformat Abfragen</h1>
|
||||
</header>
|
||||
<article>
|
||||
<div class="demo__query_example">Umbruch bei </div>
|
||||
<div class="demo__queries">
|
||||
<p class="query_phoneUp">Telefone und größer</p>
|
||||
<p class="query_phoneOnly">Nur Telefone</p>
|
||||
<p class="query_tabletPortaitOnly">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>Medienformat Abfragen</h1>
|
||||
</header>
|
||||
<article>
|
||||
<div class="demo__query_example">Umbruch bei </div>
|
||||
<div class="demo__queries">
|
||||
<p class="query_phoneUp">Telefone und größer</p>
|
||||
<p class="query_phoneOnly">Nur Telefone</p>
|
||||
<p class="query_tabletPortaitOnly">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{<tag>}+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><body></h2>
|
||||
<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
|
||||
<h2><article></h2>
|
||||
<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
|
||||
<h2><section></h2>
|
||||
<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
|
||||
<h4>Varianten</h4>
|
||||
<pre class="pre_code"><code>section.sec_main_center</code></pre>
|
||||
<pre class="pre_code"><code>section.sec_main_status</code></pre>
|
||||
<h2><h3></h2>
|
||||
<h2><h4></h2>
|
||||
<h2><footer></h2>
|
||||
<div style="position:relative;height:256px;background-color:#b7e0f0;">
|
||||
{{ footer.pinned() }}
|
||||
</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><p></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><hr></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><blockquote></h2>
|
||||
<pre class="pre_code"><code>blockquote>p+p.quote_source</code></pre>
|
||||
<h2><figure></h2>
|
||||
<pre class="pre_code"><code>figure>figcaption+{element}</code></pre>
|
||||
<h2><div></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><table></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">
|
||||
<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">
|
||||
<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{<tag>}+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><body></h2>
|
||||
<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
|
||||
<h2><article></h2>
|
||||
<article>Ein Artikel.</article>
|
||||
<h2><section></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><nav></h2>
|
||||
<nav>Navigation</nav>
|
||||
<h2><aside></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><h*></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><hgroup></code>.</p>
|
||||
</hgroup>
|
||||
<h2><footer></h2>
|
||||
<div style="position:relative;height:256px;background-color:#b7e0f0;">
|
||||
{{ footer.pinned() }}
|
||||
</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><p></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><hr></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><blockquote></h2>
|
||||
<pre class="pre_code"><code>blockquote>p+p.quote_source</code></pre>
|
||||
<h2><figure></h2>
|
||||
<pre class="pre_code"><code>figure>figcaption+{element}</code></pre>
|
||||
<h2><div></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><table></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">
|
||||
<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>
|
||||
<td></td>
|
||||
<td></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>ohne</td>
|
||||
<td>Rahmen</td>
|
||||
<td></td>
|
||||
<td>Bravo</td>
|
||||
<td>10</td>
|
||||
<td class="txt_right">1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>jedoch</td>
|
||||
<td>mit</td>
|
||||
<td>Charlie</td>
|
||||
<td>1</td>
|
||||
<td class="txt_right">1</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>Streifen</td>
|
||||
<th colspan="2" class="txt_right" scope="row">Summe</th>
|
||||
<td class="txt_right" title=">9000">9001</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>
|
||||
<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><input></h2>
|
||||
<div class="flex_column_wrap">
|
||||
<div class="flex_column"><input value="Undefiniert"/></div>
|
||||
<div class="flex_column"><input type="text" size="8" value="Text"/></div>
|
||||
<div class="flex_column"><input type="text" size="8" value="Deaktiviert" disabled="disabled"/></div>
|
||||
<div class="flex_column"><input type="button" value="Auswählen"></div>
|
||||
<div class="flex_column"><input type="submit" value="Senden" disabled="disabled"/></div>
|
||||
</div>
|
||||
<h4>Varianten</h4>
|
||||
<div id="capsCheck">
|
||||
<form action="">
|
||||
<input type="password" onkeypress="capLock(event)"/>
|
||||
<div id="hint" style="visibility:hidden">Caps Lock is on.</div>
|
||||
<input type="text"/>
|
||||
<span id="error">Caps Lock is ON.</span>
|
||||
</form>
|
||||
</div>
|
||||
<h2><select></h2>
|
||||
<select name="F">
|
||||
<option value="0">
|
||||
</tfoot>
|
||||
</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><input></h2>
|
||||
<div class="flex_column_wrap">
|
||||
<div class="flex_column"><input value="Undefiniert"/></div>
|
||||
<div class="flex_column"><input type="text" size="8" value="Text"/></div>
|
||||
<div class="flex_column"><input type="text" size="8" value="Deaktiviert" disabled="disabled"/></div>
|
||||
<div class="flex_column"><input type="button" value="Auswählen"></div>
|
||||
<div class="flex_column"><input type="submit" value="Senden" disabled="disabled"/></div>
|
||||
</div>
|
||||
<h4>Varianten</h4>
|
||||
<div id="capsCheck">
|
||||
<form action="">
|
||||
<input type="password" onkeypress="capLock(event)"/>
|
||||
<div id="hint" style="visibility:hidden">Caps Lock is on.</div>
|
||||
<input type="text"/>
|
||||
<span id="error">Caps Lock is ON.</span>
|
||||
</form>
|
||||
</div>
|
||||
<h2><select></h2>
|
||||
<select name="F">
|
||||
<option value="0">
|
||||
Plain list</option>
|
||||
<option value="1" selected="selected">
|
||||
<option value="1" selected="selected">
|
||||
Fancy list</option>
|
||||
<option value="2">
|
||||
<option value="2">
|
||||
Table list</option>
|
||||
</select>
|
||||
</article>
|
||||
</section>
|
||||
</select>
|
||||
</article>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
|
|
@ -243,7 +265,7 @@ tags:
|
|||
.visibility = 'hidden';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function capsDetect() {
|
||||
const body = document.getElementsByTagName('body')[0];
|
||||
const capsWarning = document.getElementById('error');
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue