Friska resurser för webbdesigners och utvecklare (februari 2016)

2015 var ett bra år för webben: webbteknik har varit antagen i många formfaktorer bortom för att bygga en webbplats eller en webbapplikation. Många mobila och stationära applikationer är nu byggda med hjälp av HTML, CSS och JavaScript. Detta möjliggörs av bärbarheten hos webbtekniker och bibliotek, såsom React.js, Angular and Node.js.

Så, i dagens avdrag av denna serie har vi sammanställt en handfull JavaScript och CSS-bibliotek.

Klicka för mer resurser

Hitta hela vår samling av rekommenderade resurser och de bästa webbdesign och utvecklingsverktygen som finns tillgängliga.

Platt slider

jQuery UI kommer med en samling av vanliga webbgränssnitt inklusive en Slider - ett användargränssnitt som tillåter användaren att välja ett antal numeriska värden. De Platt slider är ett webbverktyg som gör anpassningen av jQUery UI-stilen, som en gång var en mycket skrämmande uppgift, mycket enklare nu.

Utility Open-type

Utility Open-type är en samling inlämningsklasser till Ansök avancerade CSS typografiska funktioner typsnitt, små bokstäver och mycket mer. De ger i grund och botten bästa möjliga läsupplevelse för dina användare. Det bryts snyggt i äldre, osupportade webbläsare.

ResponsifyJS

En av de beryktade begränsningarna är mottagliga bilder ansikte. Det brukar skala bilden ordentligt, men detta avledar bildens huvudfokuspunkt när den är skalad ner till en mycket liten viewportstorlek.

ResponsifyJS är lättviktigt JavaScript-bibliotek som du kan använda till Ställ in koordinater för att behålla bildfokuseringen medan den ändras.

Linjär

Linjär är en linjalapp för Mac. Du kan använda linjalen för att mäta webbsidor, ta reda på storleken på ett element utan att behöva öppna DevTools eller ta reda på om ett element är perfekt centrerat. Du kan ha flera linjaler och växla från PX till EM.

StickyStack

StickyStack är ett jQuery-plugin för att skapa en stapelrulleupplevelse, när en panel når toppen av visningsporten, sitter den fast, medan ytterligare rullning drar upp nästa panel. Det är ett litet plugin med några alternativ för att konfigurera sidbehållaren, stapelsektionen samt boxens skugga på staplarna. Kolla in demoen.

Visare

Visare är jQuery-plugin för bildlampa - ett fint populärt sätt att zooma in bilder på webben. Pluggen kommer med ett överväldigande alternativ som låter dig göra det anpassa varje bit av ljuslåda gränssnitt.

Plugin ger också en uppsättning API och anpassade händelser för total kontroll över ljuslåda svar och beteende. Dessutom fungerar det till Internet Explorer 8.

DeviceMock

DeviceMock är ett JavaScript-bibliotek som tillåter dig att skapa enhetsramar eller mockups till exempel en telefon, en tablett och ett skrivbord. På samma sätt tillhandahåller biblioteket alternativ för att ställa in ramens temanfärg, storleken samt ramorienteringen.

Det kan vara ett bra alternativ för att visa upp din webb och app i stället för att använda Photoshop.

CLR

CLR är ett initiativ till Omdefiniera standard webbfärger till en mer ögonvänlig, modern färgton. Dessutom förespråkar det en uppsättning färgkombinationer för bättre tillgänglighet. Du kan distribuera dessa färger genom NPM, Gem (Ruby) och Photoshop och Illustrator färgfärger.

Colorify

Colorify är ett super lättviktigt JavaScript-bibliotek (3kb minifierat) till extrahera dominerande färger från en bild med massor av API för att manipulera färgerna. Du kan använda den extraherade färgen som platshållare medan du väntar på att bilden ska laddas helt, generera en gradientbakgrund eller justera grannytan för att möta bildfärgen.

BookBlock

BookBlock är jQuery plugin till skapa ett häfte med sid-flip-effekten. Det är ett vackert alternativ att visa flera bilder på din webbplats, särskilt om det finns en sekvens eller ett flöde som du vill visa upp.

Du kan kolla in demoen här för att få en uppfattning om hur BookBlock fungerar.