Bouw websites supersnel met Foundation 5 [A Guide]

Het gebruik van een frontend framework kan uw webdesign-workflow op verschillende manieren verbeteren. Het kan u helpen moderne ontwerpprincipes te volgen, zoals mobile-first approach, semantische markup en responsive design. U kunt gebruikmaken van veel kant-en-klare CSS- en JavaScript-elementen en uw ontwikkelingsproces aanzienlijk versnellen, waardoor u meer tijd vrijmaakt om u te concentreren op het ontwerp van visuele en gebruikerservaring.

Zurb Foundation 5 is een van de krachtigste frontend-raamwerken op de markt. Het is logisch gebouwd, eenvoudig te gebruiken en volledig gratis. Hiermee kunt u gebruikmaken van een flexibel CSS-raster waarmee u een schone, gebruikersvriendelijke lay-out kunt maken . Het Foundation-raamwerk is ook zwaar getest, dus het zorgt voor compatibiliteit tussen verschillende browsers en apparaten onderling.

In deze tutorial laat ik je zien hoe je een website supersnel kunt bouwen met Zurb Foundation 5. Je kunt het resultaat bekijken op de demopagina.

Ik zal de lay-out van de website maken, de taak van het toevoegen van subtiele ontwerpelementen wacht op je. De website die we samen in deze tutorial zullen maken, zal de droom van de moderne UX-ontwerper verwezenlijken: hij zal responsief zijn, mobiel-eerst, gebruiksvriendelijk en semantisch.

Vanwege de lengte van deze handleiding zijn hier de snelkoppelingen om snel naar de gewenste sectie te gaan:

• Stichting downloaden 5
• Het raster begrijpen
  • Wanneer de klassen Large-N, Medium-N en Small-N moeten worden gebruikt
• De bovenste menubalk toevoegen
• Het belangrijkste deel bevolken
  • Een paneel voor populaire berichten toevoegen
  • 3 extra berichten toevoegen aan het populaire paneel
  • De CSS mooier maken
  • Meer inhoud toevoegen
  • Paginering toevoegen
• De zijbalk bevolken
  • Het nieuwsbriefformulier
  • Flex video
  • Het zijbalkmenu
• Conclusie

1. Stichting downloaden 5

Je kunt Foundation 5 downloaden in 4 verschillende vormen:

1. de volledige code
2. een lichtere versie met alleen de essentiële code
3. een aangepaste versie waarmee u kunt aanpassen wat u nodig hebt en wat niet
4. een Sass-versie als u uw variabelen en mixins in SCSS wilt instellen.

In deze tutorial zal ik de Complete code met vanilla CSS kiezen, maar je kunt natuurlijk ook andere versies kiezen als je je site wilt stroomlijnen en alleen wilt gebruiken wat je echt nodig hebt.

Nadat u het zipbestand hebt gedownload en uitgepakt, opent u het bestand index.html in uw browser en ziet u zoiets als dit:

Ja, de ontwikkelaars bevatten handige links in het indexbestand. Je kunt het op deze manier achterlaten en een nieuw bestand voor je prototype maken met de naam home.html of iets dergelijks, maar je hoeft het niet echt te bewaren, omdat je de Foundation-documentatie eenvoudig kunt bereiken wanneer je maar wilt.

Open het bestand index.html in uw favoriete codebewerker en verwijder alles in de map sectie, maar vóór de afsluiting

De stijlregels die we aan het app.css- bestand toevoegen om ons prototype behoorlijk te verbeteren, zijn deze:

 header {margin-bottom: 2em; } .popular-additional h4 {font-size: 1.125em; margin-top: 0, 4em; } .row .row.popular-main {margin-bottom: 1.5em; } 

Omdat Foundation 5 relatieve eenheden gebruikt, moeten we "em" -s of "rem" -s gebruiken in plaats van pixels om de regels bij te houden. (U kunt lezen over CSS-eenheden: Pixels vs ems vs% hier.) Ik gebruikte Firefox's Firebug-extensie om te bepalen waar ik de CSS-regels van Foundation 5 moest overschrijven, u kunt elke andere browserextensie voor webontwikkeling gebruiken als u dat wilt.

Hier in dit korte CSS-fragment hoefden we de standaard-CSS van Foundation maar één keer te overschrijven, op de laatste regel (.row.row.popular-main). Hier is hoe de demosite er nu uitziet:

4.4 Meer inhoud toevoegen

Met dezelfde regels als hiervoor voegen we wat meer inhoud toe aan het hoofdgedeelte van de pagina. De inhoud die we nu zullen toevoegen zijn de nieuwste berichten met kleine miniaturen.

Foundation 5 heeft echt coole vooraf voorbereide thumbnail-stijlen die we in deze stap zullen gebruiken. Foundation Thumbnails gebruiken een vooraf gebouwde CSS-klasse genaamd "th" die we moeten toevoegen aan de afbeeldingen die we als miniaturen willen weergeven op de manier zoals je het kunt zien in het onderstaande codefragment.

Voor elke Latest Post voegen we een nieuwe rij toe onder het Populair Paneel met onze aangepaste CSS-klasse genaamd "latest-post" .

Op tablet- en desktopformaat laten we een kleine miniatuur zien met de miniatuurklasse van de Foundation aan de linkerkant en de titel en een korte beschrijving aan de rechterkant. Op mobiel gaan de kop en de beschrijving onder de miniatuur.

Nu heb ik de klassen "medium-3 kolommen" en "medium-9 kolommen" gebruikt om ze het scherm te laten delen in 1: 3, 25% voor de afbeelding en 75% voor de tekst van gemiddelde grootte.

Voeg het volgende codefragment drie keer toe onder het populaire paneel (voor de drie nieuwste berichten). Hier neem ik gewoon de code van één rij Laatste post op, omdat ze allemaal dezelfde HTML-opmaak gebruiken, alleen de inhoud is anders.

  4.5 Paginering toevoegen 
In deze stap zullen we een coole paginering toevoegen onder de meest recente berichten. Foundation 5 biedt ons een helpende hand dankzij de handige, kant-en-klare pagineringklassen. We gebruiken dezelfde code in deze stap die u kunt vinden in het gedeelte 'Geavanceerd' in de Pagination Docs.
Hier zijn de nieuwste berichten met de nieuw toegevoegde pagina Paginering:
 5. De zijbalk bevolken 
Nu we klaar zijn met de hoofdinhoud van onze demosite, is het tijd om de juiste zijbalk te vullen. De rechterzijbalk glijdt weg onder de hoofdinhoud op mobiele en tabletformaten.
U moet alle codefragmenten invoegen in dit gedeelte binnen de 
  
  



Interessante Artikelen






			
	
				

					Analyse-tools voor Google+ Marketeers - Best Of
					

			
	
				

					Het goede, het slechte en het lelijke van Bitcoin-beveiliging
					
						







			
	
				

					20 Meer Tumblr-tips, trucs en hulpmiddelen
					

			
	
				

					5 tips om uw WordPress aan te halen