Blog

Artikel lesen

Moderne Theme-Entwicklung für Contao

Einsatz von Sass, BEM und Komponenten

von Daniel Erlinger

von Daniel Erlinger

Code-Editor für Sass, HTML, JS, Templates

Die Entwicklung von Oberflächen kann sehr schnell sehr chaotisch werden. Nicht nur bei großen Projekten ist eine strukturierte Herangehensweise ein Muss, soll das Projekt nicht in völligem Chaos enden. Ein modulares und auf Komponenten aufgebautes Theme ist die Grundlage für eine langlebige Website, die gut wartbar ist und für Redakteure keine Blackbox darstellt.

Sass-Struktur

Vorstellung von Sass

Nutzung von Variablen und Mixins

Strukturierung von eigenem Theme

Trennung von Theme und Contao als Vendor

Weitere Packages wie Portfolio als Vendor

Anordnung der einzelnen Theme-Dateien in der theme.scss

BEM

Vorstellung von BEM

Nutzung von Präfixen

Komponenten

Was sind Komponenten? Komponenten sind inhaltsübergreifende, wiederverwendbare Module mit einer einzigen Verwendung.

Wann ist eine Komponente eine Komponente? Erklärung am Beispiel von Cards, Buttons und Tags.

Beispiel einer Komponenten mit BEM.

Unterschiede zwischen Komponenten und Design für Pages

Wann sollte ich Modifier einsetzen und wann für Pages designen?

Besonderheiten in Contao

Mischnutzung von Komponenten in Contao am Beispiel von News oder Events.

Anpassung von Templates

Lohnt sich die Anpassung von Templates? Nur, wenn zusätzliche Informationen ausgegeben werden sollen oder man übergreifend für einheitliches Design sorgen muss, z.B. für News und Events.

Aufwand bei späteren Contao-Updates?

Beispiel einer Card-Komponente für Portfolio und News.

Benutzung durch Redakteure

Sprechende und deutsche Klassen für einfache Nutzung.

Zurück zur Newsübersicht

Moderne Theme-Entwicklung für Contao

Einsatz von Sass, BEM und Komponenten

von Daniel Erlinger

von Daniel Erlinger

Code-Editor für Sass, HTML, JS, Templates

Die Entwicklung von Oberflächen kann sehr schnell sehr chaotisch werden. Nicht nur bei großen Projekten ist eine strukturierte Herangehensweise ein Muss, soll das Projekt nicht in völligem Chaos enden. Ein modulares und auf Komponenten aufgebautes Theme ist die Grundlage für eine langlebige Website, die gut wartbar ist und für Redakteure keine Blackbox darstellt.

Sass-Struktur

Vorstellung von Sass

Nutzung von Variablen und Mixins

Strukturierung von eigenem Theme

Trennung von Theme und Contao als Vendor

Weitere Packages wie Portfolio als Vendor

Anordnung der einzelnen Theme-Dateien in der theme.scss

BEM

Vorstellung von BEM

Nutzung von Präfixen

Komponenten

Was sind Komponenten? Komponenten sind inhaltsübergreifende, wiederverwendbare Module mit einer einzigen Verwendung.

Wann ist eine Komponente eine Komponente? Erklärung am Beispiel von Cards, Buttons und Tags.

Beispiel einer Komponenten mit BEM.

Unterschiede zwischen Komponenten und Design für Pages

Wann sollte ich Modifier einsetzen und wann für Pages designen?

Besonderheiten in Contao

Mischnutzung von Komponenten in Contao am Beispiel von News oder Events.

Anpassung von Templates

Lohnt sich die Anpassung von Templates? Nur, wenn zusätzliche Informationen ausgegeben werden sollen oder man übergreifend für einheitliches Design sorgen muss, z.B. für News und Events.

Aufwand bei späteren Contao-Updates?

Beispiel einer Card-Komponente für Portfolio und News.

Benutzung durch Redakteure

Sprechende und deutsche Klassen für einfache Nutzung.

Zurück zur Newsübersicht