Construiți site-uri Web Superfast cu Fundația 5 [Ghid]
Folosirea unui cadru frontal vă poate îmbunătăți fluxul de lucru în multe domenii. Poate vă ajuta să urmați principiile moderne de design cum ar fi abordarea mobilă-primă, marcajul semantic și designul receptiv. Poti să profite de multe elemente CSS și JavaScript gata de utilizat și semnificativ accelerați procesul de dezvoltare, eliberând mai mult timp pentru a vă concentra asupra designului vizual și utilizator.
Zurb Foundation 5 este unul dintre cele mai puternice cadre de frontend aflate pe piață. Este logic construit, ușor de utilizat și complet gratuit. Acesta vă permite să utilizați o o rețea flexibilă CSS acea facilitează crearea unui aspect curat și ușor de utilizat. Cadrul Fundației este, de asemenea, puternic testat, astfel încât acesta să aibă grijă de compatibilitatea încrucișată între browser și cross-device.
În acest tutorial vă voi arăta cum puteți construi un site super-rapid cu Fundația Zurb 5. Puteți vedea rezultatul final pe pagina demo.
Voi crea layout-ul site-ului, sarcina de a adăuga elemente de design subtile vă așteaptă. Site-ul pe care îl vom crea împreună în acest tutorial va realiza visul designerului modern UX: acesta va fi receptiv, mobil, primul, ușor de utilizat și semantic.
Datorită lungimii acestui ghid, aici sunt scurtăturile pentru a ajunge la secțiunea dorită rapid:
- Descărcarea Fundației 5
- Înțelegerea grila
- Atunci când utilizați clasele mari-N, medie-N și mic-N
- Adăugarea barei de meniu Top
- Populația părții principale
- Adăugarea unui panou pentru posturile populare
- Adăugarea a 3 postări suplimentare către panoul popular
- Creează CSS
- Adăugarea unui conținut suplimentar
- Adăugarea paginii
- Populând bara laterală
- Formularul de buletin informativ
- Flex Video
- Meniul Bara laterală
- Concluzie
1. Descărcarea Fundației 5
Puteți descărca Fundația 5 în 4 forme diferite:
- codul complet
- o versiune mai ușoară, cu doar codul esențial
- o versiune personalizată în care puteți personaliza ceea ce aveți nevoie și ce nu
- o versiune Sass dacă doriți să setați variabilele și mixurile în SCSS.
În acest tutorial voi alege codul complet cu CSS de vanilie, dar, desigur, puteți alege orice alte versiuni dacă doriți să simplificați site-ul și să utilizați doar ceea ce aveți cu adevărat nevoie.
După ce ați descărcat și despachetat fișierul zip, deschideți fișierul index.html din browserul dvs. și veți vedea ceva similar:
Da, distribuitorii au inclus legături la îndemână în fișierul index. Puteți să o lăsați în acest fel și să creați un nou fișier pentru prototip cu numele home.html sau ceva similar, însă nu trebuie să îl păstrați, deoarece puteți ajunge ușor la Documentația Fundației ori de câte ori doriți.
Deschideți fișierul index.html în editorul dvs. de cod preferat și șterge totul înăuntru dar înainte de închidere Regulile de stil pe care le adăugăm la app.css fișierul nostru destul de sus prototip sunt: Deoarece Fundația 5 utilizează unități relative, trebuie să folosim “em”-s sau “rem”-s în loc de pixeli pentru a ține pasul cu regulile. (Puteți citi despre unitățile CSS: Pixels vs. ems vs% here.) Am folosit extensia Firebug pentru Firefox pentru a determina unde trebuie să înlocuiesc regulile CSS ale Fundației 5, puteți utiliza orice altă extensie de browser pentru dezvoltare web, dacă doriți. Aici, în acest scurt fragment de CSS, am fost nevoiți să ignorăm CSS implicit doar o singură dată, la ultima regulă (.row .row.popular-main). Iată ce arată acum demo-ul: Folosind aceleași reguli ca și înainte, vom adăuga mai mult conținut în secțiunea principală a paginii. Conținutul pe care îl vom adăuga acum va fi Ultimele postări cu mici miniaturi. Fundația 5 are stiluri de miniaturi foarte pregătite, pregătite, pe care le vom folosi în acest pas. Fundalul Thumbnails utilizează a pre-construit clasa CSS numit “lea” că trebuie să adăugăm imaginile pe care dorim să le afișăm ca miniaturi așa cum o puteți vedea în fragmentul de cod de mai jos. Pentru fiecare ultima postare adăugăm un nou rând sub panoul popular cu ajutorul nostru coloana CSS personalizată numită “ultima postare”. Pe dimensiunea tabletei și a desktopului, vom arăta o miniatură mică utilizând clasa de miniaturi a Fundației din stânga și titlul și o scurtă descriere în partea dreaptă. Pe telefonul mobil, titlul și descrierea vor merge sub miniatură. Acum am folosit “coloane medii-3” și “coloane de 9 coli” pentru a le face să împartă ecranul în 1: 3, 25% pentru imagine și 75% pentru textul de la dimensiunea medie. Inserați următorul fragment de cod sub panoul popular de trei ori (pentru ultimele trei postări). Aici includ doar codul unui rând de Postare recentă, deoarece toate utilizează același marcaj HTML, numai conținutul diferă. Conținutul ultimului mesaj ... Fișierul nostru personalizat CSS creat în Pasul 4.3, app.css de asemenea, niște reguli de stil noi pentru a păstra aspectul demo-ului ordonat. Notă: Dacă doriți să adăugați propriul CSS personalizat la Fundație, nu uitați să verificați, cu ajutorul unui instrument web dev, unde trebuie să înlocuiți regulile implicite. În fragmentul CSS de mai jos trebuie să le ignorăm în prima regulă (.row .row.latest-post). În a doua regulă este suficient să folosim doar selectorul personalizat (.latest-post h4). Prototipul nostru arată acum: În acest pas vom adăuga o paginare răcoroasă sub ultimele postări. Fundația 5 ne oferă o mână de ajutor prin clasele de paginare convenabile și gata de utilizare. Folosim același cod în acest pas pe care îl puteți găsi în “Avansat” secțiune din Documentele de Paginare. Iată cele mai recente postări cu secțiunea de pagini nou adăugată: Acum, că suntem pregătiți cu conținutul principal al site-ului demo, este timpul să populați bara laterală dreaptă. Bara laterală dreaptă va aluneca sub conținutul principal pe dimensiunile mobile și tablete. Trebuie să introduceți toate fragmentele de cod din această secțiune în interiorul Bara laterală din stânga va conține un Formular de înscriere în buletin informativ (1), un videoclip recent (2) și un meniu lateral în stil acordeon sub pseudonimul “Cartea noastră de bucate” (3). La finalul acestui pas vom fi gata cu demo-ul nostru care va arata astfel: Pentru a construi un formular în Fundația 5, nu trebuie să faceți altceva, doar plasați grila în interiorul unui Etichetă HTML. Dacă luați o privire la fragmentul de cod de mai jos, veți vedea că plasăm formularul într-un rând în care setăm diferite selectori CSS pentru toate cele trei grile: “mici-12”, “mediu 9”, și “mare-12”. Am ales această soluție deoarece un formular de buletine de știri de 100% arată grozav pe dimensiunea mobilă, dar este cu adevărat neplăcut pentru dimensiunea tabletei pe măsură ce aceasta devine foarte largă. Din fericire Fundația 5 ne permite să folosim “Rânduri incomplete”: trebuie doar să adăugăm “Sfârșit” clasă la definiția clasei CSS a coloanei incomplete. Deci, acesta este ceea ce se va întâmpla aici: în dimensiunea mobilă, bara laterală va fi afișată sub conținutul principal printr-un Formular de înregistrare a buletinelor informative care acoperă întreg ecranul. Pe o mărime medie, bara laterală va rămâne sub conținutul principal, însă Formularul de Newsletter va acoperi doar 75% din ecran, iar restul de 25% vor rămâne goale. Pe dimensiunea desktop-ului, bara laterală se află chiar lângă conținutul principal, iar formularul Newsletter va acoperi din nou întreaga lățime a barei laterale. Consultați Grid Docs pentru a citi mai multe despre rândurile incomplete. Acum aruncați o privire înăuntru header margin-bottom: 2em; .popular-suplimentar h4 font-size: 1.125em; marginea superioară: 0,4; .row .row.popular-principal margin-bottom: 1.5;
4.4 Adăugarea unui conținut mai mult
Titlul ultimului mesaj
.rândul .row.latest-post margin-bottom: 1.5em; . cel mai slab post h4 margin-top: 0; dimensiune font: 1.125em;
4.5 Adăugarea paginării
5. Populația barei laterale
5.1 Formularul de buletin informativ
Înscrieți-vă la newsletter-ul nostru
Formatele de fundație au multe alte opțiuni de aspect, cum ar fi eticheta prefixă, prefixul etichetei radiografice, butonul Postfix și eticheta Postfix. Am ales opțiunea Buton Postfix aici, deoarece este mai ușor de utilizat: utilizatorii pot da clic pe el și pot trimite formularul imediat.
În interiorul formularului vom adăuga un nou rând imbricat care împarte ecranul la 2: 1. Intrarea textului va avea 8 coloane, iar butonul postfix va ajunge la 4. Deoarece dorim să avem acest aspect chiar și pe ecranul mobil, vom seta “mici-8 coloane” și “mici-4 coloane” Selectori CSS aici, gridul mic fiind cea mai mică dimensiune în care vrem să implementăm acest marcaj.
Puteți vedea un alt lucru nou în codul HTML de deasupra care este “colapsul rândului” clasă. Acesta este stilul încorporat al Fundației 5. Implicit există un jgheab între două coloane adiacente, dar dacă adăugăm “colaps” clasa la rândul nostru, jgheabul va dispărea. Facem acest lucru deoarece dorim ca butonul să fie imediat lângă introducerea textului, fără nici un spațiu între ele.
Acum este momentul să inserați acest fragment de cod în
5.2 Flex Video
Sub secțiunea Newsletter vom adăuga o rețetă video zilnică în bara noastră laterală. Fundația 5 ne ajută faceți videoclipurile încorporate receptive și forțați-le să scadă automat cu caracteristica Flex Video.
Videoclipurile Flex utilizează built-in-ul “flex video” CSS. Creați un nou rând pentru secțiunea bara laterală Reteaua video zilnică și plasați o coloană largă în ea cu “mici-12 medii-9 mari-12 coloane sfârșitul” Selectorii CSS din același motiv am folosit un rând incomplet în grila medie în etapa anterioară.
Aici este codul pe care trebuie să-l lipiți sub secțiunea Newsletter. Puteți folosi orice videoclip de pe Youtube, Vimeo etc.
Rețetă video zilnică
5.3 Meniul Barei laterale
Pentru meniul Sidebar vom folosi funcția Accordion a Fundației 5. Acordurile sunt elemente web care extind și restrâng conținutul în secțiuni logice.
Pe site-ul nostru demo, aceste secțiuni logice sunt cele 3 grupuri diferite de produse alimentare (feluri principale, bucate laterale, deserturi) și fiecare grup conține mai multe grupuri mai mici, cum ar fi “păsări de curte”, “Porc”, “Vită”, “Vegetarian”.
Am plasat întreaga bordură laterală Accordion într-o coloană largă cu aceeași logică ca în etapele 5.1 și 5.2 înainte. Am pus acordeonul în interiorul său ca o listă neordonată cu clasele adecvate încorporate în CSS cum ar fi “acordeon” și “acordeon-navigare”.
În timp ce Fundația Accordions lucrează cu JavaScript, puteți personaliza comportamentul său cu ajutorul variabilelor JavaScript pre-construite, dacă doriți. Pentru a face acest lucru, uita-te la “Configurație JavaScript opțională” secțiune în Acordurile Documente. Următorul fragment de cod vine sub secțiunea Flex Video din interiorul fișierului index.html.
Cartea noastră de bucate
Concluzie
Acum, că suntem pregătiți cu site-ul nostru demo, să vedem ce altceva puteți realiza cu Fundația 5. Elementele pe care le-am folosit în acest demo sunt doar un mic set de caracteristici ale cadrului Fundației. Există multe alte lucruri pe care le puteți utiliza în designul dvs., cum ar fi barele personalizabile de icoane, Breadcrumbs, Lightboxes, Range Sliders, Form Validation și multe altele. Documentele sunt destul de bine scrise și ajută dezvoltatorii cu multe exemple de cod.
Dacă sunteți familiarizat cu Sass, aveți mai multe opțiuni, deoarece fiecare secțiune din Documente explică cum vă puteți construi propriile mixuri și ce variabile Sass puteți utiliza pentru a vă personaliza site-ul. Înainte de a începe proiectarea paginii dvs. web, nu uitați să verificați compatibilitatea cadrului Foundation pentru a vă asigura că funcționează pe toate browserele pe care trebuie să le construiți pentru.
- Vizualizați demonstrația
- Descărcați sursa
