Grid.css - Un sistem minimal de rețea pentru dezvoltatorii web

Cadrele de frontieră mai mari, cum ar fi Bootstrap, vin cu ele propriile configurații de rețea. Dar, de asemenea, ei vin cu o mulțime de bagaje sub formă de elemente de pagină pre-proiectate și componente JavaScript.

Dacă sunteți în căutarea unui sistem mult mai mic și raționalizat, atunci vă place Grid.css.

Această bibliotecă gratuită open source vine ambalată cu tradiționalul Sistem de rețea cu 12 coli pe care le puteți structura pentru orice aspect. CSS este foarte ușor de utilizat și fișierul însuși doar măsoară 560 de octeți (este jumătate de KB!)

Noțiuni de bază este super ușor și aveți nevoie doar un fișier CSS adăugat la antetul dvs..

Puteți găsi link direct de descărcare pe pagina de pornire Grid.css sau în repo GitHub oficial. Chiar ai putea folosi versiunea brută CDN pentru a încorpora acest fișier direct de la GitHub fără să îl găzduiți singur.

Acum, puteți configura structura coloanei folosind orice elemente pe care le doriți (divs, secțiuni etc.).

Aceasta include, în general, a .rând element (container) împreună cu mulți elementele coloanei interne. Clasele coloanelor utilizați numere pentru a defini spațiul lor total în interiorul containerului, de exemplu, .col4 ocupă patru coloane din cele douăsprezece total.

Iată un exemplu fragment din demo:

Puteți folosi orice combinație de clase de coloane care vă place, doar atâta timp cât acestea adăugați până la 12.

Acest lucru înseamnă că puteți, de asemenea restructurați pagina totuși doriți, folosind diferite containere de rând. De exemplu, ați putea avea o singură deschidere mare pentru antetul dvs., dar utilizați două configurații rând / col diferite pentru corpul paginii.

Bineînțeles, această bibliotecă este 100% gratuit și sursa deschisa, astfel încât să puteți face modificări oricum doriți.

Creatorul, Ahmed Tarek, a făcut și Butns care este o variantă a multor seturi de butoane UI aflate acolo. Aceasta perechi frumos cu Grid.css, astfel încât ambele biblioteci excelente să poată fi luate la începutul unui nou proiect web.