Crea elementi di ridimensionamento automatico con Scalable.js

Se hai bisogno di rendere gli elementi flessibili che riempiono automaticamente i loro contenitori Consiglio vivamente lo scalabile. Questo script JS open source gratuito è perfetto per creare un design fluido senza troppo stress.

Tutto nella libreria Scalable.js è malleabile in modo da poter modificare lo stile, le dimensioni, la posizione e i contenuti interni di ogni contenitore. Hai bisogno di elementi allineati in cima o in fondo alla pagina? Scalabile ha opzioni per questo.

Dai un'occhiata al repository GitHub per saperne di più su come funziona.

Nella sua forma più semplice, questo script prende un elemento della pagina di destinazione insieme ad alcune opzioni per personalizzare il display. Ecco alcuni esempi di codice presi direttamente da GitHub:

var scalable = new Scalable (containerEl, options);

Naturalmente, il primo parametro è qualsiasi elemento del contenitore che stai bersagliando (idealmente a

o qualcosa di simile).

Il parametro options dovrebbe prendere un array di chiavi => coppie di valori. Queste opzioni includono valori di altezza del contenitore, larghezza min e max, insieme a scale min e max (cioè quanto può scalare con gli elementi interni).

Dai un'occhiata alla pagina principale del progetto per una demo utilizzabile. Puoi trascinare gli angoli del contenitore per ridimensionare automaticamente l'elemento flessibile all'interno. Questo è davvero bello visto che sotto quell'area troverai codice utilizzabile preso direttamente dalla pagina.

Ci sono modi per gestire elementi flessibili con un semplice CSS. Tuttavia, questi metodi possono sembrare datati e non offrono il massimo controllo di JavaScript.

Se vuoi provarlo, prendine una copia da GitHub e vedi cosa ne pensi.

Scalable è ancora in sviluppo attivo ma è uno script facile da modificare per le tue esigenze.