CSS Frameworks

CSS Frameworks

Von Michaela Buschberger am 24.02.2022

CSS Frameworks können die Entwicklung von Web-Projekten effizienter gestalten. Doch nicht jedes Framework ist gleich gut für das eigene Projekt geeignet. In diesem Artikel erfährst du, was eigentlich genau ein CSS Framework macht und wofür man es verwendet. Es wird zudem ein kurzer Überblick über bekannte CSS Frameworks gegeben.

Was ist ein CSS Framework?

Im Wesentlichen besteht ein CSS-Framework aus mehreren Stylesheets, die von WebentwicklerInnen verwendet werden können. Dabei können Defaultwerte für Farben, Layout, Fonts etc. konfiguriert werden. Im Allgemeinen werden Stylesheets von anderen Technologien je nach Framework unterstützt und erweitert. Gängige Beispiele dafür sind SASS und JavaScript.

Mit CSS Frameworks werden also fertige Stylesheets zur Verfügung gestellt und können im HTML-Code eingebettet werden. Viele Frameworks verfügen auch bereits über integrierte Komponenten-Klassen wie beispielsweise Cards, Navigationskomponenten und Sliders.

Bei den Frameworks wird zudem zwischen component- und utility-based unterschieden. Die meisten bekannten Frameworks wie beispielsweise Bootstrap sind komponentenbasiert. Sie legen also den Fokus auf bereits vorgefertigte Elemente. Utility-based Frameworks haben den Nutzen, EntwicklerInnen so gut wie möglich Flexibilität in ihrem Design und der Umsetzung zu gewährleisten. Diese bieten also Klassen an, damit Webentwickler ihre Komponenten effizient und flexibel für ihr individuelles Design implementieren können.

Wann macht die Verwendung eines CSS Frameworks sinn?

Ob ein CSS Framework nun wirklich verwendet werden soll oder nicht, über dieses Thema wird viel diskutiert. Einige meinen, es sei essentiell, um die Entwicklung effizient zu gestalten, da vieles an Arbeit durch den Einsatz des Frameworks abgenommen wird. Andererseits sind Designer oft der Ansicht, dass dadurch alle Webseiten ähnlich aussehen. Daher gilt es an jeden die Vor- und Nachteile für sein eigenes Projekt abzuwägen. Möchte man ein sehr spezielles, individuelles Design sind eventuell component-based Frameworks nicht die richtige Wahl. Andererseits können hierbei utility-based Frameworks ihren Beitrag leisten, einem die Entwicklung von eigenen Komponenten zu vereinfachen. Für kleine Projekte könnten zusätzliche Frameworks auch ein Overhead bedeuten, zumal auch Ressourcen dafür bereitgestellt werden müssen, welche womöglich in diesem Umfang nicht gebraucht werden. Alles in Allem muss jeder selbst entscheiden, ob er ein CSS Framework für sein Projekt selbst als sinnvoll erachtet oder nicht. Hier sind die Vorteile, die im Web am meisten genannt werden:

Das Einhalten von UX-Richtlinien wird durch die Verwendung von vorgefertigten Klassen und Komponenten von CSS Frameworks vereinfacht. Es wird also dementsprechend ein Standard geboten, welcher cleane und symmetrische Layouts ermöglicht.
Je nach Anforderung können EntwicklerInnen schneller eine benutzerfreundliche und optisch ansprechende Benutzeroberfläche erstellen, ohne bei Null anfangen zu müssen.
Ist man selbst kein Webdesigner, können vor Allem komponentenbasierte Frameworks zum Thema Styling und Design eine Erleichterung bieten. Vor Allem für Projekte, wo kein individuelles Design von Bedeutung ist.
Da diese Frameworks über gebrauchsfertige Stylesheets verfügen, ermöglicht ihre Verwendung eine schnellere Web-Entwicklung. EntwicklerInnen müssen sich somit nicht tiefergehend mit CSS-Code auseinandersetzen.
Die Cross-Browser Functionality ist ein großer Pluspunkt bei CSS Frameworks. Sie machen es einfach Web-Anwendung oder Webseiten zu entwickeln, die mit mehreren Browsern und Browser-Versionen kompatibel sind.

Je nachdem welches Framework verwendet wird, gelten die genannten Vorteile. Wie bereits erwähnt, hängt die Effektivität und Effizienz der Nutzung eine Frameworks jedoch von Umfang und Typ des eigenen Projektes ab. Folglich wird ein kurzer Überblick über bekannte Frameworks gegeben.

5 Bekannte Frameworks im Überblick

Bootstrap

Das von Twitter entwickelte Framework Bootstrap (BS) ist wohl das bekannteste von allen. Es zählt zu den Komponenten-Frameworks, basiert auf den Technologien HTML, CSS, Javascript und unterstützt zudem SASS. Der Schwerpunkt von BS liegt vor Allem auf den Responsive- und Mobile-First Ansatz bei Webseiten und dessen Layout basiert auf einem 12-Grid-System.

BS bietet eine sehr umfangreiches Set an Komponenten an. Die breite Auswahl an Lösungen zu Overlays, Layouts, UI-Elemten, Buttons, Alerts, Cards und viele mehr zählen zu den größten Stärken von BS.

Ein weiterer Vorteil liegt in der übersichtlichen und sehr detaillierten Dokumentation. Es werden auch viele Beispiele zur Verwendung der vorgefertigten Komponenten und auch Erweiterungen angeboten.

Das Framework ist schließlich für jene geeignet, die Newcomer bei CSS sind und eine komponentenbasierte Basis für ihr Projekt benötigen.

TailwindCSS

TailwindCSS zählt derzeit zu den beliebtesten Frameworks und ist anders als Bootstrap utility-based. Das bedeutet, es werden hauptsächlich Utility-Klassen angeboten, um eigene Komponenten einfach und schnell entwickeln zu können. Die größte Stärke bei TailwindCSS liegt also im hohen Maß an Flexibilität und der minimalen Einschränkung bei der Website-Entwicklung. Dieses Framework ist vor Allem für jene geeignet, welche ein sehr spezielles und individuelles Design implementieren müssen. Der Einsatz dieser Utility-Klassen setzt jedoch ein bereits fortgeschrittenes Wissen über CSS voraus, um es effizient nutzen zu können.

Foundation

Auch Foundation ist ein responsives, Mobile-First CSS Framework und ist besonders für die Erstellung großer Web-Anwendungen geeignet. Es stellt Grid, HTML-, SASS- und CSS-UI-Elemente, Vorlagen und Code für Navigation, Buttons, Typografie, Forms und weiteres zur Verfügung. Es umfasst auch optionale Funktionalitäten, die von JavaScript-Erweiterungen angeboten werden. Eine Besonderheit stellt dabei beispielsweise die Motion-UI dar, eine SASS Bibliothek um flexible CSS-Animationen zu unterstützen. Zudem wird ein eigenes E-Mail Framework zur Verfügung gestellt.

Bulma

Bulma ist ein komponentenbasiertes, responsives CSS Framework, basiert auf CSS Flexbox, kommt ganz ohne JavaScript aus und verwendet dasselbe Grid-System wie Bootstrap. Der Fokus liegt auf lightweight, also darauf nur das zu verwenden was man auch wirklich zur Umsetzung benötigt. Um das zu ermöglichen, werden einige Optionen zur einfachen Anpassbarkeit mithilfe von Sass-Files, Webpacks und Variablen geboten. Bulma ist zudem mit Font Awesome 4 als auch mit Font Awesome 5 kompatibel.

Es ist in der Community aufgrund des leichten Erlernens und der einfachen Verwendung sehr beliebt. Es bietet eine gute Anzahl an Komponenten, die leicht anpassbar und kombinierbar sind. Bulma ist also sowohl für Anfänger als auch fortgeschrittene EntwicklerInnen geeignet.

Material Design Lite & MaterializeCSS

Mit Material Design Lite können Webseiten mit dem Erscheinungsbild von Material Design erstellt werden. Es ist nicht auf JavaScript-Frameworks angewiesen und zielt darauf ab, die geräteübergreifende Verwendung zu optimieren.

MaterializeCSS ist ein weiteres Framework, dass basierend auf einen responsiven Ansatz entwickelt wurde. Ein großes Plus ist das ansprechende Design der Elemente. Es basiert auf dem Material Design von Google und bietet eine Reihe an UI-Komponenten an. Ein weiterer Vorteil liegt auf der einfachen Erlernbarkeit und es bietet eine sehr umfassende Dokumentation an.

Fazit

Je nach Projektgröße und -art können CSS Frameworks eine Erleichterung und Zeitersparnis in der Web-Entwicklung darstellen. Es gibt bereits einige Frameworks, die eine Menge an Funktionalität anbieten. Dabei wird in utility-based und component-based unterschieden. Ist eine hohes Maß an Flexibilität bei der Umsetzung von Bedeutung, kann Tailwind als utility-based Framework eine gute Option darstellen. Dieses Framework erfordert jedoch ein fortgeschrittenes Wissen über CSS. Ist man in diesem Bereich ein Newcomer und braucht ein Framework, dass leicht zu erlernen ist und bereits einiges an Komponenten anbietet, kann vor allem Bulma, Bootstrap oder aber auch Materialize eine gute Alternative bieten.