Frameworks für den responsiven Gebrauch
Gerade CSS-Frameworks gibt es wie Sand am Meer. Von kleinen, die sich auf eine gewisse Aufgabe konzentrieren, bis zu kompletten Baukästen, die ganze Komponenten out-of-the-box mit sich bringen. Es macht meistens Sinn, sich vor der Entscheidung intensiv mit den Anforderungen zu befassen, denn ein Framework auszutauschen ist nicht immer einfach.
Ein klassisches Beispiel ist die JavaScript Bibliothek jQuery: wenn nur die Ajax-Funktionalität verwendet wird, stellt sich vielleicht die Frage, ob es nicht zuviel ist, die restlichen 95% der Features ebenfalls mitzuladen?
Typische Anforderungen für ein Framework sind:
- Ein responsives Grid-System mit mehreren Spalten auf Basis von CSS.
- Typograhpy für HTML-Elemente.
- Intuitive und wiederverwendbare CSS-Klassen.
- Komponenten wie Navigationen oder Form-Elemente.
- Verbesserte Browser-Kompatibilität, insbesondere für ältere Browser (evtl. auch durch JavaScript Fallbacks).
- JavaScript Plugins oder Add-Ons.
Twitter Bootstrap
Das wohl bekannteste unter den frontend-Frameworks hat sich mittlerweile zu einem mächtigen Werkzeug für viele Designer und Webentwickler entwickelt. Es wird aktiv daran gearbeitet und es ist intuitiv bedienbar, gerade bei der Erstellung von Prototypen kann es den Entwicklungsaufwand reduzieren und vereinfachen. Dazu beinhaltet es ein großes Set an Komponenten und Features, die von einer Navigation bis zu einem ausgereiftem Grid-System reichen. Bootstrap verwendet LESS CSS und wird via Node kompiliert. Zusätzlich gibt es jede Menge Plugins.
Foundation
Das Foundation-Framework liefert ebenso Komponenten für die gesamte User-Interface-Gestaltung und punktet gerade seit der 5ten Version in Punkto Performance. Im Gegensatz zu anderen wird das Framework minimalistisch ausgeliefert und soll gerade für Anfänger einen schnellen Einstieg bieten. Foundation bietet seit der letzten Version das „interchange“-Feature, das mit dem Attribut data-interchange nicht nur Bilder, sondern auch Bestandteile des DOMs nachladen kann, was wiederum weit über Funktionalität eines reinen CSS-Framework reicht. Dazu gibt es Snippets für den beliebten Sublime Text Editor – für viele ein willkommenes nice-to-have. Foundation nützt zudem SASS und ist, gleich wie Twitter Bootstrap, mobile first.
Gumpy Framework
Das Gumpy Framework ist ebenfalls auf dem Sass Preprozessor aufgebaut und erlaubt damit eine schnelle und einfache Individualisierung. So wie auch Bootstrap 3, hat auch Gumpy ein 12 Spalten Grid-Layout. Gumpy bietet jede Menge UI-Features bzw. Plugins und zudem gibt es die Möglichkeit, Gumpy Extensions zu entwickeln. Responsive-Images wäre ein Beispiel für eine solche Extension.
Skeleton
Im Gegensatz zu den anderen Frameworks ist das Skeleton mehr ein Boilerplate für mobile und responsive Entwicklung. Es beinhaltet eine Sammlung von CSS-Dateien, welche dabei helfen, eine Webseite für kleine Geräte bis hin zu großen Desktops zu optimieren. Leider wurde dieses Framework in letzter Zeit nicht mehr so aktiv weiterentwickelt, es bleibt aber heute noch weit verbreitet.
Kraken
Kraken ist ein leichtgewichtiges Boilerplate basierend auf mobile-first und beinhaltet keinen Schnick-Schnack, sondern nur essenzielle Features für die Cross-Browser Kompatibilität, ein responsives Grid-System, eine skalierende Typograhpy, CSS3-Buttons und grundlegende Styles für Form-Elemente. Dazu gibt es eine Möglichkeit, add-ons zu integrieren.
LESS Framework
Das Less Framework ist wahrscheinlich das älteste der responsiven Templates. Es verinnerlicht viele Standards und konzentriert sich vor allem auf die Layout Gestaltung. Das adaptive CSS-Grid-System bringt insgesamt 4 Layouts mit. Es ist auf jedem Fall ein solides und gut getestetes responsives Framework, das sich von der Funktionalität auf das eine beschränkt und damit nicht so viele Extras wie ein Bootstrap bietet.
Zudem…
…gibt es noch unzählige, weitere Frameworks und Baukästen, viele weitere müssen erst noch entwickelt werden. Leider kann es auch vorkommen, dass das eine oder andere eingestampft und nicht mehr weiterentwickelt wird, so wie es trotz der Bekanntheit dem „The 1140 CSS Grid“ ergangen ist.
Das verwendete Framework sollte vor allem den Anforderungen entsprechen, denn es ist besser nur ein leichtgewichtiges Grid-System einzuführen, anstatt ein komplettes UI-Framework einzubinden und davon nur den einen Teil zu verwenden. Natürlich spielen auch persönliche Präferenzen eine große Rolle, manche mögen’s lieber SASS, manche LESS.
Auch sollte die Aktualität berücksichtigt werden, Frameworks die nicht mehr gepflegt werden sind selten die richtige Wahl. Daran angeknüpft eine aktive Community und ein guter Support, welcher natürlich kostenlose Tutorials und Templates zur Verfügung stellen sollte.
Was ist Dein Lieblings-Framework?
About the Author
Roberto Bez ist passionierter Webentwickler und TechLead bei der HolidayCheck AG. Für Roberto bedeutet das Entwickeln nicht nur Arbeit, sondern auch Freude, Motivation und täglich neue, aufregende Herausforderungen. Besonders gerne setzt er sich mit neuen Webtechnologien sowie Datenbanken aller Art auseinander und versucht diese in die tägliche Anwendungsentwicklung miteinzubringen. Neben dem Entwickeln trifft man ihn gerne Abends beim Laufen oder im Sommer bei Mountainbike-Touren durch die schönen Berge Südtirols.
Ich setze immernoch skeleton ein, finde es von der Größe ideal und macht genau das was ich brauche. Nicht mehr und nicht weniger!
Hi Micha,
ja, Skeleton ist tatsächlich noch bei vielen Projekten im Einsatz… Never change a running System 😉
Schau dir mal Kraken an, ist von der Größe und Features auch recht kompakt!
Hi Roberto,
ich muss zugeben, Kraken kannte ich nicht, sieht aber imo sehr gut aus. Leichtgewichtig und einfach zu lernen. Top!
mfg
Hi,
ich muss zugeben, er ist für mich auch noch recht neu. Habe ihn durch Zufall mal gefunden und einen kleinen Prototyp damit gebaut. Sieht aber vielversprechend aus und das Framework landet definitiv auf der Auswahlliste für zukünftige Projekte!
Grüße,
Roberto