Luo pienennetyt työkalutyypit Pure CSS ssä Wenkin kanssa

Tällaisen outo nimi, et odota paljon Wenk, ilmainen CSS-työkaluvihakirjasto. Silti se on yksi pienimmistä kirjastoista voit saada mittauksen alle 1 KB, kun gzipped.

Wenk käyttää puhdas CSS data- * määritteet luoda live-työkaluvihjeitä että voit rentoutua ja sijoittaa mieleisesi. Mikä parasta, se on täysin ilmainen kirjasto, jossa on lähdekoodi GitHubissa.

Nämä kevyet työkaluvihjeet ovat erittäin helppoja lisätä sivustoosi. Sinun tarvitsee vain Wenk.css tiedosto lisätty sivun otsikkoon, voit ladata GitHub-reposta.

Tai voit jopa lisää CDN-tiedosto joka on GitHubin CDN: ssä. Tässä on koodi:

Tai jos olet npm / bower-fani, voit asentaa tämän paketin terminaalista.

Oletustyökalun tunnisteilla ei ole paljon mukautettuja tietoja. He antoivat sinulle valitse sijainti ja leveys, mutta sinun täytyy vaihda manuaalisesti CSS jos haluat ne tyylillisesti eri tavalla.

Esimerkiksi CSS-nuoli lisätään työkaluvihkoon, joka näkyy työkalupiirielementin yläpuolella. Tämä on melko yksinkertaista luoda, mutta sinun täytyy pestä Wenk-tyylitaulukko löytää tarkka CSS-luokka laajentaa.

Tässä on esimerkki joistakin oletuskoodi Wenk-työkaluvihjeille:

   Wenk oikealla!  

Wenkin tärkein aloitussivu sisältää live-demot että voit testata leijuamalla. Nämä ovat tärkeimmät työkaluvihjeet saat, mutta he ovat täydellisiä kirjastolle, joka painaa alle kilotavun.

Yksi tärkein asia on harkita selaimen tuki. Kaikki Chrome- ja Firefox-versiot pitäisi toimia hyvin. Sama kuin Opera 12+ ja Opera Mini v8 +. Mutta IE8 ja IE10 näyttävät olevan olla ongelmia tehdä nämä työkaluvihjeet. Onneksi heidän markkinaosuutensa laskee nopeasti, mutta sitä on harkittava ennen käyttöä.

Olen edelleen hämmästynyt siitä, kuinka paljon voit tehdä niin vähän KB: itä. Wenk-kirjasto on osoitus nykyaikaisesta frontend-kehityksestä ja osoittaa, että hieman voi mennä pitkälle.

Voit kaivaa läpi koko lähde GitHubissa live-demot ja koodinpätkät Voit määrittää ja luoda nämä työkaluvihjeet omalle sivustollesi.