Rakenna verkkosivustoja Superfastin kanssa Foundation 5 n kanssa [A Guide]
Frontend-kehyksen käyttö voi parantaa web-suunnittelun työnkulkua monin tavoin. Se voi auta sinua noudattamaan moderneja muotoiluperiaatteita kuten mobiili-ensimmäinen lähestymistapa, semanttinen merkintä ja reagoiva suunnittelu. Sinä pystyt ota käyttöön monia käyttövalmiita CSS- ja JavaScript-elementtejä ja huomattavasti nopeuttaa kehitysprosessia, vapauttaa enemmän aikaa keskittyä visuaaliseen ja käyttäjäkokemuksen suunnitteluun.
Zurb Foundation 5 on yksi tehokkaimmista frontend-kehyksistä markkinoilla. Se on loogisesti rakennettu, helppokäyttöinen ja täysin ilmainen. Sen avulla voit käyttää a joustava CSS-verkko että helpottaa puhtaan ja käyttäjäystävällisen ulkoasun luomista. Säätiön kehys on myös testattu voimakkaasti, joten se huolehtii selaimen ja laitteiden välisestä yhteensopivuudesta.
Tässä oppaassa näytän sinulle miten voit rakentaa verkkosivuston, joka on erittäin nopea Zurb Foundationin kanssa 5. Voit tarkastella esittelysivun lopputulosta.
Luon verkkosivuston ulkoasun, hieno muotoiluelementtien lisääminen odottaa sinua. Verkkosivusto, jonka luomme yhdessä tässä opetusohjelmassa, saavuttaa unelman modernista UX-suunnittelijasta: se on reagoiva, mobiili-ensin, käyttäjäystävällinen ja semanttinen.
Tämän oppaan pituuden vuoksi tässä on pikakuvakkeet päästäksesi haluamaasi osaan nopeasti:
- Säätiön lataaminen 5
- Verkon ymmärtäminen
- Kun käytät suuret, keskikokoiset ja pienet N-luokat
- Top-valikkorivin lisääminen
- Pääosan sijoittaminen
- Lisää suosikkipisteitä koskeva paneeli
- 3 Lisää viestiä suosikkipaneeliin
- Prettying Up CSS
- Lisää lisää sisältöä
- Lisäyksen lisääminen
- Sivupalkin suosiminen
- Uutiskirjeen lomake
- Flex Video
- Sivupalkkivalikko
- johtopäätös
1. Säätiön lataaminen 5
Voit ladata säätiön 5 4 eri muodossa:
- täydellinen koodi
- kevyempi versio, jossa on vain olennainen koodi
- mukautettu versio, jossa voit muokata mitä tarvitset ja mitä ei
- Sass-versio, jos haluat asettaa muuttujat ja sekoittimet SCSS: ssä.
Tässä oppaassa valitsen täydellisen koodin vanilja CSS: llä, mutta tietysti voit valita muita versioita, jos haluat virtaviivaistaa sivustosi ja käyttää vain sitä mitä tarvitset.
Kun olet ladannut ja purkanut zip-tiedoston, avaa index.html-tiedosto selaimessasi ja näet jotain tällaista:
Niin, devs sisälsi kätevät linkit indeksitiedostoon. Voit jättää sen tällä tavalla ja tehdä uuden tiedoston prototyyppisi nimellä home.html tai jotain vastaavaa, mutta sinun ei tarvitse säilyttää sitä, koska voit helposti saavuttaa säätiön dokumentaation aina kun haluat.
Avaa index.html-tiedosto suosikkikoodieditorissa ja poista kaikki osassa, mutta ennen sulkemista Tyyliä koskevat säännöt, jotka lisätään app.css tiedosto on melko ylös prototyyppimme: Koska säätiö 5 käyttää suhteellisia yksiköitä, meidän on käytettävä “em”-s tai “rem”-s pikselien sijasta noudattaa sääntöjä. (Voit lukea CSS-yksiköistä: Pikselit vs ems vs% täällä.) Käytin Firefoxin Firebug-laajennusta selvittääksesi, minne minun on ohitettava säätiön 5 CSS-säännöt, voit käyttää mitä tahansa muita web-kehitysselaimen laajennuksia, jos haluat. Tässä tässä lyhyessä CSS-katkelmassa meidän oli vain ohitettava säätiön oletusarvoinen CSS vain kerran, viimeisessä säännössä (.row .row.popular-main). Seuraavassa demon sivusto näyttää nyt: Käyttämällä samoja sääntöjä kuin ennen lisäämme lisää sisältöä sivun pääosaan. Sisältö, jonka lisäämme nyt, on Uusimmat viestit pieniä pikkukuvia. Foundation 5: llä on todella viileät, valmiiksi valmistetut pikkukuvatyylit, joita käytämme tässä vaiheessa. Säätiön pikkukuvat käyttävät a valmiiksi rakennettu CSS-luokka “th” että meidän on lisättävä kuviin, jotka haluamme näyttää pikkukuvina, tavalla, jota näet sen alla olevassa koodinpätkässä. Lisätään jokaisen uusimman viestin kohdalla uusi rivi Suosittelupaneelin alle mukautettu CSS-luokka kutsutaan “Viimeisin postaus”. Tablet- ja työpöydän koossa näytämme pienen pikkukuvan käyttämällä säätiön pikkukuvaa luokassa vasemmalla, ja otsikko ja lyhyt kuvaus oikealla. Matkapuhelimessa otsikko ja kuvaus jäävät pikkukuvan alle. Nyt käytin “keskipitkä-3 sarakkeet” ja “keskikokoiset 9 saraketta” luokat, jotta ne jakavat näytön 1: 3: een, 25% kuvan ja 75% tekstin keskikokoisesta. Aseta suosikkipaneelin alla oleva koodinpätkä kolme kertaa (kolmen viimeisimmän viestin osalta). Tässä vain yhden viimeisimmän viestin rivin koodi, koska kaikki käyttävät samaa HTML-merkintää, vain sisältö eroaa toisistaan. Viimeisimmän viestin sisältö… Vaiheessa 4.3 luotu mukautettu CSS-tiedosto, app.css saa myös uusia tyylisääntöjä, jotta demon ulkoasu säilyy siistinä. Huomautus: Jos haluat lisätä oman mukautetun CSS: n Foundationille, älä koskaan unohda tarkistaa, web-työkalulla, jossa sinun on ohitettava oletussäännöt. Alla olevassa CSS-katkelmassa meidän on ohitettava ne ensimmäisessä säännössä (.row .row.latest-post). Toisessa säännössä riittää, että käytät vain omaa mukautettua valitsinta (.latest-post h4). Prototyyppi näyttää nyt tältä: Tässä vaiheessa lisäämme viileän sivun viimeisimpien viestien alle. Säätiö 5 antaa meille kätevän kätevän käyttövalmis sivuluokan. Käytämme samaa koodia tässä vaiheessa, josta löydät “Pitkälle kehittynyt” sivun sisällä. Tässä ovat uusimmat viestit, joihin on lisätty uusi sivutus: Nyt kun olemme valmiita demo-sivuston pääsisältöön, on aika täyttää oikea sivupalkki. Oikea sivupalkki liukuu alle mobiililaitteiden ja tablettien koon. Sinun täytyy lisätä kaikki tässä osiossa olevat koodinpätkät Vasen sivupalkki sisältää uutiskirjeen rekisteröintilomakkeen (1), uusimman videon (2) ja harmonikka-tyylisen sivupalkin valikon lempinimen alla “Meidän keittokirja” (3). Tämän vaiheen lopussa olemme valmiita demoomme, joka näyttää tältä: Jos haluat rakentaa lomakkeen säätiöön 5, sinun ei tarvitse tehdä mitään muuta, vain sijoita ruudukko a HTML-tunniste. Jos tarkastelet alla olevaa koodinpätkiä, näet, että asetamme lomakkeen riviin, jossa asetamme eri CSS-valitsimet kaikkiin kolmeen verkkoon: “pieni-12”, “keskipitkän-9”, ja “suuri-12”. Valitsimme tämän ratkaisun, koska 100% leveä uutiskirjeen muoto näyttää mobiilin koon viileältä, mutta se on todella hankalaa tabletin koossa, kun se tulee erittäin leveä. Onneksi säätiö 5 antaa meille mahdollisuuden käyttää “Epätäydelliset rivit”: meidän on vain lisättävä “pää” luokka CSS-luokan määrittelyyn epätäydelliseen sarakkeeseen. Joten näin tapahtuu täällä: mobiilikokossa sivupalkki näkyy pääsisällön alapuolella uutiskirjeen rekisteröintilomakkeella, joka kattaa koko näytön. Keskikokoisessa sivupalkissa on pääsisältö, mutta uutiskirjeen lomake kattaa vain 75% näytöstä ja loput 25% pysyvät tyhjinä. Työpöydän koossa sivupalkki on aivan pääsisällön vieressä, ja uutiskirjeen lomake kattaa koko sivupalkin leveyden uudelleen. Lue ruudukko-dokumenteista lisätietoja epätäydellisistä riveistä. Katsokaa nyt otsikko marginaali-pohja: 2em; .popular-extra h4 font-size: 1.125em; margin-top: 0.4em; .row .row.popular-main margin-bottom: 1.5em;
4.4 Lisää sisältöä
Viimeisimmän viestin nimi
.rivi .row.latest-post margin-bottom: 1.5em; .lähetä-post h4 margin-top: 0; fonttikoko: 1.125em;
4.5 Paginoinnin lisääminen
5. Sivupalkin sijoittaminen
5.1 Uutiskirjeen lomake
Rekisteröidy uutiskirjeemme
Säätiömuodoissa on monia muita ulkoasuvaihtoehtoja, kuten Prefix Label, Prefix Radius Label, Postfix-painike ja Postfix Label. Valitsimme Postfix-painikkeen vaihtoehdon, koska se on käyttäjäystävällisempi: käyttäjät voivat napsauttaa sitä ja lähettää lomakkeen heti.
Lomakkeen sisällä lisätään uusi sisäkkäinen rivi, joka jakaa näytön 2: 1: een. Tekstinsyöttö saa 8 saraketta ja postfix-painike saa 4. Koska haluamme tämän ulkoasun jopa mobiilinäytössä, asetamme “pienet 8 saraketta” ja “pienet-4 sarakkeet” CSS-valitsimet täällä, Small Grid on pienin koko, jossa haluamme toteuttaa tämän merkinnän.
Näet toisen uuden asian HTML-koodissa, joka on “rivi romahtaa” luokka. Tämä on Foundation 5: n sisäänrakennettu tyyli. Oletusarvoisesti kahden vierekkäisen sarakkeen välissä on viemäri jos lisäät “romahtaa” luokka meidän rivillemme, viemäri katoaa. Teemme tämän, koska haluamme, että painike on tekstinsyötön vieressä ilman välilyöntiä.
Nyt on aika lisätä tämä koodinpätkä
5.2 Flex-video
Uutiskirjeen osan alapuolella lisätään Daily Video Recipe sivupalkkiin. Säätiö 5 auttaa meitä tehdä sulautetut videot reagoiviksi ja pakottaa ne skaalautumaan automaattisesti sen Flex Video -toiminnon avulla.
Flex-videot käyttävät sisäänrakennettua “Flex-video” CSS-luokka. Luomme uuden rivin Daily Video Recipe -sivupalkin osaan ja asetamme siihen yksi laaja sarake “pieni-12 keskisuurten 9 suurten 12 sarakkeiden loppu” Samasta syystä CSS-valitsimet käytimme keskipitkän ruudun epätäydellistä riviä edellisessä vaiheessa.
Tässä on koodi, jonka haluat liittää uutiskirjeen osaan. Voit käyttää mitä tahansa videota Youtubesta, Vimeosta jne.
Päivittäinen videorekisteri
5.3 Sivupalkkivalikko
Sivupalkkivalikossa käytämme säätiön 5 harmonisointitoimintoa. Yhdistelmät ovat web-elementtejä, jotka laajentavat ja kokoavat sisällön loogisiin osiin.
Demo-sivustollamme nämä loogiset osiot ovat 3 eri elintarvikeryhmää (pääastiat, sivusaalit, jälkiruoat), ja jokaisessa ryhmässä on enemmän pienempiä ryhmiä, kuten “Siipikarja”, “sianliha”, “naudanliha”, “Kasvissyöjä”.
Asettamme koko sivupalkkikomponentin yhteen laajaan sarakkeeseen, jossa on sama logiikka kuin aikaisemmissa vaiheissa 5.1 ja 5.2. Laitimme harmonikon sen sisälle järjestämättömäksi listaksi sopivilla sisäänrakennetuilla CSS-luokilla, kuten “harmonikka” ja “harmonikka-navigointi”.
Koska säätiön harmonisointi toimii JavaScriptin kanssa, voit mukauttaa sen käyttäytymistä esiasennettujen JavaScript-muuttujien avulla, jos haluat. Voit tehdä niin katsomalla “Valinnainen JavaScript-kokoonpano” osio akordion dokumenteista. Seuraava koodinpätkä tulee index.html-tiedoston Flex Video -osiossa.
johtopäätös
Nyt kun olemme valmiita demo-sivustoomme, katsotaanpa, mitä muuta voit saavuttaa säätiön 5 kanssa. Tässä demossa käytetyt elementit ovat vain pieni joukko säätiön kehyksen ominaisuuksia. On monia muita asioita, joita voit hyödyntää suunnittelussa, kuten muokattavissa olevat Ikkunapalkit, Breadcrumbs, Lightboxes, Range Sliders, Form Validation ja monet muut. Dokumentit ovat melko hyvin kirjoitettuja, ja ne auttavat kehittäjiä saamaan monia koodin esimerkkejä.
Jos tiedät Sassin, sinulla on vielä enemmän vaihtoehtoja, koska jokainen dokumenttien osio kertoo, miten voit rakentaa omia miksereitäsi ja mitä Sass-muuttujia voit käyttää sivustosi mukauttamiseen. Ennen kuin aloitat verkkosivusi suunnittelun, älä unohda tarkistaa säätiön kehyksen yhteensopivuutta varmistaaksesi, että se toimii kaikilla selaimilla, jotka sinun täytyy rakentaa.
- Näytä demo
- Lataa lähde
