Sătul de un HTML plictisitor, simplu și de un CSS veșnic lung? Faceți cunoștință cu Skeleton, o completare perfectă, ușoară, a CSS-ului la restul codului boilerplate pe care îl includeți deja ca punct de plecare al oricărui proiect.
Codul boilerplate este orice cod repetitiv care apare din nou și din nou pentru a obține un rezultat care pare că ar trebui să fie mult mai simplu. Și simplu, stilizarea de bază a HTML ar trebui să fie mult mai simplă.
Majoritatea bibliotecilor de stilizare front-end sau a cadrelor de lucru funcționează prin setarea stilurilor pe clase care necesită ca utilizatorul să-și amintească numele claselor pentru a adăuga stil la elementele HTML. Skeleton funcționează prin aplicarea majorității stilizării direct pe etichetele HTML. Tabele, formulare, liste, butoane, numește-le, ele le stilizează.
Începem
Skeleton vă recomandă să mergeți pe site-ul lor și să descărcați fișierul CSS notat convenabil, neminificat, gata de utilizare, astfel încât să puteți aruncați o privire chiar dvs. sub capotă. Skeleton totalizează mai puțin de 400 de linii de cod! Există, de asemenea, un link CDN convenabil pentru o configurare și mai rapidă atunci când personalizarea nu este esențială pentru proiectul dumneavoastră. Oricum ați alege să îl includeți, odată ce aveți foaia de stiluri legată în capul documentului dumneavoastră, sunteți gata de plecare!
Grila cu 12 coloane
Succesul lui Skeleton constă în a lua atributele pe care alte cadre CSS le oferă și a le face foarte simple. Prin utilizarea sistemului de grilă, aspectul browserului rămâne fluid și se adaptează automat la dimensiunea ferestrei. Pentru a utiliza coloanele, folosiți un număr și o clasă de „column” sau „columns”, sau o metodă prescurtată de „one-third”, „one-half” etc.
Skeleton stabilește lățimea maximă la 960px, care se potrivește automat ecranelor mari, mici și medii. Dacă doriți, puteți modifica lățimea maximă cu o singură linie de CSS, iar toate coloanele se vor redimensiona în consecință!
Typography
Type în Skeleton este setat la rems pentru a fi dimensionat responsiv pe baza unei singure proprietăți <html> font-size. Fontul de bază este Raleway, setat la 15rem pe o înălțime a liniei de 1,6 (15px și, respectiv, 24px).
Capitolele au o dimensionare distinctă, cu spațiere specifică a literelor, înălțime a liniei și margini.
Butoanele sunt disponibile în două opțiuni. Stilizarea standard a butoanelor există în mod inerent pentru tag-ul <button> (și orice alte elemente de formular adecvate), în timp ce a doua opțiune de buton, mai vibrantă, poate fi aplicată cu o clasă ‘.button-primary’.
Când ar trebui să folosesc Skeleton?
Skeleton este o bibliotecă CSS ușoară, receptivă și foarte personalizabilă, construită cu gândul la mobil. Nu este necesară nici o compilare sau instalare și funcționează bine cu foi de stil CSS suplimentare și framework-uri front-end. Folosiți skeleton pentru un CSS rapid și funcțional, excelent pentru demonstrații sau MVP-uri. Și pentru că are mai puțin de 12kb pentru versiunea minificată, este, de asemenea, perfect pentru situațiile în care viteza contează cel mai mult. Nu uitați, Skeleton este, în esența sa, un schelet de componente și stilizare pură. Cu o singură legătură puteți transforma un HTML plictisitor într-o pagină complet stilizată, fără a fi nevoie să sacrificați viteza sau să memorați o bibliotecă de nume de clase.
