Dobar način za pisanje responzivnog CSSa
Ukoliko se bavite veb dizajnom, a ne koristite gotova radna okruženja kao što su Bootstrap, Foundation ili neko od mnogih sličnih radnih okruženja, onda sigurno znate koliko iscrpljujuće zna da bude pisanje CSSa za svaku širinu ekrana.
Meni je u poslu dugo vremena pomagalo korišćenje CSS mreže (eng. grid) jer one eliminišu to mukotrpno prilagođavanje elemenata različitim rezolucijama ekrana. Nakon dosta radnog iskustva sa takvim implementacijama, došao sam do zaključka da je korišćenje takvih mreža medveđa usluga i da će tako pisan HTML kasnije biti veliki problem za menjanje, pogotovo na velikim projektima.
Problematika responzivnog dizajna
Opisaću dva najrasptostranjenija rešenja sa kojima možemo da pravimo responzivan veb dizajn. Prvo rešenje podrazumeva korišćenje gotove mreže u HTMLu, a drugo podrazumeva pisanje CSSa za svaki tipski element na stranici.
CSS mreža
Ovo je klasično rešenje koje mnogi front-end programeri i veb dizajneri primenjuju i podrazumeva korišćenje CSS klasa sa predefinisanim širinama elementa za svaku rezoluciju sajta.
Primer:
<div class=”col-m-1 col-t-1–2 col-d-1–3"></div>
U ovom primeru klase .col-m-1, .col-t-1–2 i .col-d-1–3, bez ulaženja u njihov CSS kod, znače da će element na stranici zauzimati 100% širine na mobilnim rezolucijama, 50% na tabletima i 33% na desktop monitorima.
Dobra strana ovog načina pisanja koda, tj. korišćenje mreže, je to što se brzo implementira i što je odlično za pravljenje prototipa sajtova jer ne morate da trošite vreme na pisanje CSSa.
Loša strana je što se naknadno teško menja jer umesto menjanja koda u CSS-u morate da menjate HTML, koji opet može da bude “zavučen” u nekom PHP ili JS šablonu, koji se opet nalazi ko-zna-gde.
Kod današnje striktne podele na front-end i back-end programere, to zna da bude prilično opterećujuće rešenje za posao jer podrazumeva da više ljudi moraju da rade na izmeni koda, ma koliko ona sitna bila.
Opisne CSS klase
Bolje rešenje je da klase elemenata na stranici grupišete i menjate prema njihovoj nameni, a ne prema njihovoj širini ili dizajnu. Postoji više škola pisanja CSSa, ali se meni najviše sviđa BEM (eng. block-element-modifier) koji su izmislili programeri iz Yandexa. Savetujem vam da pročitate u čemu se radi.
Primer:
<div class=”clanak”></div>
CSS klasa .clanak bliže objašnjava čemu ovaj HTML element služi, umesto da se fokusira na njegove dimenzije. To je i glavna namena CSSa — da on sadrži sve elemente dizajna, a da HTML služi samo za skladištenje podataka i bez dizajnerskih elemenata.
Postoji dosta dobrih strana ovakvog rešenja:
- HTML postaje lako čitljiv, a samim tim i lak za naknadne izmene
- Razdvajate dizajn od sadržaja
- Naknadne izmene dizajna su jednostavne jer podrazumevaju menjanje samo CSS-a, umesto zadiranja i u HTML, PHP ili JS šablone.
Na žalost, ovim problemi nisu potpuno rešeni, ali smo na dobrom putu da ih potpuno eliminišemo. Sada već možete da pretpostavite i koja je loša strana — moraćete da pišete više CSSa i više media query grupa za responzivan veb dizajn. Više koda znači i veću mogućnost za greške, a to u velikim projektima takođe postaje problem.
Rešenje za kompleksne responzivne stilove
Radeći na mnogim kompleksnim projektima, shvatio sam da su dobra organizacija i jednostavnost najbolji načini da se piše i naknadno održava kod. CSS je specifičan po tome što još uvek nije dovoljno sazreo da možemo da ga pišemo na način na koji to radimo u Javascriptu, PHPu ili nekom od drugih dinamičkih programskih jezika. Zbog toga pribegavamo predprocesorima sa kojima dobijamo tu dinamiku programskih jezika sa kojom možemo da pojednostavimo, olakšamo i ubrzamo naše kodiranje.
Moj omiljeni CSS preprocesor je SASS i njegova varijanta SCSS, zato što po formi zaista liči na čist CSS. Sa SASS-om dobijamo mogućnost da koristimo promenljive, funkcije, miksine (šabloni u SASSu), pa čak i eksterne podatke kroz SASS mape (funkcionalni ekvivalent JSONu). Uz SASS, pisanje CSSa postaje skoro kao i pisanje koda u PHPu :).
Drugi alat bez koga danas ne mogu da zamislim pisanje koda je Gulp procesor koji služi za obradu i unapređenje kranjeg koda. Sa njim je moguće automatski odraditi sve one dosadne stvari na koje web dizajner ne bi trebalo da troši svoje vreme — kompresiju fajlova, ubacivanje prefiksa sa pretraživače (eng. browser vendor prefix), izbacivanje dupliranh stilova i sl.
Sa SASSom i Gulp-om sam dobio alate sa kojima konačno mogu da se fokusiram na kreativnost, a ne na brojna ograničenja koja danas more front-end programere.
Problem koji sam želeo da rešim
Moj cilj, kao veb dizajnera, je da dođem do brzine i kvaliteta pisanja CSSa koji će se u produkcionom okruženju ponašati na veoma visokom nivou, a da zauzvrat ne trošim vreme na trivijalnosti koje nemaju veze sa dizajnom. Želeo sam da se sve te dosadne stvari rešavaju automatski i da uopšte više ne razmišljam o njima.
U ovom konkretnom slučaju sam želeo da napravim proces sa kojim će pisanje CSSa za responzivan dizajn biti lako, razumljivo i lako izmenljivo. Zato sam napravio mini projekat koji danas uspešno primenjujem na svim sajtovima na kojima radim.
Responsive helper
Responsive helper (https://github.com/Vlasterx/responsive-helper) je pisan u SCSSu i oslanja se na Gulp procese kako bi izbacio kod kakav je poželjno koristiti u produkciji. Ovaj program pomaže u sledećem:
- U konfiguracionom fajlu (JSON) se definišu parametri vezani za responzivni veb dizajn. Lakom izmenom ovih parametara je moguće lako prilagoditi okruženje raznim projektima.
- SCSS miksini omogućavaju lako pozivanje različitih rezolucija ili raspona rezolucija za CSS stilove. Kroz određene miksine je moguće koristiti promenljive koje mogu biti različite za svaku definisano rezoluciju.
- Gulp proces u trenutku izgradnje izbacuje suvišan kod, grupiše media query blokove i minificira krajnji rezultat
Konfiguracioni fajl
U konfiguracionom fajlu definišemo rezolucije sa parametrima za svaku. S obzirom da je responsive helper deo većeg radnog okruženja, u konfiguracionom fajlu se nalaze i parametri koji vama neće biti od prevelike važnosti, ali ćete kroz njih razumeti i potencijal ovog rešenja.
Ono što vas zanima, kada nezavisno koristite ovaj program, je sledeće:
- “name”: ime vaše rezolucije. Ime zavisi samo od vašeg sistema i navike.
- “breakpointStart”: širina od koje počinje ova rezolucija
Broj rezolucija je takođe proizvoljan. U ovom primeru je definisano 5 različitih, ali vi možete da deinišete koliko god želite.
Prilikom pokretanja gulp procesa, JSON fajl će biti pretvoren u SASS mapu u kojoj se nalaze svi ovi podaci pogodni za korišćenje u SASSu. SASS mapa je smeštena u “generated/_map_media.scss”. Na taj način SASS može da pročita vaša podešavanja, dok vam JSON fajl ostaje u izvornom obliku ukoliko želite da ga koristite i u JavaScriptu.
Kada definišete promenljive u konfiguraciji, potrebno je u vaš fajl sa stilovima da uključite sledeće linije:
@import “mixins/bit__responsive_media_mixin”;
@import “generated/_map_media”;
Sa ovim možete da počnete da pišete vaš responzivan SCSS kod.
Miksini
Responsive helper sadrži sledeće miksine:
- @mixin media($breakpoints…)
- @mixin mediaAll()
- @mixin mediaRange($breakpointFrom, $breakpointTo)
media($breakpoints…)
Ovaj miksin se koristi u slučajevima da želite da napravite nezavisne media query grupe koda sa zasebnim promenljivama. Za svaku rezoluciju koju navedete će biti napravljen zaseban media query.
Primer: https://www.sassmeister.com/gist/a61085d4406b876c422a
mediaAll()
Ovaj miksin služi da napravi stilove za svaki od media query grupa i ima smisla da se koristi samo u slučaju da želite da koristite promenljive definisane u svakoj rezoluciji.
Primer: https://www.sassmeister.com/gist/14cb5e6a3d2540ce2fa1263df3d3ec2c
Miksin mediaRange($breakpointFrom, $breakpointTo)
Ovaj miksin služi za slučajeve kada želite da optimizujete vaš CSS i da unesete smisleniji raspon rezolucija od-do. Zbog toga što obuhvata opseg, nije moguće korišćenje promenljivih, kao u prethodna dva miksina.
Primer: https://www.sassmeister.com/gist/72dd2ce30cc27fddebb0fd1632ddd9b8
Gulp proces
Gulp proces je tu da pokrene izgradnju ovog sistema i da optimizuje i izbaci kod koji ima smisla da se koristi u produkciji. Svi rasponi media query-ja će biti grupisani kako bi se izbegao suvišan kod, automatski će biti izbačen dupliran kod, ako ga ima i na kraju će sve biti minificirano.
Da biste koristili Gulp proces, potrebno je da instalirate Node.js na vaš računar i potom unutar direktorijuma gde ste klonirali ovaj git repozitorijum napišete sledeće komande
npm install gulp -g
npm install
Nakon toga, kada napišete vaš SCSS kod, pokrenite komandu “gulp” i sačekajte da se proces izgradnje završi.
Primena
Responsive helper je tu da olakša posao oko pisanja kvalitetnog responzivnog CSSa. Sa njim možete da ubrzate pisanje koda, kao i da za u svaku rezoluciju umetnete neku od ponuđenih promenljivih. Kod mene je to primenu našlo u pravljenju unikatnih css mreža za prototipe sajtova, kao i pisanju stilova za responzivnu tipografiju. S obzirom da se podešavanja lako menjaju preko konfiguracionog fajla, moguće je i bezbolno prilagođavanje različitim projektima, pa čak i integraciju sa javascriptom.
U narednim člancima ću opisati praktičnu primenu ovog sistema.
Ukoliko vam se ovaj članak svideo, a proces vam koristi u vašem dizajnu i kodiranju, posetite Bitersen stranicu na Facebook mreži jer ću tamo kačiti i ostala rešenja iz veb dizajna do kojih sam sam došao.
Za zanimljivosti iz veb dizajna, programiranja i IT-a, posetite moju stranicu posvećenu tome — Web design | Vladimir Jovanović.
Čitamo se ;)
Vladimir Jovanović
full stack designer
