Izgradite web stranice Superfast s Foundation 5 [Vodič]
Korištenje okvira frontend može poboljšati vaše web design workflow na mnogo načina. Može pomoći vam da pratite načela modernog dizajna kao što su pristup koji se temelji na mobilnosti, semantička oznaka i odgovarajući dizajn. Možeš iskoristite mnoge spremne za korištenje CSS i JavaScript elemente i značajno ubrzati proces razvoja, oslobađanje više vremena za fokusiranje na vizualni dizajn i dizajn korisničkog iskustva.
Zurb Foundation 5 je jedan od najmoćnijih frontend okvira na tržištu. To je logično izgrađen, jednostavan za korištenje i potpuno besplatan. To vam omogućuje korištenje a fleksibilna CSS mreža da olakšava stvaranje čistog i jednostavnog izgleda. Okvir Zaklade je također jako testiran, tako da se brine o cross-browseru i kompatibilnosti među uređajima.
U ovom tutorialu pokazat ću vam kako možete izgraditi web stranicu superbrzi s Zakladom Zurb 5. Možete pogledati konačni rezultat na demo stranici.
Ja ću stvoriti izgled web stranice, zadatak dodavanja suptilnih elemenata dizajna čeka na vas. Web-lokacija koju ćemo izraditi zajedno u ovom vodiču ostvarit će san modernog UX dizajnera: bit će odgovoran, pokretan, jednostavan, i semantički.
Zbog duljine ovog vodiča, ovdje se nalaze prečaci do kojih želite brzo doći:
- Preuzimanje zaklade 5
- Razumijevanje mreže
- Kada koristiti klase velikih-N, srednjih-N i malih-N
- Dodavanje trake izbornika Top
- Naseljavanje glavnog dijela
- Dodavanje ploče za popularne postove
- Dodavanje 3 više postova na popularnoj ploči
- Prettying Up CSS
- Dodavanje još nekog sadržaja
- Dodavanje Paginacije
- Popunjavanje bočne trake
- Obrazac za bilten
- Flex video
- Izbornik na bočnoj traci
- Zaključak
1. Preuzimanje zaklade 5
Zakladu 5 možete preuzeti u 4 različita oblika:
- cijeli kod
- lakša verzija sa samo bitnim kodom
- prilagođenu verziju u kojoj možete prilagoditi ono što trebate, a što ne
- Sass inačicu ako želite postaviti varijable i mješavine u SCSS.
U ovom tutorialu odabrat ću cjeloviti kod s vanilijim CSS-om, ali naravno možete odabrati i bilo koju drugu verziju ako želite pojednostavniti web-lokaciju i koristiti samo ono što vam je stvarno potrebno.
Nakon što preuzmete i raspakirate zip datoteku, otvorite datoteku index.html u pregledniku i vidjet ćete nešto slično ovome:
Yep, devs uključen zgodan linkovi u indeks datoteku. Možete ga ostaviti na ovaj način i izraditi novu datoteku za svoj prototip s imenom home.html ili nešto slično, ali ne morate je zadržati kao što lako možete doći do dokumentacije Zaklade kad god želite.
Otvorite datoteku index.html u svom omiljenom uređivaču koda i izbrišite sve unutar , ali prije zatvaranja Pravila stila koja dodamo u app.css Datoteka za lijepi naš prototip su sljedeći: Kao temelj 5 koriste se relativne jedinice, trebamo koristiti “em”-s ili “rEM”-s umjesto piksela držati korak s pravilima. (Možete čitati o CSS jedinicama: Pixels vs ems vs% ovdje.) Koristio sam Firefoxov dodatak Firebug kako bih odredio gdje moram nadjačati CSS pravila Zaklade 5, možete koristiti bilo koje druge web-razvojne proširenja preglednika ako želite. Ovdje, u ovom kratkom CSS isječku, morali smo samo jednom zamijeniti zadani CSS Zaklade, po zadnjem pravilu (.row .row.popular-main). Evo kako izgleda demo web-lokacija: Koristeći ista pravila kao i prije, u glavni dio stranice ćemo dodati još sadržaja. Sadržaj koji ćemo dodati sada će biti Najnoviji postovi s malim sličicama. Zaklada 5 ima stvarno cool unaprijed pripremljene sličice koje ćemo koristiti u ovom koraku. Temeljne minijature koriste a pozvao je unaprijed izgrađenu CSS klasu “th” koje moramo dodati slikama koje želimo prikazati kao umanjene sličice na način na koji možete vidjeti u isječku koda u nastavku. Za svaki najnoviji post dodamo novi redak ispod popularne ploče s našim zove se prilagođena CSS klasa “najnovije poslije”. Na veličini tableta i radne površine prikazat ćemo malu sličicu pomoću razreda sličica Zaklade na lijevoj strani te naslova i kratkog opisa s desne strane. Na mobilnom uređaju naslov i opis idu ispod minijature. Sada sam koristio “srednji-3 stupca” i “srednje-9 stupaca” kako bi ih podijelili na 1: 3, 25% za sliku i 75% za tekst od srednje veličine. Umetnite sljedeći isječak koda ispod popularne ploče tri puta (za tri najnovija posta). Ovdje samo uključim kôd jednog retka Najnoviji Post, jer svi oni koriste isti HTML oznaku, samo se sadržaj razlikuje. Sadržaj najnovije post ... Naša prilagođena CSS datoteka stvorena u koraku 4.3, app.css također dobiva neka nova pravila za stil kako bi izgled demo uredan. Bilješka: Ako želite dodati vlastiti prilagođeni CSS u Fondaciju, nikada ne zaboravite provjeriti pomoću alata za web dev, gdje morate poništiti zadana pravila. U donjem CSS isječku trebamo ih poništiti u prvom pravilu (.row .row.latest-post). U drugom pravilu dovoljno je koristiti vlastiti prilagođeni odabir (.latest-post h4). Naš prototip sada izgleda ovako: U ovom koraku dodajemo kul ispod stranice Najnoviji postovi. Fondacija 5 pruža nam ruku kroz praktične klase paginacija koje su spremne za uporabu. U ovom koraku koristimo isti kôd koji možete pronaći u “Napredna” odjeljku unutar dokumenata za Paginaciju. Ovo su Najnoviji postovi s novo dodanim odjeljkom Paginacije: Sada kada smo spremni za glavni sadržaj naše demo stranice, vrijeme je da popunite desnu bočnu traku. Desna bočna traka će skliznuti ispod glavnog sadržaja na veličinama mobilnih uređaja i tableta. U ovaj odjeljak morate umetnuti sve isječke koda Lijeva bočna traka sadržavat će obrazac za prijavu na newsletter (1), najnoviji videozapis (2) i izbornik Sidebar u stilu harmonike ispod nadimka “Naša kuharica” (3). Na kraju ovog koraka bit ćemo spremni za naš demo koji će izgledati ovako: Da biste izgradili obrazac u Zakladi 5, ne morate raditi ništa drugo, samo stavite rešetku unutar a HTML oznaka. Ako pogledate isječak koda u nastavku, vidjet ćete da smo stavili obrazac u redak u kojem postavljamo različite CSS selektore za sve 3 mreže: “malih 12”, “srednje 9”, i “velikih 12”. Odabrali smo ovo rješenje jer 100% širok obrazac biltena izgleda cool na veličinu mobilnih uređaja, ali je stvarno neugodno na veličini tableta jer postaje vrlo širok. Srećom, Zaklada 5 nam omogućuje korištenje “Nepotpune retke”: samo moramo dodati “kraj” klasi definicije CSS klase nepotpunog stupca. Ovo će se dogoditi ovdje: na veličini mobilnog uređaja bočna traka bit će prikazana ispod glavnog sadržaja putem obrasca za prijavu na newsletter koji pokriva cijeli zaslon. Na srednjoj bočnoj traci ostat će pod glavnim sadržajem, ali će Newsletter obrazac pokriti samo 75% zaslona, a preostalih 25% ostat će prazno. Na veličinu radne površine bočna traka bit će tik do glavnog sadržaja, a obrazac Newsletter ponovno će pokriti cijelu širinu bočne trake. Više informacija o nepotpunim redcima potražite u Grid dokumentima. Sada pogledajte unutra zaglavlje margin-bottom: 2em; .popularno-dodatno h4 font-size: 1.125em; margina-vrh: 0.4em; .row .row.popular-main margin-bottom: 1.5em;
4.4 Dodavanje još nekog sadržaja
Naslov zadnje poruke
.red .row.latest-post margin-bottom: 1.5em; .latest-post h4 margin-top: 0; veličina fonta: 1.125em;
4.5 Dodavanje Paginacije
5. Popunjavanje bočne trake
5.1. Obrazac biltena
Prijavite se na naš newsletter
Temeljni obrasci imaju mnoge druge opcije rasporeda kao što su Prefix Label, Prefix Radius Label, Postfix gumb i Postfix Label. Ovdje smo odabrali opciju Postfix Button jer je više prilagođena korisniku: korisnici mogu kliknuti na nju i poslati obrazac odjednom.
Unutar obrasca dodat ćemo novi ugniježđeni redak koji dijeli zaslon na 2: 1. Unos teksta dobivat će 8 stupaca, a gumb za postfix će dobiti 4. Budući da želimo imati taj raspored čak i na mobilnom zaslonu, postavit ćemo “mali-8 stupaca” i “mali-4 stupca” CSS-selektori ovdje, Small Grid je najmanja veličina gdje želimo implementirati ovu oznaku.
Možete vidjeti još jednu novu stvar u HTML kodu iznad kojeg je “kolaps kolosijeka” klase. To je ugradbeni stil Zaklade 5. Po defaultu postoji žlijeb između dva susjedna stupca, ali ako dodamo “kolaps” u našem redu, žlijeb će nestati. To radimo zato što želimo da gumb bude pokraj unosa teksta bez razmaka između njih.
Sada je vrijeme da umetnete ovaj isječak koda u
5.2 Flex video
Ispod odjeljka Newsletter dodat ćemo naš dnevni video recept. Zaklada 5 nam pomaže učinite da ugrađeni videozapisi reagiraju i prisilite ih na automatsko mjerenje sa svojom značajkom Flex Video.
Fleksibilni videozapisi koriste ugrađeni “Flex-Video” CSS klasa. Stvorit ćemo novi redak za odjeljak Sidebar s dnevnim video receptom i smjestit ćemo jedan široki stupac s oznakom “mali-12 srednjih-9 velikih-12 stupova” CSS selektori iz istog razloga koristili smo nepotpun redak u Medijskoj mreži u prethodnom koraku.
Ovdje je kôd koji trebate zalijepiti ispod odjeljka Newslettera. Možete koristiti bilo koji video s YouTubea, Vimeo itd.
Dnevni video recept
5.3 Izbornik na bočnoj traci
Za izbornik Sidebar koristit ćemo značajku Harmonika Fundacije 5. Harmonije su web-elementi koji proširuju i sažimaju sadržaj u logičke odjeljke.
Na našoj demo stranici ove logičke sekcije su 3 različite grupe hrane (Glavna jela, Bočna jela, Deserti), a svaka grupa sadrži više manjih grupa kao što su “Perad”, “Svinjetina”, “Govedina”, “Vegetarijanac”.
Cijelu harmoniku bočne trake smjestimo u jedan široki stupac s istom logikom kao u koracima 5.1 i 5.2. U njega smo stavili harmoniku kao neuređeni popis s odgovarajućim ugrađenim CSS klasama kao što je “harmonika” i “harmonika-navigacija”.
Budući da Accordions Foundation radi s JavaScriptom, možete prilagoditi njegovo ponašanje uz pomoć unaprijed izrađenih JavaScript varijabli, ako želite. Da biste to učinili, pogledajte “Izborna konfiguracija JavaScripta” odjeljku Accordion Docs. Sljedeći isječak koda nalazi se ispod odjeljka Flex Video unutar index.html datoteke.
Zaključak
Sada kada smo spremni za našu demo stranicu, pogledajmo što još možete postići s Fundacijom 5. Elementi koje smo koristili u ovoj demo izvedbi samo su mali skup značajki okvira Zaklade. Postoje mnoge druge stvari koje možete iskoristiti u svom dizajnu, kao što su prilagodljive trake s ikonama, krušne mrvice, svjetlosne kutije, klizači raspona, validacija obrasca i mnogi drugi. Dokumenti su prilično dobro napisani i pomažu programerima s mnogo primjera koda.
Ako ste upoznati sa Sassom, imate još više mogućnosti jer svaki odjeljak u Dokumentima objašnjava kako možete izgraditi vlastite miksove i koje Sass-varijable možete koristiti za prilagodbu web-lokacije. Prije nego što počnete dizajnirati svoju web-stranicu, ne zaboravite provjeriti kompatibilnost okvira Zaklade kako biste bili sigurni da radi na svim preglednicima koje trebate izraditi za.
- Prikaži demo
- Preuzimanje izvora
