Transkript
Moin und Willkommen zum neuten Tag des Kurses „Bessere Websites mit OPTIMIST“. Heute schauen wir uns die restlichen Dateien des Themes und Nutshell Frameworks an. Außerdem zeige ich dir, wie du mithilfe von Contao und den Webentwickler-Tools herausfindest, in welchen Dateien du bestehende Anweisungen wiederfindest.
Aber bevor wir wieder in die default.scss gehen: Hast du dich gefragt, warum die default.scss Default und nicht etwa Main heißt?
Die Idee dahinter ist schnell erklärt. Stell dir vor, du möchtest für die Weihnachtszeit ein abweichendes Layout gestalten. Oder du hast einen Adventskalender entwickelt. In beiden Fällen könntest du eine christmas.scss anlegen und diese alternativ oder zusätzlich zur default.scss laden.
Ein anderes Beispiel könnte eine Contao Installation sein, unter der du mehrere Websites betreibst. In diesem Fall könntest du pro Website eine eigene SCSS-Datei anlegen und laden.
Wir gehen jetzt aber wieder in unsere default.scss.
Die _media.scss umfasst alle Anweisungen, die für unsere Media-Elemente gedacht sind. Dazu gehört das Bild-Element, die Galerie aber auch die unterschiedlichen Video-Formate für HTML-5 Videos, Youtube und Vimeo.
In der _media.scss des Themes finden wir die Gestaltung des Bild-Elements und eine zusätzliche Variante, um Bilder mit einem Rahmen zu versehen. Außerdem wird hier auch das Text-Element mit Bild gestaltet und für News und Events, die noch das alte Markup von ce_text verwenden, sind hier ebenfalls Anweisungen hier ebenfalls zu finden.
Im Nutshell Framework finden wir in der _media.scss außerdem noch Klassen, um Bilder links, mittig oder rechts auszurichten, die Galerie und Anweisungen, damit Videos automatisch responsive dargestellt werden.
Die nächste Datei ist die _links.scss. Hier findest du alle Anweisungen, die – wie der Name schon sagt – die Links betreffen. Hier findest du zwei Placeholder %button--primary und %button--secondary, die ich angelegt, habe, um einem Link oder Button das Aussehen eines Lila oder türkisfarbenen Buttons zu geben.
Weiter unten werden die Placeholder auch direkt verwendet, um Anker oder Hyperlink-Elemente mit den Klassen btn--primary oder btn--secondary gestalten zu können. Weitere Stellen, an denen ich diesen Placeholder verwende, ist zum Beispiel das Formular für die Newsletter-An- und -Abmeldung. Schau dir in diesem Zusammenhang unbedingt auch mal die _links.scss und _forms.scss des Nutshell Frameworks an.
Die Navigationen findest du in der _navs.scss. Dort werden die Hauptnavigation, die mobile Variante plus Button und die Metanavigation im Footer gestaltet. Wenn du also mit den Custom Properties an deine Grenzen kommst, kannst du hier die entsprechenden Anweisungen anpassen.
Auch wenn OPTIMIST keinen Slider in der Demo zeigt, gibt es standardmäßig ein paar Anweisungen für den Fall, dass du einen Slider einbaust. Du kannst deine Anweisungen dann einfach in der _slider.scss ergänzen.
Da News und Events sich sehr ähnlich sind, öffne ich mal nur die _news.scss. In beiden Dateien findest du Anweisungen, um Nachrichten oder Veranstaltungen in einer Liste untereinander oder in einem Grid angeordnet darzustellen. Dafür kannst du in den Modulen die Klassen news-list und events-list beziehungsweise news-grid und events-grid verwenden.
In der _news.scss und _events.scss des Nutshell Frameworks findest du zusätzlich noch die Anweisungen, die dafür zuständig sind, dass bei der Grid-Ansicht pro Viewport definiert werden kann, wieviele Elemente nebeneinander stehen sollen.
Auch bei der _forms.scss gibt es keine großen Überraschungen, welche Anweisungen du dort finden wirst. Hier sind alle Formular-Elemente gestaltet. Im Theme findest du hier unter anderem Anweisungen, dass Formulare Im Stil von Card-Elementen gestaltet sind, eine zusätzliche Variante, um das Formular beim Scrollen zu fixieren und ein paar allgemeine Anpassungen für Textfelder.
In der _forms.scss des Frameworks findest du noch viele weitere Anweisungen, die zum Beispiel Abstände zwischen den Elementen erzeugen, Buttons standardmäßig wie den Primärbutton darstellen und vieles mehr.
in der _accordion.scss finden wir Anweisungen für das neue Akkordeon-Element, das in Contao 5 eingeführt wurde. Akkordeons haben zwar über das Nutshell Framework bereits eine Basis-Gestaltung, aber dadurch, dass ich wollte, dass Akkordeon-Elemente ebenfalls wie ein Card-Element aussehen und auch beim Aufklappen noch gut aussehen, musste ich ein paar Anpassungen machen.
Dadurch, dass jedes Akkordeon-Element nicht mehr von einem eigenen Container umschlossen wird, musste ich ein wenig kreativ werden. Ich gebe also zunächst dem Toggler das Aussehen des Card-Elements und passe die Darstellung an, wenn das Akkordeon geöffnet wird, indem ich den Rahmen und Border-Radius unten entferne, während ich den Akkordeon-Inhalt mit Rahmen anzeige.
Die Alternative wäre, das Twig-Template anzupassen, sodass jedes Akkordeon-Element bestehend aus Toggler und Inhalt einen gemeinsamen Container hat. Aber ich wollte, dass OPTIMIST mit möglichst wenig Template-Anapssungen auskommt, deswegen dieser etwas kompliziertere Weg.
Die nächsten Dateien für Downloads, Tabellen, Newsletter, FAQ, Kommentare und Suche sind so unspektakulär, dass wir uns direkt mit den Dateien beschäftigen, für die es kein Pendant im Nutshell Framework gibt.
Wenn du eigene Elemente oder Module gestaltest, dann kannst du nach dem gleichen Prinzip vorgehen. Du legst eine neue Datei in components an, z.B. _consent.scss und importierst sie in der default.scss. Danach kannst du dort deine Einverständniserklärung gestalten.
In der _logo.scss sind vor allem 2 Anweisungen interessant:
- werden Bilder standardmäßig zentriert dargestellt. Wenn dein Logo-Contaier beispielsweise auf dem Smartphon nahezu über die komplette Breite geht, dann würde das Bild normalerweise mittig ausgerichtet werden. Mit der Anweisung
margin-left: 0wird es dennoch linksbündig dargestellt. -
Das Logo bekommt eine fixe Breite von 160px zugewiesen. Wenn du aber ein anderes Logo verwendest, dann möchtest du vermutlich auch die Breite anpassen. Das kannst du hier machen und du kannst auch wieder das Media-Query-Mixin nutzen, um die Größe je Viewport zu ändern.
Auch die _notes.scss dient ausschließlich einem Zweck. Hier findest die Anweisung für den „Copyright“ Hinweis im Footer.
In der _facts.scss und _card.scss findest du die Varianten für Text-Elemente, die du auch im Backend für Text-Elemente auswählen kannst. Würde ich OPTIMIST heute ganz neu umsetzen, dann würde ich die Klassen vermutlich in einer _text.scss zusammenfassen.
Da es aber OPTIMIST schon seit ein paar Versionen gibt, halte ich – auch um Updates zu vereinfachen – vorerst an der bisherigen Struktur fest.
Zum Schluss haben wir noch 3 Dateien im Ordner trumps. Während die _print.scss ein paar Anweisungen für die Druckansicht enthält und die _browser-support.scss nur dafür da ist, um auf sehr alten Geräten einen Warnhinweis zu gestalten und deswegen auch auskommentiert werden kann, ist die _helper.scss für das Theme ziemlich wichtig.
Denn in der _helper.scss sind mehrere Hilfsklassen vereint, darunter die Klassen, um Abstände von Artikeln und Elementen zu ändern. Artikel haben in OPTIMIST standardmäßig oben und unten einen Innenabstand.
Es gibt aber Situationen, in denen du vielleicht lieber den Abstand verringern oder sogar ganz darauf verzichten möchtest. Über die Theme Toolbox kannst du dafür einfach den Abstand ändern. Und hier in der _helper.scss findest du die CSS-Anweisungen, die dabei zum Einsatz kommen.
Wenn du also generell die Abstände des Themes anpassen möchtest, dann schau dir die _helper.scss mal genauer an und ändere testweise mal ein paar Werte. Auch kannst du eigene Hilfsklassen hinzufügen.
Nun kennst du zwar die komplette Dateistruktur des Themes, aber dennoch fällt es selbst mir manchmal schwer, die richtige Datei auf Anhieb zu finden. Ist die gesuchte Anweisung in der _media.scss, einer separaten Datei oder Teil des Nutshell Frameworks?
Aber es gibt einen Trick, mit dem du über die Webentwickler-Tools herausfinden kannst, wo du bestimmte Anweisungen finden kannst.
Wenn ich zum Beispiel herausfinden möchte, woher das Card-Element seine Anweisungen bezieht, dann sehe ich über die Webentwickler-Tools zwar die Klasse .card, aber nicht, wo ich diese finde.
Es sei denn, ich habe den Debug-Modus im Backend aktiviert. Wenn ich jetzt die Seite neu lade und das Element erneut untersuche, dann sehe ich, dass die Anweisung in der _card.scss in Zeile 11 steht. Und ich kann auch sehen, dass die Anweisung aus dem Theme-Ordner kommt, wenn ich mit der Maus über die Datei hovere.
Das klappt in den meisten Fällen sehr gut, es sei denn, ich habe das Media Query Mixin verwendet. Dann wird die CSS-Klasse leider fälschlicherweise der _responsive.scss zugeordnet, in der Mixin steht. Aber dann kann man immer noch die Suche nutzen oder ein paar Dateien händisch durchgehen.
Damit sind wir langsam aber sicher am Ende des 10 teiligen Kurses. Vorher werde dir aber nochmal ein paar Beispiele aus der Praxis zeigen, wie du OPTIMIST mit relativ wenig Aufwand anpassen kannst.
Bis dahin mach's gut und Erstma'!