Grid.css - pienin verkkojärjestelmä Web-kehittäjille

Suuremmat frontend-kehykset, kuten Bootstrap, tulevat niiden mukana omat ruudukon asetukset. Mutta he myös mukana on paljon matkatavaroita ennalta suunniteltujen sivuelementtien ja JavaScript-komponenttien muodossa.

Jos etsit paljon pienempää ja virtaviivaisempaa verkkojärjestelmää, rakastat sitä Grid.css.

Tämä ilmainen avoimen lähdekoodin kirjasto on pakattu perinteiseen 12-col-verkkojärjestelmä että voit rakentaa mihin tahansa asetteluun. CSS on todella helppokäyttöinen ja tiedosto itse mittaa vain 560 tavua (se on puoli KB!)

Aloittaminen on erittäin helppoa ja tarvitset vain yksi CSS-tiedosto lisätty otsikkoon.

Löydät sen suora latauslinkki Grid.css: n kotisivulla tai virallisessa GitHub-repossa. Voit jopa käyttää raakaa CDN-versiota upottaa tämän tiedoston suoraan GitHubista ilman, että se itse tallennetaan.

Nyt voit määrittää sarakkeen rakenteen käyttämällä haluamiasi elementtejä (divs, osiot jne.).

Tämä sisältää yleensä a .rivi elementti (kontti) yhdessä monien kanssa sisäiset sarakkeet. Sarakkeiden luokat käytä numeroita määritellä niiden koko tila säiliön sisällä, esimerkiksi, .col4 vie neljä saraketta kahdestatoista.

Tässä on esimerkinpätkä demosta:

Voit käyttää haluamaasi sarakeluokkien yhdistelmää juuri niin kauan kuin ne ovat lisää enintään 12.

Tämä tarkoittaa, että voit myös uudelleen mutta haluat, käyttämällä eri rivisäiliöt. Esimerkiksi otsikossa voi olla yksi suuri alue, mutta käytä sivusi runkoon kahta erilaista rivi- / kolmi-asetusta.

Luonnollisesti tämä kirjasto on 100% vapaa ja avoin lähdekoodi, joten voit vapaasti tehdä muutoksia haluamallasi tavalla.

Luoja, Ahmed Tarek, teki myös Butns joka on muunnelma monista painikkeista. Se parit hienosti Grid.css: n kanssa, joten he molemmat ovat erinomaisia ​​kirjastoja, jotka voivat hakea uutta verkkoprojektia.