Väsynyt tylsästä, tavallisesta HTML:stä ja ikuisesti pitkästä CSS:stä? Tutustu Skeletoniin, täydelliseen, kevyeen CSS-lisäykseen muuhun boilerplate-koodiin, jonka jo sisällytät jokaisen projektin lähtökohdaksi.
Boilerplate-koodi on mitä tahansa toistuvaa koodia, joka näkyy yhä uudelleen ja uudelleen saadaksesi aikaan jonkin lopputuloksen, joka näyttää siltä, että sen pitäisi olla paljon yksinkertaisempaa. Ja yksinkertaisen, HTML:n perusmuotoilun pitäisi olla paljon yksinkertaisempaa.
Suuri osa rintamamiestyylikirjastoista tai -frameworkeista toimii asettamalla tyylit luokkiin, jotka edellyttävät, että käyttäjän on muistettava luokkien nimet tyylin lisäämiseksi HTML-alkioihin. Skeleton toimii soveltamalla suurimman osan muotoilusta suoraan HTML-tunnisteisiin. Taulukot, lomakkeet, luettelot, painikkeet, kaikki mitä haluat, ne tyylitellään.
Aloittaminen
Skeleton suosittelee, että menet heidän verkkosivulleen ja lataat sieltä kätevästi noteeratun, muokkaamattoman, käyttövalmiin CSS-tiedoston, jonka avulla voit itse vilkaista konepellin alle. Skeletonissa on yhteensä alle 400 riviä koodia! Tarjolla on myös kätevä CDN-linkki vielä nopeampaa käyttöönottoa varten, kun mukauttaminen ei ole projektisi kannalta kriittistä. Miten tahansa päätätkin sisällyttää sen, kun olet linkittänyt tyylitaulukon dokumenttisi otsikkoon, olet valmis aloittamaan!
The 12-Column Grid
Skeletonin menestys piilee siinä, että se ottaa käyttöön attribuutteja, joita muut CSS-kehykset tarjoavat, ja tekee niistä tappavan yksinkertaisia. Käyttämällä grid-järjestelmää selaimen ulkoasu pysyy sujuvana ja mukautuu automaattisesti ikkunan koon mukaan. Voit hyödyntää sarakkeita käyttämällä numeroa ja luokkaa ’column’ tai ’columns’ tai lyhennettyä tapaa ’one-third’, ’one-half’ jne.
Skeleton asettaa maksimileveyden 960px:iin, mikä mukautuu automaattisesti suurille, pienille ja keskikokoisille näytöille. Halutessasi voit muuttaa maksimileveyttä yhdellä rivillä CSS:ää, ja kaikki sarakkeet muuttuvat koon mukaan!
Typografia
Skeletonissa fontti asetetaan rems:ksi, jotta se on responsiivisesti mitoitettavissa yhden ainoan <html> fonttikoko-ominaisuuden perusteella. Fonttipohja on Raleway, joka on asetettu 15rem:iin yli 1,6 rivikorkeuden (15px ja 24px vastaavasti).
Kirjoitusotsikoilla on oma erillinen mitoituksensa, jossa on määritetty erityinen kirjainväli, rivikorkeus ja marginaalit.
Painikkeita on kaksi vaihtoehtoa. Normaali painikkeiden muotoilu on olemassa luonnostaan <button>-tagille (ja muille sopiville lomake-elementeille), kun taas toista, elävämpää painikevaihtoehtoa voidaan soveltaa ’.button-primary’-luokalla.
Milloin minun pitäisi käyttää Skeletonia?
Skeleton on kevyt, responsiivinen ja erittäin mukautuva CSS-kirjasto, joka on luotu mobiililaitteita ajatellen. Kääntämistä tai asentamista ei tarvita lainkaan, ja se toimii hyvin muiden CSS-tyyliluetteloiden ja front-end Frameworksin kanssa. Käytä luurankoa nopeaan, toimivaan CSS:ään, joka sopii erinomaisesti demoihin tai MVP:hen. Ja koska sen pienennetty versio on alle 12 kilotavua, se on täydellinen myös silloin, kun nopeus on tärkeintä. Muista, että Skeleton on pohjimmiltaan puhtaiden komponenttien ja muotoilun luuranko. Yhdellä linkillä voit muuttaa tylsän HTML:n täysin tyylitellyksi sivuksi ilman, että sinun tarvitsee uhrata nopeutta tai opetella ulkoa kirjastoa täynnä luokkien nimiä.
