Modern elrendezések létrehozása a Gridlex CSS Grid rendszerrel
A frontend fejlesztése radikálisan javult a. \ T CSS flexbox. Ez sokkal könnyebbé teszi rácsok és oszlopok létrehozása ami természetesen az érzékeny elrendezésekre vált.
Ahelyett, hogy saját flexbox rácsot kódolna a semmiből, sokkal könnyebb egy olyan eszközt használni, mint például a Gridlex. Ez az ingyenes nyílt forráskódú flexbox könyvtár szuperkönnyű és nagyon könnyen testreszabható.
Csak annyit tesz adja hozzá a Gridlex stíluslapot az Ön weboldalára és dolgozzon a hálózati osztályokkal. A belső oszlopok osztályba sorolhatók .col és mindezeket a .rács tartály. Ez minden oszlopot definiál azonos szélességben és létrehoz egy egységes felületet.
Ez az alapértelmezett felülbírálható hozzáadásával osztályozási osztályok minden oszlophoz. Így egy oszlop 70% -os szélességgel és egy másik 30% -os szélességgel (például tartalom / oldalsáv) található..
Több tonna lesz rácsminták a Gridlex kezdőlapján élő demók és kódrészletek másolni / beilleszteni a webhelyére. Ez egy hatalmas könyvtár annyi választható osztályok hogy segítsen felépíteni a legegyszerűbb rácsokat bármely weboldalhoz.
Minden rács hozzáad egy összesen 12 mini-oszlop, így meghatározhatja, hogy az egyes oszlopok mennyi helyet foglaljanak el. Ez zavarónak tűnhet, de akkor van értelme, ha látod a vizuális bemutatókat.
Itt van egy kód példa nagyobb szélességű rácsra használják:
.........
Ne feledje, hogy a .rács az osztály mindent tartalmaz és az oszlopokat próbálja 12 részre oszlik (a példában ez minden esetben szélesség lenne). Azonban a rögzített oszlopok 2 és 6 cent tehát az első oszlop automatikus szélességet használ minden balra alapozva.
A másik két oszlop segítségével megállapíthatjuk, hogy 4 oszlop (12-6-2) maradna összesen 12-et ért el. Ez nagyon egyszerű matematika, de az osztálynevek zavaróak lehetnek. Miután elkezdtél játszani a Gridlex-en egy projekten, gyorsan felveszi a nevezési rendszert.
A Gridlex jelenleg a 2.x változatban és ez folyamatosan frissül a GitHubon. Mivel a böngésző támogatása növekszik, nagyobb figyelmet szentelek a flexboxnak, és több webhely fogadja el ezt a modellt az oldalhálózatokhoz.
Megtalálhatja még a teljes galéria a Gridlexet futtató webhelyek száma, hogy lássák, hogyan néz ki ez az élő webhelyekre való alkalmazás.
Ha még soha nem használta a flexboxot, akkor a Gridlex szórakoztató könyvtár lehet. De azt is javaslom, hogy először szórakoztató flexbox játékokkal gyakoroljunk, hogy teszteljék tudásodat és segítsek megérteni az alapokat.
A Gridlex ingyenesen elérhető a GitHub repo-ban vagy npm-en vagy bower-en keresztül húzhatja. Kínál teljes dokumentáció a főoldalon, beleértve a különböző szélességű oszlopok és a média lekérdezések demóit.
Neked van teljes felügyelet csak a flexbox tervezésénél néhány CSS osztályt vesz igénybe hogy megtörténjen! És ha gyors kérdése van, vagy meg szeretné osztani a Gridlex használatával létrehozott webhelyet, üzenetet küldhet az alkotónak a Twitter @webdevlint.
