Themes verstehen: Wie Theme und Nutshell Framework zusammenarbeiten

Unsere Contao Themes basieren auf dem Nutshell Framework, einem eigens entwickelten Framework, das die Umsetzung von Contao-Projekten erleichtert. Es enthält grundlegende Styles für alle gängigen Elemente und Module. Auch Bugfixes und neue Funktionen können dadurch ergänzt werden, ohne das Theme anpassen zu müssen.

Das Nutshell Framework ist schwerpunktmäßig ein (S)CSS-Framework. Es bietet für einen Großteil der in Contao vorhandenen Elemente und Module bereits CSS-Formatierungen an. Für das Nutshell Framework gibt es eine eigene Dokumentation, in der zu sehen ist, welche Komponenten gestaltet sind und welche CSS-Klassen verwendet werden müssen, um diese Darstellung zu erreichen.

Ein Beispiel

Contao verwendet standardmäßig für Navigationen ungeordnete Listen. Diese sind ohne Gestaltung vertikal ausgerichtet, haben Abstände und Listenpunkte vor den einzelnen Listenelementen. Nur ist diese Formatierung in 99 von 100 Fällen nicht gewünscht.

Deswegen ist im Nutshell Framework eine Klasse .nav enthalten, die bei Verwendung die Abstände und Listenformatierung entfernt. Und mit der zusätzlichen Klasse .nav--horizontal werden die Listenpunkte horizontal statt vertikal angeordnet.

Dieses und weitere Beispiele findest du auch in der Dokumentation des Nutshell Frameworks: Navigationsmenü.

Mit einem Theme arbeiten

Das Nutshell Framework wird über Composer installiert und liegt im Ordner assets/nutshell/. Die Dateien des Themes liegen ab SOLO 4, LASR 5 und SIRIUS 3 unter layout/[theme-name]/, deine eigenen Anpassungen unter layout/custom/.

Die Funktionsweise eines Themes ist so aufgebaut, dass viele der Theme-Dateien ihr Pendant aus dem Nutshell Framework importieren. So importiert zum Beispiel die _type.scss aus dem Theme ihr Pendant _type.scss aus dem Nutshell Framework.

Ein Import wird vor Beginn der themeeigenen Anweisungen durchgeführt und sieht so aus:

// --------------------------------------------------
@import '../../../assets/nutshell/scss/base/type';
// --------------------------------------------------

In älteren Theme-Versionen, bei denen die Theme-Dateien noch unter files/theme/ liegen, sieht der Pfad etwas anders aus – das Prinzip ist dasselbe.

Die Trennung von individuellen Anweisungen (dem Theme) und Basiseinstellungen (dem Nutshell Framework) hat sowohl Vor- als auch Nachteile.

Ein Vorteil ist, dass die individuellen Theme-Anweisungen sehr schlank gehalten werden können, da nicht alle Anweisungen in den Theme-Dateien stehen. So lässt sich ein Projekt während der Entwicklung, aber auch später schneller überblicken.

Ein Nachteil an dieser Aufteilung ist, dass man gerade in der Einarbeitungsphase häufiger bestimmte CSS-Klassen im Theme sucht, bis man feststellt, dass sie zum Nutshell Framework gehören. Auch werden mitunter Standardanweisungen aus dem Nutshell Framework über das Theme überschrieben.

Wichtig: Nimm im Ordner assets/nutshell/ keine Änderungen vor – sie würden beim nächsten Update überschrieben. Werte aus dem Nutshell Framework überschreibst du stattdessen im Theme.

Variablen verwenden

Um möglichst wenig Anweisungen aus dem Nutshell Framework überschreiben zu müssen, verwenden wir an vielen Stellen CSS- bzw. SCSS-Variablen. Mit diesen lassen sich zum Beispiel Farben und Schriftarten anpassen, aber auch Abstände oder die Zahl der nebeneinanderstehenden News-Einträge in einem Grid-Layout.

CSS-Variablen (Custom Properties) findest du in der _variables.scss, Sass-Variablen wie Breakpoints oder die maximale Seitenbreite in der _config.scss. Über beide Dateien lassen sich auch die Variablen des Nutshell Frameworks überschreiben.

Wie du das Theme mithilfe von Variablen anpassen kannst, erfährst du im jeweiligen Theme unter Theme individualisieren: SOLO 4, LASR 5, SIRIUS 3.