ZURB Fondacija: CSS okvir korisničkog interfejsa za responzivni front end

Dizajnerska agencija ZURB je 2010. godine kreirala CSS framework sa ciljem pokretanja usluge za olakšati stvaranje prototipova e skrati vreme razvoja. Da bi se to postiglo, izabrani su najbolji isječci, obrasci i predlošci kako bi ih spojili u Fondaciju, okvir koji je objavljen kao projekat otvorenog koda 2011. godine i koji je od tada i dalje besplatan za javnost.

Foundation je responzivni front end okvir, koji se sastoji od efikasnih HTML i CSS komponenti za konfiguraciju korisničkog sučelja (Korisnički interfejs), razne isječke i šablone, ali i brojne opcione JavaScript ekstenzije. Web okvir ima a struktura modula i dizajniran je za konfigurisanje projekata dostupnih sa različitih uređaja; se distribuira sa MIT licenca i može se preuzeti sa oba službena početna stranica budi na GitHub. Od Foundation verzije 4.0 primjenjuje se radna premisa "Mobilni na prvom mjestu", tako da od tada radimo uz pomoć nekoliko novih modula kako bismo optimizirali performanse i smanjili veličinu datoteka unutar okvira. Osim standardne verzije Fondacije, ZURB je objavio i druge varijante za razvoj email newslettera (Fondacija za e-poštu) i web stranice na jednoj stranici (Fondacija za aplikacije).

Foundation, responzivni web okvir karakteriziran svojom modularnom strukturom, koristi prije svega u fleksibilnosti. Imate mogućnost da prije preuzimanja odlučite koje komponente odabrati, a koje ne: na taj način možete sastaviti vlastitu varijantu kolekcije web kodova bez prisiljavanja da preuzimate module koji vam nisu potrebni. A ako se dogodi da shvatite da vam je potrebna komponenta koju niste odabrali u trenutku preuzimanja, možete je kasnije lako dodati u framework. Na isti način također je moguće ukloniti module koji vam više nisu korisni: tako vam je uvijek zagarantovana mogućnost da imate samo one funkcije koje smatrate zaista potrebnim za realizacija vašeg web projekta.

Za Foundation 6.0 imate više izbora 40 komponenti koji pripadaju sljedećih sedam sektora:

• rešetka: Odlučujuća komponenta za responzivni web dizajn je fleksibilan izgled mreže, sa standardnom širinom od 1200 piksela. Također možete poništiti odabir ovog modula, međutim sistem čini osnovu za dizajniranje web projekta koji je dostupan s različitih uređaja i kompatibilan u različitim skalama rezolucije. Osim toga, počevši od verzije 6.0 postoji i mogućnost odabira modula "Flex Grid" koji omogućava još fleksibilnije pozicioniranje elemenata radom na bazi CSS flexbox modela (kao što je horizontalna ili vertikalna organizacija objekata).

• Opšti: Među općim modulima (čiji je službeno i Grid dio) tu su prije svega klase float e vidljivost, zahvaljujući čemu možete defidefinirati pravila ponašanja u pogledu pozicioniranja i vidljivosti pojedinačnih elemenata; Osim toga, u ovoj oblasti ćete naći i komponentu za kreiranje formulara, kao i modul štamparije koji sadrži osnovne formate za pisanje i tekst.

• kontrola: Ovdje se nalaze svi najvažniji interaktivni elementi vašeg web projekta. Na primjer, ovo su gumbi koji jednim klikom usmjeravaju korisnika negdje drugdje ili zatvaraju odabrane elemente. Postoje i moduli s kojima možete integrirati klizače i dugmad sa on/off modom.

• navigacija: U konfiguraciji front end-a navigacijski elementi sigurno ne mogu nedostajati, pa čak i da bi se vaš projekat realizirao sa ZURB Foundation imate veliki izbor modula s kojima možete podesiti trake menija i menije (padajući meni, padajuća lista, drilldown), dodajte navigacijske putanje (breadcrumbs) ili dodajte broj stranicama.

• kontejner: Kontejneri su fantastična prilika za uključivanje različitih elemenata kao što su tekst, slike ili video zapisi u zajednički prostor. Ovdje ćete pronaći stilove za klasične widgete sadržaja kao što su padajući meniji, kartice, kaskadni sektori ili modalni dijalozi.

• medij: Unutar sekcije „Mediji“ naći ćete okvirne module koji će biti korisni za ugradnju multimedijalnih elemenata. Komponenta "Flex Video" vas, na primjer, podržavaumetanje video zapisa i osigurava da je sadržaj prilagođen različitim veličinama ekrana i vrstama rezolucije. Osim toga, tu su i komponente za pregled slika, kao i korisni savjeti za korištenje alata.

• Plug-in: Konačno možete odabrati neke vrlo korisne ekstenzije za ZURB Foundation koje vam olakšavaju rad s web frameworkom. Sa bibliotekom “Motion UI”, na primjer, imate mogućnost da preuzmete vrlo korisnu biblioteku, čak i ako je dostupna samo za Sass varijantu, što čini kreiranje UI pasaža i animacija lakim.

Također, prije preuzimanja možete odabrati da li defizavršiti neke standardne postavke za okvir. To uključuje opcije za promjenu broja ili debljine kolona i maksimalne širine Grid sistema, kao i različite postavke boja i određivanje smjera teksta (slijeva na desno ili zdesna nalijevo). Ako prvo želite testirati okvir bez proučavanja funkcioniranja pojedinačnih modula, također možete preuzeti Foundation kao punu verziju (kompletan) ili alternativno kao lakša osnovna varijanta (suštinski).

Ako ste zadovoljni mogućnostima koje nudi CSS, a zatim jednostavno prepišete stilove na preuzetom CSS fajlu, sigurno ste doneli ispravnu odluku. Međutim, Foundation framework ima još jednu posebnu osobinu: osnova CSS koda je napisana u jeziku tablica sa stilom Sass (Sintaktički sjajni listovi stilova), koji je takozvani predprocesor za CSS. Sass vam omogućava da radite na listovima stilova .scss koji se naknadno mogu kompajlirati ili transkribovati u popularne .css datoteke i koje čitači zatim čitaju i tumače.

Ako koristite Sass varijantu okvira ZURB, uživat ćete u sljedećim prednostima:

• Pojednostavljena sintaksa (Sass ili CSS), što olakšava pisanje stilova

• Mogućnost defizavršiti od modeli (Miksini) za centralno spremanje ponavljajućih formata i njihovu integraciju po želji

• Jednostavna kombinacija različitih stilova kako biste minimizirali HTTP zahtjeve

• Korišćenje varijable i funkcije za centralnu razmenu boja, udaljenosti, fontova i tako dalje

• Kod se može jednostavno strukturirati zahvaljujući Gnezdenje hijerarhijski, što vam omogućava da radite čistije bez previše nizova koda

Sass kompajler je originalno napisan u Rubyju. Međutim, ako ne koristite ovaj programski jezik, niste primorani da ga instalirate za Sass jer sa LibSassom ćete imati alternativu napisanu u C. LibSass radi sa svim operativnim sistemima koji se koriste i može se lako instalirati na Node.js radni tok, to jest, da izvršite promjene u kodu u Sass-u i da ih automatski prevedete u CSS.

Prelaskom sa verzije 5 na Foundation 6.0, ZURB je još jednom smanjio veličinu fajla celog okvira: sa svojih 60 KB CSS-a i 84 KB JavaScript-a, Foundation uživa reputaciju jedna od najjednostavnijih razvojnih platformi i pročitajte da postoji. Zahvaljujući gore spomenutoj modularnoj strukturi i određenoj slobodi prilagođavanja, čak ste u mogućnosti dodatno smanjiti veličinu okvira. U kombinaciji sa fleksibilnom mrežom i različitim atributiARIA (npr. za transpoziciju efikasne navigacije tastaturom) koju implementira ZURB, osnovni uslovi, neophodni za realizaciju web projekta koji je kompatibilan na različitim platformama i uređajima, mogu se smatrati potpuno zadovoljenim. ARIA atributi su najbolje dokumentirani i dostupni su tamo gdje namjeravate značajno optimizirati dostupnost vaše web stranice.

Ako radite sa Sass verzijom okvira, provjerite jeste li proširili svoje mogućnosti za konfiguriranje elemenata dizajna i izgleda koje umetnete. Korištenje ovih posebnih stilskih tablica nikako nije lako za početnike i zahtijeva određeni period učenja, što općenito vrijedi i za platformu. Ja također'integracija eksternih komponenti, kao i moduli i projekti fondacije u drugom okviru ili u CMS-u je veoma komplikovano. Male slabosti koje ZURB Fondacija pokazuje u poređenju sa drugim CSS okvirima, kao što je Twitter Bootstrap, su ograničena raznolikost šablona i nedostatak podrške za starije verzije Internet Explorer-a.

ZURB Fondacija prati programere od prvog prototipa do web stranice spremne za korištenje i odlikuje se prije svega vlastitim efikasnost. Ako smatrate da su neke komponente suvišne, imate opciju da ih poništite odabir bez utjecaja na funkcionalnost drugih elemenata. Zaključno, CSS okvir karakterizira posebno tanak kod koji naglašava lajtmotiv koji je ZURB izabrao "Mobile First". Zajedno sa izuzetno fleksibilan Grid sistem, koji opciono možete prilagoditi sa Sass-om, okvir je idealan za razvoj responsive front end koji imaju prednost velike brzine učitavanja podataka i velike pristupačnosti, kao i prilagođavanja različitim veličinama ekrana.

ZURB framework možete koristiti i za kreiranje prilagođenih i možda složenijih web projekata, međutim to je povezano sa značajnim preopterećenjem energije i zahtijeva dobro razumijevanje isječaka.