CSS Frameworks und Contao - Bootstrap, Bulma & Co.

Warum ein CSS Framework?

Das Erstellen von konsistentem, präzisem und effektivem CSS für Typografie, Formulare, Buttons, Tabellen, Grid-Systeme, Navigations- und andere Gestaltungselemente kann eine Menge Arbeit bedeuten. Es gibt sehr viele Dinge wie Reaktionsfähigkeit, Zugänglichkeit und Struktur zu berücksichtigen. Alle Elemente sollen auf allen endgeräten gleich oder zumindest gleich gut aussehen. Genau deshalb gibt es CSS-Frameworks, um Ihnen diese Last abzunehmen! Werfen wir also einen Blick auf einige der wichtigsten CSS-Frameworks des Jahres 2019.

Vorteile von CSS-Frameworks

• besseren Workflow bei der Erstellung von Website-Prototypen
• wiederkehrende Aufgaben werden schnell bewältigt
• Meist gibt es Vorlagen oder Erweiterungen für die Integration in dein gewünschte Content-Management-System (Contao, Typo3, Drupal)
• Meist kostenfrei
• Große und bekannte Frameworks haben auch eine große Community und Tester
• Meist gibt es eine Vielzahl an verfügbaren Template und eine gute Dokumentation
• bessere Unterstützung in den gängigen Browser, bekannte Browserbugs werden meist berücksichtigt

Nachteile von CSS Frameworks

• lange Einarbeitungszeit
• Schlechte Performance durch ungenutzten Code
• Viele CSS Overrides um die Standard Elemente und Layouts zu überschrieben
• Es füllt sich einfach "ZUVIEL" an

Welche Frameworks kann ich mit Contao einsetzen und deren Vor- und Nachteile im Detail.

Bootstrap CSS Framework

Bootstrap ist eines der größten CSS-Frameworks und gilt unter vielen Entwicklern als De-Facto-Standard. Anfang 2018 ist die Version 4.0 erschienen und enthält einige neue Funktionen.

• neue Farbschemata
• neue Utility-Klassen
• gebaut mit Flexbox
• Nutzung von SASS und LESS

Pro

• leicht zu erlernen
• sehr gute Dokumentation

Kontra

• in umfangreichen Projekten kann es mit zu vielen Bootstrap Klassen schnell unübersichtlich werden

Beispiel

Bootstrap Theme für Contao

Materialize – CSS-Framework im Material Design

Materialize CSS ist die visuelle Web-Sprache in Form eines Frameworks, das das Materialdesign von Google verwendet, um eine aussagekräftige und ansprechende Benutzererfahrung auf jeder Plattform zu erzielen.

Pro

• Einfach zu erlernen
• Einfaches Grid-System
• Modern
• Eine Vielzahl von Effekten und Komponenten

Kontra

• Webseiten die mit Materilize CSS erstellt wurden sehen oft sehr ähnlich aus

Beispiel

Materialize CSS Theme für Contao

Bulma CSS

Bulma ist ein kostenloses Open-Source-CSS-Framework, das auf Flexbox basiert und mit Sass erstellt wurde. Aktuell wird es von mehr als 200.000 Entwicklern verwendet. Es ist zu 100% reaktionsschnell, vollständig modular und kostenlos verfügbar.

Pro

• Mobile-First Ansatz
• basiert auf Flexbox
• kann mit Sass eingesetzt werden
• benötigt kein extra Javascript

Kontra

• Mhhh mir fällt gerade keiner ein ;)

Beispiel

Bulma CSS Theme für Contao

Gibt es eine Alternative zu CSS-Frameworks?

Soll kein Framework eingesetzt werden muss der CSS Code eigens entwickelt werden. Dies ermöglicht einen deutlich schlankeren Code und macht sich bei der Performance der Webseite positiv bemerkbar. Alternativ kann auch ein CSS Preprocessor wie z.B. Sass eingesetzt werden. Allerdings ist dies mit einigen Content-Management-Systemen nicht oder nur mühselig zu realisieren.

Fazit

CSS-Frameworks mit umfangreichen Konfigurationsmöglichkeiten erlauben es das Theme vollständig an an die eigenen Bedürfnisse anzupassen. Eine Vielzahl an zusätzlichen Seitenlayouts und Inhaltselementen in Verbindung mit erweiterten Einstellungsmöglichkeiten für Hintergrundfarben und Hintergrundbilder setzt den Gestaltungsmöglichkeiten keine Grenzen. Allerdings geht dies immer zu Lasten der Performance.

Individueller CSS Code ist eine gute Möglichkeit die Performance und die gefühlte Wartezeit einer Webseite zu verbessern, kann aber bei umfangreichen Projekten oder einer Vielzahl von Elementen einen erhöhten Mehraufwand bedeuten. Hier ist auch immer entscheidend ob der Entwickler auf eine bestehende Datenbasis zurückgreifen kann oder alle neu entwickelt werden muss.

Es kommt also immer darauf an!

Sie benötigen Unterstützung bei der Entwicklung einer modernen und performanten Webseite? Wir beraten Sie gern.