Ein jQuery-Plugin zur optimalen Nutzung des Bildschirmplatzes

Die Optimierung der Platznutzung auf einem Bildschirm ist eine Schlüsselkomponente für gutes Webdesign und insbesondere für responsives Design.

Es gibt eine Reihe von Möglichkeiten, diese Art von Herausforderung anzugehen, und eine der beliebtesten ist die automatische Anordnung von Elementen innerhalb eines übergeordneten Containers. Es ist effizient und schafft bei guter Ausführung ein Layout, das sowohl optisch ansprechend als auch funktional optimal ist.

Wenn Sie eine responsive Website entwerfen, werden Sie mit ziemlicher Sicherheit feststellen, dass Sie Inhalte dynamisch neu anordnen müssen, basierend auf der Bildschirmgröße des Geräts des Benutzers. Das automatische Anordnen von Inhalten ist sinnvoll, da es den Zeitaufwand für die Anpassung von Haltepunkten für jede Seite und jedes Element minimiert.

Besonders Websites mit sich ständig ändernden Inhalten (wie Blogs oder Online-Shops) können von der automatischen Anordnung profitieren. Wollen Sie schließlich wirklich in den Code für die Website Ihres Kunden einsteigen und die Haltepunkte und das Layout anpassen, wenn er plötzlich beschließt, längere oder kürzere Blogbeiträge zu schreiben?

All dies von Grund auf zu tun, ist zeitintensiv und übersteigt die Fähigkeiten der meisten Designer, die nicht auch Entwickler sind. Stattdessen ist es sinnvoll, ein bereits vorhandenes Plugin oder Framework zu verwenden.

JavaScript (einschließlich jQuery und anderer Bibliotheken) ist die gebräuchlichste Methode zum Erstellen dieser Art von Layout, was höchstwahrscheinlich auf die umfassende Kreuzkompatibilität zurückzuführen ist. So funktionieren bestehende Bemühungen wie vGrid, Wookmark und Masonry.

Freetile.js ist ein aktuelles jQuery-Plugin, das diese Art von dynamischem, organisiertem und reaktionsfähigem Layout ermöglicht. Es wird seit fast zwei Jahren als Engine für Assemblage und Assemblage Plus verwendet und ist nun endlich als unabhängiges Open-Source-Projekt verfügbar.

Lesen:  Ankündigung des Astra Pro-Bundles: Auswählen, starten ...

Es unterscheidet sich aus mehreren Gründen von bestehenden Bemühungen in diesem Bereich. Es ermöglicht die Verwendung von Elementen beliebiger Größe, ohne dass ein Stützenraster mit fester Größe erforderlich ist. Dies erspart Ihnen die Angabe einer für Ihre Elemente passenden Spaltenbreite. Und Sie können den Algorithmus anpassen, der mögliche Einfügepositionen für jedes Element auswertet, sodass Sie Präferenzen wie Ausrichtung und Nähe ausdrücken können.

Es verfügt über eine intelligente Animationsroutine, die es einfach macht, zu unterscheiden, welche Elemente animiert werden sollen und welche nicht. Auch die Angabe der Animation im Code ist einfach.

Die Verwendung von Freetile.js ist einfach. Selbst wenn Sie sich mit JavaScript nicht auskennen, sollten Sie in der Lage sein, die Verwendung recht schnell zu verstehen.

Freetile.js steht unter der BSD-Lizenz und ist über GitHub verfügbar.

Haben Sie Freetile.js verwendet? Was hast du gebaut? Teilen Sie Ihre Erfahrungen in den Kommentaren.

Aktuelle Artikel:

Empfohlen