Listen

Fertige, dekorative Varianten für native <ul>/<ol>/<dl> - components/lists.css. Live: Demo.

Wichtig: role="list"

list-style: none entfernt in einigen Screenreadern (bestätigter älterer VoiceOver/Safari-Bug) die Listen-SEMANTIK selbst, nicht nur die visuelle Markierung. Jede Variante unten, die list-style: none setzt (alle außer den dl-Varianten - <dl> hat kein list-style), braucht deshalb zusätzlich role="list" im Markup, siehe die Beispiele.

ul-Varianten

Klasse	Zweck
`.ncss-list--dot`	Dezenter, eingefärbter Punkt statt des nackten Browser-Markers
`.ncss-list--dash`	Gedankenstrich - ruhiger als `--dot`, passt zu Fließtext-lastigen Listen
`.ncss-list--icon`	Icon aus dem Markup (kein fest eingebackenes) - reine Layout-Klasse, siehe unten
`.ncss-list--divided`	Horizontale Trennlinie statt Marker - Einstellungs-/Menü-artige Listen
`.ncss-list--plain`	Kein Marker, kein Abstand - nackter Ausgangspunkt für eigenes Layout

<ul class="ncss-list--dot" role="list">
  <li>Punkt eins</li>
  <li>Punkt zwei</li>
</ul>

.ncss-list--icon bringt bewusst KEIN fest eingebackenes Icon mit (anders als --dot/--dash, die reines CSS zeichnen) - das Icon kommt aus dem Markup, ncss' eigenes .ncss-icon-* (Icons) oder Font Awesome, dieselbe Austauschbarkeit wie beim Icon-System selbst:

<ul class="ncss-list--icon" role="list">
  <li><span class="ncss-icon ncss-icon-check" aria-hidden="true"></span> Enthalten</li>
  <li><span class="ncss-icon ncss-icon-check" aria-hidden="true"></span> Auch enthalten</li>
</ul>

ol-Variante: Schritte

.ncss-list--steps - Nummer in einem farbigen Kreis statt der nackten Browser-Ziffer, für Anleitungen/Abläufe. Eigener CSS-Zähler (counter-reset/counter-increment) statt list-style-type, damit die Zahl in eine eigene, gestylte Fläche (::before) gesetzt werden kann:

<ol class="ncss-list--steps" role="list">
  <li>Dateien kopieren</li>
  <li>theme.css anpassen</li>
  <li>Fertig</li>
</ol>

dl-Varianten

Klasse	Zweck
`.ncss-dl`	Standard - `dt` fett, `dd` gedämpft und eingerückt, gestapelt
`.ncss-dl--inline`	`dt`/`dd` nebeneinander je Zeile ("Label: Wert") - Metadaten ohne `<table>`
`.ncss-dl--stats`	`dt` als kleines Label ÜBER einer großen `dd`-Zahl, mehrere Paare als Kachel-Raster (Statistik-Muster)

<dl class="ncss-dl--inline">
  <dt>Version</dt><dd>2.0</dd>
  <dt>Lizenz</dt><dd>MIT</dd>
</dl>

.ncss-dl--stats braucht einen gemeinsamen Wrapper-<div> pro dt/dd-Paar (<dl> erlaubt das per Spec zur Gruppierung) - das interne .ncss-grid (intrinsisch, keine Breakpoints nötig) braucht diesen Wrapper als eigenes Grid-Item:

<dl class="ncss-dl--stats">
  <div><dt>Nutzer</dt><dd>1.204</dd></div>
  <div><dt>Downloads</dt><dd>328</dd></div>
</dl>

Für dasselbe Kacheln-Muster mit BELIEBIGEM eigenem Inhalt (nicht nur Label+Zahl) statt <dl>: Eigene Komponenten erstellen.