Vorheriger Artikel Nächster Artikel

Schlanke Helfer: Kleine Tools statt große Frameworks

Aus dem
t3n Magazin Nr. 37

09/2014 - 11/2014

Jetzt kaufen

Frameworks sind aus dem Alltag eines Webentwicklers nicht mehr wegzudenken. Doch nicht immer führen jQuery, Bootstrap und Co. am schnellsten ans Ziel. Mit kleineren, zweckgebundenen Bibliotheken lässt sich in Sachen Performance und Dateigröße oft ein besseres Ergebnis erzielen. Wir stellen einige davon vor.

Schlanke Helfer: Kleine Tools statt große Frameworks

(Foto: joexx/Photocase)

Geringer Aufwand, schneller Erfolg und die gute Cross-Browser-Kompatibilität machen Frameworks zu den Wunderwerkzeugen in der Webentwicklung. JavaScript-Bibliotheken wie jQuery und Dojo helfen dabei, komplexe Aufgaben mit JavaScript zu meistern, Frontend-Frameworks wie Bootstrap und Foundation unterstützen bei der schnellen Entwicklung von Layouts.

Das Gewicht, das jedes dieser Frameworks selbst in komprimiertem Zustand auf die Waage bringt, ist allerdings immens. Alleine jQuery ist in der aktuellen Fassung rund stolze 90 Kilobyte groß – und das ohne eine einzige Zeile eigenen Codes. Dabei sind viele der mitgelieferten jQuery-Komponenten oft gar nicht nötig, um das jeweilige Projekt realisieren zu können. Wer die kompletten jQuery- und Bootstrap-Bibliotheken einsetzt, bloß um ein Grid-System und einen Slider zu realisieren, schießt mit Webentwicklungs-Kanonen auf Website-Spatzen. Auch die Anpassung von Frontend-Design-Frameworks endet oft genug darin, dass der Entwickler die bereitgestellten Formatierungen aus dem CSS entfernt.

Viele der großen Frameworks bieten daher mittlerweile die Funktion, eine individuelle Fassung des Frameworks zusammenstellen zu können. Dieses Paket beinhaltet dann nur die Komponenten, die später auch tatsächlich im Projekt benötigt werden.

Oft lohnt es sich allerdings auch, zu einer so genannten dependency-freien Lösung zu greifen. Diese JavaScript- und CSS-Bibliotheken führen ganz ohne den Einsatz eines mächtigen Frameworks ans Ziel. Zu einer modernen Website gehören meist ein Grid, eine Navigation und Animationen wie Slider oder Galerien. Für jede dieser Anforderungen gibt es jeweils auch eine schlanke dependency-freie Lösung. Wir stellen die besten Lösungen vor.

Grid-Systeme

Ohne flexible Grid-Systeme sind responsive Websites nur schwer umzusetzen. Auch für diese Aufgabe gibt es unabhängige Lösungen, die ohne unnötiges Übergewicht genauso gute Dienste leisten wie die Grid-Komponenten großer Frameworks.

Responsive Grid System

Das Responsive Grid System von Graham etwa liefert genau das, was der Name verspricht: eine einfache und flexible Möglichkeit, um responsive Webseiten zu erstellen.

Das System kann bis zu zwölf Spalten abbilden. Für deren Aufteilung und die Berechnung der Zwischenabstände nutzt Responsive Grid prozentuale Angaben, sodass es sich in ein Layout jeder Breite einbauen lässt. Der Aufbau des Responsive-Grid-Systems ermöglicht eine einfache Integration des Systems und minimiert das Risiko von Komplikationen und Überschneidungen selbst bei bestehenden Projekten.

Ausdrücklich kein Framework: Das Responsive Grid System bietet ein responsives Grid mit bis zu zwölf Spalten. (Screenshot: responsivegridsystem.com)
Ausdrücklich kein Framework: Das Responsive Grid System bietet ein responsives Grid mit bis zu zwölf Spalten. (Screenshot: responsivegridsystem.com)

Für einen zusätzlichen Speed-Vorteil ist das Grid-System modular gestaltet und bietet die Möglichkeit, die Größe des Stylesheets zu minimieren, indem nur die tatsächlich benötigte Spaltenanzahl im Stylesheet hinterlegt wird.

Um das System einzusetzen, wird die Website in Sektionen aufgeteilt, die die jeweiligen Spalten beinhalten. Zur Angabe der Spaltenbreite kommen „Breitenklassen“ zum Einsatz. In ihnen wird die prozentuale Breite als Bruchzahl eingesetzt. Bei einem dreispaltigen Grid würde beispielsweise jede der drei Spalten mit der CSS-Klasse „.span_1_of_3“ als ein Seitendrittel definiert.

Weitere Alternativen

Das auf SASS basierende Profound Grid2 eignet sich für fluide und statische Layouts und lässt sich den individuellen Projektanforderungen anpassen. Für noch mehr Gestaltungsfreiheit lohnt sich ein Blick auf Gridset. Mit dem Online-Tool können Webdesigner flexible Grid-Systeme für verschiedene Viewport-Größen realisieren.

Darüber hinaus beinhalten auch einige schlanke Frameworks gute Ansätze für responsive Grids. Dazu zählen das Base-CSS-Framework, das neben dem Grid-System auch grundlegendes Styling für Text, Tabellen, Formulare und weitere Komponenten sowie einige nützliche Helper-Klassen liefert. Auch das Skeleton Boilerplate beinhaltet neben minimalem Styling für gängige Webseiten-Elemente ein 960px-Grid-System, das elegant auf kleinere Geräte- und Bildschirmgrößen herunterskaliert.

Mit Gridset lassen sich ohne die Zuhilfenahme großer Frameworks Grids realisieren. Das Online-Tool bietet eine enorme Gestaltungsfreiheit. (Screenshot: gridsetapp.com) 
Mit Gridset lassen sich ohne die Zuhilfenahme großer Frameworks Grids realisieren. Das Online-Tool bietet eine enorme Gestaltungsfreiheit. (Screenshot: gridsetapp.com)

Abonniere jetzt t3n-News über WhatsApp und bleib mobil auf dem Laufenden!
t3n-News via WhatsApp!
Vorheriger Artikel Zurück zur Startseite Nächster Artikel
6 Antworten
  1. von Frank am 12.01.2015 (11:24 Uhr)

    Gute Übersicht, da werde ich mir einige mal näher ansehen.
    Vielen Dank!

    Antworten Teilen
  2. von Markus S. am 12.01.2015 (11:56 Uhr)

    Durch die Verwendung von Sass/Less sind auch die „großen“ CSS-Frameworks individuell anpassbar/verwendbar. So kann man beispielsweise auch nur die Grid-Komponente von Foundation verwenden. Damit kommt man in die gleichen kB-Dimensionen, wie die „kleinen“ Systeme.

    (Übrigens stimmen die 90 kB von jQuery nicht, wenn man diese komprimiert ausliefert – was immer geschehen sollte –, dann sind es nur 34 kB!)

    Antworten Teilen
  3. von fabianmarz am 12.01.2015 (12:08 Uhr)

    Mein persönlicher Favorit für "kleine Helfer" ist http://formstone.it/.

    Antworten Teilen
  4. von namename am 12.01.2015 (12:32 Uhr)

    Da dreht sich der zukünftige Maintainer, wenn er den Flickenteppich aus verwaisten JS Plugins und selbst erstellten Modulen pflegen muss.

    Antworten Teilen
    • von marcel am 12.01.2015 (15:05 Uhr)

      Grosse Frameworks der Unterhaltsfähigkeit wegen? Ich denke der Unterhalt hält sich bei wenigen kleinen Tools in Grenzen. Und wenn es dem Kunden dient (Performance matters!), wieso nicht?

      Antworten Teilen
  5. von Jens Martsch am 12.01.2015 (18:48 Uhr)

    Ich habe mir aus mehrern Frameworks sozusagen mein eigenes gebaut:
    Als Gridsystem nutze ich Susy http://susy.oddbird.net/ welches einem alle Flexibiliäten in Bezug auf die Gridgestaltung lässt. Zusätzlich kommt dann http://bourbon.io/ mit Bitters (Typographie) zum Einsatz. Alle Tools basieren auf SASS und einzelne Bestandteile (Mixins) lassen sich nur bei Bedarf einbinden, somit bleibt das Stylesheet auch klein. Somit habe ich meine eigene Website http://www.jensmartsch.de von Bootstrap CSS (80KB) auf 18.6 KB reduzieren können, bei gleichem Aussehen. Bourbon.io bietet mit Neat auch ein eigenes Gridsystem, welches aber auf Mobile einen Nachteil hat/hatte (kein Abstand zum Bildschirmrand). Die oben erwähnte Formstone.it Library ist auch sehr gut gemacht und ich habe auch schon Komponenten daraus verwendet.
    An Stelle von jQuery kann man auch zepto.js oder CommonJS verwenden, allerdings erst ab IE10+

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?