Bygg nettsider Superfast med Foundation 5 [En guide]
Ved hjelp av en ramme for frontend kan du forbedre webdesign arbeidsflyten på mange måter. Det kan hjelper deg med å følge moderne designprinsipper som mobil-første tilnærming, semantisk markering og responsiv design. Du kan ta innflytelse på mange klare og enkle CSS- og JavaScript-elementer og betydelig Fremskynde utviklingsprosessen, frigjøre mer tid til å fokusere på visuell og brukeropplevelse design.
Zurb Foundation 5 er en av de kraftigste frontendrammene ute på markedet. Det er logisk bygget, brukervennlig og helt gratis. Det lar deg gjøre bruk av a fleksibelt CSS-nett at forenkler etableringen av et rent, brukervennlig layout. Stiftelsen rammeverket er også sterkt testet, så det tar seg av cross-browser og cross-device kompatibilitet.
I denne opplæringen vil jeg vise deg hvordan du kan bygge et nettsted superfast med Zurb Foundation 5. Du kan se på det endelige resultatet på demoversiden.
Jeg vil lage oppsettet til nettstedet, oppgaven med å legge til subtile designelementer venter på deg. Nettstedet vi skal lage sammen i denne opplæringen, vil gjøre drømmen om den moderne UX-designeren: den vil være responsiv, mobil-først, brukervennlig og semantisk.
På grunn av lengden på denne veiledningen, er her snarveiene for å komme til seksjonen du vil ha raskt:
- Nedlasting av Foundation 5
- Forstå gridet
- Når skal du bruke Large-N, Medium-N og Small-N Classes
- Legge til toppmenylinjen
- Populere hoveddelen
- Legge til et panel for populære innlegg
- Legge til 3 flere innlegg til det populære panelet
- Prettying Up The CSS
- Legger til noe mer innhold
- Legge til paginering
- Populere sidefeltet
- Nyhetsbrevet skjemaet
- Flex Video
- Sidebarmenyen
- Konklusjon
1. Laste ned Foundation 5
Du kan laste ned Foundation 5 i 4 forskjellige former:
- den komplette koden
- en lettere versjon med bare den essensielle koden
- en egendefinert versjon hvor du kan tilpasse det du trenger og hva ikke
- en Sass-versjon hvis du vil angi variablene og mixins i SCSS.
I denne veiledningen vil jeg velge Komplett kode med vanilje CSS, men selvfølgelig kan du velge andre versjoner hvis du ønsker å strømlinjeforme nettstedet ditt og bare bruke det du virkelig trenger.
Etter at du har lastet ned og pakket ut zip-filen, åpner du index.html-filen i nettleseren din, og du vil se noe slikt:
Ja, devs inneholdt praktiske koblinger i indeksfilen. Du kan legge den på denne måten og lage en ny fil for prototypen din med navnet home.html eller noe lignende, men du behøver ikke å beholde det som du lett kan nå Foundation Documentation når du vil.
Åpne filen index.html i din favorittkodeditor og slette alt inne i delen, men før avslutningen Stilen regler som vi legger til i app.css filen til ganske opp vår prototype er disse: Som Foundation 5 bruker relative enheter, vi må bruke “em”-s eller “rem”-s i stedet for piksler å holde følge med reglene. (Du kan lese om CSS-enheter: Pixels vs ems vs% her.) Jeg brukte Firefox Firebug-utvidelse for å avgjøre hvor jeg må overstyre Foundation 5s CSS-regler, du kan bruke andre webutviklings nettleserutvidelser hvis du vil. Her i dette korte CSS-kuttet måtte vi bare overstyre Stiftelsens standard CSS bare én gang, ved siste regel (.row .row.popular-main). Slik ser demoområdet ut nå: Ved å bruke de samme reglene som før, legger vi til noe mer innhold i hoveddelen av siden. Innholdet som vi vil legge til nå, vil være siste innlegg med små miniatyrbilder. Stiftelsen 5 har virkelig kule forhåndsdefinerte miniatyrstiler som vi vil benytte seg av i dette trinnet. Foundation Miniatyrbilder bruker a pre-built CSS-klassen kalt “th” som vi må legge til i bildene vi vil vise som miniatyrbilder, slik du kan se det i kodestykket under. For hvert siste innlegg legger vi til en ny rad under det populære panelet med våre egendefinert CSS-klasse kalt “Siste post”. På nettbrettet og på skrivebordsstørrelsen vil vi vise et lite miniatyrbilde ved hjelp av Stiftelsens miniatyrklasse til venstre, og tittelen og en kort beskrivelse til høyre. På mobilen vil overskriften og beskrivelsen gå under miniatyrbildet. Nå brukte jeg “mellomstore 3 kolonner” og “mellomstore 9 kolonner” klasser for å få dem til å dele skjermen i 1: 3, 25% for bildet og75% for teksten opp fra middels størrelse. Sett inn følgende kodestykke under det populære panelet tre ganger (for de tre siste innleggene). Her inkluderer jeg bare koden til en Siste Post-rad, da alle bruker samme HTML-merking, er det bare innholdet som er forskjellig. Innhold av siste innlegg ... Vår egendefinerte CSS-fil opprettet i trinn 4.3, app.css får også noen nye stilregler for å holde utseendet på demoen ryddig. Merk: Hvis du vil legge til din egen tilpassede CSS til Foundation, aldri glem å sjekke, med et web dev verktøy, hvor du må overstyre standardreglene. I CSS-koden nedenfor må vi overstyre dem i den første regelen (.row.row.latest-post). I den andre regelen er det nok å bare bruke vår egen tilpassede velger (.latest-post h4). Vår prototype ser nå ut som dette: I dette trinnet legger vi til en kul paginasjon under de siste innleggene. Stiftelse 5 gir oss en hjelpende hånd ved sine praktiske, bruksklare pagineringsklasser. Vi bruker den samme koden i dette trinnet som du finner i “Avansert” delen i paginasjonsdokumenter. Her er de siste innleggene med den nylig tilførte paginasjonsdelen: Nå som vi er klare med hovedinnholdet på vårt demo-nettsted, er det på tide å fylle høyre sidebar. Høyre sidebjelke vil glide under hovedinnholdet på mobil- og tablettstørrelser. Du må sette inn alle kodestykker i denne delen inne i Venstre sidebjelke vil inneholde en nyhetsbrevsopplysningsskjema (1), en siste video (2) og en trekkmeny for trekkspill i undernavnet under kallenavnet “Vår kokbok” (3). På slutten av dette trinnet vil vi være klare med vår demo som ser slik ut: For å bygge et skjema i Foundation 5, trenger du ikke gjøre noe annet, bare plasser rutenettet inne i HTML-taggen. Hvis du ser på kodestykket under, ser du at vi legger skjemaet på rad der vi setter forskjellige CSS-selektorer for alle 3 gridene: “small-12”, “medium-9”, og “large-12”. Vi valgte denne løsningen fordi en 100% bred nyhetsbrev form ser kult ut på mobil størrelse, men det er virkelig veldig plagsomt på tablettstørrelsen som det blir veldig bred. Heldigvis stiftelse 5 lar oss bruke “Ufullstendige rader”: vi må bare legge til “slutt” klasse til CSS klasse definisjon av den ufullstendige kolonnen. Så dette er hva som skal skje her: På mobilstørrelse vil sidebaret bli vist under hovedinnholdet med en nyhetsbrev-registreringsskjema som dekker hele skjermen. På middels størrelse forblir sidelinjen under hovedinnholdet, men nyhetsbrevet vil bare dekke 75% av skjermen, og de resterende 25% vil forbli tomme. På skrivebordsstørrelsen vil sidebjelken være rett ved siden av hovedinnholdet, og nyhetsbrevet vil dekke hele bredden på sidefeltet igjen. Se Grid Docs for å lese mer om ufullstendige rader. Ta en titt inne i header margin-bottom: 2em; .Popular-additional h4 font-size: 1.125em; margin-topp: 0.4em; .row.row.popular-main margin-bottom: 1.5em;
4.4 Legge til noe mer innhold
Tittel på siste innlegg
.rad .row.latest-post margin-bottom: 1.5em; .latest-post h4 margin-top: 0; fontstørrelse: 1,125em;
4.5 Legge til paginering
5. Populere sidefeltet
5.1 Nyhetsbrevet
Registrer deg på vårt nyhetsbrev
Stiftelsesskjemaer har mange andre oppsettalternativer som Prefix Label, Prefix Radius Label, Postfix Button og Postfix Label. Vi valgte alternativet Postfix Button her som det er mer brukervennlig: Brukerne kan klikke på det og sende skjemaet samtidig.
Innenfor skjemaet legger vi til en ny nestet rad som deler skjermen til 2: 1. Tekstinngangen vil få 8 kolonner, og postfix-knappen vil få 4. Som vi vil ha denne utformingen selv på mobil skjerm, vil vi sette inn “små-8 kolonner” og “små-4 kolonner” CSS-selektorer her, det lille gridet er den minste størrelsen der vi vil implementere denne oppslaget.
Du kan se en ny ting i HTML-koden over som er “rad faller sammen” klasse. Dette er Foundation 5s innebygde stil. Som standard er det en renner mellom to tilstøtende kolonner, men hvis vi legger til “kollapse” klassen til vår rad, vil renden forsvinne. Vi gjør dette fordi vi vil at knappen skal være rett ved siden av tekstinngangen uten mellomrom mellom dem.
Nå er det på tide å sette inn denne kodestykket i
5.2 Flex Video
Under Nyhetsbrev-seksjonen vil vi legge til en daglig videooppskrift på sidebaret. Stiftelsen 5 hjelper oss gjør innebygde videoer lydhør og tvinger dem til å skalere automatisk med sin Flex Video-funksjon.
Flex-videoer bruker det innebygde “flex-video” CSS klasse. Vi lager en ny rad for sidebaravsnittet Daily Video Recipe og plasserer en bred kolonne i den med “små-12 mellomstore-9 store-12 kolonner ende” CSS selectors av samme grunn brukte vi en ufullstendig rad i mellomlinjen i forrige trinn.
Her er koden du må lim inn under Nyhetsbrev-delen. Du kan bruke video fra Youtube, Vimeo osv.
Daglig Videooppskrift
5.3 Sidebjelmenyen
For Sidebarmenyen vil vi bruke Accordion-funksjonen i Foundation 5. Accordions er webelementer som utvider og kollapser innholdet i logiske seksjoner.
På vår demo-side er disse logiske seksjonene de 3 forskjellige matgruppene (Hovedretter, Sideretter, Desserter), og hver gruppe inneholder flere mindre grupper som “Fjærfe”, “Svinekjøtt”, “Storfekjøtt”, “Vegetarisk”.
Vi plasserer hele sidebjelken i en bred kolonne med samme logikk som i trinnene 5.1 og 5.2 før. Vi legger trekkspillet inne i det som en uordnet liste med de riktige innebygde CSS-klassene som “trekkspill” og “trekkspill-navigasjon”.
Siden Foundation Accordions jobber med JavaScript, kan du tilpasse sin oppførsel ved hjelp av forhåndsbygde JavaScript-variabler hvis du vil. For å gjøre det, se på “Valgfri JavaScript-konfigurasjon” delen i Accordion Docs. Følgende kodestykke kommer under delen Flex Video i indeksen index.html.
Konklusjon
Nå som vi er klare med vårt demo-nettsted, la oss se hva du kan oppnå med Foundation 5. Elementene vi brukte i denne demoen er bare et lite sett av funksjonene i Foundation-rammeverket. Det er mange andre ting du kan benytte deg av i designet ditt, for eksempel tilpassbare ikonbarer, brødkrummer, lysbokser, rekkeviddeskydere, form validering og mange andre. Dokumentene er ganske godt skrevet og de hjelper utviklere med mange kodeeksempler.
Hvis du er kjent med Sass, har du enda flere alternativer, da hver del i Docs forklarer hvordan du kan bygge dine egne mixins, og hvilke Sass-variabler du kan bruke til å tilpasse nettstedet ditt. Før du begynner å designe nettsiden din, ikke glem å kontrollere kompatibiliteten til Foundation-rammen for å sikre at den fungerer på alle nettlesere du må bygge for.
- Se demo
- Last ned kilde
