Styleguide

für LegIT

Typographische Elemente

Fließtext

Für Fließtext-Absätze wie diesen werden p-Elemente verwendet. Innerhalb von Absätzen können Phrasen schwach, stark oder farbig hervorgehoben werden. Außerdem können Text-Links gesetzt und Abk. verwendet werden.

Natürlich können auch mehrere Absätze aufeinander folgen.
Oder Zeilenumbrüche enthalten.

Alle Textauszeichnungen müssen auch in Kindelementen erhalten bleiben, solange sie nicht überschrieben werden: schwach hervorgehobener Text, stark hervorgehobener Text, farbig hervorgehobener Text, Code mit Kindelement.

<p>Für Fließtext-Absätze wie diesen werden <code>p</code>-Elemente
verwendet. Innerhalb von Absätzen können Phrasen <em>schwach</em>,
<strong>stark</strong> oder <mark>farbig</mark> hervorgehoben werden. Außerdem können
<a href="/elements/interaction">Text-Links</a> gesetzt und
<abbr title="Abkürzungen">Abk.</abbr> verwendet  werden.</p>

Besondere Textauszeichnungen

Für LegIT existiert die Klasse lemma, die die markierten Zeichen in Kapitälchen darstellt, auch innerhalb anderer Auszeichnungen oder Links: lemma.

<span class="lemma">lemma</span>

Für die Glossen existiert die Klasse inline-numbers, die die markierten Zahlen vom vorherigen Text absetzt: 123, 456.

Text <span class="inline-numbers">123, 456</span>

Überschriften

Auch wenn bereits der Header die obersten zwei Überschriftsebenen verwendet, werden im Hauptbereich der Seite alle sechs Überschriftenebenen von HTML unterstützt, h1 bis h6. Die erste Ebene wird dabei nur einmalig pro Seite für den Seitentitel verwendet (siehe Seitenanfang), die übrigen Ebenen beliebig oft. Die zweite Ebene ist oberhalb dieses Absatzes zu sehen, die weiteren hier:

Dritte Überschriftsebene

Vierte Überschriftsebene

Fünfte Überschriftsebene
Sechste Überschriftsebene

Bevor nach einer bestimmten Überschriftenebene wieder die gleiche oder eine höhere folgen darf, muss anderer Text stehen. Untergeordnete Überschriften dürfen direkt nach übergeordneten stehen, wie oben zu sehen. Sie dürfen aber auch durch Text getrennt werden:

Dritte Überschriftsebene

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis autem amet eaque eligendi dolore optio hic sit, labore, ea doloribus eius alias velit quas provident magnam, unde maiores pariatur id?

Vierte Überschriftsebene

Quod quas, ipsum esse tempora officia, error. Quisquam ipsam, obcaecati, voluptatum totam ut porro magnam?

Fünfte Überschriftsebene

Possimus impedit harum nostrum inventore quibusdam, mollitia, provident nihil labore sint excepturi cumque magni maiores non fuga aperiam eaque eius similique, et, dolorem dignissimos beatae?

Sechste Überschriftsebene

Soluta blanditiis nemo at maxime non illo ducimus dolorem, ullam commodi numquam earum vitae, error quibusdam, deserunt modi beatae minus. Nesciunt, animi, ab. Obcaecati, enim dolore aut provident libero mollitia.

Listen

Ungeordnete Listen ohne besondere Funktion:

<ul>
  <li>Punkt 1</li>
  <li>Punkt 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum rem consequatur veritatis laboriosam in? Temporibus adipisci repellat placeat asperiores rerum mollitia similique distinctio, quos, error dolores esse facere possimus saepe.</li>
  <li>Punkt 3</li>
</ul>

Für Verzeichnislisten, die alphabetisch oder anders geordnet sind, steht die Klasse index zur Verfügung. Das erste Wort, nach dem sortiert wird, wird durch eine <span> mit einer Klasse ausgezeichnet, die hier anzugeben ist. Die bisher einzige Klasse ist bstk. Nach dieser <span> darf kein Leerzeichen folgen, ggf. muss noch ein geschütztes Leerzeichen innerhalb stehen.

<ul class="index">
  <li><span class="bstk">101&nbsp;</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, aperiam.</li>
  <li><span class="bstk">102&nbsp;</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, aperiam.</li>
  <li><span class="bstk">103&nbsp;</span>Lorem ipsum dolor.</li>
  <li><span class="bstk">104&nbsp;</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, aperiam.</li>
  <li><span class="bstk">105&nbsp;</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, aperiam.</li>
  <li><span class="bstk">106&nbsp;</span>Lorem ipsum dolor.</li>
  <li><span class="bstk">106abcdefghij&nbsp;</span>Lorem ipsum dolor.</li>
  <li><span class="bstk">107&nbsp;</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, aperiam.</li>
</ul>

Baumlisten

Ungeordnete Listen mit spezieller Visualisierung der hierarchischen Struktur.

<ul>
  <li class="hierarchical">
    <a href="#">Baumliste</a>
    <ul class="hierarchical-list">
      <li class="hierarchical"><a href="#">Listenelement</a></li>
      <li class="hierarchical"><a href="#">Listenelement</a></li>
      <li class="hierarchical">
        <a href="#">Subliste</a>
        <ul class="hierarchical-list">
          <li class="hierarchical"><a href="#">Listenelement</a></li>
          <li class="hierarchical"><a href="#">Listenelement</a></li>
          <li class="hierarchical"><a href="#">Listenelement</a></li>
        </ul>
      </li>
      <li class="hierarchical"><a href="#">Listenelement</a></li>
    </ul>
  </li>
</ul>

Tabellen

Einfache Tabellen

Überschrift Überschrift Überschrift
Text Text Text
Text Text Text 
<table>
  <tr>
    <th>Überschrift</th>
    <th>Überschrift</th>
    <th>Überschrift</th>
  </tr>
  <tr>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
  </tr>
  <tr>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
  </tr>
</table>

Tabellen für Datensätze sollen langfristig abgeschafft und durch geeignetere Strukturen ersetzt werden, müssen aber bis dahin unterstützt werden.

Titel Inhalt
Titel Inhalt
Titel Mehrzeiliger Inhalt Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti voluptates autem deserunt rerum delectus! Nobis ex id est. Error assumenda aliquid saepe, optio sequi architecto sit rem, sapiente totam placeat ea quidem nihil in provident odio delectus voluptatibus reiciendis consequuntur reprehenderit sint doloribus quisquam obcaecati. Dolores alias facere et dolorum. 
<table class="record">
  <tr>
    <th>Titel</th>
    <td>Inhalt</td>
  </tr>
  <tr>
    <th>Titel</th>
    <td>Inhalt</td>
  </tr>
  <tr>
    <th>Titel</th>
    <td>Mehrzeiliger Inhalt Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti voluptates autem deserunt rerum delectus! Nobis ex id est. Error assumenda aliquid saepe, optio sequi architecto sit rem, sapiente totam placeat ea quidem nihil in provident odio delectus voluptatibus reiciendis consequuntur reprehenderit sint doloribus quisquam obcaecati. Dolores alias facere et dolorum.</td>
  </tr>
</table>

Bilder

Im einfachsten Fall werden Bilder durch ein einfaches <img>-Element innerhalb eines Absatz-Elements eingebaut, beispielsweise wenn die Seite aus Markdown generiert wird. Für den Fall, dass es sich um Screenshots einer Projekt-Webseite handelt, ist aufgrund der gleichen Hintergrundfarbe ein Rahmen zur Abgrenzung des Bildes erforderlich.

<p><img src="nonexistent.png" alt="Bild ohne Bilddatei"></p>

Bild ohne Bilddatei