IDs und Klassen
Die Nutshell setzt bei der Gestaltung wo es nur geht auf die Verwendung von Klassen. Selbst für Bereiche wie <header> und <footer> solltest du nicht die Elemente oder IDs nutzen, sondern den Attribut-Selektor, z.B. [id="header"], um die CSS-Spezifität so gering wie möglich zu halten.
Mehr Infos zum CSS-Score und der Benennung von Klassen bekommst du in unserem CSS-Kurs für Contao.
# Elemente
Wir haben für alle standardmäßig vorhandenen Contao-Elemente bereits CSS-Anweisungen hinterlegt. Viele Elemente können jedoch durch weitere Klassen modifiziert werden.
Beispiel 1: Bild-Element
So gibt es zum Beispiel für das Bild-Element .ce_image noch zusätzlich die Klassen .image--left und .image--right. Der Grund: Bilder, die kleiner sind, als der Viewport werden standardmäßig zentriert ausgerichtet.
Beispiel 2: Link-Elemente
Das Hyperlink-Element bekommt standardmäßig die gleichen Anweisungen wie der Link innerhalb eines Text-Elementes. Durch die Kombination der Klassen .btn und .btn--primary machst du aus einem Hyperlink-Element einen Button.
# Module
Im Gegensatz zu den Elementen, gibt es für die Module keine standardmäßige Gestaltung. Allen Modulen müssen die entsprechenden Klassen hinzugefügt werden, damit diese gestaltet werden.
Beispiel 1: Navigation
Um das Frontend-Modul Navigation zu gestalten, muss sowohl die Klasse .nav, als auch die Klasse .nav--horizontal hinzugefügt werden, um beispielsweise eine horizontale Hauptnavigation zu gestalten. Dadurch spielt es auch keine Rolle mehr, ob die Navigation ein Navigationsmenü oder eine Individuelle Navigation ist.
Beispiel 2: News
Auch die unterschiedlichen News-Module erhalten nur eine Grundgestaltung, wenn die entsprechenden Klassen hinzugefügt werden. Standardmäßig gibt es für Nachrichtenlisten 2 Klassen, die verwendet werden können: .news-list oder .news-grid.
Die Grundgestaltung wurde für alle zur Verfügung stehenden Templates (news_latest, news_short, news_simple) berücksichtigt.