Zgradite spletne strani Superfast z Fundacijo 5 [Vodnik]
Z uporabo okvirja frontend lahko izboljšate potek spletnega oblikovanja na več načinov. Lahko vam pomagajo slediti modernim načelom oblikovanja kot so pristopi, ki temeljijo na mobilnosti, semantični označevalni in odzivni dizajn. Ti lahko izkoristiti številne elemente CSS in JavaScript, pripravljenih za uporabo in bistveno pospešite razvojni proces, sprostitev več časa za osredotočanje na vizualno in uporabniško izkušnjo.
Zurb Foundation 5 je eden najmočnejših okvirov frontendov na trgu. Logično je zgrajen, enostaven za uporabo in popolnoma brezplačen. Omogoča vam uporabo a prilagodljiva mreža CSS to olajša ustvarjanje čiste in uporabniku prijazne postavitve. Okvir Fundacije je tudi močno testiran, zato skrbi za navzkrižno brskanje in združljivost med napravami.
V tem vodiču vam bom pokazal kako lahko zgradite spletno stran superhitre s Zurb Foundation 5. Končni rezultat si lahko ogledate na demo strani.
Ustvaril bom postavitev spletne strani, čaka na vas dodajanje subtilnih elementov oblikovanja. Spletna stran, ki jo bomo skupaj ustvarili v tej vadnici, bo uresničila sanje sodobnega oblikovalca UX: bo odzivna, mobilna, uporabniku prijazna in semantična..
Zaradi dolžine tega priročnika so tukaj bližnjice za hitro dostopanje do odseka:
- Nalaganje fundacije 5
- Razumevanje mreže
- Kdaj uporabiti razrede Large-N, Medium-N in Small-N
- Dodajanje vrstice z glavnim menijem
- Populacija glavnega dela
- Dodajanje plošče za priljubljene objave
- Dodajanje 3 več objav na priljubljeno ploščo
- Prettying up CSS
- Dodajanje več vsebine
- Adding Pagination
- Populacija stranske vrstice
- Obrazec za novice
- Flex Video
- Meni stranske vrstice
- Zaključek
1. Nalaganje fundacije 5
Fundacijo 5 lahko prenesete v 4 različnih oblikah:
- celotno kodo
- lažja različica s samo osnovno kodo
- prilagojeno različico, kjer lahko prilagodite, kaj potrebujete in kaj ne
- različica Sass, če želite nastaviti spremenljivke in kombinacije v SCSS.
V tej vadnici bom izbral popolno kodo z vanilijevim CSS, vendar seveda lahko izberete katero koli drugo različico, če želite poenostaviti spletno mesto in uporabiti le tisto, kar res potrebujete.
Ko prenesete in razpakirate datoteko zip, odprite datoteko index.html v brskalniku in videli boste nekaj takega:
Ja, razvijalci so v indeksni datoteki vključili priročne povezave. Lahko ga pustite na ta način in ustvarite novo datoteko za prototip s imenom home.html ali kaj podobnega, vendar tega ne potrebujete, saj lahko preprosto dosežete dokumentacijo Fundacije, kadar koli želite.
Odprite datoteko index.html v svojem priljubljenem urejevalniku kode in izbrišite vse v notranjosti pred zaključkom Pravila sloga, ki jih dodamo app.css Datoteka za precej naš prototip so: Kot Fundacija 5 uporablja relativne enote, moramo uporabiti “em”-s ali “rem”-s namesto slikovnih pik slediti pravilom. (Lahko preberete o enotah CSS: Pixels vs ems vs% tukaj.) Uporabil sem razširitev Firebug za Firefox, da ugotovim, kje moram preglasiti CSS pravila Fundacije 5, lahko uporabite katero koli drugo razširitev brskalnika za spletni razvoj, če želite. Tu v kratkem odlomku CSS smo morali samo enkrat preglasiti privzeti CSS Fundacije, na zadnjem pravilu (.row .row.popular-main). Evo, kako izgleda predstavitveno spletno mesto zdaj: Z istimi pravili, kot prej, bomo dodali še nekaj vsebin na glavni del strani. Vsebina, ki jo bomo dodali zdaj, bo Najnovejše objave z majhnimi sličicami. Fundacija 5 ima res kul vnaprej pripravljene sličice, ki jih bomo uporabili v tem koraku. Ustanovitvene sličice uporabite a vnaprej izdelan razred CSS “th” ki jih moramo dodati slikam, ki jih želimo prikazati kot sličice, na način, kot ga lahko vidite v spodnjem kodu. Za vsako zadnjo objavo dodamo novo vrstico pod priljubljeno ploščo z našo poimenovan CSS po meri “zadnje objave”. Na velikosti tabličnega računalnika in namizja bomo na levi strani prikazali manjšo sličico z uporabo razreda sličic Fundacije, na desni pa naslov in kratek opis. Na mobilnem bo naslov in opis šel pod sličico. Zdaj sem uporabil “srednji-3 stolpci” in “srednje-9 stolpcev” razredi, da bi jih razdelili na 1: 3, 25% za sliko in 75% za besedilo od srednje velikosti. Vstavite naslednji odrezek kode pod priljubljeno ploščo trikrat (za tri zadnje objave). Tukaj sem vključil kodo ene vrstice Najnovejše objave, saj vsi uporabljajo isto oznako HTML, le vsebina se razlikuje. Vsebina zadnje objave… Naša CSS datoteka po meri, ustvarjena v koraku 4.3, app.css prav tako dobi nekaj novih stilskih pravil, ki ohranjajo izgled demo urejeno. Opomba: Če želite v fundacijo dodati lasten CSS po meri, nikoli ne pozabite preveriti, z orodjem za spletni razvoj, kjer morate preglasiti privzeta pravila. V spodnjem odseku CSS jih moramo preglasiti v prvem pravilu (.row .row.latest post). V drugem pravilu je dovolj, da uporabite lastno izbiro po meri (.latest-post h4). Naš prototip je zdaj videti tako: V tem koraku bomo dodali kul stran pod najnovejšimi objavami. Fundacija 5 nam pomaga s priročnimi, pripravljenimi za uporabo razvrščanja po strani. V tem koraku uporabljamo isto kodo, ki jo najdete v “Napredno” v razdelku Pagination Docs. Tu so najnovejše objave z novo dodanim odsekom Pagination: Zdaj, ko smo pripravljeni na glavno vsebino našega demo spletnega mesta, je čas, da napolnimo desno stransko vrstico. Desna stranska vrstica bo zdrsnila pod glavno vsebino v velikostih mobilnih in tabličnih računalnikov. V ta razdelek morate vstaviti vse odrezke kode Leva stranska vrstica bo vsebovala obrazec za prijavo na glasilo (1), najnovejši videoposnetek (2) in meni za stransko vrstico v harmoniki. “Naša Kuharska knjiga” (3). Na koncu tega koraka bomo pripravljeni z demo, ki bo izgledal takole: Če želite zgraditi obrazec v Fundaciji 5, vam ni treba storiti ničesar drugega, samo postavite mrežo znotraj a Oznaka HTML. Če pogledate spodnji odsek kode, boste videli, da smo obrazec postavili v vrstico, v kateri nastavljamo različne CSS selektorje za vse 3 mreže: “majhna-12”, “medium-9”, in “velika-12”. To rešitev smo izbrali, ker 100% široka oblika novic izgleda kul na velikosti mobilnih naprav, vendar je resnično nerodno glede velikosti tablet zelo širok. Na srečo Fundacija 5 nam omogoča uporabo “Nepopolne vrstice”: samo moramo dodati “koncu” razreda v definicijo razreda CSS za nepopoln stolpec. Torej se bo to zgodilo tukaj: na velikosti mobilne naprave bo stranska vrstica prikazana pod glavno vsebino z obrazcem za prijavo na novice, ki pokriva celoten zaslon. Na srednji velikosti bo stranska vrstica ostala pod glavno vsebino, vendar bo obrazec za novice samo pokril 75% zaslona, preostalih 25% pa bo ostalo prazno. Na velikosti namizja bo stranska vrstica tik ob glavni vsebini, obrazec za novice pa bo ponovno zajemal celotno širino stranske vrstice.. Več o nepopolnih vrsticah lahko preberete v razdelku Dokumenti Grid. Zdaj pa poglej v notranjost glava margin-bottom: 2em; .popularno-dodatno h4 velikost pisave: 1.125em; margin-top: 0.4em; .row .row.popular-main margin-bottom: 1.5em;
4.4 Dodajanje več vsebine
Naslov zadnje objave
.vrstica .row.latest-post margin-bottom: 1.5em; .latest-post h4 margin-top: 0; velikost pisave: 1.125em;
4.5 Dodajanje paginacije
5. Populacija stranske vrstice
5.1 Obrazec za glasila
Prijavite se na naše novice
Temeljni obrazci imajo še veliko drugih možnosti postavitve, kot so oznaka za predpono, oznaka za polmer predpone, gumb Postfix in oznaka Postfix. Tukaj smo izbrali možnost Postfix Button, saj je uporabniku prijaznejša: uporabniki lahko kliknejo in pošljejo obrazec naenkrat.
V notranjosti obrazca bomo dodali novo ugnezdeno vrstico, ki razdeli zaslon na 2: 1. Vnos besedila bo dobil 8 stolpcev in gumb za postfix bo dobil 4. Ker želimo, da je ta postavitev tudi na mobilnem zaslonu, bomo nastavili “majhnih 8 stolpcev” in “majhni-4 stolpci” CSS-selektorji tukaj, Small Grid je najmanjša velikost, kjer želimo uvesti to oznako.
V HTML kodi, ki je zgoraj, lahko vidite novo stvar “padanje vrstic” razred. To je vgrajen slog fundacije 5. Privzeto je žleb med dvema sosednjima stolpcema, vendar če dodamo “propad” v našo vrsto, bo žleb izginil. To naredimo zato, ker želimo, da je gumb ob vnosu besedila brez presledka med njimi.
Zdaj je čas, da vstavite ta odrezek kode v
5.2 Flex Video
Pod rubriko Newsletter bomo na naš stranski vrstici dodali Daily Video Recipe. Fundacija 5 nam pomaga omogočite odzivnost vdelanih videoposnetkov in jih prisilite, da samodejno merijo s funkcijo Flex Video.
Fleksibilni videoposnetki uporabljajo vgrajeno funkcijo “flex-video” CSS razred. Ustvarimo novo vrstico za stransko vrstico Daily Video Recipe in v njej postavimo en širok stolpec “konec majhnih-12 srednje-9 velikih-12 stolpcev” Izbirniki CSS iz istega razloga smo uporabili nepopolno vrstico v Srednji mreži v prejšnjem koraku.
Tukaj je koda, ki jo morate prilepiti pod rubriko Newsletter. Uporabite lahko kateri koli video iz Youtube, Vimeo itd.
Dnevni video recept
5.3 Meni stranske vrstice
Za meni stranske vrstice bomo uporabili funkcijo skladnosti skladbe Fundacije 5. Harmonije so spletni elementi, ki razširijo in strnejo vsebino v logične dele.
Na naši predstavitveni spletni strani so ti logični odseki tri različne skupine hrane (glavne jedi, stranske jedi, sladice), vsaka skupina pa vsebuje manjše skupine, kot so “Perutnina”, “Svinjina”, “Govedina”, “Vegetarijanska”.
Celotno stransko črto harmonikona postavimo v en širok stolpec z enako logiko kot v 5. in 5. koraku. Harmonijo smo vstavili kot neurejen seznam z ustreznimi vgrajenimi CSS razredi, kot je npr “harmonika” in “harmonika-navigacija”.
Ker skladi Fundacije Accordions delujejo z JavaScriptom, lahko njegovo obnašanje prilagodite s pomočjo vnaprej pripravljenih spremenljivk JavaScript, če želite. Za to si oglejte “Izbirna konfiguracija JavaScripta” poglavju v dokumentarnem dokumentu. Naslednji odrezek kode je pod razdelkom Flex Video v datoteki index.html.
Naša Kuharska knjiga
Zaključek
Zdaj, ko smo pripravljeni na našo predstavitveno spletno stran, poglejmo, kaj še lahko dosežete z Fundacijo 5. Elementi, ki smo jih uporabili v tej predstavitvi, so le majhen nabor značilnosti okvira Fundacije. Obstaja veliko drugih stvari, ki jih lahko uporabite v vašem oblikovanju, kot so prilagodljive ikonske vrstice, krušne drobtine, lahke omarice, drsniki dometa, validacija obrazcev in mnogi drugi. Dokumenti so precej dobro napisani in razvijalcem pomagajo s številnimi primeri kode.
Če ste seznanjeni s Sassom, imate še več možnosti, saj vsak odsek v dokumentih pojasnjuje, kako lahko ustvarite lastne kombinacije in katere spremenljivke Sass lahko uporabite za prilagoditev spletnega mesta. Preden začnete oblikovati svojo spletno stran, ne pozabite preveriti združljivosti okvira Fundacije in se prepričajte, da deluje v vseh brskalnikih, ki jih potrebujete za gradnjo..
- Prikaži predstavitev
- Prenesi vir
