Loo Wenkiga Pure CSS-is Minified Tooltips

Niisuguse kummalise nimega te ei oodata palju Wenk, tasuta CSS-i tööriista raamatukogu. Kuid see on üks väiksemaid raamatukogusid gzipeerimisel saad mõõtmise alla 1KB.

Wenk kasutab puhas CSS koos andmete- * atribuudid looma elavad töövihikud et te saate oma mulle meeldida. Mis kõige parem, see on täiesti tasuta raamatukogu, mille lähtekoodi on saadaval GitHubis.

Need kergekaalulised näpunäited on teie veebisaidi lisamiseks väga lihtsad. Sa pead lihtsalt Wenk.css faili lisatakse teie lehe päisele, saate alla laadida GitHub repost.

Või võite isegi CDN-faili lisamine mis asub GitHubi CDN-is. Siin on kood:

Või kui sa oled npm / bower fänn, saate selle paketi installida terminalist.

Vaikimisi töövihikuvalikutel pole palju kohandatud andmeid. Nad lased sulle valige asukoht ja laius, aga sa pead CSS-i käsitsi muutmine kui soovite neid teistmoodi kujundada.

Näiteks võiksite tööriista elemendi kohal ilmuvale tööriista juurde lisada CSS-nool. See on üsna lihtne luua, kuid peate Wenki stiilitabeli küündima leida täpne CSS klass laiendada.

Siin on mõned näidised vaikekoodi Wenki tööriistade jaoks:

   Wenk paremal!  

Wenki peamine sihtleht sisaldab live demod et saate testida hoveringuga. Need on kõige elementaarsemad töövahendid saate, kuid nad sobivad ideaalselt raamatukogu jaoks, mis kaalub alla kilobaiti.

Üks peamine asi, mida kaaluda on brauseri tugi. Kõik Chrome'i ja Firefoxi versioonid peaks töötama hästi. Sama kehtib Opera 12+ ja Opera Mini v8 + puhul. Aga IE8 ja IE10 tunduvad olevat teil on probleeme nende töövahendite tegemine. Õnneks langeb nende turuosa kiiresti, kuid enne kasutamist on see midagi kaaluda.

Ma olen endiselt üllatunud, kui palju saate teha nii vähe KB-sid. Wenki raamatukogu annab tunnistust tänapäeva esiplaanide arengust ja näitab, et vähe võib minna kaugele.

Sa võid kaevata kogu allikas koos GitHubiga live demod ja koodilõigud seadistada ja luua neid tööriistu oma saidile.