Ustvarite moderne postavitve z Gridlex CSS Grid sistemom
Razvoj frontendov se je korenito izboljšal z uvedbo. \ T CSS flexbox. Zaradi tega je veliko lažje ustvarite mrežo in stolpce ki se naravno spreminjajo za odzivne postavitve.
Namesto kodiranja lastne fleksibilne mreže od začetka, je veliko lažje uporabljati orodje, kot je Gridlex. Ta brezplačna openbox knjižnica je super lahek in zelo enostavno prilagodite.
Vse kar narediš je dodajte slogovno datoteko Gridlex na svojo spletno stran in delo z mrežnimi razredi. Notranji stolpci so razred .col in vse te ovijete v notranjost .mreža posodo. To določa vsak stolpec na isti širini in ustvari enoten vmesnik.
Ta privzeta vrednost lahko preglasite z dodajanjem velikosti v vsak stolpec. Tako lahko imate en stolpec s širino 70% in še en stolpec s širino 30% (npr. Vsebina / stranska vrstica).
Našli boste tono vzorce mreže na domači strani Gridlex predstavitve v živo in odrezke kode kopirati / prilepiti v vaše spletno mesto. To je ogromna knjižnica s tako veliko neobvezne razrede za pomoč pri izdelavi najpreprostejših mrež za katero koli spletno mesto.
Vse mreže se ujemajo z a skupaj 12 mini stolpcev, tako lahko določite, koliko prostora naj sprejme vsak stolpec. To se morda zdi zmedeno, vendar je smiselno, če vidite vizualne predstavitve.
Tukaj je a primer kode uporablja se za večje omrežje z različnimi širinami:
………
Upoštevajte, da .mreža razred vsebuje vse in stolpce poskušajo razdeljen na 12 delov (v primeru bi bilo ⅓ širina za vsako). Vendar pa so fiksni stolpci razpon 2 in 6 kol tako, da je prvi stolpec uporablja samodejno širino na podlagi karkoli levo.
Z uporabo drugih dveh stolpcev lahko sklepamo, da bo ostalo le 4 stolpca (12-6-2) dosegel skupno 12. To je zelo preprosta matematika, vendar so imena razredov lahko zmedena. Ko začnete igrati z Gridlexom na projektu, boste hitro poiskali sistem poimenovanja.
Gridlex je trenutno v različici 2.x in to je nenehno posodablja na GitHub. Ker podpora brskalniku raste, bi zagotovila večjo pozornost flexboxu, saj bi več strani sprejelo ta model za mrežne strani.
Lahko celo najdeš a celotna galerija spletnih mest, ki prikazujejo Gridlex, da vidijo, kako to izgleda na spletnih mestih v živo.
Če še nikoli niste uporabili flexboksa, je Gridlex lahko zabavna knjižnica, s katero se lahko igrate. Ampak jaz tudi priporočam vaditi najprej z uporabo zabavnih flexbox iger, da preizkusite svoje znanje in vam pomagajo razumeti osnove.
Gridlex je brezplačno v repu GitHub ali pa ga povlečete preko npm ali bowerja. Ponuja popolno dokumentacijo na glavnem mestu, vključno z predstavitvami za stolpce z različno širino in medijske poizvedbe.
Imaš popoln nadzor samo v okviru modela flexbox ima nekaj razredov CSS da bi se to zgodilo! In če boste kdaj imeli hitro vprašanje ali želite deliti spletno mesto, ki ste ga zgradili z Gridlexom, lahko sporočite ustvarjalcu na Twitterju @webdevlint.
