Domača » UI / UX » Ustvarite orodja Minified Tooltips in Pure CSS z Wenk

    Ustvarite orodja Minified Tooltips in Pure CSS z Wenk

    S tako čudnim imenom ne pričakujete veliko od tega Wenk, brezplačno Knjižnica s pripomočki CSS. Pa vendar je ena najmanjših knjižnic lahko dobite merjenje pod 1KB, ko gzipped.

    Wenk uporablja čisti CSS z podatki- * lastnosti ustvariti opisi orodij v živo da se lahko preoblečete in položaj po vaših željah. Najboljše od vsega je popolnoma brezplačna knjižnica z izvorno kodo, ki je na voljo na GitHubu.

    Te lahke opisi orodij so zelo preprosti za dodajanje na vašo spletno stran. Samo potrebuješ Wenk.css mapa dodan v glavo strani, ki jih lahko prenesete iz replike GitHub.

    Lahko bi celo dodajte datoteko CDN ki je gostila na CDN GitHub. Tukaj je koda za to:

      

    Ali, če ste npm / bower fan, lahko namestite ta paket iz terminala.

    Privzete oznake orodnih vrstic nimajo veliko podatkov po meri. Pustili so te izberite položaj in širino, ampak moraš ročno spremenite CSS če jih želite oblikovati drugače.

    Morda boste na primer želeli dodati puščico CSS, ki se pojavi nad elementom opisa orodja. To je precej preprosto ustvariti, vendar morate prebrskati Wenkov slog poiščite točen CSS razred razširiti.

    Tukaj je vzorec nekaterih privzeta koda za opis orodij Wenk:

       Wenk desno!  

    Glavna ciljna stran Wenk vključuje predstavitve v živo ki jih lahko preskusite z lebdenjem. To so najosnovnejših opisov orodij boste dobili, vendar so kot nalašč za knjižnico, ki tehta manj kot kilobajt.

    Ena od glavnih stvari, ki jo je treba upoštevati, je brskalnika. Vse različice Chroma in Firefoxa delovati dobro. Enako velja za Opera 12+ in Opera Mini v8 +. Toda IE8 in IE10 se zdi imaš težave prikaz teh opisov orodij. K sreči se njihov tržni delež hitro zmanjšuje, vendar je to nekaj, kar je treba upoštevati pred uporabo.

    Še vedno sem presenečen, koliko lahko storite s tako malo KB. Knjižnica Wenk je dokaz modernega razvoja frontendov in kaže, da lahko malo napreduje.

    Lahko kopljemo skozi celotnega vira na GitHubu, skupaj z predstavitve v živo in odrezke kode nastavite in ustvarite ta opis orodij za lastno spletno mesto.