Transkript
Moin und Willkommen zum achten Tag des Kurses „Bessere Websites mit OPTIMIST“. Im heutigen ersten Teil werde ich näher auf die Dateistruktur des Themes und Nutshell Frameworks eingehen und dir zeigen, wo du welche Anweisungen findest.
Dafür habe ich wieder mein VS Code offen für alle Dateien des OPTIMIST Themes und parallel das Github Repository des Nutshell Frameworks.
Ein paar Dateien hast du in den letzten Tagen ja bereits kennengelernt. Wir haben ein paar Custom Properties in der _variables.scss geändert, wir haben Schriften im Ordner fonts/ abgelegt und in der _fonts.scss eingefügt, wir haben uns sogar schon mit der _config.scss beschäftigt, um neue Breakpoints hinzuzufügen oder bestehende anzupassen.
Heute schauen wir uns die anderen Dateien an. Beginnen möchte ich mit der default.scss. In dieser Datei kommen alle Dateien, aus denen das Theme besteht zusammen. Du siehst, dass hier alle Dateien des Themes per @import importiert werden.
Und wir werden diese Liste nun einmal durchgehen. Los gehts mit den beiden Mixin Dateien. In der _general.scss finden wir ein Card Mixin, dass ich in OPTIMIST an mehreren Stellen verwende, um ein Element im Stil eines Card-Elements zu gestalten, d.h. dass es einen Border, einen Innenabstand und eine Hintergrundfarbe haben soll.
Außerdem soll bei Hover das Element ein kleines Stück nach oben geschoben werden und einen Schatten bekommen. Dieses Mixin kommt zum Beispiel bei den Textelementen auf der Startseite zum Einsatz. In den Theme Dateien wird das Mixin unter anderem in der _card.scss verwendet und um zusätzliche Anweisungen für Überschriften, Bild und Text ergänzt. Aber auch in der _news.scss, um die neuesten Einträge als Card-Element darzustellen.
Das sind aber noch nicht alle Mixins, die in OPTIMIST zur Verfügung stehen. Weiter oben importieren wir die General Mixins des Nutshell Frameworks und wenn wir uns diese ansehen, dann sehen wir, dass wir noch viele weitere Mixins zur Verfügung haben.
Das navigation() Mixin, nutze ich zum Beispiel immer dann, wenn ich eine Liste ohne die typischen Listen-Styles wie Punkte davor und Abstände haben möchte.
Mit dem make-row Mixin kann ich ein beliebiges Element nutzen, um ein 12-spaltiges Grid anzulegen und mit dem make-col() Mixin kann ich dann einem Element innerhalb des Grids sagen, wie breit es sein soll. Auch hier lohnt sich wieder ein Blick in die _news.scss, denn hier kann man schön sehen, wie beide Mixins, make-row und make-col verwendet werden.
Schauen wir uns nun als nächstes die _responsive.scss an. Im OPTIMIST Theme gibt es keine zusätzlichen Anweisungen, aber im Nutshell Framework. Hier finden wir ein Mixin wrapper-max() mit dem wir einen Container auf eine maximale Breite begrenzen können. Außerdem ist hier auch das media-query() Mixin zu finden, das ich in unseren Themes nutze, um Inhalte ab einen bestimmten Breakpoint zu gestalten.
Das wrapper-max() Mixin nutze ich zum Beispiel in der _article.scss des Nutshell Frameworks, um allen Artikeln standardmäßig eine maximale Breite zu geben.
Das media-query() Mixin kennen wir schon aus der _variables.scss. Ich nutze es in unseren Themes zum Beispiel, um den Abstand des Grids ab dem Small-Viewport zu erhöhen oder in den Innenabstand von Artikeln ab dem Large Viewport.
Zurück zu unserer default.scss. Die _config.scss und _variables.scss haben wir uns bereits angesehen, als Nächstes folgen ein paar Importe, die direkt aus dem Nutshell Framework kommen. Das sind alles CSS Resets beziehungsweise Normalisierungen damit HTML-Elemente in allen Browsern möglichst gleich dargestellt werden.
Weiter geht es mit ein paar Basis-Anweisungen. Schauen wir uns die _shared.scss an, sehen wir, dass auch diese leer ist. Aber in der _shared.scss des Nutshell Frameworks finden wir ein paar Anweisungen für Überschriften, Listen, Links und ein paar andere Elemente. Hier kommen auch erstmals Custom Properties zum Einsatz, d.h. Farben und Abstände reagieren hier bereits auf die Einstellungen des Themes.
Die _shared.scss ist für Anweisungen gedacht, die immer gelten, egal wo und wie. Wenn du zum Beispiel alle Links auf eine bestimmte Weise darstellen möchtest, sagen wir in Versalien, dann könntest du diese Anweisung in die _shared.scss aufnehmen. Dieser Fall kommt bei mir extrem selten vor, deswegen ist die _shared.scss des OPTIMIST Themes auch leer geblieben. Sie könnte aber auch genutzt werden, um beispielweise Teil der Contao CSS-Anweisungen zu überschreiben.
Es folgt die _page.scss. Diese Datei ist für alle Anweisungen gedacht, die das äußerste HTML-Element und den Body betreffen. Im Theme habe ich hier zum Beispiel definiert, dass Sprungmarken nicht direkt, sondern mit einem Scroll-Effekt sichtbar sein sollen. Wenn du dem Body ein Hintergrundbild geben möchtest, dann wäre die _page.scss ebenfalls der richtige Ort dafür.
Im Nutshell Framework finden wir hier noch weitere Anweisungen wie die Zuordnung der Basis-Schriftgrößen, die sich je nach Viewport ändert, Text- und Hintergrundfarbe und ein paar allgemeine Anweisungen zum Schriftrendering.
Die _fonts.scss kennen wir bereits, deswegen mache ich direkt weiter mit der _type.scss. Hier findest du Klassen, die zur Ausrichtung von Text und Überschriften sind, aber auch für Elemente wie Listen, Zitate oder Code-Blöcke.
Auch hier findest du noch weitere Anweisungen in der _type.scss des Nutshell Frameworks. Zum Beispiel werden hier die Überschriften von H1 bis H6 definiert, du siehst aber auch, dass hier ein Placeholder für jede Überschrift definiert wird. Mit diesem Placeholder kanst du einer beliebigen Überschrift per CSS-Anweisung die Darstellung einer anderen Überschriftenhierarchie geben.
Ein Beispiel, wie das funktioniert findest du in der _card.scss. Hier wird festgelegt, dass jede Überschrift, unabhängig von der Hierarchie wie eine H4 dargestellt werden soll.
Es folgt die _grid.scss. Die erste Anweisung sorgt dafür, dass in einem Grid nicht nur horizontal, sondern auch vertikal Abstände erzeugt werden. Die beiden anderen Anweisungen sind für verschachtelte Grids gedacht, um dort die Ausrichtung zu beeinflussen.
Da das aber in OPTIMIST in der Demo gar nicht mehr vorkommt, schauen wir uns stattdessen die _grid.scss des Nutshell Frameworks genau an. Hier sehen wir die Anweisungen, die für das Reihen-Element und die Spalten-Klassen und alle Spalten-Optionen definiert werden. Wenn du also wisen willst wie die Grid-Klassen funktionieren, dann schau dir diese Anweisungen ruhig genauer an. Auch wenn du eigenen Grid Optionen definieren möchtest, findest du hier einen Ansatz, wie du mit Sass solche Klassen möglichst einfach erstellen kannst.
Die nächste Datei ist die _layout.scss. Sie trägt ihren Namen in Anlehnung an das Seitenlayout, dass du in Contao definierst. Hier sind die Anweisungen für den Header und Footer hinterlegt. Wenn du also Anpassungen am Header oder Footer machen möchtest, dann sind deine Änderungen hier am Besten aufgehoben.
Die letzte Datei aus dem Base-Ordner ist die _article.scss. In früheren Theme Versionen waren die Anweisungen für Artikel ebenfalls in der _layout.scss. Mittlerweile haben Artikel aber eine eigene Datei bekommen, vor allem weil es im Laufe der Zeit immer mehr Anweisungen wurden. Im OPTIMIST Theme findest du zum Beispiel die Anweisungen, um Artikel farbige Hintergründe beziehungsweise die Blasen links und rechts zu geben.
In der _article.scss des Nutshell Frameworks sind zusätzlich noch Anweisungen, um den Inhalt des Artikels in der Breite zu begrenzen und die Standard-Innenabstände für Artikel zu erzeugen. Wenn du weitere Artikel-Varianten anlegen oder Anpassungen an den bestehenden Anweisungen vornehmen möchtest, dann machst du das am Besten in der _article.scss.
Und damit sind wir nicht nur am Ende der Base-Dateien, sondern auch am Ende dieses Videos angekommen. Im nächsten Video schauen wir uns Dateien in den Ordnern components und trumps genauer an. Außerdem werde ich dir einen Trick zeigen, wie du über den Webentwickler-Tools herausfinden kannst, in welchen Dateien du bestimmte Anweisungen wiederfindest.
Bis dahin, mach's gut und Erstma!