Styleguide

für Glossen

Interaktionselemente

Links und Buttons

Links

Für Links zu anderen Seiten, die keine weitere Veränderung bewirken, werden immer a-Elemente verwendet. Je nach Anwendungsfall können sie stärker hervorgehoben werden.

Ein normaler Link im Text ist ein einfaches a-Element, das keine weiteren Attribute benötigt.

<a href="#">Link</a>

Links, die von anderen Links als besonders wenig relevant abgegrenzt werden sollen, können mit der Klasse excluded versehen werden: Weniger relevanter Link. Diese Klasse sollte nur in der direkten Umgebung anderer Links verwendet werden, oder in einem dynamischen Kontext, in dem auch andere Links stehen könnten.

<a href="#" class="excluded">Weniger relevanter Link</a>

Kurzinformationslinks unterscheiden sich von anderen Links durch die Klasse short_info. Sie tragen ein title-Attribut, dessen Wert bei Mouseover angezeigt wird: ⓘ

<a href="#" title="Eine zu dieser Stelle passende Kurzinfo" class="short_info">ⓘ</a>

Ein Call-to-action-Link unterscheidet sich von anderen Links durch die Klasse cta und muss immer in einem eigenen Block-Element stehen.

Call-to-action-Link

<p><a href="#" class="cta">Call-to-action-Link</a></p>

Buttons

Für Aktionen innerhalb von Formularen, die Veränderungen bewirken, werden Buttons verwendet. Um primäre, sekundäre und tertiäre Aktionen zu unterscheiden, werden drei verschiedene Typen verwendet.

Ein primärer Button (type="submit" oder class="primary") darf pro Formular nur einmal auftreten und hebt die Option hervor, die am wahrscheinlichsten verwendet wird bzw. die den Nutzern empfohlen wird. Sekundäre Buttons (type="button" oder class="secundary") werden für alle anderen üblichen Aktionen des Formulars verwendet. Tertiäre Buttons (class="tertiary") verringern die visuelle Salienz von Optionen, die wahrscheinlich nicht verwendet werden oder von denen eher abgeraten wird.

<form>
  <input type="button" class="primary" value="Primäre Aktion" />
  <input type="button" class="secundary" value="Sekundäre Aktion" />
  <input type="button" class="tertiary" value="Tertiäre Aktion" />
</form>

Reiterleisten

Für besonders eng zusammenhängende Seiten kann eine Reiterleiste die Überschrift ergänzen. Die Reiterleiste steht als unsortierte Liste mit Links vor oder nach der Überschrift. Einer der Einträge enthält die Überschrift der aktuellen Seite und besitzt die Klasse tab-active. Die Reiterleiste muss auf allen in Reitern verlinkten Seiten vorhanden sein und bis auf den aktiven Reiter gleich aussehen. Die zugehörige Überschrift muss zur Wahrung der Struktur im HTML vorhanden sein, kann aber per CSS ausgeblendet werden, wenn sie im konkreten Fall redundant scheint. Siehe auch Reiternavigation.

<ul class="tabs">
  <li><a href="#tabs" class="tab-active">Aktiver Reiter</a></li>
  <li><a href="#tabs">Inaktiver Reiter</a></li>
</ul>

Reiterleisten können auch zwischen mehreren Elementen derselben Seite umschalten. Dafür dient die Containerklasse tabbed-box mit Subelementen, die jeweils einen Radio-Button enthalten. Die Quelle für diesen Ansatz ist CSS-Tricks.

Reiter-Kästen sollten verwendet werden, wenn die Höhe der einzelnen Reiter-Seiten etwa ähnlich hoch ist und sich nicht ändert, da eine Mindesthöhe fest angegeben werden muss und über diese Höhe hinaus gescrollt wird. Die Mindesthöhe ist der tabbed-box über ein style-Attribut mitzugeben.

Inhalt von Reiter 1

Inhalt von Reiter 2

Inhalt von Reiter 3.

<div class="tabbed-box" style="min-height:80px">
  <div class="tab">
    <input type="radio" id="tab-1" name="tab-group-1" checked>
    <label for="tab-1">Reiter 1</label>
    <div class="content">
      <p>Inhalt von Reiter 1</p>
    </div>
  </div>

  <div class="tab">
    <input type="radio" id="tab-2" name="tab-group-1">
    <label for="tab-2">Reiter 2</label>
    <div class="content">
      <p>Inhalt von Reiter 2</p>
    </div>
  </div>

  <div class="tab">
    <input type="radio" id="tab-3" name="tab-group-1">
    <label for="tab-3">Reiter 3</label>
    <div class="content">
      <p>Inhalt von Reiter 3.</p>
    </div>
  </div>
</div>

Sprungleisten

Vor langen Auflistungen kann zur einfacheren Navigation eine Leiste mit Sprunglinks zu bestimmten Stellen innerhalb der Auflistung stehen, beispielsweise ein Alphabet für alphabetisch sortierte Listen. Die Reihen bestehen aus einer unsortierten Liste der Klasse skip mit Sprunglinks. Auch anwendbar sind die Klassen siblings (für Geschwisterseiten) und subpages (für Kindseiten; nur unterhalb von #post-38 und #post-56).

<ul class="skip">
  <li><a href="#skip-a">A</a></li>
  <li><a href="#skip-b">B</a></li>
  <li><a href="#skip-c">C</a></li>
  <li><a href="#skip-d">D</a></li>
  <li><a href="#skip-e">E</a></li>
</ul>

Sprungziele: a b c d e

Button-Leisten

Falls Links und/oder Buttons nicht in ein anderes typographisches Element eingebettet sind, beispielsweise in Fließtext, stehen sie in einer Button-Leiste. Button-Leisten sind <p>-Elemente mit der Klasse buttons, die einen oder mehrere Links und/oder Buttons enthalten, aber nichts anderes.

Beispiel für eine Link-Reihe:

Link Call-to-action-Link 

<p class="buttons">
  <a href="#">Link</a>
  <a href="#" class="cta">Call-to-action-Link</a>
</p>

Beispiel für eine Button-Leiste innerhalb eines Formulars:

Link Call-to-action-Link 

<form>
  <p class="buttons">
    <input type="button" class="primary" value="Primäre Aktion" />
    <input type="button" class="secundary" value="Sekundäre Aktion" />
    <input type="button" class="tertiary" value="Tertiäre Aktion" />
    <a href="#">Link</a>
    <a href="#" class="cta">Call-to-action-Link</a>
  </p>
</form>

Buttonreihen können darüber hinaus visuell auch durch folgendes Markup entstehen:

Bearbeiten Literaturnachweis (alt) anhängen Literaturnachweis (neu) anhängen Löschen An den Anfang 
<div class="actions">
  <a href="#">Bearbeiten</a>
  <a href="#">Literaturnachweis (alt) anhängen</a>
  <a href="#">Literaturnachweis (neu) anhängen</a>
  <a href="#">Löschen</a>
  <a href="#">An den Anfang</a>
</div>

Eingabefelder

Eingabefelder werden in Formularen verwendet, um Daten entgegenzunehmen. Eingabefelder treten immer zusammen mit Labels auf. Falls mehrere Felder ein gemeinsames Label brauchen oder einem oder mehreren Feldern andere Elemente zugeordnet werden sollen, werden sie durch ein <fieldset> mit <legend> umschlossen.

Einzelne Felder mit ihren Labels werden derzeit noch von <div class="field"> umschlossen und durch Zeilenumbrüche getrennt. Das soll wegfallen, muss bis dahin aber noch unterstützt werden.

Ebenfalls veraltet: Sollen mehrere Formularelemente in einer Zeile angezeigt und die zugehörigen Labels versteckt werden, kann das <fieldset> mit der Klasse compact versehen werden. Innerhalb des <fieldset>s dürften dann keine Zeilenumbrüche stehen. Für enthaltene Formularelemente vom Typ <input> und <select> stehen die Klassen small, medium und large zur Verfügung, die die Breite auf 20%, 40% oder 80% der Textspalte festlegen (tatsächlich jeweils ein Prozentpunkt weniger, um in Summe unter 100% zu bleiben und Zeilenumbrüche zu vermeiden). Da die Labels nicht mehr sichtbar sind, sollten placeholder-Attribute verwendet werden.

Stattdessen soll zukünftig die weiter unten beschriebene Variante verwendet werden. Bereits jetzt ist es ggf. nötig, die dort eingeführten Klassen für Mehrspaltigkeit zu verwenden, wenn <div>s im Fieldset vorkommen.

Wenn ein Feld besonders hervorgehoben werden soll, kann die Klasse highlighted genutzt werden.




<div class="field">
  <label for="string">Zeichenkette</label><br />
  <input type="text" id="string" name="string" />
</div>
<div class="field">
  <label for="string-disabled">Zeichenkette (deaktiviert)</label><br />
  <input type="text" id="string-disabled" name="string-disabled" disabled="disabled" />
</div>
<div class="field">
  <label for="string-highlighted">Zeichenkette (hervorgehoben)</label><br />
  <input type="text" id="string-highlighted" name="string-highlighted" class="highlighted" />
</div>

In zusammenhängenden Formularen führen Labels und Platzhalter häufig zu redundanten Informationen, deshalb sollte hier auf Label verzichtet werden. Stattdessen sollte die Label-Information in das aria-label-Attribut des Feldes geschrieben werden, um die Zugänglichkeit der Seite auch mit Screenreader zu gewährleisten.

<form>
  <div class="field">
    <input type="text" id="name" name="name" aria-label="Name" placeholder="Name">
  </div>
</form>


<div class="field">
  <label for="text">Längerer Text</label><br />
  <textarea id="text" name="text">Längerer Text</textarea>
</div>


<div class="field">
  <label for="number">Zahl</label><br />
  <input type="number" id="number" name="number" />
</div>


<div class="field">
  <label for="select">Auswahl</label><br />
  <select id="select" name="select">
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
    <option value="d">D</option>
    <option value="e">E</option>
  </select>
</div>


<div>
  <label for="select">Auswahl</label><br />
  <select id="select" name="select" multiple="multiple">
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
    <option value="d">D</option>
    <option value="e">E</option>
  </select>
</div>

<div class="field">
  <label for="check">Checkbox</label><br />
  <input type="checkbox" id="check" name="select" />
</div>


<div class="field">
  <label for="file">Dateiupload</label><br />
  <input type="file" name="file" id="file" />
</div>
Fieldset-Beispiel mit Text

Erläuterungen

<fieldset>
  <legend>Fieldset-Beispiel mit Text</legend>
  <div class="field">
    <label for="text2" class="five-columns">Längerer Text mit Erläuterungen</label><br />
    <textarea id="text2" name="text2" class="five-columns">Längerer Text</textarea>
    <p>Erläuterungen</p>
  </div>
</fieldset>
Fieldset-Beispiel mit Zahlenbereich 
<fieldset>
  <legend>Fieldset-Beispiel mit Zahlenbereich</legend>
  <div class="field">
    <label for="from">von</label>
    <input type="number" id="from" name="from" class="four-columns" />
  </div>
  <div class="field">
    <label for="to">bis</label>
    <input type="number" id="to" name="to" class="four-columns" />
  </div>
</fieldset>
Kompaktes Fieldset-Beispiel mit Zahlenbereich – 
<form>
  <fieldset class="compact">
    <legend>Kompaktes Fieldset-Beispiel mit Zahlenbereich</legend>
    <label for="from">von</label>
    <input type="number" id="from" name="from" placeholder="Anfang" class="medium" />
    –
    <label for="to">bis</label>
    <input type="number" id="to" name="to" placeholder="Ende" class="medium" />
  </fieldset>
</form>
Fieldset-Beispiel mit verknüpften Suchbegriffen 
<fieldset>
  <legend>Fieldset-Beispiel mit verknüpften Suchbegriffen</legend>
    <label for="term1">Begriff 1</label>
    <input id="term1" name="term1" />
    <label for="operator">Verknüpfung</label>
    <select id="operator" name="operator">
      <option value="und">und</option>
      <option value="or">oder</option>
    </select>
    <label for="term2">Begriff 2</label>
    <input id="term2" name="term2" />
</fieldset>
Kompaktes Fieldset-Beispiel mit verknüpften Suchbegriffen 
<form>
  <fieldset class="compact">
    <legend>Kompaktes Fieldset-Beispiel mit verknüpften Suchbegriffen</legend>
    <label for="term1">Begriff 1</label>
    <input type="text" id="term1" name="term1" placeholder="Begriff 1" class="medium" />
    <label for="operator">Verknüpfung</label>
    <select id="operator" name="operator" class="small" >
      <option value="und">und</option>
      <option value="or">oder</option>
    </select>
    <label for="term2">Begriff 2</label>
    <input type="text" id="term2" name="term2" placeholder="Begriff 2" class="medium" />
  </fieldset>
</form
Fieldset-Beispiel mit vielen kleinen Auswahlfeldern 
<fieldset>
  <legend>Fieldset-Beispiel mit vielen kleinen Auswahlfeldern</legend>
  <select id="romanmaj" name="romanmaj" class="inline-select">
    <option value="a">—A—</option>
    <option value="b">—B—</option>
    <option value="c">—C—</option>
    <option value="d">—D—</option>
    <option value="e">—E—</option>
  </select>
  <select id="romanmin" name="romanmin" class="inline-select">
    <option value="a">—a—</option>
    <option value="b">—b—</option>
    <option value="c">—c—</option>
    <option value="d">—d—</option>
    <option value="e">—e—</option>
  </select>
  <select id="greekmaj" name="greekmaj" class="inline-select">
    <option value="a">—Α—</option>
    <option value="b">—Β—</option>
    <option value="c">—Γ—</option>
    <option value="d">—Δ—</option>
    <option value="e">—Ε—</option>
  </select>
  <select id="greekmin" name="greekmin" class="inline-select">
    <option value="a">—α—</option>
    <option value="b">—β—</option>
    <option value="c">—γ—</option>
    <option value="d">—δ—</option>
    <option value="e">—ε—</option>
  </select>
  <select id="numbers" name="numbers" class="inline-select">
    <option value="a">—1—</option>
    <option value="b">—2—</option>
    <option value="c">—3—</option>
    <option value="d">—4—</option>
    <option value="e">—5—</option>
  </select>
  <select id="romanmaj2" name="romanmaj2" class="inline-select">
    <option value="a">—A—</option>
    <option value="b">—B—</option>
    <option value="c">—C—</option>
    <option value="d">—D—</option>
    <option value="e">—E—</option>
  </select>
  <select id="romanmin2" name="romanmin2" class="inline-select">
    <option value="a">—a—</option>
    <option value="b">—b—</option>
    <option value="c">—c—</option>
    <option value="d">—d—</option>
    <option value="e">—e—</option>
  </select>
  <select id="greekmaj2" name="greekmaj2" class="inline-select">
    <option value="a">—Α—</option>
    <option value="b">—Β—</option>
    <option value="c">—Γ—</option>
    <option value="d">—Δ—</option>
    <option value="e">—Ε—</option>
  </select>
  <select id="greekmin2" name="greekmin2" class="inline-select">
    <option value="a">—α—</option>
    <option value="b">—β—</option>
    <option value="c">—γ—</option>
    <option value="d">—δ—</option>
    <option value="e">—ε—</option>
  </select>
  <select id="numbers" name="numbers" class="inline-select">
    <option value="a">—1—</option>
    <option value="b">—2—</option>
    <option value="c">—3—</option>
    <option value="d">—4—</option>
    <option value="e">—5—</option>
  </select>
</fieldset>

Fieldsets mit enthaltenem <div> werden als Raster angelegt. Das Raster ist fünfspaltig, wobei die mittlere Spalte schmaler ist als die übrigen. Jedes Kindelement umfasst standardmäßig eine Spalte, kann aber mit den Klassen two-columns, three-columns, four-columns und five-columns entsprechend verbreitert werden. Wenn möglich sollte jede Zeile so gefüllt werden, dass sie wie ein einziges Formularelement aussieht. Falls einzelne Spalten nicht durch Formularelemente besetzt werden, kann die Klasse peudo-textfield genutzt werden, damit sie trotzdem wie eines aussieht.

und 
<fieldset>
  <div>
    <legend class="invisible">Mehrspaltiges Fieldset</legend>
    <input type="text" placeholder="Feld 1" class="two-columns">
    <span class="pseudo-textfield">und</span>
    <input type="text" placeholder="Feld 2" class="two-columns">
  </div>
</fieldset>

Soll ein Feld erst angezeigt werden, wenn das vorherige Feld ausgefüllt ist, kann das vorherige Feld mit der Klasse dependency versehen werden. Dafür muss das erste Feld dreispaltig und das zweite zweispaltig sein:

Fieldsets können mit der Klasse checkboxes auch genutzt werden, um mehrere Checkboxen zusammenzufassen. Die Gruppe sieht dann aus wie ein großes Eingabefeld:

<fieldset class="checkboxes">
  <div>
    <legend class="invisible">Checkbox</legend>
    <input type="checkbox" value="true" />
    <label>Checkbox 1</label>
    <input type="checkbox" value="true" />
    <label>Checkbox 2</label>
    <input type="checkbox" value="true" />
    <label>Checkbox 3</label>
  </div>
</fieldset>

Soll ein Formularelement mit einem Tooltip versehen werden, sollte durch die Klasse has-legend des übergeordneten <div>s ein Info-Symbol angezeigt werden:

<fieldset class="has-legend" title="Tooltip">
  <div>
    <input type="text" placeholder="Textfeld mit Tooltip" class="five-columns" title="Tooltip" />
  </div>
</fieldset>

Falls das mit einem Dropdown-Button kollidiert, kann zusätzlich die Klasse no-appearance auf Fieldset oder Formular verwendet werden, um Dropdown-Buttons (außer bei abhängigen Dropdowns) auszublenden:

<fieldset class="has-legend no-appearance" title="Tooltip">
  <div>
    <select class="five-columns" title="Tooltip">
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </select>
  </div>
</fieldset>

Akkordeons

Ausklappbare Bereiche können über folgenden Quelltext definiert werden: