ZURB Foundation: ogrodje CSS uporabniškega vmesnika za odziven sprednji del

Leta 2010 je oblikovalska agencija ZURB ustvarila ogrodje CSS z namenom zagnati storitev za olajšati izdelavo prototipov e skrajšati razvojne čase. Da bi to naredili, so bili izbrani najboljši izrezki, vzorci in predloge, da bi jih združili v Foundation, okvir, ki je bil objavljen kot odprtokodni projekt leta 2011 in je od takrat še naprej brezplačen za javnost.

Foundation je odzivno sprednje ogrodje, sestavljeno iz učinkovitih komponent HTML in CSS za konfiguracijo uporabniškega vmesnika (Uporabniški vmesnik), različne izrezke in predloge, pa tudi številne neobvezne razširitve JavaScript. Spletno ogrodje ima a strukturo modula in je bil zasnovan za konfiguriranje projektov, dostopnih iz različnih naprav; se distribuira z Licenca MIT in ga je mogoče prenesti z obeh uradna domača stran biti na GitHub. Od različice Foundation 4.0 velja delovna predpostavka "Najprej mobilni", zato od takrat delamo s pomočjo več novih modulov za optimizacijo zmogljivosti in zmanjšanje velikosti datotek v okviru. ZURB je poleg standardne različice Foundation izdal tudi druge različice za razvoj e-novičnikov (Foundation for Emails) in enostranska spletna mesta (Fundacija za aplikacije).

Foundation, odzivno spletno ogrodje, za katerega je značilna modularna struktura, ima prednost predvsem v prilagodljivosti. Imate možnost, da se pred prenosom odločite, katere komponente boste izbrali in katere ne: na ta način lahko sestavite svojo različico zbirke spletne kode, ne da bi morali prenašati module, ki jih ne potrebujete. In če se zgodi, da ugotovite, da potrebujete komponento, ki je niste izbrali ob prenosu, jo lahko pozneje preprosto dodate v okvir. Na enak način je mogoče odstraniti tudi module, ki vam niso več uporabni: tako imate vedno zagotovljeno možnost, da imate samo tiste funkcije, za katere menite, da so resnično potrebne za realizacija vašega spletnega projekta.

Za Foundation 6.0 lahko izbirate več 40 komponent ki spada v naslednjih sedem sektorjev:

• Mreža: Odločilna komponenta za odzivno spletno oblikovanje je prilagodljiva postavitev mreže s standardno skladno širino 1200 slikovnih pik. Ta modul lahko tudi prekličete, vendar sistem predstavlja osnovo za oblikovanje spletnega projekta, ki je dostopen iz različnih naprav in združljiv na različnih lestvicah ločljivosti. Poleg tega je od različice 6.0 naprej na voljo tudi možnost izbire modula "Flex Grid", ki omogoča še bolj fleksibilno pozicioniranje elementov z delovanjem na podlagi modela CSS flexbox (kot je horizontalno ali vertikalno). organizacija predmetov).

• splošno: Med splošnimi moduli (katerih uradno je tudi Grid del) so v prvi vrsti razredi float e vidljivost, zahvaljujoč kateremu lahko defidoločiti pravila obnašanja glede pozicioniranja in vidnosti posameznih elementov; Poleg tega boste v tem delu našli tudi komponento za izdelavo obrazcev ter modul tiskarne, ki vsebuje osnovne formate za pisanje in besedilo.

• Nadzor: Vsi najpomembnejši interaktivni elementi vašega spletnega projekta so vsebovani tukaj. To so na primer gumbi, ki uporabnika s klikom vodijo drugam ali pa zaprejo izbrane elemente. Obstajajo tudi moduli, s katerimi lahko integrirate drsnike in gumbi z načinom vklopa / izklopa.

• ostalo: V konfiguraciji sprednjega dela zagotovo ne smejo manjkati navigacijski elementi, tako da imate tudi za vaš projekt, ki ga želite izvesti z ZURB Foundation, veliko različnih modulov, s katerimi lahko nastavite menijske vrstice in meniji (spustni meni, spustni seznam, drilldown), dodajte navigacijske poti (drobtinice) ali dodajte številko stranem.

• Posoda: Vsebniki so fantastična priložnost za vključitev različnih elementov, kot so besedilo, slike ali videoposnetki, v skupni prostor. Tukaj boste našli sloge za klasične gradnike vsebine, kot so spustni meniji, zavihki, kaskadni sektorji ali modalna pogovorna okna.

• mediji: Znotraj razdelka »Mediji« boste našli okvirne module, ki bodo uporabni za vključevanje multimedijskih elementov. Komponenta "Flex Video" vas na primer podpira privstavljanje video posnetkov in poskrbi, da je vsebina prilagojena različnim velikostim in vrstam ločljivosti prikazov. Poleg tega so na voljo tudi komponente za predogled slik ter koristni nasveti za uporabo orodij.

• Vključiti: Končno lahko izberete nekaj zelo uporabnih razširitev za ZURB Foundation, ki vam olajšajo delo s spletnim ogrodjem. S knjižnico »Motion UI« imate na primer možnost prenesti zelo uporabno knjižnico, tudi če je na voljo samo za različico Sass, zaradi česar je ustvarjanje prehodov in animacij uporabniškega vmesnika preprosto.

Prav tako lahko pred prenosom izberete, ali defidokončaj nekaj standardne nastavitve za okvir. Sem sodijo možnosti spreminjanja števila ali debeline stolpcev in največje širine sistema Grid ter različne barvne nastavitve in določanje smeri besedila (od leve proti desni ali od desne proti levi). Če želite najprej preizkusiti ogrodje, ne da bi preučili delovanje posameznih modulov, lahko prenesete tudi Foundation kot polno različico (Dokončati) ali alternativno kot lažja osnovna varianta (Bistveno).

Če ste zadovoljni s priložnostmi, ki jih ponuja CSS, in nato preprosto prepišete sloge v preneseno datoteko CSS, ste se zagotovo pravilno odločili. Vendar pa ima ogrodje Foundation še eno posebnost: osnova kode CSS je napisana v jeziku slogovnega lista Sass (Sintaktično izjemne tabele slogov), ki je tako imenovani predprocesor za CSS. Sass vam omogoča delo na slogovnih listih .scss ki jih je mogoče naknadno prevesti ali prepisati v priljubljene datoteke .css in jih brskalniki nato preberejo in interpretirajo.

Če uporabljate različico Sass ogrodja ZURB, boste uživali v naslednjih prednostih:

• Poenostavljena sintaksa (Sass ali CSS), ki olajša pisanje slogovnih listov

• Možnost defikončati za modelov (Mixins) za centralno shranjevanje ponavljajočih se formatov in njihovo poljubno integracijo

• Preprosta kombinacija različnih slogovnih listov za zmanjšanje zahtev HTTP

• Uporaba spremenljivke in funkcije centralno izmenjati barve, razdalje, pisave itd

• Kodo je mogoče preprosto strukturirati zahvaljujoč Gnezdenje v hierarhičnem redu, kar vam omogoča čistejše delo brez preveč nizov kode

Prevajalnik Sass je prvotno napisan v Rubyju. Vendar, če ne uporabljate tega programskega jezika, vam ga ni treba namestiti za Sass, saj boste z LibSass imeli alternativo, napisano v C. LibSass deluje z vsemi operacijskimi sistemi, ki se uporabljajo, in ga je mogoče preprosto namestiti na Node.js potek dela, to je za spreminjanje kode v Sass in njihovo samodejno prevajanje v CSS.

S prehodom iz različice 5 na Foundation 6.0 je ZURB znova zmanjšal velikost datoteke celotnega ogrodja: s svojimi 60 KB CSS in 84 KB JavaScripta Foundation uživa sloves ena najbolj poenostavljenih razvojnih platform in preberi, da obstaja. Zahvaljujoč prej omenjeni modularni strukturi in določeni svobodi prilagajanja lahko celo dodatno zmanjšate velikost ogrodja. V kombinaciji s prilagodljivo mrežo in različnim atributiARIA (na primer za prenos učinkovite navigacije s tipkovnico), ki jih izvaja ZURB, lahko štejemo, da so osnovni pogoji, nujni za izvedbo spletnega projekta, ki je združljiv na različnih platformah in napravah, popolnoma izpolnjeni. Atributi ARIA so najbolje dokumentirani in so na voljo tam, kjer nameravate znatno optimizirati dostopnost svojega spletnega mesta.

Če delate z različico ogrodja Sass, se prepričajte, da ste razširili svoje možnosti za konfiguracijo elementov oblikovanja in postavitev, ki jih vstavite. Uporaba teh posebnih stilnih listov za začetnike nikakor ni enostavna in zahteva določeno obdobje učenja, kar na splošno velja tudi za platformo. Jaz tudi'integracija zunanjih komponent, kot tudi moduli in temeljni projekti v drugem ogrodju ali v CMS so zelo zapleteni. Majhne slabosti, ki jih kaže ZURB Foundation v primerjavi z drugimi okviri CSS, kot je Twitter Bootstrap, so omejena raznolikost predlog in pomanjkanje podpore za starejše različice Internet Explorerja.

Fundacija ZURB spremlja razvijalce od prvega prototipa do spletne strani, pripravljene za uporabo, in jo odlikuje predvsem lastna učinkovitost. Če ugotovite, da so nekatere komponente odvečne, jih lahko prekličete, ne da bi to vplivalo na funkcionalnost drugih elementov. Skratka, za ogrodje CSS je značilna posebej vitka koda, ki poudarja glavni motiv, ki ga je izbral ZURB "Mobile First". Skupaj z izjemno prilagodljiv Grid sistem, ki ga lahko po želji prilagodite s Sassom, je ogrodje idealno za razvoj odziven sprednji del katerih prednost je visoka hitrost nalaganja podatkov in odlična dostopnost ter prilagajanje različnim velikostim zaslona.

Ogrodje ZURB lahko uporabite tudi za izdelavo prilagojenih in morda bolj kompleksnih spletnih projektov, vendar je to povezano s precejšnjo preobremenitvijo energije in zahteva dobro razumevanje snippetov.