5 Plug-ins für smarte Grids

Will man Webseiten und Apps für viele Screengrößen fit machen, scheinen smarte Algorithmen eine gute Lösung zu sein. Sie sorgen dafür, dass sich die Inhalte eines Grids stets elegant einpassen. Mittlerweile gibt es eine ganze Reihe von Plug-Ins, mittels derer man einen solchen Algorithmus in seine eigene Anwendung integriert. Wir stellen Ihnen fünf der beliebten Bibliotheken vor.

Masonry
Zu den populärsten Plug-ins für dynamische, von Pinterest inspirierte Grid-Layouts zählt Masonry, das meist für Bildergalerien eingesetzt wird. Seine einzige Funktion besteht darin, Elemente unterschiedlicher Größe vertikal zu platzieren. Masonry stammt wie die im Folgenden vorgestellten Tools Isotope und Packery vom New Yorker Developer David DeSandro.
http://masonry.desandro.com

Isotope
Isotope ist flexibler als Masonry und steht – gemessen an seiner Verbreitung auf GitHub und Stack Overflow –an zweiter Stelle der Beliebtheitsskala der Grid-Plug-ins. Isotope bietet mehr Features als Masonry, beispiels- weise Filteroptionen und Animationen, endloses Scrollen sowie anpassbare responsive Layouts. Im Unterschied zu Masonry ist Isotope eine proprietäre Software und nur für den privaten Gebrauch kostenlos.
http://isotope.metafizzy.co

Packery
Das entscheidende Feature dieser Bibliothek ist ihr sogenannter Bin-Packing-Algorithmus, der dafür sorgt, dass in einem Grid keine Lücken entstehen. Packery-Layouts lassen sich streng geometrisch, aber auch ungeordnet arrangieren. Die relativ junge Bibliothek bietet zudem mehrere Möglichkeiten, Layouts zu manipulieren. So lassen sich einzelne Elemente fest verankern, während sich andere drumherum verschieben und anordnen. Außerdem kann man Inhalte in ihrer Größe anpassen und ihre Position per Drag-and-drop ändern. Auch bei Packery handelt es sich um eine proprietäre Software.
http://packery.metafizzy.co

Gridster.js
Dieses Plug-in generiert dynamische Grid-Layouts, die sich sehr flexibel konfigurieren lassen. Die einzelnen Grid- Elemente – bei Gridster heißen sie Widgets – lassen sich per Drag-and-drop verschieben, dynamisch ergänzen oder auch entfernen. Abweichend von einer definerbaren Basisgröße kann man die Maße der Widgets individuell anpassen. Auch mehrspaltige und mehrzeilige Widgets sind möglich. Nicht nur die Größe der Widgets, auch der Abstand zwischen den einzelnen Elementen ist konfigurierbar.
http://gridster.net

Shapeshift
Das jQuery-Plug-in ergänzt das klassische Pinterest-
Layout um mehrere Features. Die einzelnen Elemente lassen sich per Drag-and-drop verschieben, wobei der Algorithmus Lücken automatisch auffüllt. Auch Elemente über mehrere Spalten sind möglich. Abstände lassen sich ebenso wie Animationen konfigurieren. Shapeshift verhält sich responsiv und ist unter MIT-Lizenz frei verfügbar.
https://github.com/McPants/jquery.shapeshift

Den ganzen Artikel darüber, wie Algorithmen die Arbeit der Designer verändern, finden Sie in  PAGE 04.2015.
Das Making-of einer gridbasierten Webseite, erstellt mit dem Plugin Isotope, finden Sie in PAGE 07.20.15.