Jednostavno kreirajte moderne rasporede pomoću Gridlex CSS Grid sustava
Razvojem sučelja radikalno se poboljšao uvođenjem CSS flexbox. To ga čini mnogo lakšim stvorite rešetke i stupce koje se prirodno pomiču za odgovarajući raspored.
Umjesto kodiranja vlastite fleksibilne mreže od nule, daleko je lakše koristiti alat kao što je Gridlex. Ovaj besplatni open-source flexbox knjižnica je super lagani i vrlo lako prilagoditi.
Sve što trebate učiniti je dodajte Gridlex stilsku tablicu na svoju web-stranicu i rad sa svojim klasama mreže. Unutarnji stupci zauzimaju klasu .klanac i sve ovo zamotate u a .rešetka spremnik. To definira svaki stupac na istoj širini i stvara jedinstveno sučelje.
Ova zadana postavka može se poništiti dodavanjem klasifikacija dimenzija u svaki stupac. Na taj način možete imati jedan stupac širine 70% i drugi stupac širine 30% (npr. Sadržaj / bočna traka).
Pronaći ćete mnogo tona uzorke mreže na početnoj stranici Gridlexa demonstracije uživo i isječke koda kopirati / zalijepiti na web-lokaciju. To je ogromna knjižnica s toliko mnogo izborne satnice kako bi vam pomogao da izgradite najjednostavnije rešetke za bilo koju web lokaciju.
Sve mreže se zbrajaju s a ukupno 12 mini-stupaca, tako da možete odrediti koliko prostora svaki stupac treba zauzeti. Ovo može izgledati zbunjujuće, ali ima smisla kada vidite vizualne demo snimke.
Evo jednog primjer koda koristi se za veću mrežu s različitim širinama:
.........
Imajte na umu da .rešetka klasa sadrži sve, a stupci pokušavaju podijeljen na 12 dijelova (u primjeru bi to bila for širina za svaku). Međutim, fiksni stupci raspon 2 i 6 stupaca odnosno, prvi stupac koristi automatsku širinu na temelju svega što je ostalo.
Koristeći druga dva stupca, možemo zaključiti da bi ostalo 4 stupca (12-6-2) lijevo ukupno 12. Sve je to vrlo jednostavna matematika, ali imena klasa mogu biti zbunjujuća. Kada počnete igrati s Gridlexom na projektu, brzo ćete pokrenuti sustav imenovanja.
Gridlex je trenutno u verziji 2.x I je stalno se ažurira na GitHubu. Kako podrška za preglednike raste, ja bih garantirao više pozornosti na flexbox, s više web stranica koje usvajaju ovaj model za mrežne stranice.
Možete čak pronaći i cijela galerija web-mjesta koja prikazuju Gridlex kako bi vidjeli kako to izgleda kada se primjenjuju na web-lokacije uživo.
Ako nikada prije niste koristili flexbox, Gridlex može biti zabavna knjižnica s kojom se možete igrati. Ali ja također preporučujem vježbanje prvo pomoću zabavnih flexbox igara kako biste testirali svoje znanje i pomogli vam razumjeti osnove.
Gridlex je besplatno u GitHub repo ili ga možete povući preko npm ili bower. Nudi punu dokumentaciju na glavnoj web-lokaciji, uključujući demo za stupce različitih širina i medijske upite.
Imaš potpuna kontrola preko flexbox dizajna i to samo uzima nekoliko CSS klasa da se to dogodi! A ako ikada imate brzo pitanje ili želite podijeliti web-lokaciju koju ste izgradili pomoću Gridlexa, možete poslati poruku kreatoru na Twitteru @webdevlint.
