Een JQuery-plugin voor optimaal gebruik van schermruimte
Het optimaliseren van de manier waarop ruimte op een scherm wordt gebruikt, is een belangrijk onderdeel van goed webontwerp en vooral van responsief ontwerp.
Er zijn een aantal manieren om dit soort uitdagingen aan te gaan, en een van de meest populaire is het automatisch rangschikken van elementen binnen een bovenliggende container. Het is efficiënt en maakt, wanneer het goed wordt uitgevoerd, een lay-out die zowel visueel aantrekkelijk als functioneel optimaal is.
Als u een responsieve site ontwerpt, zult u vrijwel zeker de behoefte vinden om inhoud op een dynamische manier opnieuw in te delen op basis van de schermgrootte van het apparaat van de gebruiker. Het is zinvol om inhoud automatisch in te delen, omdat het de tijd die wordt besteed aan het aanpassen van onderbrekingspunten voor elke pagina en elk element tot een minimum wordt beperkt.
Sites met constant veranderende inhoud (zoals blogs of online winkels) kunnen vooral profiteren van automatische ordening. Wil je tenslotte echt de code voor de site van je klant in moeten gaan en de breekpunten en lay-out moeten aanpassen als ze plotseling besluiten langere of kortere blogposts te gaan schrijven?
Dit alles vanuit het niets doen is tijdrovend en buiten het bereik van de meeste ontwerpers die niet ook ontwikkelaars zijn. In plaats daarvan is het logisch om een reeds bestaande plug-in of framework te gebruiken.
JavaScript (inclusief jQuery en andere bibliotheken) is de meest gebruikelijke manier om dit soort lay-out te maken, waarschijnlijk vanwege de brede cross-compatibiliteit. Dit is hoe bestaande inspanningen zoals vGrid, Wookmark en metselwerk werken.
Freetile.js is een recente jQuery-plug-in die dit soort dynamische, georganiseerde, responsieve lay-out mogelijk maakt. Het is al bijna twee jaar de motor achter Assemblage en Assemblage Plus en is nu eindelijk beschikbaar als een onafhankelijk open source project.
Het is om een paar redenen anders dan de bestaande inspanningen in deze ruimte. Hiermee kunnen elementen van elk formaat worden gebruikt zonder dat een kolomraster met vaste grootte nodig is. Hiermee hoeft u geen kolombreedte in te stellen die geschikt is voor uw elementen. En u kunt het algoritme aanpassen dat mogelijke invoegposities voor elke elementen evalueert, zodat u voorkeuren zoals uitlijning en nabijheid kunt uiten.
Het heeft een slimme animatieroutine die het gemakkelijk maakt om onderscheid te maken tussen welke elementen moeten worden geanimeerd en welke niet. Het specificeren van de animatie binnen de code is ook eenvoudig.
Gebruik van Freetile.js is eenvoudig te gebruiken. Zelfs als je niet bekwaam bent in JavaScript, zou je het gebruik ervan redelijk snel moeten kunnen achterhalen.
Freetile.js heeft een licentie onder de BSD-licentie en is beschikbaar via GitHub.
Heb je Freetile.js gebruikt? Wat heb je gebouwd? Deel uw ervaringen in de commentaren.