hippie/source/screens/demo/components.njk

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

{% extends "demo/_main.njk" %}

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

{% block main %}
<!-- {{ page.fileSlug }}.page -->
  <div class="temp_layer">
    <!-- <div class="exp_overlay_btn exp_help_btn"> <span class="span_solo">?</span> </div> -->
    {% include "hippie/partials/_body_nav.njk" %}
  </div>
  <div id="begin" class="">
    <section class="sec_main_center">
      <header class="header_txt">
        <h1>Medienformat Abfragen</h1>
      </header>
      <article>
        <div class="demo__query_example">Umbruch bei&nbsp;</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://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 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>
        <p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
        <h2>&lt;article&gt;</h2>
        <p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
        <h2>&lt;section&gt;</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>&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 %}

{% block script %}
  {{ super() }}
  <script src="{{ pageBase }}vendor/jq-sticky-anything.min.js"></script>
  {{ log.asset(true) }}
  {{ log.log('Assets loaded.', assetsLoaded) }}
{% endblock %}