Sukurkite svetaines „Superfast“ su „Foundation 5“ [A Guide]
Naudojant „frontend“ sistemą, daugeliu būdų galite pagerinti jūsų interneto dizaino darbo eigą. Tai gali padėti jums laikytis šiuolaikinių dizaino principų pvz., mobilusis pirmasis požiūris, semantinis žymėjimas ir reaguojantis dizainas. Tu gali atsižvelgti į daugelį paruoštų naudoti CSS ir „JavaScript“ elementų ir žymiai pagreitinti savo plėtros procesą, atlaisvinti daugiau laiko, kad sutelktumėte dėmesį į vizualinį ir vartotojo patirtį.
„Zurb Foundation 5“ yra viena iš galingiausių frontendų sistemų rinkoje. Tai logiškai pastatyta, paprasta naudoti ir visiškai nemokama. Tai leidžia jums naudoti a lankstus CSS tinklas kad padeda sukurti švarų, patogų vartotojui išdėstymą. Fondo struktūra taip pat yra labai išbandyta, todėl ji rūpinasi kryžminiu naršykle ir kryžminiu įrenginių suderinamumu.
Šioje instrukcijoje aš jums parodysiu kaip galite sukurti „Zurb Foundation“ supaprastintą svetainę 5. Galite peržiūrėti galutinį rezultatą demonstraciniame puslapyje.
Sukursiu svetainės išdėstymą, laukia jūsų subtilaus dizaino elementų pridėjimo. Svetainė, kurią mes sukursime kartu su šia pamoka, atliks šiuolaikinio „UX“ dizainerio svajonę: jis bus jautrus, pirmasis mobilus, patogus naudoti ir semantinis.
Dėl šio vadovo ilgio čia rasite sparčiuosius klavišus, kad greitai pasiektumėte norimą skyrių:
- Fondo atsisiuntimas 5
- Tinklo supratimas
- Kada naudoti dideles-N, vidutines N ir mažas N klases
- Į viršų meniu juostos pridėjimas
- Pagrindinės dalies populiacija
- Įrašyta populiarių pranešimų grupė
- Įrašyta 3 daugiau pranešimų į populiariąją skydelį
- Prabangus CSS
- Kai kurių daugiau turinio pridėjimas
- Įrašų pridėjimas
- Populiari šoninė juosta
- Naujienlaiškio forma
- „Flex Video“
- „Sidebar“ meniu
- Išvada
1. Fondo atsisiuntimas 5
Fondą 5 galite atsisiųsti iš 4 skirtingų formų:
- visą kodą
- lengvesnė versija su tik pagrindiniu kodu
- pritaikytą versiją, kurioje galite pritaikyti tai, ko jums reikia ir kas ne
- „Sass“ versija, jei norite nustatyti savo kintamuosius ir mišinius SCSS.
Šioje instrukcijoje pasirinksiu pilną kodą su vanilės CSS, bet, žinoma, galite pasirinkti kitas versijas, jei norite racionalizuoti savo svetainę ir naudoti tik tai, ko jums tikrai reikia.
Atsisiuntę ir išpakavę zip failą, naršyklėje atidarykite index.html failą ir pamatysite kažką panašaus:
Taip, indeksai įtraukė patogias nuorodas į indekso failą. Taip galite palikti šį būdą ir sukurti naują prototipo failą su pavadinimu home.html arba kažką panašaus, bet jums tikrai nereikia jo išsaugoti, nes galite lengvai pasiekti Fondo dokumentaciją, kai tik norite.
Atidarykite index.html failą savo mėgstamų kodų redaktoriuje ir ištrinti viską viduje skyrių, bet prieš uždarymą Stiliaus taisyklės, kurias pridedame prie app.css mūsų prototipo failas yra toks: Kadangi Fondas 5 naudoja santykinius vienetus, turime naudoti “em”-s arba “rem”-s vietoj pikselių laikytis taisyklių. (Galite skaityti apie „CSS“ vienetus: „Pixels vs ems vs%“ čia.) Naudojau „Firefox“ Firebug plėtinį, kad nustatytumėte, kur turiu nepaisyti „Foundation 5“ CSS taisyklių, jei norite, galite naudoti bet kokius kitus interneto plėtros naršyklės plėtinius. Šiame trumpame CSS fragmente mes turėjome tik vieną kartą panaikinti numatytąjį CSS CSS, paskutinėje taisyklėje (.row .row.popular-main). Štai kaip demonstracinė svetainė atrodo dabar: Naudodamiesi tomis pačiomis taisyklėmis, kaip ir anksčiau, prie pagrindinės puslapio dalies pridėsime daugiau turinio. Turinys, kurį dabar pridėsime, bus Paskutiniai pranešimai su mažomis miniatiūromis. „Foundation 5“ tikrai turi vėsioje iš anksto paruoštus miniatiūrų stilius, kuriuos naudosime šiame etape. Fondo miniatiūrų naudojimas a iš anksto pastatyta CSS klasė “th” kad turėtume pridėti prie nuotraukų, kuriuos norime rodyti kaip miniatiūras, kaip matote toliau pateiktame kodo fragmente. Kiekvienam Paskutiniam įrašui pridedame naują eilutę po populiariu skydu su mūsų pasirinkta CSS klasė “naujausias pranešimas”. Lentelėje ir darbalaukyje matysite mažą miniatiūrą, naudodami Fondo miniatiūrų klasę kairėje, pavadinimą ir trumpą aprašymą dešinėje. Mobiliajame telefone antraštė ir aprašymas bus mažesni nei miniatiūra. Dabar aš naudoju “vidutinės 3 stulpeliai” ir “vidutinės 9 stulpeliai” klasių, kad jie padalintų ekraną į 1: 3, 25% vaizdą ir 75% tekstą nuo vidutinio dydžio. Tris kartus įdėkite šį kodo fragmentą žemiau populiaraus skydo (trims naujausioms žinutėms). Čia tiesiog įtraukiu vieno naujausios eilutės kodą, nes visi jie naudoja tą patį HTML žymėjimą, tik turinys skiriasi. Paskutinio pranešimo turinys… Mūsų pasirinktas CSS failas, sukurtas 4.3 veiksme, app.css taip pat gauna keletą naujų stiliaus taisyklių, kad būtų išsaugotas demonstracijos tvarkymas. Pastaba: Jei norite pridėti savo pasirinktinį CSS į Fondą, niekada nepamirškite patikrinti, naudodami žiniatinklio įrankį, kur jūs turite nepaisyti numatytųjų taisyklių. Toliau pateiktame CSS fragmente mes turime juos panaikinti pirmojoje taisyklėje (.row .row.latest-post). Antrojoje taisyklėje pakanka tiesiog naudoti savo pasirinktinį valdiklį (.latest-post h4). Mūsų prototipas atrodo taip: Šiame etape pridėsime vėlesnį lapavimą pagal naujausius pranešimus. „Foundation 5“ suteikia mums patogią ranką pagal patogias, paruoštas naudoti puslapių klases. Šiame etape mes naudojame tą patį kodą, kurį galite rasti “Išplėstinė” skiltyje Pagination Docs. Čia pateikiami naujausi įrašai su naujai pridėta puslapių skiltimi: Dabar, kai esame pasiruošę su pagrindiniu mūsų demonstracinės svetainės turiniu, atėjo laikas užpildyti dešinę šoninę juostą. Teisė šoninė juosta paslyps žemiau pagrindinio mobiliojo ir planšetinio kompiuterio dydžio. Turite įterpti visus šiame skyriuje esančius kodo fragmentus Kairėje šoninėje juostoje bus naujienlaiškio registracijos forma (1), naujausias vaizdo įrašas (2) ir akordeono stiliaus šoninės juostos meniu pagal slapyvardį “Mūsų „Cookbook“” (3). Šio žingsnio pabaigoje būsime pasiruošę su mūsų demonstravimu, kuris atrodys taip: Norėdami sukurti formą 5 fonde, jums nereikia nieko daryti, tiesiog padėkite tinklelį a HTML žyma. Jei pažvelgsite į toliau pateiktą kodo fragmentą, pamatysite, kad mes pateikiame formą eilutėje, kurioje nustatome įvairius CSS selektorius visiems 3 tinklams: “mažas-12”, “vidutinio 9”, ir “didelis-12”. Šį sprendimą pasirinkome, nes 100% pločio naujienlaiškio forma atrodo mobiliajam dydžiui kieta, bet tai tikrai nepatogu ant planšetinio kompiuterio dydžio labai platus. Laimei, fondas 5 leidžia mums naudoti “Nebaigtos eilutės”: mes tiesiog turime pridėti “pabaiga” klasė pagal CSS klasės neapibrėžtos stulpelio apibrėžimą. Taigi taip atsitiks čia: mobiliajame tinkle šoninė juosta bus rodoma po pagrindiniu turiniu su naujienlaiškio registracijos forma, kuri apima visą ekraną. Vidutinio dydžio šoninė juosta išliks pagrindiniame turinyje, tačiau naujienlaiškio forma bus padengta tik 75% ekrano, o likę 25% bus tuščia. Į darbalaukio dydį šoninė juosta bus šalia pagrindinio turinio, o naujienlaiškio forma vėl apims visą šoninės juostos plotį. Skaitykite tinklelio dokumentus, jei norite daugiau sužinoti apie neveikiančias eilutes. Dabar pažiūrėkite į antraštė margin-bottom: 2em; .popular-h4 font-size: 1.125em; margin-top: 0.4em; .row.row.popular-main margin-bottom: 1.5em;
4.4 Kai kurių daugiau turinio pridėjimas
Paskutinio pranešimo pavadinimas
.eilutė .row.latest-post margin-bottom: 1.5em; .latest-post h4 margin-top: 0; šrifto dydis: 1.125em;
4.5 „Paginacijos“ pridėjimas
5. Šoninės juostos populiacija
5.1 Naujienų forma
Užsiregistruokite mūsų naujienlaiškyje
Fondo formose yra daug kitų išdėstymo parinkčių, pvz., Prefikso etiketė, prefikso spindulio etiketė, „Postfix“ mygtukas ir „Postfix“ etiketė. Čia pasirinkome „Postfix“ mygtuko parinktį, nes ji yra patogesnė vartotojui: vartotojai gali jį spustelėti ir išsiųsti formą vienu metu.
Formos viduje pridėsime naują įdėtą eilutę, padalijančią ekraną į 2: 1. Teksto įvedimas gaus 8 stulpelius, o postfix mygtukas - 4. Kadangi norime, kad šis išdėstymas būtų net ir mobiliajame ekrane, nustatysime “mažos-8 stulpeliai” ir “mažos-4 stulpeliai” CSS-selektoriai čia, mažas tinklas yra mažiausias dydis, kuriame norime įgyvendinti šį žymėjimą.
Jūs galite pamatyti kitą naują dalyką HTML kode, kuris yra “eilutės žlugimas” klasė. Tai yra fondo 5 įmontuotas stilius. Pagal nutylėjimą tarp dviejų gretimų stulpelių yra latakas jei pridėsime “žlugimas” klasė mūsų eilėje, latakas išnyks. Tai darome, nes norime, kad mygtukas būtų šalia teksto įvedimo be tarpų tarp jų.
Dabar atėjo laikas įterpti šį kodo fragmentą į
5.2 „Flex Video“
Po naujienlaiškio skyriumi į mūsų šoninę juostą pridėsime „Daily Video Recipe“. Fondas 5 padeda mums įterpti vaizdo įrašus reaguoti ir priversti juos automatiškai nustatyti su „Flex Video“ funkcija.
„Flex Videos“ naudoja integruotą “„flex-video“” CSS klasė. Sukuriame naują eilutę „Daily Video Recipe“ šoninės juostos skyriui ir įdėkite vieną platų stulpelį į “mažos 12 vidutinių 9 didelių-12 stulpelių” Dėl tos pačios priežasties CSS selektoriai ankstesniame etape naudojome vidutinę gridą neišsamią eilutę.
Čia yra kodas, kurį reikia įklijuoti po naujienlaiškio skyriumi. Galite naudoti bet kurį „YouTube“, „Vimeo“ ir pan.
Dienos vaizdo receptas
5.3 Šoninės juostos meniu
Šoninės juostos meniu naudosime Fondo suderinamumo funkciją 5. Akordeonai yra žiniatinklio elementai, kurie plėtoja ir sutraukia turinį į logines sekcijas.
Mūsų demo svetainėje šie loginiai skyriai yra 3 skirtingos maisto grupės (pagrindiniai patiekalai, šoniniai patiekalai, desertai) ir kiekvienoje grupėje yra daugiau mažesnių grupių, pvz. “Naminiai paukščiai”, “Kiauliena”, “Jautiena”, “Vegetaras”.
Visą šoninės juostos akordeoną dedame į vieną plataus stulpelio tą pačią logiką, kaip ir prieš 5.1 ir 5.2 žingsnius. Akordeoną įdėjome viduje kaip nekoduotą sąrašą su atitinkamomis įmontuotomis CSS klasėmis, tokiomis kaip “akordeonas” ir “akordeono navigacija”.
Kaip fondo akordeonai dirba su „JavaScript“, galite pritaikyti savo elgesį naudodami iš anksto sukurtus „JavaScript“ kintamuosius, jei norite. Norėdami tai padaryti, žiūrėkite “Neprivaloma „JavaScript“ konfigūracija” „Accordion“ dokumentų skyriuje. Toliau pateikiamas kodo fragmentas pateikiamas žemiau „Flex Video“ skyriaus, esančio index.html faile.
Išvada
Dabar, kai esame pasiruošę demonstracinei svetainei, pažiūrėkime, ką dar galite atlikti su Fondu 5. Šiame demo mes naudojami elementai yra tik nedidelis fondo sistemos bruožų rinkinys. Yra daug kitų dalykų, kuriuos galite naudoti naudodami savo dizainą, pvz., Pritaikomi piktogramų juostos, „Breadcrumbs“, „Lightboxes“, „Range Sliders“, formos patvirtinimas ir daugelis kitų. Dokumentai yra gana gerai parašyti ir padeda kurti daug kodų pavyzdžių.
Jei esate susipažinę su „Sass“, turite dar daugiau galimybių, nes kiekviename dokumento skyriuje paaiškinama, kaip galite sukurti savo „mixins“ ir kokių „Sass“ kintamųjų galite naudoti tinklapiui pritaikyti. Prieš pradėdami kurti savo tinklalapį, nepamirškite patikrinti fondo sistemos suderinamumo, kad įsitikintumėte, jog jis veikia visose naršyklėse, kurias reikia sukurti.
- Peržiūrėti demonstraciją
- Atsisiųsti šaltinį
