Mājas lapa » Web dizains » Svaigi resursi tīmekļa dizaineriem un izstrādātājiem (2015. gada jūnijs)

    Svaigi resursi tīmekļa dizaineriem un izstrādātājiem (2015. gada jūnijs)

    Vai jūs varat uzskatīt, ka šī sērija darbojas gandrīz 3 gadus? Šajā īsā laikā mēs esam parādījuši vismaz 30 jaunāko resursu web dizaineriem un izstrādātājiem sarakstus. Un mēs turpināsim to turpināt ar jaunu kompilāciju jūnijā.

    Šajā apkopojumā mēs aplūkosim dažas JavaScript bibliotēkas, lai parādītu slīdņus, vienmērīgāku datu tabulu ritināšanu, atdzist lifta efektu ritināšanas uz augšu pogai un vairāk.

    Pārbaudīsim tos.

    Vidējs stils Apstipriniet

    Medijs ir slavēts par tā dizainu; šķiet, ka izkārtojums un lietotāja interfeiss ir rūpīgi pārdomāts. Papildus tam tas arī iedvesmo tīmekļa izstrādātājus izstrādāt vai nu JavaScript vai CSS bibliotēkas, lai atkārtotu lietotāja interfeisu. Vidējā stila apstiprināšana ir viena JavaScript bibliotēka, kas atgādina uznirstošo logu vai dialoglodziņu vidē.

    Pingvīns

    Penguin ir jauns front-end ietvars, ko jūs varētu izmantot kā savu tīmekļa vietņu pamatu. Ar tādiem instrumentiem kā Grunt un Sass jūs varat viegli pievienot vai noņemt bibliotēkas vai CSS, kas nav nepieciešamas no sistēmas, padarot to pēc iespējas vieglāku. Tā ir arī laba alternatīva Bootstrap un Foundation.

    Elevator.js

    Vai esat redzējuši šo pogu tīmekļa vietnē, kas ļauj slīdēt līdz lapas augšdaļai? Lielākā daļa pogas tikai aizvedīs jūs uz augšu, bet ar Elevator.js jūs saņemat bīdāmo paātrinājuma efektu, kas ir līdzīgs liftam, mūzikai un “Ding!” skaņa, kad esat sasniedzis augšējo stāvu. Patiešām jauki!

    X-Instagram

    X-Instagram ir polimēra pielāgots elements, kas velk un parāda attēlus no Instagram ar tagu. Šis elements padara visu procesu daudz vieglāku. Mēs vienkārši pievienojam elementu tāpat kā parastu HTML elementu un norādām taga atslēgvārdu kā elementa atribūtus.

      

    Un ļaujiet maģijai sākt!

    CamanJS

    CamanJS ir lieliska JavaScript bibliotēka attēlu manipulācijām. Tas ir aprīkots ar funkciju kopu, ko jūs parasti atradīsiet attēla redaktorā. Jūs varat pagriezt attēla izplūšanu, melnbaltu un pat palielināt kontrastu.

    ClusterizeJS

    Clusterize.js ir JavaScript bibliotēka, kas palielinās veiktspēju, strādājot ar daudziem datiem tabulās. Kad jūs ritiniet lejup tabulu ar, piemēram, 5000, sarakstā, parasti pieredze piedzīvos laggy un jerky. Šī JavaScript bibliotēka risinās šo problēmu, padarot ritināšanas darbību vienmērīgu.

    Sēdiet Testu

    Sēdiet Testu ir jautājumu kopums, lai novērtētu jūsu prasmes un zināšanas par CSS3, HTML5 un JavaScript. Katram testam tiek uzdoti vairāki jautājumi un ierobežots laiks, lai pabeigtu visus šos jautājumus. Tas ir labs avots, lai uzzinātu, cik labi mēs esam ar šīm valodām.

    HTML bultiņas

    Šis ir speciālo vietējo Unicode simbolu kopums, ko varat iegult HTML un CSS. Šīs rakstzīmes ietver bultiņas, valūtu un pieturzīmes. Jūs atradīsiet, ka dažkārt jums nav nepieciešams fontu ikona, lai parādītu šīs rakstzīmes.

    Flickity

    Flickity ir JavaScript bibliotēka, lai jūsu tīmekļa vietnē parādītu karuseļus, galerijas vai slīdņus. Tas ir optimizēts skārienekrānam; jūs varat slīdēt karuseļus bez piepūles ar pirkstu vai trackpad, ja atrodaties klēpjdatorā. Tas arī nāk ar ķekars opcijas, kas ļauj pilnībā pielāgot jebkādā veidā.

    Typeslab

    Typeslab ir ērts līdzeklis, lai izveidotu plāksnes tipa plakātu. Vienkārši rakstiet saturu un atlasiet fontu, Typeslab nekavējoties izveidos plakātu. Pēc tam varat to lejupielādēt vai publicēt Imgur.

    MatchMedia

    Matchmedia ir bibliotēka, kas atkārto CSS mediju vaicājumus. Bibliotēka nav tik svaiga, bet tiešām noderīga bibliotēka, kuru es nolēmu iekļaut sarakstā. Ja jums ir nepieciešams veikt skriptu, pamatojoties uz lietotāja skata loga izmēru vai apdrukājamo materiālu veidu, tas ir vajadzīgā bibliotēka.

    Tālāk sniegts piemērs, kas tiek izmantots, lai palaistu skriptu 320px un zem skatītāja izmēra:

     ja (matchMedia ("tikai ekrāns un (maksimālais platums: 320px)") atbilst)  

    Sass Burger

    Sass Burger nāk ar Mixin, kas ļauj jums izveidot a “Hamburger” ikona un pārvērst to par krustzīmi ar mazāk problēmu.

    Marx

    Marx ir CSS stila noteikumu kolekcija, lai padarītu elementu stilu konsekventāku. Tas ir pielāgojams (ar Sass), viegls un darbojas ārpus kastes. Laba alternatīva jau populāriem CSS atiestatīšanas rīkiem, piemēram, Normalize.css.

    CSS.js

    CSS.js tiek izmantota, lai analizētu CSS failus stila deklarācijai. Sākotnēji bibliotēka tika izmantota Jotform komandai, lai veidotu WYSIWYG pieredzi veidlapu rediģēšanai ar CSS. Tagad tie ir atvērti, lai mēs visi to izmantotu. Vērts ietaupīt, tikai gadījumā, ja jums tas būs nepieciešams vēlāk.