5 Tipps: Für den leichteren Einstieg in OPTIMIST

Du hast OPTIMIST bereits installiert und erste Tests gemacht? Wunderbar. In diesem Artikel erfährst du mehr darüber wie OPTIMIST aufgebaut ist, wie es funktioniert und wie du mehr aus dem Theme holen kannst.

Tipp Nr. 1: OPTIMIST basiert auf dem Nutshell Framework

Unser Nutshell Framework wurde speziell für die Arbeit mit Contao entwickelt. Statt zu versuchen, bestehende Frameworks (z.B. Bootstrap oder Foundation) mit Contao zu kombinieren, haben wir ein Framework für Contao entwickelt. Dadurch bringt das Nutshell Framework deutlich weniger Ballast mit, denn es enthält nur CSS-Anweisungen, die auch für Contao geeignet sind.

Zum Vergleich: ca. 80% der Bootstrap CSS-Anweisungen können in Contao ohne Erweiterungen und Anpassungen nicht genutzt werden. Schlimmer noch, es kann passieren, dass gewisse Anweisungen für Bootstrap in Contao zu Problemen führen und korrigiert werden müssen.

Dank des modularen Aufbaus kannst du selbst entscheiden, welche Ressourcen du für ein Projekt wirklich benötigst und die anderen entfernen. Beispiel: Dein Projekt hat keine Events, keine FAQ und keinen Newsletter? Dann deaktiviere einfach die CSS-Anweisungen und verbessere so die Ladezeit.

Die Grundidee des Nutshell Frameworks

Du kannst dir das Nutshell Framework wie eine Schicht zwischen dem OPTIMIST Theme und Contao vorstellen. Im Nutshell Framework sind vor allem Basis-Anweisungen enthalten, die wir uns früher bei jedem Projekt immer wieder mühselig zusammengesucht haben.

Ein einfaches Beispiel ist die Klasse .nav. In 99 von 100 Fällen wollen wir nicht, dass eine Navigation, die aus einem nav-Element und einer ungeordneten Liste ul besteht, Punkte vor den Listen-Elementen und ein padding und margin links hat. Mithilfe der Klasse .nav können wir diese CSS-Anweisungen zurücksetzen und dann die Navigation so gestalten, wie sie im Layout angedacht ist.

Außerdem sind in dem Nutshell Framework Grid-Layouts auf Basis eines 12-spaltigen Layouts, 5+ Breakpoints von XS bis XL, Basis-Layouts für alle Contao Elemente und Frontend-Module und vieles vieles mehr enthalten.

Tipp Nr. 2: OPTIMIST ist gut erweiterbar

Ursprünglich mit dem Gedanken entwickelt, Agenturen und ihre Kunden in der COVID-19 Krise zu unterstützen, wollten wir mit OPTIMIST die Möglichkeit schaffen, dass möglichst jede(r) eine Contao Website umsetzen kann.

Deswegen haben wir uns bewusst auf die Funktionen konzentriert, die in unseren Augen wirklich notwendig sind und dafür auf Elemente und Module verzichtet, die in unseren anderen Contao Themes standardmäßig enthalten sind.

Aber das bedeutet nicht, dass du OPTIMIST nicht selbst erweitern kannst. Schau einfach mal in die Liste unserer Theme-Elemente und -Module oder erweitere OPTIMIST mit deinen Lieblingserweiterungen aus dem Contao Manager. Dank der übersichtlichen Ordner- und Dateistruktur kannst du deine Elemente und Module in separate Dateien auslagern und per @import laden.

Tipp Nr. 3: OPTIMIST kommt mit modernen Grid-Layouts

Wie alle unsere Themes, nutzt auch OPTIMIST unsere eigene Grid-Erweiterung. Sie ist eine der wenigen Erweiterungen, auf die wir selbst bei einem so minimalistischem Theme wie OPTIMIST nicht verzichten wollten.

Die Grid-Erweiterung basiert auf dem neuesten Webstandard CSS Grid-Layout und bietet dir die Möglichkeit, Inhalte sowohl auf der X-Achse als auch Y-Achse anzuordnen. Damit werden nun auch Grid-Layouts möglich, die man früher nur mit vielen Verschachtelungen realisieren konnte.

In der OPTIMIST Demo findest du bereits eine Vielzahl von mehrspaltigen Inhalten, dessen Darstellung du pro Viewport anpassen kannst (aber nicht musst) und mit unterschiedlichen Grid-Optionen, z.B. align-end, um ein Element am unteren Ende auszurichten. Zusätzlich findest du in der Grid-Dokumentation weitere Beispiele und Videos.

Aber OPTIMIST kann noch mehr. Mithilfe der Mixins @include make-row; und @include make-col(X); kannst du Inhalte, die aus Frontend-Modulen kommen ebenfalls mehrspaltig darstellen. Vorbei sind die Zeiten, in denen du Templates anpassen musstest, damit News oder Events mehrspaltig dargestellt werden. Wie du die Mixins einsetzt, kannst du dir bei der Eventliste in OPTIMIST ansehen.

Bonus-Tipp für Fortgeschrittene: Du kannst die Grid-Erweiterung auch um eigene Grid-Klassen erweitern oder abweichende Grid-Systeme wie ein 20-spaltiges Grid-Layout definieren.

Tipp Nr. 4: OPTIMIST lässt sich für jede Geräteklasse optimieren

Wenn wir über Grid-Layouts sprechen, müssen wir auch über Viewports und Breakpoints reden. Unter Tipp Nr. 3 habe ich dir bereits erzählt, dass du mehrspaltige Layouts pro Viewport darstellen kannst. Das bedeutet, du kannst für jeden Viewport, also von XS über SM, MD und LG bis XL neu definieren, wie deine Inhalte dargestellt werden sollen.

Aber das ist nicht alles. Diese Breakpoints kannst du auch für jedes andere Element, dass du per CSS ansteuerst nutzen. Mithilfe des Mixins @include media-query(screen-XX) {…} kannst du beispielsweise den Header so gestalten, dass Logo und Navigation auf kleinen Bildschirmen untereinander stehen, aber ab einem bestimmten Vierwport nebeneinander dargestellt werden.

Und da wir immer wieder festgestellt haben, dass eine Navigation auch mal spontan durch einen zusätzlichen Menüpunkt erweitert wird, haben wir einen eigenen Breakpoint screen-menu für den Umbruch vom mobilen Menü zum normalen Menü ergänzt.

Bonus-Tipp für Fortgeschrittene: Du kannst die bestehenden Breakpoints anpassen und sogar zusätzliche Breakpoints definieren und dann im gesamten Layout nutzen. Mehr dazu in der mixins/_responsive.scss des Themes und des Nutshell Frameworks.