Hjemmeside » Webdesign » Friske ressourcer til webdesignere og udviklere (juni 2015)

    Friske ressourcer til webdesignere og udviklere (juni 2015)

    Kan du tro, at denne serie har kørt i næsten 3 år? På kort tid har vi præsenteret mindst 30 lister over de friskeste ressourcer til webdesignere og udviklere. Og vi fortsætter med en ny kompilering for juni.

    I denne kompilation vil vi se på et par JavaScript-biblioteker til visning af skydere, glattere scrolling til datatabeller, en kølig elevator-effekt for en scroll-to-top-knap og mere.

    Lad os tjekke dem ud.

    Mellemstil Bekræft

    Medium er blevet rost for sit design; layoutet og brugergrænsefladen synes at være blevet gennemtænkt grundigt. Ud over det inspirerer det også webudviklere til at udvikle enten JavaScript- eller CSS-biblioteker til at replikere brugergrænsefladen. Medium Style Confirm er et JavaScript-bibliotek, der ligner pop-up eller dialogboksen i Medium.

    Pingvin

    Penguin er en ny front-end ramme, som du kan bruge som grundlag for dine hjemmesider. Med værktøjer som Grunt og Sass kan du nemt tilføje eller fjerne biblioteker eller CSS, som du ikke behøver ud af rammen, så det bliver så let som muligt. Det er også et godt alternativ til Bootstrap og Foundation.

    Elevator.js

    Har du set den knap på et websted, der lader dig glide op til toppen af ​​siden? De fleste knapper tager dig kun til toppen, men med Elevator.js får du en glidende accelerationseffekt som ligner en elevator, musikken og den “Ding!” lyde, når du har nået øverste etage. Virkelig sød!

    X-Instagram

    X-Instagram er et Polymer-brugerdefineret element, der trækker og viser billeder fra Instagram efter tag. Dette element gør hele processen meget lettere. Vi tilføjer blot elementet ligesom et almindeligt HTML-element og angiver tagordet som elementattributterne.

      

    Og lad magien begynde!

    CamanJS

    CamanJS er et fantastisk JavaScript-bibliotek til billedmanipulation. Den leveres med et funktionssæt, som du normalt finder i et billedredigeringsprogram. Du kan gøre billedet uskarpt, sort og hvidt, og endda øge kontrasten.

    ClusterizeJS

    Clusterize.js er JavaScript-bibliotek, der vil øge ydeevnen, når der behandles mange data i tabeller. Når du ruller ned et bord med, siger 5000 på listen, bliver erfaringen normalt langsom og rykkende. Disse JavaScript-biblioteker vil løse dette problem, hvilket gør rullehandlingen jævnt at sejle hele vejen.

    Sæt testen

    Sæt testen er en samling spørgsmål til vurdering af din færdighed og viden om CSS3, HTML5 og JavaScript. Hver test gives en række spørgsmål og begrænset tid for at fuldføre alle disse spørgsmål. Det er en god kilde til at finde ud af, hvor godt vi virkelig er med disse sprog.

    HTML-pile

    Dette er en samling af særlige native Unicode-symboler, som du kan integrere i HTML og CSS. Disse tegn omfatter pile, valuta og tegnsætning. Du vil opdage, at du nogle gange ikke behøver skrifttypeikon for at vise disse tegn.

    Flickity

    Flickity er et JavaScript-bibliotek for at vise karruseller, gallerier eller skydere på dit websted. Den er optimeret til touchscreen; Du kan glide karrusellerne uden problemer med en finger eller styrefladen, hvis du er på en bærbar computer. Det leveres også med en flok muligheder, der giver fuld tilpasning på enhver måde, du kan lide.

    Typeslab

    Typeslab er et praktisk værktøj til at oprette en plakat af plakatypen. Du skal blot skrive indholdet og vælge skrifttypen, Typeslab vil generere plakaten med det samme. Du kan derefter downloade det eller offentliggøre det i Imgur.

    MatchMedia

    Matchmedia er et bibliotek, der replikerer CSS-medieforespørgsler. Biblioteket er ikke så frisk faktisk, men det er et rigtig nyttigt bibliotek, som jeg besluttede at lægge på listen. Hvis du har brug for at lave scripting baseret på brugervisningsportstørrelsen eller medietypen, er dette det ønskede bibliotek.

    Følgende er et eksempel, der bruges til at køre script i en 320px og under visningsstørrelse:

     hvis (matchMedia ('kun skærm og (maks bredde: 320px)'). kampe)  

    Sass Burger

    Sass Burger leveres med en Mixin, der giver dig mulighed for at oprette en “hamburger” ikon og drej det til et kryds mærke med mindre besvær.

    Marx

    Marx er en samling af CSS stil regler for at gøre element stilarter mere konsekvente. Den kan tilpasses (med Sass), letvægts og arbejder ud af boksen. Et godt alternativ til allerede populære CSS nulstillingsværktøjer som Normalize.css.

    CSS.js

    CSS.js bruges til at analysere CSS-filer til stildeklaration. Biblioteket blev oprindeligt brugt til holdet på Jotform for at opbygge en WYSIWYG oplevelse til form redigering med CSS. Nu har de åbnet det for at vi alle skal bruge. Værd at spare, bare hvis du har brug for det senere.