Grid.css - Een minimaal rastersysteem voor webontwikkelaars

Grotere frontend frameworks zoals Bootstrap komen met hun eigen netopstellingen. Maar zij ook kom met veel bagage in de vorm van vooraf ontworpen pagina-elementen en JavaScript-componenten.

Als u op zoek bent naar een veel kleiner en gestroomlijnder rastersysteem, zult u het geweldig vinden Grid.css.

Deze gratis open-sourcebibliotheek wordt geleverd bij de traditionele 12-col grid systeem die je kunt structureren voor elke lay-out. De CSS is heel gemakkelijk te gebruiken en het bestand zelf meet slechts 560 bytes (dat is een halve KB!)

Aan de slag gaan is super eenvoudig en je hebt het alleen maar nodig een CSS-bestand toegevoegd aan je header.

Je kunt de directe downloadlink op de Grid.css-startpagina of in de officiële GitHub-repo. Je zou zelfs de onbewerkte CDN-versie om dit bestand rechtstreeks vanuit GitHub te embedden zonder het zelf te hosten.

Nu kunt u uw kolomstructuur instellen met behulp van de gewenste elementen (divs, secties, etc.).

Dit omvat over het algemeen een .rij element (de container) samen met veel interne kolomelementen. De kolomklassen gebruik nummers om hun totale ruimte in de container te definiëren, bijvoorbeeld, .col4 neemt vier kolommen van de twaalf totaal op.

Hier is een voorbeeldfragment van de demo:

Je kunt elke combinatie van kolomklassen gebruiken die je leuk vindt, net zolang als ze optellen tot 12.

Dit betekent dat je ook kunt herstructureer de pagina hoe je het ook wilt, door het te gebruiken verschillende rijcontainers. U kunt bijvoorbeeld één grote reeks gebruiken voor uw koptekst, maar twee verschillende rij- / kolominstellingen gebruiken voor uw paginolichaam.

Natuurlijk is deze bibliotheek dat wel 100% gratis en open source, dus je bent vrij om bewerkingen uit te voeren, hoe je maar wilt.

De maker, Ahmed Tarek, maakte ook Butns wat een variant is van de vele knop UI-kits die er zijn. Het past goed bij Grid.css, dus ze zijn beide uitstekende bibliotheken om op te halen bij het starten van een nieuw webproject.