Ein JQuery-Plugin für die optimale Nutzung des Bildschirmplatzes
Die Optimierung der Raumnutzung auf einem Bildschirm ist eine Schlüsselkomponente für gutes Webdesign und insbesondere für Responsive Design.
Es gibt eine Reihe von Möglichkeiten, um diese Art von Herausforderung zu meistern, und eine der beliebtesten ist die automatische Anordnung von Elementen in einem übergeordneten Container. Es ist effizient und erzeugt, wenn es gut ausgeführt wird, 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 auf der Grundlage der Bildschirmgröße des Benutzergeräts dynamisch neu anordnen müssen. Das automatische Anordnen von Inhalt ist sinnvoll, da die Zeit für das Anpassen von Haltepunkten für jede Seite und jedes Element minimiert wird.
Websites mit ständig wechselnden Inhalten (wie Blogs oder Online-Shops) können besonders von der automatischen Anordnung profitieren. Schließlich möchten Sie wirklich in den Code für die Site Ihres Kunden gehen und die Breakpoints und das Layout anpassen, wenn sie sich plötzlich dazu entschließen, längere oder kürzere Blogposts 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 anderen Bibliotheken) ist die gebräuchlichste Art, diese Art von Layout zu erstellen, wahrscheinlich wegen seiner großen Kreuzkompatibilität. So funktionieren bestehende Bemühungen wie vGrid, Wookmark und Maurerarbeit.
Freetile.js ist ein neues jQuery-Plugin, das dieses dynamische, organisierte, responsive Layout ermöglicht. Es wird seit fast zwei Jahren als Motor für Assemblage und Assemblage Plus verwendet und ist nun endlich als unabhängiges Open-Source-Projekt verfügbar.
Es unterscheidet sich von bestehenden Bemühungen in diesem Bereich aus ein paar Gründen. Es ermöglicht die Verwendung beliebiger Größenelemente, ohne dass ein Spaltenraster fester Größe erforderlich ist. Dadurch müssen Sie keine für Ihre Elemente geeignete Spaltenbreite angeben. Außerdem können Sie den Algorithmus anpassen, der mögliche Einfügepositionen für jedes Element auswertet. So können Sie Präferenzen wie Ausrichtung und Nähe ausdrücken.
Es hat eine intelligente Animationsroutine, die es einfach macht zu unterscheiden, welche Elemente animiert werden sollen und welche nicht. Das Angeben der Animation innerhalb des Codes ist ebenfalls einfach.
Die Nutzung von Freetile.js ist einfach zu benutzen. Selbst wenn Sie JavaScript nicht beherrschen, sollten Sie in der Lage sein, seine Verwendung ziemlich schnell herauszufinden.
Freetile.js ist unter der BSD-Lizenz lizenziert und über GitHub verfügbar.
Hast du Freetile.js benutzt? Was hast du gebaut? Teile deine Erfahrungen in den Kommentaren.