Ett JQuery-plugin för optimal användning av skärmutrymme
Optimera hur utrymme används på en skärm är en nyckelkomponent i bra webbdesign, och speciellt av responsiv design.
Det finns ett antal sätt att närma sig denna typ av utmaning, och en av de mest populära är auto-arrangemang av element i en förälderbehållare. Det är effektivt, och när det är väl genomfört, skapar en layout som är både visuellt tilltalande och funktionellt optimal.
Om du utformar en lyhörd webbplats kommer du säkert att hitta behovet av att omorganisera innehållet på ett dynamiskt sätt baserat på skärmens storlek på användarens enhet. Det automatiska arrangemangets innehåll är meningsfullt, eftersom det minimerar tiden för anpassning av brytpunkter för varje sida och varje element.
Webbplatser med ständigt föränderligt innehåll (som bloggar eller nätbutiker) kan särskilt dra nytta av auto-arrangemang. Tror du verkligen att du måste gå in i koden för din kunds webbplats och justera brytpunkter och layout om de plötsligt bestämmer sig för att börja skriva längre eller kortare blogginlägg?
Att göra allt detta från början är tidskrävande och bortom förmågan hos de flesta designers som inte heller är utvecklare. Istället är det meningsfullt att använda ett existerande plugin eller ramverk.
JavaScript (inklusive jQuery och andra bibliotek) är det vanligaste sättet att skapa den här typen av layout, troligtvis på grund av sin breda överkompatibilitet. Så här fungerar befintliga ansträngningar som vGrid, Wookmark och Masonry.
Freetile.js är ett nytt jQuery-plugin som möjliggör denna typ av dynamisk, organiserad och responsiv layout. Den har använts som motorn bakom Assemblage and Assemblage Plus i nästan två år, och är nu äntligen tillgänglig som ett oberoende open source-projekt.
Det skiljer sig från befintliga ansträngningar i detta utrymme av några anledningar. Det gör att alla storlekar kan användas utan att det behövs en kolonn med fast storlek. Detta frigör dig från att behöva ange en kolumnbredd som passar dina element. Och du kan anpassa algoritmen som utvärderar möjliga infogningspositioner för varje element, så att du kan uttrycka preferenser som justering och närhet.
Den har en smart animationsrutin som gör det enkelt att skilja mellan vilka element som ska animeras och vilka inte borde. Att ange animationen inom koden är också lätt.
Användning av Freetile.js är enkelt att använda. Även om du inte är skicklig i JavaScript, bör du kunna räkna ut användningen ganska snabbt.
Freetile.js är licensierad enligt BSD-licens och finns tillgänglig via GitHub.
Har du använt Freetile.js? Vad byggde du? Dela dina erfarenheter i kommentarerna.