Bygg nettsider Superfast med Foundation 5 [A Guide]

Ved hjelp av en ramme for frontend kan du forbedre webdesign arbeidsflyten på mange måter. Det kan hjelpe deg med å følge moderne designprinsipper som mobil-første tilnærming, semantisk markering og responsiv design. Du kan utnytte mange av CSS og JavaScript-elementene som er klare til bruk, og øker hastigheten på utviklingsprosessen, og frigjør mer tid til å fokusere på visuell og brukeropplevelse.

Zurb Foundation 5 er en av de mest kraftige frontendrammene ute på markedet. Den er logisk bygget, enkel å bruke og helt gratis. Den lar deg benytte seg av et fleksibelt CSS-nett som gjør det lettere å lage en ren, brukervennlig layout . Stiftelsens rammeverk 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 som er superfast med Zurb Foundation 5. Du kan se på det endelige resultatet på demoversiden.

Jeg vil lage oppsettet på nettstedet, og oppgaven med å legge til subtile designelementer venter på deg. Nettstedet vi skal lage sammen i denne opplæringen, vil utfø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 det 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-klassene
• 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 sidebjelken
  • Nyhetsbrevet
  • Flex Video
  • Sidebarmenyen
• Konklusjon

1. Laste ned Foundation 5

Du kan laste ned Foundation 5 i 4 forskjellige former:

1. den komplette koden
2. en lettere versjon med bare den essensielle koden
3. en egendefinert versjon hvor du kan tilpasse det du trenger og hva ikke
4. en Sass-versjon hvis du vil angi variablene og mixinene 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.

Når 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 enkelt kan nå Foundation Documentation når du vil.

Åpne filen index.html i favorittkodeditoren din og slett alt inne i seksjonen, men før avslutningen

Stilen regler som vi legger til app.css filen til ganske opp vår prototype er disse:

 header {margin-bottom: 2em; } .Popular-additional h4 {font-size: 1.125em; margin-topp: 0.4em; } .row.row.popular-main {margin-bottom: 1.5em; } 

Siden Foundation 5 bruker relative enheter, må vi bruke "em" -s eller "rem" -s i stedet for piksler for å 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å:

4.4 Legge til noe mer innhold

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 de siste innleggene med små miniatyrer.

Foundation 5 har virkelig kule forhåndsdefinerte miniatyrstiler som vi vil benytte seg av i dette trinnet. Foundation Thumbnails bruker en forhåndsbygd CSS-klasse kalt "th" som vi må legge til bildene vi vil vise som miniatyrbilder, slik du kan se det i kodestykket nedenfor.

For hver siste post legger vi til en ny rad under det populære panelet med vår egendefinerte CSS-klasse kalt "siste innlegg" .

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 "medium-3 kolonner" og "medium-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 postraden, da alle bruker samme HTML-merking, er det bare innholdet som er forskjellig.

  4.5 Legge til paginering 
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 avanserte delen i paginasjonsdokumenter.
Her er de siste innleggene med den nylig tilførte paginasjonsdelen:
 5. Populere sidefeltet 
Nå som vi er klare med hovedinnholdet på vår demo-side, er det på tide å fylle ut den rette sidebjelken. Høyre sidebjelke vil slippe under hovedinnholdet på mobil- og tablettstørrelser.
Du må sette inn alle kodestykker i denne delen inne i 
  
  



Interessante Artikler






			
	
				

					Bekreft skjemainnganger enkelt på hvilken som helst nettleser med Validatr
					

			
	
				

					Hvordan lage animasjoner og overganger med Motion UI
					
						







			
	
				

					20 Inspirerende ideer for minimal hjemliv
					

			
	
				

					Hvordan en fullblåst cyberwarfare kan forandre verden