Loo veebilehed Superfast Foundation 5-ga [A Guide]
Frontend raamistiku kasutamine võib teie veebidisaini töövoogu mitmel viisil parandada. See võib aitab kaasa kaasaegsete disaini põhimõtete järgimisele nagu mobiil-esimene lähenemine, semantiline märgistus ja reageeriv disain. Sa saad kasutage paljude kasutusvalmis CSS- ja JavaScript-elementide võimendust ja oluliselt kiirendada oma arenguprotsessi, rohkem aega, et keskenduda visuaalsele ja kasutaja kogemusele.
Zurb Foundation 5 on turul üks võimsamaid esipaneele. See on loogiliselt ehitatud, lihtsalt kasutatav ja täiesti tasuta. See võimaldab teil kasutada a paindlik CSS-võrk seda hõlbustab puhta ja kasutajasõbraliku paigutuse loomist. Sihtasutuse raamistik on samuti tugevalt testitud, seega hoolitseb see brauserite ja seadmete omavahelise ühilduvuse eest.
Selles juhendis näitan sulle kuidas saab veebilehe ehitada Zurb Foundationiga 5. Saate tutvuda demo lehekülje lõpptulemusega.
Ma loodan veebilehe kujunduse, peene disainielemendi lisamise ülesanne ootab teid. Veebisaidil, mille me selles juhendis koostame, saavutatakse unistus moodsast UX disainerist: see on tundlik, mobiilne, kasutajasõbralik ja semantiline.
Selle juhendi pikkuse tõttu on siin otseteed, mida soovite kiiresti soovitud sektsiooni juurde pääseda:
- Sihtasutuse allalaadimine 5
- Võrgustiku mõistmine
- Millal kasutada suurt-N, keskmist ja väikest N-klassi
- Top menüüriba lisamine
- Põhiosa paigutamine
- Populaarsete postituste paneeli lisamine
- 3 uue postituse lisamine populaarsesse paneeli
- CSS-i värskendamine
- Mõnede sisu lisamine
- Paginatsiooni lisamine
- Külgriba paigutamine
- Uudiskirja vorm
- Flex Video
- Külgriba menüü
- Järeldus
1. Sihtasutuse allalaadimine 5
Sihtasutuse 5 saate alla laadida neljal erineval kujul:
- kogu koodi
- kergem versioon, millel on ainult oluline kood
- kohandatud versioon, kus saab kohandada seda, mida vajate ja mis mitte
- Sass-versioon, kui soovite oma muutujaid ja segusid SCSS-is seada.
Selles juhendis valin vanilje CSS-iga komplekti koodi, kuid muidugi saate valida teisi versioone, kui soovite oma veebisaiti sujuvamaks muuta ja kasutada ainult seda, mida vajate.
Pärast zip-faili allalaadimist ja lahtipakkimist avage oma brauseris index.html-fail ja näete midagi sellist:
Jah, indeksid sisaldasid indeksfailis käepäraseid linke. Seda saab jätta ja teha oma prototüübile uue faili nimega home.html või midagi sarnast, kuid te ei pea seda tegelikult hoidma, sest fondi dokumentatsiooni saate hõlpsasti jõuda, kui soovite.
Avage index.html fail oma lemmikkoodi redaktoris ja kustutage kõik sees lõik, kuid enne sulgemist Stiilieeskirjad, mida me lisame app.css meie prototüübi üleslaadimine on järgmine: Kuna sihtasutus 5 kasutab suhtelisi üksusi, me peame kasutama “em”-s või “rem”-s pikslite asemel reeglitega sammu pidada. (Te saate lugeda CSS-ühikutest: Pixels vs ems vs% siin.) Ma kasutasin Firefoxi Firebug-laiendit, et otsustada, kus pean fondi 5 CSS-reeglid üle kirjutama, kui soovite, saate kasutada teisi veebiarenduse brauserilaiendeid.. Selles lühikeses CSS-i fragmendis pidime alles tühistama fondi vaikimisi CSS-i ainult üks kord, viimasel reeglil (.row .row.popular-main). Siin on see, mida demo sait praegu näeb välja: Kasutades samu reegleid nagu enne, lisame lehe põhiosale veidi rohkem sisu. Sisu, mille me nüüd lisame, on Viimased postitused väikeste pisipiltidega. Sihtasutusel 5 on tõesti lahe eelvalmistatud pisipiltide stiilid, mida me selles etapis kasutame. Sihtasutuse pisipildid kasutavad a eelnevalt ehitatud CSS-klassi nimetus “th” peame lisama piltidele, mida soovime kuvada pisipiltidena, nii nagu näete allpool olevat koodilõiget. Iga viimase postituse kohta lisame meie ruuduga populaarse paneeli alla uue rea kohandatud CSS-klassi nimetus “viimane postitus”. Tablettide ja töölaua suuruses kuvame väikese pisipildi, kasutades fondi pisipilti klassi vasakul, pealkirja ja lühikirjeldust paremal. Mobiilil on pealkiri ja kirjeldus pisipildi all. Nüüd kasutasin seda “keskmised kolm veergu” ja “keskmised 9 veergu” klassid, et nad jagaksid ekraani 1: 3, 25% pildi puhul ja 75% tekstiga keskmise suurusega. Sisestage kolm korda populaarse paneeli all järgmine koodilõik (kolme viimase postituse puhul). Siinkohal lisan lihtsalt ühe viimase postituse rea, kuna kõik kasutavad sama HTML-märgistust, ainult sisu erineb. Viimaste postituste sisu… Meie kohandatud CSS-fail, mis on loodud punktis 4.3, app.css ka mõned uued stiilieeskirjad, et hoida demo väljanägemist korras. Märge: Kui soovite oma sihtasutusele lisada oma kohandatud CSS-i, siis ärge kunagi unustage kontrollida veebitööriista tööriista abil, kus peate reeglite tühistama. Allpool olevas CSS-koodis tuleb need esimeses reeglis (.row .row.latest-post) tühistada. Teises reeglis piisab lihtsalt omaenda kohandatud valijast (.latest-post h4). Meie prototüüp näeb nüüd välja selline: Selles etapis lisame viimaste postituste all lahedat lehekülge. Sihtasutus 5 annab meile abikäe oma mugavate, kasutusvalmis paginatsiooniklasside abil. Me kasutame sama sammu selles etapis, mida leiate “Täpsem” sektsioonis Dokumendid. Siin on viimaseid postitusi, mis on lisatud hiljuti lisatud leheküljega: Nüüd, kui oleme valmis meie demo-saidi peamise sisuga, on aeg õigesse külgriba asustada. Parempoolne külgriba libiseb mobiil- ja tahvelarvutite põhisisu alla. Peate sisestama kõik selle jaotise koodilõigud Vasakul külgribal on hüüdnime all uudiskirja registreerimisvorm (1), viimane video (2) ja akordion-stiilis külgriba menüü “Meie kokaraamat” (3). Selle sammu lõpus oleme valmis meie demoga, mis näeb välja selline: Vormi loomiseks fondis 5 ei pea te midagi muud tegema, vaid asetage võrk sees HTML-silt. Kui te vaatate allpool olevat koodilõiget, näete, et me paneme vormi reasse, milles me kõik kolm võrku valime erinevaid CSS-valikuid: “väike-12”, “keskmine-9”, ja “suur-12”. Valisime selle lahenduse, sest 100% laiune uudiskirja vorm näeb mobiiltelefoni suuruses lahe, kuid see on tõesti tableti suuruses väga ebamugav väga lai. Õnneks võimaldab Foundation 5 kasutada “Mittetäielikud read”: peame lihtsalt lisama “lõpp” klassi mittetäieliku veeru CSS-klassi määratlusele. Nii et see juhtub siin: mobiilisuuruses kuvatakse külgriba põhisisu all uudiskirja registreerimisvormiga, mis hõlmab kogu ekraani. Keskmise suurusega jääb külgriba põhisisu alla, kuid uudiskirja vorm katab ainult 75% ekraanist ja ülejäänud 25% jääb tühjaks. Töölaua suuruses on külgriba peamise sisu kõrval ja uudiskirja vorm katab kogu külgriba laiuse uuesti. Lisateavet ebatäielike ridade kohta leiate võrgu dokumentidest. Vaata nüüd päis margin-bottom: 2em; .popular-täiendav h4 font-size: 1.125em; margin-top: 0.4em; .row .row.popular-main margin-bottom: 1.5em;
4.4 Mõnede sisu lisamine
Viimaste postituste pealkiri
.rida .row.latest-post margin-bottom: 1.5em; .jah-post h4 margin-top: 0; fondi suurus: 1.125em;
4.5 Paginatsiooni lisamine
5. Külgriba paigutamine
5.1 Uudiskirja vorm
Liitu uudiskirjaga
Sihtasutusvormidel on palju muid paigutusvalikuid, nagu näiteks prefiksikleebis, prefiksi raadiuseetikett, Postfix-nupp ja Postfix-silt. Siin valisime Postfixi nupu, kuna see on kasutajasõbralikum: kasutajad saavad sellele klõpsata ja vormi kohe saata.
Vormi sees lisame uue sisestatud rea, mis jagab ekraani 2: 1. Tekstisisestus annab 8 veergu ja postfixi nupp saab 4. Kuna me tahame, et see paigutus oleks isegi mobiiliekraanil, määrame me “väike-8 veergu” ja “väike-4 veergu” Siin on CSS-selektorid, väikesed võrgud on väikseimad, kus soovime seda märgistust rakendada.
Te võite näha uut uut asja HTML-koodis, mis on “rea kokkuvarisemine” klassi. See on Foundation 5 sisseehitatud stiil. Vaikimisi on kahe külgneva veeru vahele vihm, kuid kui me selle lisame “kokkuvarisemine” klassi meie rida, vihmaveerenn kaob. Me teeme seda, sest me tahame, et nupp oleks tekstisisestuse kõrval, ilma et nende vahel oleks ruumi.
Nüüd on aeg sisestada see koodilõik
5.2 Flex-video
Uudiskirja jaotise all lisame meie külgribale Daily Video Recipe. Sihtasutus 5 aitab meid sisseehitatud videod reageerivad ja sundivad neid automaatselt mõõtma Flex Video funktsiooniga.
Flex Videos kasutab sisseehitatud “flex-video” CSS klass. Loome igapäevase video retsepti külgriba lõikele uue rea ja asetame sellele ühe lai veeru “väikeste 12 keskmise 9 suurte 12 veergude lõpp” Samal põhjusel kasutasime CSS-i valijaid eelmises etapis keskmises võrgus mittetäielikku rida.
Siin on kood, mida peate allkirjastama uudiskirja jaotise all. Võite kasutada mis tahes Youtube'i, Vimeo jne videoid.
Daily Video retsept
5.3 Külgriba menüü
Külgriba menüü jaoks kasutame fondi 5. akordioni funktsiooni. Akordioonid on veebielemendid, mis laiendavad ja koondavad sisu loogilisteks osadeks.
Meie demo-saidil on need loogilised jaotised kolm erinevat toidugruppi (peamised toidud, külg-toidud, magustoidud) ning iga grupp sisaldab rohkem väiksemaid rühmi, näiteks “Kodulinnud”, “Sealiha”, “Veiseliha”, “Vegetarian”.
Me paigutame kogu külgriba akordi ühte laiesse veergu, millel on sama loogika nagu enne 5.1 ja 5.2 samme. Me paigutame akordioni selle sees järjestamata nimekirja koos sobivate sisseehitatud CSS klassidega, nagu näiteks “akordion” ja “akordion-navigatsioon”.
Kuna Foundation Accordions töötab JavaScriptiga, saate soovi korral kohandada oma käitumist eelnevalt ehitatud JavaScript-muutujate abil. Selleks vaadake “Valikuline JavaScript-konfiguratsioon” akordiondokumendis. Järgmine koodilõik on allpool index.html faili sees olevat Flex Video osa.
Järeldus
Nüüd, kui oleme valmis meie demo-saidiga, vaatame, mida veel fondi 5 abil saavutada saate. Selles demos kasutatavad elemendid on vaid väikesed fondi raamistiku tunnused. Teie disainis on palju muid asju, näiteks kohandatavad ikooniribad, Breadcrumbs, valguskastid, vahemiku liugurid, vormi valideerimine ja paljud teised. Dokumendid on päris hästi kirjutatud ja aitavad arendajatel paljude koodide näiteid.
Kui olete Sassiga tuttav, on teil veel rohkem võimalusi, sest iga dokumendi osa selgitab, kuidas saate oma segusid ehitada ja milliseid Sass-muutujaid saate oma saidi kohandamiseks kasutada. Enne veebilehe kujunduse alustamist ärge unustage kontrollida fondi raamistiku ühilduvust, et veenduda, et see töötab kõikidel brauseritel, mida peate ehitama.
- Kuva demo
- Allalaadimise allikas
