Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

t3n 37

Schlanke Helfer: Kleine Tools statt große Frameworks

    Schlanke Helfer: Kleine Tools statt große Frameworks

(Foto: joexx/Photocase)

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.

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)

Links und Literatur

  1. Responsive Grid System
  2. Profound Grid
  3. Gridset
  4. Base CSS Framework
  5. Skeleton Boilerplate
  6. Responsive Nav
  7. Sky Mega Menu
  8. CSS3 Mega Flat Menu
  9. Move.js
  10. CSS3 Responsive Slider
  11. Menucool Video-Slider
  12. Wallop Slider
  13. TinyBox 2
  14. Lightbox JS
  15. Lytebox

Finde einen Job, den du liebst zum Thema TYPO3, JavaScript

6 Reaktionen
Jens Martsch

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
namename
namename

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

Antworten
marcel
marcel

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
fabianmarz
fabianmarz

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

Antworten
Markus S.
Markus S.

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
Frank

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

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen