Agenturen & Netzwerk · Fortgeschritten · 0:39 Min.

Eigenes Kit: Design-Tokens & Export

Design-Tokens im Style-Editor, Export – und wann ein eigenes Kit sinnvoll ist.

Ohne Ton, mit Untertiteln Untertitel Deutsch und Englisch – im Player über „CC“ ein- und ausschalten. Das Video liegt auf diesem Server und lädt erst beim Abspielen. Die Schritte unten sind der vollständige Text zum Video.

Ziel

Sie wissen, wann der Style-Editor genügt und wann ein eigenes Kit sinnvoll ist – und wie Sie es anlegen.

Voraussetzungen

Für eigene Kits: Node/pnpm für den Build (nur lokal), Zugriff auf den Ordner themes/.

Schritt für Schritt

Transkript: Jeder Schritt entspricht einem Untertitel im Video.

Jeder Wert im Style-Editor ist ein Design-Token (CSS-Variable) aus dem Kit – theme.php → 'design'.
Export sichert die Werte als Datei – z. B. um sie in ein eigenes Kit oder eine andere Website zu übernehmen.
Eigenes Projekt = eigenes Kit: kit:create kopiert das Start-Kit – der Core bleibt updatefähig.
Aufbau, Tokens, Blöcke und Vorlagen beschreibt die Technische Dokumentation › Kits & Design.

Befehle & Konfiguration

php bin/console kit:create meinprojekt            # Kopie des Start-Kits (--from=basis für eine andere Vorlage)
pnpm --dir tools build                            # Assets des Kits bauen
# Website auf das Kit umstellen: config/sites/{website}.php → 'kit' => 'meinprojekt'

Tipps & Stolperfallen

Tipp

Tutorials für Ihr Kit: themes/{name}/docs/tutorials.php ergänzt diese Seite; eigene Videos mit node tools/tutorials/record.mjs.

Tipp

Schritt für Schritt mit dem Start-Kit: Tutorial „Eigenes Kit mit dem Start-Kit“.

Achtung

Kit-Namen nie im Core verwenden – projektspezifisches gehört ins Kit.