Frameworks für den responsiven Gebrauch

written by devangelist on Januar 13, 2014 in Allgemein and Browser and CSS3 and Frameworks and Javascript and Responsive Web Design with 4 comments

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.

BootstrapGithub

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.

BootstrapGithub

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.

GumpyGithub

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.

SkeletonGithub

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.

KrakenGithub

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.

Less FrameworkGithub

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?

Frameworks für den responsiven Gebrauch: 5,00 von 5 Punkte, 3 abgegebene Stimmen.

 Loading ...

---

Related Articles