CSS Grid Layout Part1 - Kezdetek

Grid layout témában hetente jönnek ki a cikkek, tutoriálok és előadások. Kíváncsi voltam, hogy is néz ez ki gyakorlatban ezért kicsit beleástam magam - grafikus szemmel.
Továbbá: karácsonyi ömlengések, podcast gyanús tervek és UIthings.hu start! 😫

Prológus és UIthings.hu beta

Kicsit sűrű volt az utóbbi időszak, volt szülinap, Karácsony, költözés, minden. Végre elhatároztam, hogy tényleg szeretnék írni erről a folyamatról, ami most elindult. Elsődlegesen front-end tanulásról, ami jelenleg hobbi, illetve egy plusz skill, amit grafikusként magamra szedek és használok. Másodsorban tapasztalatszerzés és tudásmegosztás a célom, amit fontosnak tartok ebben a szakmában. Persze ezen kívül még sok minden van a tarsolyban, például podcast is. de azt majd később. 😎
Ha akár egy ember is ihletet merít vagy motiválódik esetleg tanul az írásaimból, tapasztalataimból én már nagyon fogok örülni.

Most viszont megcsináltam egy adag forralt bort, belököm a Spotify-t és kezdjük is ezt a grid dolgot, erőssen grafikus szemmel! Az első részben egy unalmas témával készültem. Azzal, hogy honnan indult ez az egész kezdeményezés.

Def

CSS Grid Layout nem más, mint egy technológia, ami segít, hogy a weboldalunk vagy appunk elemeit egyszerűen el tudjunk helyezni 2 dimenzióban a rendelkezésünkre álló területen.

Újhullámos layoutozás

Így tudnám leírni. Mára már mindenki ettől várja a megváltást és meg kell hogy mondjam, elég ígéretes és egyszerűen használható.
*2017. október 17-étől támogatja az MS Edge is, ami azért nagy szó mert az összes nagy böngésző egy éven belül megcsinálta a támogatását.

De tényleg ennyire új lenne ez a technológia?

Nem… Dr. Bert Bos szerint - aki Håkon Wium Lie-val a CSS szülő atyja is - a grid alapú elrendezés már kezdetek óta tervben volt. 1996-ban Bos, Lie és Dave Ragett előjött egy új modellel, ami az első próbálkozás volt. Ezután 2005-ben Bos publikálta az Advanced Layout Module-t. Ennek az alapjai már hasonlítanak a most használt grid rendszerre. A logikája legalább is.

Four regions, called a, b, c and d, each receive a part of a document.

Ezeket a koncepciókat viszont sose vették tényleges használatba. A dolgok akkor kezdtek felpörögni, amikor Phill Cupp egy terméket akart létrehozni a Microsoftnál. Egy olyan eszköz kellett neki, amivel hatékonyan lehet webes felületeket létrehozni. Elkezdte ütni a UI csapatot, hogy találjanak ki valamit. Ez az egész amúgy a Windows 8 tervezése közben történt, amikor rengeteg appot kellett gyártania a Microsoftnak. Cupp egyre jobban felismerte, hogy a webnek szüksége van egy eszközre, ami megkönnyíti a layout tervezést.
Cupp a Silverlightban¹ lévő grid rendszert látta a legjobbnak. Ezt kezdték el reszelgetni, végül - kapaszkodjon meg mindenki a székében - 2011 elején az Eplorer 10-be elkészült egy kezdetleges grid layout rendszer. Ment is a W3C-nek a vázlat április 7-én. A megírásban Elika J. Etemad, egy W3C-s munkatárs is segédkezett. Az alapok tehát már jópár évesek. Ez a verzió persze még nem volt az igazi, hiányoztak belőle mostani funkciók.

A diagram illustrating the relationship between the Grid element and its Tracks, Lines, Cells and Items.

Ha nézelődtünk már grid témában akkor ismernünk kell egy mogorván kinéző brit nénit, akinek Rachel Andrew a neve. Ő (is) felkarolta a gyerekcipőben járó technológiát és több cikket is írt róla. Hihetetlen ilyeneket olvasni tőle 2012-ből:

Before we get started, it is important to note that, at the time of writing, these examples work only in Internet Explorer 10. CSS3 grid layout is a module created by Microsoft, and implemented using the -ms prefix in IE10.

Sok döcögés után Rachel elkezdett megalkotni egy átfogó oldalt a gridnek, rengeteg demóval és példával. Ezen kereszül akarták bemutatni a benne rejlő lehetőségeket a közönségnek. A Grid by Example még mindig frissül és hasznos tudást rejt, ha bele akarsz kezdeni a kipróbálásába.

2013-tól a Grid Layout egyre több front-end fejlesztőt kezdett meghódítani. Létrejöttek menő projektek Codepenen és egész demó oldalak is pl. Jen Simmonstól, aki nagyon jó példákat készített, érdemes átnézni őket! (ugyanitt: fejlesztő csajok előre!! 💪)

2017 elejétől már támogatják a böngészők is a Gridet. Március 7-én a Firefox majd rögtön utána a Chrome 9-én, az Opera 21-én, a Safari 27-én. Ez igazából azért vicces mert az úgymond “új” Gridet a Microsoft implementálta legkésőbb. Korábbi Grid Layout verziókat persze támogatott az Explorer 2012-től az Edge pedig már 2015-ben. De az újat nem sikerült azonnal befogadni.

Konklúzió

A Grid Layout logikája nagyon átgondolt, könnyű értelmezni és azt kell, hogy mondjam UI designer barát. 😈
A rácsos elrendezésben egészen könnyű eligazodni, hiszen mindenhol találkozunk vele: ott van a naptárunkban az Excelben, mindenféle táblázatban. Ha tágan értelmezzük még a billentyűzetünkben is. Nem csoda, hogy gyorsan rááll az agyunk és rajzolgatások nélkül ki tudjuk számolni, hogy hány oszlop és sor kell nekünk, hogy mit hova akarunk elhelyezni stb. Különböző képernyő méretekre való tervezés mára már nem nyűg, nem kell semmilyen keretrendszer hozzá. Ha valamit át akarunk pozícionálni, akkor nem kell 600 dolgot átírnunk. A grid-areas segítségével pedig vizuálisan is értelmezhető kódot írhatunk. A Grid Layout hatékonysága elgondolkodtat, hogy lehetne-e fejlesztő közelibb drótvázazásra is használni…

Kb pár óra olvasás és tutorialozás után sikerült csinálni egy responsive layoutot vele, ami most egy kis játékként működik most a cégen belül. A következő részben ezen keresztül szeretném bemutatni az alap dolgokat.

Végezetül pedig szeretnék kellemes ünnepeket kívánni mindenkinek és sikerekben gazdag 2018-at! 🍾 Olvassatok sok szakmai cikket, blogot, hallgassatok podcastokat és próbáljatok ki új dolgokat!

Aaron Gustafson cikke alapján