Skapa Auto-resizing Elements med Scalable.js

Om du behöver gör flexibla element som automatiskt fyller sina behållare Jag rekommenderar starkt skalbar. Detta gratis JS-skript med öppen källkod är perfekt för att skapa en vätskedesign utan stor stress.

Allt i biblioteket Scalable.js kan formas så att du kan ändra alla behållares stil, storlek, position och internt innehåll. Behöver elementen inrikta sig längst upp eller längst ner på sidan? Skalerbar har alternativ för det.

Ta en titt på GitHub repo för att lära dig mer om hur det fungerar.

I sin mest grundläggande form tar detta skript ett målsidaelement tillsammans med några alternativ för att anpassa skärmen. Här är några exempelkod tagna rakt från GitHub:

var skalbar = ny skalbar (containerEl, alternativ);

Naturligtvis är den första parametern beroende på vilket behållarelement du riktar in (helst a

eller något liknande).

Alternativparametern bör ta en rad nyckelord => värdepar. Dessa alternativ inkluderar behållarens höjdvärden, min och max bredder, tillsammans med min och max våg (dvs hur mycket det kan skala med de inre elementen).

Ta en titt på huvudprojektsidan för en användbar demo. Du kan dra behållarens hörn för att automatiskt ändra storlek på det flexibla objektet inuti. Det här är ganska coolt, då under det området du hittar användbar kod tas direkt från sidan.

Det finns sätt att hantera flexibla element med bara ren CSS. Men dessa metoder kan känna sig daterade och de erbjuder inte lika mycket kontroll som JavaScript.

Om du vill prova detta bara ta en kopia från GitHub och se vad du tycker.

Skalerbar är fortfarande aktiv utveckling men det är ett enkelt skript att redigera för dina behov.