Korištenje CSS frameworka nije novost. No, u doba sve veće popularnosti responzivnog web dizajna (RWD) frameworci pružaju još više benefita. Kvalitetan CSS framework ili predložak (boilerplate) može značajno ubrzati proces dizajniranja i razvoja (development) te osigurati kvalitetan prikaz sadržaja web stranica na svim uređajima.
No, s toliko dostupnih verzija izbor adekvatnog frameworka i/ili boilerplate-a je sve samo ne jednostavan!
Prilikom donošenja odluke razmislite trebate li grid sustav. Ako trebate, da li će biti fiksan ili fluidan. Koliko vam je bitna podrška i/ili dokumentacija? Je li teško naučiti funkcioniranje dotičnog frameworka ?
Što je CSS framework?
Pojednostavljeno rečeno, framework je standardiziran, predefiniran aplikacijski okvir za lakše programiranje. Poanta je da ne morate za svaki projekt pisati kod ispočetka nego možete koristiti gotove podatke, kostur, te ga samo prilagođavati sukladno potrebama projekta. U velikom broju slučajeva, te su skripte odlično napisane i dokumentirane što predstavlja veliki benefit, osobito ako ste imate zadane rokove za realizaciju projekta.
Na polju web dizajna, framework se može definirati kao paket strukturalnih datoteka i mapa koje sadrže standardizirani kod (HTML, CSS, Javascript, itd.) koji mogu , kao baza ili osnova, biti korišteni za development web stranica.
Mnogo web stranica ima vrlo sličnu (ili čak identičnu) strukturu. Cilj frameworka je pružanje zajedničke strukture tako da developeri ne moraju sve raditi od nule i mogu kod koristiti više puta. Na taj način se smanjuje opseg posla i vrijeme potrebno za njegovu izvedbu.
Summa summarum: ne treba izmišljati toplu vodu (za bukvalce: jer je već izmišljena!).
Koliko vrsta frameworka postoji?
U prinicipu postoje dvije vrste frameworka: frontend i backend frameworci. Frontend framework služi za uređivanje dijela web stranice koji vidi krajnji korisnik, a backend framework za aplikacijski, administracijski dio stranice (rad sa bazom podataka, session management…)
FRONT-END
Jezici: HTML, CSS, Javascript…
Frameworci: Bootstrap, Foundation 4, Skeleton …
BACK-END
Jezici: PHP, Python, Ruby, Java…
Frameworci: Symfony, Django, Ruby on Rails….
Od čega se satoji CSS Framework ?
CSS Framework se u većini slučajeva sastoji od paketa već spomenutih strukturalnih datoteka i mapa koje sadrže standardizirani kod (HTML, CSS, Javascript, itd.). Uobičajene komponente su:
[ul type=”plus”][li]CSS kod za kreiranje grida koji služi za osnovno pozicioniranje različitih elemenata stranice[/li][li]Definicije tipografije za HTML elemente[/li][li]Rješenja za slučajeve inkompatibilnosti sa različitim web preglednicima[/li][li]Standardne CSS klase za stiliziranje komponenti korisničkog sučelja[/li][li]Media queries za adaptivni prikaz elemenata ovisno o veličini zaslona[/li][/ul] [clear]
Podjela CSS Frameworka
Iako je slijedeća podjela prilično subjektivna, ovisno o njihovoj kompleksnosti CSS frameworke možemo podijeliti na jednostavne i kompletne frameworke. Ova podjela ne govori koji su bolji a koji lošiji, nego samo kakve solucije pojedini frameowrci nude, koliko su kompleksni ili fleksibilni za rad.
Jednostavni frameworci
Jednostavne frameworke često zovu “Grid sustavi” jer nude style sheet-ove koji uređuju sustave kolona (columns) koji čine mrežu (grid). Evo nekoliko primjera kvalitetnih jednostavnih frameworka.
960 Grid System 960.gs
Base matthewhartman.github.com
Golden Grid System goldengridsystem.com
Na slici je primjer tzv. 960 grid sustava.
Kompletni frameworci
Kompletni frameworci redovito nude stiliziranu tipografiju, komplete formi, botuna, ikona i drugih komponenti za navigaciju, popovere, tooltipove, okvire za slike itd. Naš izbor pada na Bootstrap, Foundation i/ili Skeleton. Sve ovisi o tome za kakav projekt ćete ih koristiti.
Bootstrap getbootstrap.com
Foundation foundation.zurb.com
Skeleton getskeleton.com
Stranica responsive.vermilion.com donosi vrlo kvalitetnu usporedbu omiljenih nam CSS frameworka.
Bootstrap vs. Foundation vs. Skeleton
Detaljnija usporedba dostupna na responsive.vermilion.com
Prednosti i mane korištenja frameworka
Prednosti
Ubrzavanje inicijalnog podešavanja layouta
Čist i uredan kod
Rješeni česti CSS problemi
Kompatibilnost prikaza na web preglednicima
Mogućnost suradnje i/ili podrške od strane developera frameworka
Mane
Ostatci neiskorištenog koda
Potrebno je određeno vrijeme za učenje korištenja/logike frameworka
Nećete steći toliko znanja kao da ste sve odradili samostalno (od nule)
Ali to nije sve! Evo popisa još 20 CSS Frameworka
Na početku smo članka napisali da je izbor dostupnih frameworka zaista impresivan. Za kraj, izdvojili smo još 20 spomena vrijednih CSS frameworka (nabrojani nasumičnim redoslijedom).
BlueTrip
Elements
Mueller Grid System
Responsive Grid System
Gridiculous
Toast
Columnal
52 Framework
Baseline
Trebam li koristiti neki od spomenutih frameworka?
Odgovor: Frameworci mogu biti izuzetno korisni za velik broj web developera no sve ovisi o tome kakvi su zahtjevi vašeg projekta. Ukoliko krećete u realizaciju novog projekta, framework vam definitivno može olakšati posao. S druge strane, ako radite na preštrikavanju “starog”, postojećeg projekta, izazovi bi mogli zahtjevati drugačiji pristup te bi implementacija nekog od frameworka mogla biti suvišno trošenje vremena.
Skrenuli bi vam pažnju na novi smjer u kojem kreće tzv. responsive web design. Radi se o filozofiji nazvanoj “Mobile first” a svesrdno je promovira nova verzija Bootstrap-a. Radi se o tome da se ne radi prvo verzija web stranice za desktop a zatim “degradira” za mobilnu verziju već se cijeli proces odvija paralelno. Pročitajte više o ovoj temi u zanimljivom članku objavljenom na designshack.net.
Ukoliko želite sugerirati korištenje još nekog CSS frameworka ili želite podijeliti s nama vaše iskustvom s nekim od gore navedenih, ostavite svoj komentar.