Izveidojiet mūsdienīgus izkārtojumus ar Gridlex CSS režģa sistēmu
Priekšplāna attīstība radikāli ir uzlabojusies, ieviešot CSS flexbox. Tas padara to daudz vieglāku izveidot tīklus un kolonnas kas dabiski pāriet uz atsaucīgiem izkārtojumiem.
Tā vietā, lai kodētu savu flexbox režģi no nulles, ir daudz vieglāk izmantot tādu rīku kā Gridlex. Šī bezmaksas atvērtā koda flexbox bibliotēka ir super viegls un ļoti viegli pielāgot.
Viss, kas jums jādara, ir pievienojiet Gridlex stilu jūsu mājas lapā un strādāt ar tās tīkla klasēm. Iekšējās kolonnas uzņem klasi .kol un jūs visus tos ietinat a .režģis konteiners. Tas definē katru kolonnu tādā pašā platumā un izveido vienotu saskarni.
Šis noklusējums var ignorēt pievienojot lieluma klases katrai slejai. Tādā veidā jums var būt viena kolonna 70% platumā un cita kolonna 30% platumā (piemēram, saturs / sānjosla).
Jūs atradīsiet tonnas tīkla paraugus Gridlex mājas lapā ar dzīvot demonstrācijas un koda fragmenti kopēt / ielīmēt savā vietnē. Tā ir milzīga bibliotēka ar tik daudziem izvēles klases lai palīdzētu jums izveidot vienkāršākos tīklus jebkurai vietnei.
Visi tīkli ir līdz kopā 12 mini kolonnas, lai jūs varētu noteikt, cik daudz vietas katrai kolonnai vajadzētu aizņemt. Tas var šķist mulsinoši, bet tas ir jēga, kad redzat vizuālos demonstrējumus.
Lūk, a koda piemērs izmanto lielākam režģim ar dažādiem platumiem:
………
Ņemiet vērā, ka .režģis klasē ir viss un kolonnas mēģinājums sadalīts 12 daļās (šajā piemērā tas būtu ⅓ platums katram). Tomēr fiksētās kolonnas 2 un 6 centi attiecīgi pirmā kolonna izmanto automātisko platumu pamatojoties uz to, kas palicis.
Izmantojot pārējās divas slejas, mēs varam secināt, ka būs 4 kolonnas (12-6-2) kopā sasniedza 12. Tas viss ir ļoti vienkāršs, bet klases nosaukumi var būt mulsinoši. Kad sāksiet spēlēt ar Gridlex uz projektu, jūs ātri saņemsiet nosaukumu sistēmu.
Gridlex pašlaik ir versijā 2.x un tas ir pastāvīgi atjaunina GitHub. Palielinoties pārlūkprogrammas atbalstam, es garantētu lielāku uzmanību flexbox, vairāk vietņu pieņemot šo modeli lapu tīkliem.
Jūs pat varat atrast pilna galerija vietnēs, kurās darbojas Gridlex, lai redzētu, kā šis izskats tiek izmantots tiešraides tīmekļa vietnēs.
Ja jūs nekad neesat izmantojis flexbox pirms tam, Gridlex var būt jautra bibliotēka. Bet es arī iesaku praktizēt vispirms, izmantojot jautras flexbox spēles, lai pārbaudītu savas zināšanas un palīdzētu saprast pamatus.
Gridlex ir pieejams bez maksas GitHub repo vai jūs varat to vilkt caur npm vai bower. Tā piedāvā pilnīga dokumentācija galvenajā vietnē, tostarp demo par dažādiem platumiem un mediju vaicājumiem.
Tev ir pilnīga kontrole virs flexbox dizaina un tikai aizņem dažas CSS klases lai tas notiktu! Un, ja jums kādreiz ir ātrs jautājums vai vēlaties koplietot vietni, kuru izveidojāt, izmantojot Gridlex, varat ziņot radītājam vietnē Twitter @webdevlint.
