Einbindung

Schnellstart

Im <head> der Seite:

<link rel="stylesheet" href="/assets/trfx-legacy.min.css">
<script src="/assets/theme-init.js"></script>

Vor dem Ende von <body>, falls Reiter, Dialoge, Assistenten oder Designwechsel gebraucht werden:

<script src="/assets/legacy.js" defer></script>

Die Schrift fonts/share-tech-mono.woff2 wird relativ zur CSS-Datei geladen. Die Ordnerstruktur also beibehalten.

Designs wechseln

Ein Design ist ein Wert im Attribut data-theme am <html>-Element. Ohne Attribut gilt luna.

Mit legacy.js genügt ein Auswahlfeld mit data-lg-theme-select. Die Wahl wird im Browser gespeichert (localStorage, Schlüssel trfx-legacy-theme); theme-init.js setzt sie, bevor die Seite gezeichnet wird. Ohne Speicherzugriff bleibt es beim Standard.

<select class="lg-select" data-lg-theme-select>
  <option value="luna">Luna Blau</option>
  <option value="classic">Klassisch</option>
</select>

Variablen anpassen

Eigene Werte gehören in eine eigene Datei nach dem Design System. Ein eigenes Design ist ein Block mit demselben Aufbau:

[data-theme="meins"] {
  --lg-face: #e8e4d4;
  --lg-sel-bg: #7a2e00;
  --lg-title-bg: linear-gradient(180deg, #a04000, #7a2e00);
}

Alle nicht genannten Variablen erben vom Standard. Danach prüfen Sie auf der Seite Farben, ob die Kontraste halten.

Namensschema

• Alle Klassen beginnen mit lg-, damit nichts mit anderem CSS kollidiert.
• lg-baustein ist die Komponente, lg-baustein__teil ein Teil davon, lg-baustein--variante eine Abwandlung.
• Zustände ohne Präfix mit is- (is-default, is-selected) oder über ARIA (aria-selected, aria-current, aria-pressed).
• Variablen heißen --lg-…. Farben kommen aus den Tokens. Einzige Ausnahme sind die dekorativen Fensterknöpfe.

Dateien

Browser

Aktuelle Fassungen von Chrome, Edge, Firefox und Safari (ab 2022). Gebraucht werden <dialog>, :focus-visible, CSS-Variablen und die Eigenschaft inset. Ältere Browser bekommen das Design nicht in voller Pracht, aber lesbare Seiten, weil alles auf semantischem HTML aufsetzt.

Änderungsprotokoll