Theme verstehen: Wie Theme und Nutshell Framework zusammenarbeiten
Unsere Contao Themes basieren auf dem Nutshell Framework, ein eigens entwickeltes Framework, was 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 ausgereichtet, haben Abstände und Listenpunkte vor den einzelnen Listelementen. 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 dem Theme arbeiten
Die Funktionsweise des 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 '../../../nutshell/scss/base/type';
// --------------------------------------------------
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.
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.
Variablen findest du sowohl in der _variables.scss (für allgemeine Einstellungen) , als auch in den einzelnen Dateien, z.B. _type.scss (für spezifische Angaben).
Wie du das Theme mithilfe von Variablen anpassen kannst, erfährst du im Abschnitt Theme individualisieren.