Fondasyon ZURB: Entèfas itilizatè CSS kad pou yon front end reponn

Nan 2010 ajans konsepsyon ZURB te kreye yon fondasyon CSS ak objektif pou yo kòmanse yon sèvis pou fasilite kreyasyon pwototip e diminye tan devlopman yo. Pou fè sa, yo te chwazi pi bon snippets, modèl yo ak modèl yo mete yo ansanm nan Fondasyon an, fondasyon an ki te pibliye kòm yon pwojè sous louvri an 2011 e ki depi lè sa a kontinye gratis pou piblik la.

Fondasyon an se yon kad front end ki reponn, ki gen ladan konpozan HTML ak CSS efikas pou konfigirasyon UI (Koòdone itilizatè), plizyè fragments ak modèl, men tou anpil ekstansyon JavaScript opsyonèl. Fondasyon entènèt la gen yon estrikti modil e li te fèt pou konfigirasyon pwojè aksesib apati diferan aparèy; se distribye ak la Lisans MIT epi yo ka telechaje nan tou de paj dakèy ofisyèl leve GitHub. Soti nan vèsyon Fondasyon an 4.0 site travay la aplike "Mobil Premye", Se konsa, depi lè sa a nou te travay avèk èd nan plizyè modil nouvo yo optimize pèfòmans ak aleje gwosè a nan dosye nan kad la. Anplis vèsyon estanda Fondasyon an, ZURB te pibliye tou lòt varyant pou devlopman bilten imel yo (Fondasyon pou Imèl) ak sit yon paj (Fondasyon pou aplikasyon yo).

Fondasyon, fondasyon entènèt ki reponn ki karakterize pa estrikti modilè li yo, benefisye sitou nan fleksibilite. Ou gen posiblite pou deside anvan telechajman an ki konpozan yo chwazi ak kiyès ki pa: nan fason sa a ou kapab konpoze pwòp varyant Customized nan koleksyon an kòd entènèt san yo pa fòse yo telechaje modil ke ou pa bezwen. Men, si li rive ke ou reyalize ke ou bezwen yon eleman ke ou pa t 'seleksyon nan moman an nan telechaje, ou ka fasilman ajoute li nan kad la pita. Menm jan an tou, li posib pou retire modil ki pa itil ou ankò: kidonk ou toujou garanti posiblite pou w genyen sèlman fonksyon ou konsidere vrèman nesesè pou reyalizasyon pwojè entènèt ou an.

Pou Fondasyon 6.0 ou gen yon chwa nan plis 40 konpozan ki fè pati sèt sektè sa yo:

• gri: Eleman desizif pou konsepsyon entènèt ki reponn se layout fleksib Grid la, ak yon lajè 1200 piksèl ki konfòme ak estanda. Ou kapab tou deseleksyone modil sa a, sepandan sistèm nan fòme baz pou desine yon pwojè entènèt ki aksesib nan diferan aparèy ak konpatib nan diferan echèl rezolisyon. Anplis de sa, kòmanse nan vèsyon 6.0 gen tou posiblite pou chwazi modil "Flex Grid", ki pèmèt yon pozisyon menm plis fleksib nan eleman yo lè yo opere sou baz modèl CSS flexbox (tankou yon orizontal oswa vètikal). òganizasyon objè).

• jeneral: Pami modil jeneral yo (ki ofisyèlman tou Grid fè pati) gen premye ak premye klas yo. flote e vizibilite, gras a sa ou kapab defidefini règ konpòtman konsènan pozisyon ak vizibilite eleman sèl; Anplis de sa, nan zòn sa a ou pral jwenn tou yon eleman pou kreye fòm, osi byen ke modil la enprime kay ki gen fòma debaz yo pou ekri ak tèks.

• Kontwòl: Tout eleman entèaktif ki pi esansyèl nan pwojè entènèt ou a genyen isit la. Pou egzanp, sa yo se bouton ki gide itilizatè a yon lòt kote ak yon klike oswa ki fèmen eleman chwazi. Genyen tou modil ak ki ou ka entegre kurseur ak bouton ak mòd on / off.

• Navigasyon: Nan konfigirasyon an nan fen devan an, eleman navigasyon ka sètènman pa manke, kidonk menm pou pwojè ou a dwe fèt ak ZURB Foundation ou gen yon gwo varyete modil ak ki mete. ba meni ak meni (drop-down, drop-down list, drilldown), ajoute chemen navigasyon (breadcrumbs) oswa ajoute nimewo a nan paj yo.

• Veso: Kontenè yo se yon opòtinite kokenn pou mete diferan eleman tankou tèks, imaj oswa videyo nan yon espas komen. La a ou pral jwenn estil pou widgets kontni klasik tankou meni dewoulman, onglè, sektè kaskad oswa dyalòg modal.

• medya: Anndan seksyon "Medya" ou pral jwenn modil kad ki pral itil pou enkòporasyon eleman miltimedya yo. Eleman "Flex Video" la, pou egzanp, sipòte ou nanmete videyo yo epi asire w ke kontni an adapte ak diferan gwosè ekspozisyon ak kalite rezolisyon. Anplis de sa, gen tou konpozan pou imaj preview kòm byen ke konsèy itil pou itilize zouti yo.

• Ploge: Finalman ou ka chwazi kèk ekstansyon trè itil pou Fondasyon ZURB ki rann li pi fasil pou w travay ak kad entènèt la. Avèk bibliyotèk "Motion UI", pou egzanp, ou gen posiblite pou telechaje yon bibliyotèk trè itil, menm si sèlman disponib pou Variant Sass la, ki fè kreyasyon pasaj UI ak animasyon yon briz.

Epitou, anvan ou telechaje, ou ka chwazi si wi ou non defifini kèk anviwònman estanda pou fondasyon an. Sa yo enkli opsyon pou chanje kantite oswa epesè kolòn ak lajè maksimòm sistèm Grid la, ansanm ak divès kalite paramèt koulè ak detèmine direksyon tèks la (gòch a dwat oswa dwa a goch). Si ou premye vle teste fondasyon an san yo pa etidye fonksyònman modil endividyèl yo, ou ka telechaje Fondasyon tou kòm yon vèsyon konplè (ranpli) oswa altènativman kòm yon variant debaz pi lejè (Esansyèl).

Si ou satisfè ak opòtinite yo ofri pa CSS ak Lè sa a, tou senpleman transkri estil yo sou dosye a telechaje CSS, ou te siman pran bon desizyon an. Sepandan, fondasyon Fondasyon an gen yon lòt karakteristik espesyal: baz kòd CSS la ekri nan lang sass style fèy (Sentaktikman Awesome Stylesheets), ki se yon sa yo rele preproseseur pou CSS. Sass fè li posib pou ou travay sou fèy style .scss ki kapab imedyatman konpile oswa transkri nan fichye .css popilè epi ki Lè sa a, li ak entèprete pa navigatè.

Si ou itilize variant Sass nan kad ZURB, ou pral jwi avantaj sa yo:

• Sentaks senplifye (Sass oswa CSS), ki fè li pi fasil pou ekri fèy style

• Posibilite pou defifini nan modèl (Mixins) pou konsève pou fòma renouvlab santralman epi entegre yo nan volonte

• Senp konbinezon de fèy estil diferan pou minimize demann HTTP

• Sèvi ak varyab ak fonksyon fè echanj koulè, distans, polis, ak sou sa, santralman

• Kòd la ka tou senpleman estriktire gras a Nidifikasyon nan lòd yerarchize, ki pèmèt ou travay pi pwòp san twòp kòd nan kòd

Konpilatè Sass la orijinal ekri nan Ruby. Sepandan, si ou pa itilize langaj pwogram sa a, ou pa oblije enstale li pou Sass paske ak LibSass w ap gen yon altènatif ki ekri an C. LibSass travay ak tout sistèm operasyon yo itilize epi yo ka fasilman enstale sou yon Node.js. workflow, se sa ki, fè chanjman nan kòd la nan Sass epi otomatikman tradui yo nan CSS.

Avèk tranzisyon an soti nan vèsyon 5 a Fondasyon 6.0, ZURB te yon lòt fwa ankò diminye gwosè dosye a nan tout kad la: ak 60 KB li yo nan CSS ak 84 KB nan JavaScript, Fondasyon an jwi repitasyon nan kòm yon youn nan platfòm devlopman ki pi senp epi li ke gen. Mèsi a estrikti modilè ki mansyone pi wo a ak yon sèten libète nan personnalisation, ou menm kapab diminye plis gwosè a nan kad la. Nan konbinezon ak Grid fleksib la ak diferan atribiARIA (pou egzanp pou transpozisyon an nan yon navigasyon klavye efikas) aplike pa ZURB, kondisyon debaz yo, endispansab pou realizasyon an nan yon pwojè entènèt ki se konpatib sou platfòm diferan ak aparèy, ka konsidere kòm konplètman satisfè. Atribi ARIA yo pi byen dokimante epi yo disponib kote ou gen entansyon siyifikativman optimize aksè nan sit entènèt ou a.

Si w ap travay ak vèsyon an Sass nan fondasyon an, asire w ke ou elaji opsyon ou yo pou konfigirasyon eleman konsepsyon ak layout ou mete. Sèvi ak fèy style espesyal sa yo pa fasil pou inisyasyon yo epi li mande pou yon sèten peryòd aprantisaj, ki jeneralman vre pou platfòm la tou. mwen tou'entegrasyon eleman ekstèn yo, osi byen ke modil ak pwojè Fondasyon nan yon lòt kad oswa nan yon CMS se trè konplike. Ti feblès yo ke Fondasyon ZURB montre konpare ak lòt kad CSS, tankou Twitter Bootstrap, se varyete limite nan modèl ak mank de sipò pou vèsyon ki pi ansyen nan Internet Explorer.

Fondasyon ZURB akonpaye devlopè yo soti nan premye pwototip rive nan sit entènèt ki pare pou itilize a epi li karakterize sitou pa pwòp li yo. efikasite. Si ou jwenn ke kèk konpozan yo initil, ou gen opsyon pou deseleksyone yo san yo pa afekte fonksyonalite lòt eleman yo. An konklizyon, fondasyon CSS la karakterize pa yon kòd patikilyèman Mens ki mete aksan sou leitmotiv ZURB "Mobile First" te eli. Ansanm ak Sistèm Grid trè fleksib, ki ou ka opsyonèlman adapte ak Sass, fondasyon an se ideyal pou devlope fen devan reponn ki gen avantaj ki genyen yon gwo vitès nan chaj done ak gwo aksè, osi byen ke adapte yo ak diferan gwosè ekran.

Ou ka itilize tou kad ZURB pou kreyasyon pwojè entènèt Customized e petèt pi konplèks, sepandan sa a konekte ak yon surcharge enèji konsiderab epi li mande pou yon bon konpreyansyon sou snippets yo.