Un plugin JQuery per l'utilizzo ottimale dello spazio dello schermo
Ottimizzare lo spazio utilizzato su uno schermo è un componente chiave del buon web design e, in particolare, del design reattivo.
Esistono diversi modi per affrontare questo tipo di sfida e uno dei più popolari è l'auto-disposizione degli elementi all'interno di un contenitore genitore. È efficiente e, quando ben eseguita, crea un layout che è visivamente accattivante e funzionalmente ottimale.
Se stai progettando un sito reattivo, troverai quasi certamente la necessità di riorganizzare il contenuto in modo dinamico, in base alle dimensioni dello schermo del dispositivo dell'utente. Il contenuto di organizzazione automatica ha senso, poiché riduce al minimo il tempo impiegato per personalizzare i punti di interruzione per ogni pagina e ogni elemento.
I siti con contenuti in costante cambiamento (come blog o negozi online) possono trarre vantaggio in particolare dall'accordo automatico. Dopo tutto, vuoi davvero entrare nel codice del sito del tuo cliente e regolare i punti di interruzione e il layout se improvvisamente decidono di iniziare a scrivere post più lunghi o più brevi?
Fare tutto questo da zero richiede molto tempo e va oltre le capacità della maggior parte dei progettisti che non sono anche sviluppatori. Invece, ha senso usare un plugin o un framework preesistente.
JavaScript (incluso jQuery e altre librerie) è il modo più comune di creare questo tipo di layout, molto probabilmente a causa della sua ampia compatibilità incrociata. Questo è il modo in cui funzionano gli sforzi esistenti come vGrid, Wookmark e Massoneria.
Freetile.js è un recente plugin jQuery che consente questo tipo di layout dinamico, organizzato e reattivo. È stato usato come motore dietro Assemblage e Assemblage Plus per quasi due anni, ed è ora finalmente disponibile come progetto open source indipendente.
È diverso dagli sforzi esistenti in questo spazio per alcuni motivi. Consente di utilizzare qualsiasi elemento di dimensione senza la necessità di una griglia di colonne di dimensioni fisse. Questo ti libera dalla necessità di specificare una larghezza di colonna appropriata per i tuoi elementi. E puoi personalizzare l'algoritmo che valuta le possibili posizioni di inserimento per ciascun elemento, consentendoti di esprimere preferenze come l'allineamento e la prossimità.
Ha una routine di animazione intelligente che rende facile distinguere tra quali elementi dovrebbero essere animati e quali no. Anche specificare l'animazione all'interno del codice è facile.
L'utilizzo di Freetile.js è semplice da usare. Anche se non sei esperto di JavaScript, dovresti essere in grado di capire il suo utilizzo abbastanza rapidamente.
Freetile.js è concesso in licenza con la licenza BSD ed è disponibile tramite GitHub.
Hai usato Freetile.js? Che cosa hai costruito? Condividi le tue esperienze nei commenti.