Creëer eenvoudig moderne lay-outs met het Gridlex CSS-rastersysteem
Frontend ontwikkeling is radicaal verbeterd met de introductie van CSS-flexbox. Dit maakt het veel gemakkelijker om maak rasters en kolommen dat verschuift natuurlijk naar responsieve lay-outs.
In plaats van zelf je flexbox-raster te coderen, is het veel gemakkelijker om een tool zoals Gridlex. Deze gratis open source flexbox-bibliotheek is super-lichtgewicht en erg gemakkelijk aan te passen.
Alles wat je doet is voeg het Gridlex-stylesheet toe naar uw webpagina en werk met zijn rasterklassen. Interne kolommen nemen een klasse .col en je wikkelt ze allemaal in een .rooster houder. Dit definieert elke kolom op dezelfde breedte en creëert een uniforme interface.
Deze standaard kan worden opgeheven door toe te voegen klassen naar elke kolom. Op deze manier kunt u één kolom op 70% breedte en een andere kolom op 30% breedte (bijvoorbeeld inhoud / zijbalk).
Je zult veel vinden rastermonsters op de Gridlex-startpagina met live demo's en codefragmenten kopiëren en plakken naar uw site. Het is een enorme bibliotheek met zo veel optionele klassen om u te helpen bij het bouwen van de eenvoudigste netwerken voor elke website.
Alle rasters komen overeen met a totaal van 12 minikolommen, zodat u kunt definiëren hoeveel ruimte elke kolom in beslag moet nemen. Dit lijkt misschien verwarrend, maar het is logisch als je de visuele demo's ziet.
Hier is een codevoorbeeld gebruikt voor een groter raster met variërende breedtes:
.........
Merk op dat de .rooster klasse bevat alles en de kolommen proberen dit opgesplitst in 12 delen (in het voorbeeld zou dit ⅓ breedte zijn voor elke). Echter, de vaste kolommen span 2 en 6 cols respectievelijk, dus de allereerste kolom gebruikt een automatische breedte gebaseerd op wat er nog over is.
Als we de andere twee kolommen gebruiken, kunnen we afleiden dat er nog 4 kolommen (12-6-2) over zijn raakte in totaal 12. Het is allemaal heel eenvoudige wiskunde, maar de klassenamen kunnen verwarrend zijn. Zodra je met Gridlex aan een project begint te spelen, pak je snel de naamgeving op.
Gridlex is momenteel in versie 2.x en zijn constant worden bijgewerkt op GitHub. Naarmate de browserondersteuning groeit, zou ik meer aandacht voor flexbox garanderen, met meer sites die dit model gebruiken voor paginaroosters.
U kunt zelfs een vinden volledige galerij van websites waarop Gridlex draait om te zien hoe dit eruitziet wanneer het wordt toegepast op live websites.
Als je nog nooit eerder een flexbox hebt gebruikt, kan Gridlex een leuke bibliotheek zijn om mee te spelen. Maar ik raad ook aan eerst te oefenen met leuke flexbox-spellen om je kennis te testen en je te helpen de basisprincipes te begrijpen.
Gridlex is gratis beschikbaar in de GitHub repo of je kunt het via npm of prieel trekken. Het biedt volledige documentatie op de hoofdsite, inclusief demo's voor kolommen met verschillende breedte en mediaquery's.
Jij hebt volledige controle over het ontwerp van de flexbox en dat alleen duurt een paar CSS-klassen om het te laten gebeuren! En als je ooit een snelle vraag hebt of een site wilt delen die je met Gridlex hebt gebouwd, kun je de maker een bericht sturen op Twitter @webdevlint.
