Erste Schritte / Einführung und Architektur

01 — Einführung und Architektur

Was Yavi ist

Das Modul Yavi Theme, Seite Design / Colors — die ganze Markenpalette auf einem Bildschirm

Yavi ist eine Familie von TYPO3-Extensions:

Extension	Composer-Name	Rolle
`yavi_core`	`webagentur-yahya/yavi-core`	Das Framework: Inhaltselemente, Backend-Modul, Navigationsvarianten, Token-System. Enthält kein Markendesign.
`yavi_lucerne`	`webagentur-yahya/yavi-lucerne`	Ein Theme: Business-/Agentur-Look. Navy + Gold, Inter.

yavi_core setzt auf Bootstrap Package (bk2k/bootstrap-package) auf und ergänzt es, statt es zu ersetzen: Inhaltselemente, Bildverarbeitung und SCSS-Kompilierung von Bootstrap Package bleiben bestehen.

Eine Regel, die den größten Teil des Aufbaus erklärt

yavi_core ist das Framework, kein Design. Jeder Wert, der eine Site nach Lucerne aussehen lässt — das Navy, das Gold, Inter, die Header-Proportionen, die Eckenradien — steht im Theme, nie im Core.

Deshalb liefert yavi_core neutrale Grautöne als Vorgabe aus, und deshalb deklariert ein Theme seine Werte vollständig statt als Abweichung: So kann ein Schwester-Theme niemals versehentlich einen Wert erben.

Die vier Ebenen

Vor jeder Änderung steht die Frage, auf welche Ebene sie gehört. Die falsche Ebene zu wählen ist der häufigste Fehler im Umgang mit diesem System.

Ebene	Wo	Gilt für	Deployment nötig
1 — Site Settings	Backend-Modul Yavi Theme → `config/sites/<id>/settings.yaml`	eine Site	nein
2 — Theme-Set	`packages/<theme>/Configuration/Sets/Full/settings.yaml`	jede Site, die dieses Theme nutzt	ja
3 — Theme-SCSS	`packages/<theme>/Resources/Public/Scss/`	jede Site, die dieses Theme nutzt	ja
4 — Core	`packages/yavi-core/`	jedes Theme, jeden Kunden	ja

Faustregel: Was nur diesen Kunden betrifft → Ebene 1. Was das Design ist → Ebene 2 oder 3. Ebene 4 nur für echte Fehler oder für Funktionen, von denen alle etwas haben.

Ein Wert auf einer höheren Ebene gewinnt. Ein leeres Feld auf Ebene 1 bedeutet nicht „kein Wert“ — es bedeutet „durchfallen auf Ebene 2, dann 4“.

Wie eine Seite ihr Aussehen bekommt

text

Site Settings (Ebene 1)
        │  vom Backend-Modul nach config/sites/<id>/settings.yaml geschrieben
        ▼
ThemeCssVariablesRenderer  →  <style> :root { --card-radius: …; --navbar-height: … } </style>
        │
        ▼
theme-<hash>.css  ←  serverseitig aus SCSS kompiliert, von scssphp (Bootstrap Package)
        │              Structure/*.scss  (Geometrie, Verhalten — Core)
        │              Skin/*.scss       (Farbe, Schatten, Dekoration — darf das Theme ersetzen)
        ▼
die gerenderte Seite

Zwei Folgerungen, die man sich merken sollte:

Es gibt keinen Node-Build. Kein npm, kein webpack, kein yarn build. SCSS wird auf dem Server von scssphp kompiliert; ein Cache-Flush baut es neu.
Einstellungen werden nicht ins CSS kompiliert. Sie werden als CSS Custom Properties in den Seitenkopf geschrieben. Deshalb wirkt eine Farbänderung beim nächsten Seitenaufruf, während eine Änderung am SCSS einen Cache-Flush braucht.

Structure und Skin

Das SCSS des Core ist zweigeteilt:

Ordner	Enthält	Themes
`Scss/Structure/`	Geometrie, Layout, Verhalten: was eine Karte zur Karte macht.	selten angefasst
`Scss/Skin/`	Farbe, Schatten, Rahmen, Dekoration: was eine Karte nach Lucerne aussehen lässt.	je Komponentenfamilie ersetzt

Ein Theme ersetzt die Skin-Datei einer Komponentenfamilie im Ganzen, statt einzelne Deklarationen zu überschreiben. Es gibt keine Cascade Layers — die Datei des Themes kommt schlicht später.

Das Token-System in einem Bild

scss

// yavi_core: _variables-defaults.scss — die theme-unabhängige Vorgabe
--card-radius: calc(12px * var(--theme-radius-scale, 1));

// yavi_lucerne: _variables.scss — der eigene Wert des Themes
--card-radius: 25px;

// Site Settings (Ebene 1) — in den Seitenkopf geschrieben
--card-radius: calc(18px * var(--theme-radius-scale, 1));

Alles, was eine Site konfigurieren kann, ist eine CSS Custom Property, und jede Custom Property hat genau einen Eigentümer. Siehe 15 — Theming.

Was ohne Zutun mitkommt

Dieselbe Seite bei 390px — die mobile Navigation ist eine eigene Variante, nicht das zusammengeklappte Desktop-Menü

Rund 35 Inhaltselemente über die Vorgaben von TYPO3 und Bootstrap Package hinaus — Karten in 20 Layouts, Karussells, Portfolio, CTA, Panels, Timelines, Tabs, Galerien, Audio- und Video-Player. Siehe 12 — Inhaltselemente.
5 Desktop- und 3 mobile Navigationsvarianten, pro Site umschaltbar. Siehe 14 — Navigation.
Ein Backend-Modul mit 82 Einstellungen auf fünf Seiten, ohne TypoScript bearbeiten zu müssen. Siehe 06 — Das Backend-Modul.
Serverseitige Lizenzprüfung. Siehe 11 — Lizenz.