Créer des éléments de redimensionnement automatique avec Scalable.js

Si vous avez besoin faire des éléments flexibles qui remplissent automatiquement leurs conteneurs Je recommande fortement Scalable. Ce script JS gratuit à code source ouvert est idéal pour créer une conception fluide sans trop de stress.

Tout dans la bibliothèque Scalable.js est malléable, vous pouvez donc modifier le style, la taille, la position et le contenu interne de chaque conteneur. Besoin d'éléments alignés en haut ou en bas de la page? Scalable a des options pour ça.

Jetez un coup d'œil au dépôt GitHub pour en savoir plus sur son fonctionnement..

Dans sa forme la plus élémentaire, ce script utilise un élément de page cible ainsi que certaines options pour personnaliser l'affichage. Voici un exemple de code tiré directement de GitHub:

var scalable = new Scalable (containerEl, options);

Naturellement, le premier paramètre est le conteneur que vous ciblez (idéalement un élément

ou quelque chose de similaire).

Le paramètre options doit prendre un tableau de paires clé => valeur. Ces options incluent valeurs de hauteur du conteneur, largeurs min et max, ainsi que des échelles min et max (c.-à-d. combien il peut évoluer avec les éléments internes).

Consultez la page principale du projet pour une démonstration utilisable. Vous pouvez faire glisser les coins du conteneur pour redimensionner automatiquement l'élément flexible à l'intérieur. C’est plutôt cool car en dessous de cette zone, vous trouverez code utilisable prise directement de la page.

Il existe des moyens de gérer des éléments flexibles avec du CSS pur. Cependant, ces méthodes peuvent sembler obsolètes et n'offrent pas autant de contrôle que JavaScript.

Si vous souhaitez essayer ceci, prenez simplement un exemplaire de GitHub et voyez ce que vous pensez..

Scalable est toujours en développement actif mais c'est un script facile à modifier pour répondre à vos besoins..