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. Jij kan gebruik maken van veel kant-en-klare CSS- en JavaScript-elementen en aanzienlijk versnellen uw ontwikkelingsproces, meer tijd vrijmaken om zich te concentreren op het ontwerp van visuele en gebruikerservaring.
Zurb Foundation 5 is een van de krachtigste frontend frameworks op de markt. Het is logisch gebouwd, gemakkelijk te gebruiken en volledig gratis. Hiermee kunt u gebruik maken van een flexibel CSS-raster dat faciliteert bij het creëren van een schone, gebruiksvriendelijke lay-out. Het Foundation-raamwerk is ook zwaar getest, dus het zorgt voor compatibiliteit tussen verschillende browsers en apparaten onderling.
In deze tutorial zal ik je laten 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, gebruikersvriendelijk 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 te gebruiken
- 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:
- de volledige code
- een lichtere versie met alleen de essentiële code
- een aangepaste versie waarmee u kunt aanpassen wat u nodig hebt en wat niet
- 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:
Jazeker, de ontwikkelaars hadden 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 gemakkelijk kunt bereiken wanneer je maar wilt.
Open het bestand index.html in uw favoriete codebewerker en verwijder alles binnen de sectie, maar vóór de sluiting De stijlregels die we toevoegen aan de app.css bestand om ons prototype een beetje mooier te maken, zijn deze: Omdat Foundation 5 relatieve eenheden gebruikt, we moeten gebruiken “em”-s of “rem”-s 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 vervangen, 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 vervangen, op de laatste regel (.row.row.popular-main). Hier is hoe de demosite er nu uitziet: Met dezelfde regels als hiervoor voegen we wat meer inhoud toe aan het hoofdgedeelte van de pagina. De inhoud die we nu zullen toevoegen, is de Laatste berichten met kleine miniaturen. Foundation 5 heeft echt coole vooraf voorbereide miniaturen die we in deze stap zullen gebruiken. Foundation Thumbnails gebruiken a voorgebouwde CSS-klasse genoemd “th” die we moeten toevoegen aan de afbeeldingen die we als miniaturen willen weergeven op de manier zoals je deze 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 genoemd “laatste bericht”. 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 “middelste 3 kolommen” en “middelgrote 9 kolommen” klassen 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. Inhoud van Laatste bericht ... Ons aangepast CSS-bestand gemaakt in stap 4.3, app.css krijgt ook enkele nieuwe stijlregels om de looks van de demo opgeruimd te houden. Notitie: Als u uw eigen aangepaste CSS aan Foundation wilt toevoegen, vergeet dan nooit om te controleren, met een web dev tool, waar u de standaard regels moet overschrijven. In het onderstaande CSS-fragment moeten we ze vervangen in de eerste regel (.row .row.latest-post). In de tweede regel volstaat het om gewoon onze eigen aangepaste selector te gebruiken (.latest-post h4). Ons prototype ziet er nu als volgt uit: In deze stap voegen we een coole paginering toe 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 de “gevorderd” sectie binnen de paginering Docs. Hier zijn de nieuwste berichten met de nieuw toegevoegde pagina Paginering: 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 De linkerzijbalk bevat een aanmeldingsformulier voor de nieuwsbrief (1), een nieuwste video (2) en een zijbalkmenu in de vorm van een accordeon onder de bijnaam “Ons kookboek” (3). Aan het einde van deze stap zullen we klaar zijn met onze demo die er als volgt uitziet: Om een formulier in Foundation 5 te bouwen hoef je niets anders te doen, plaats gewoon het grid in een HTML-tag. Als u het onderstaande codefragment bekijkt, ziet u dat we het formulier op een rij plaatsen waarin we verschillende CSS-kiezers instellen voor alle 3 rasters: “small-12”, “middellange-9”, en “grote 12”. We kozen voor deze oplossing omdat een 100% breed nieuwsbriefformulier er cool uitziet op mobiel formaat, maar het is echt onhandig wat betreft de tabletgrootte als het wordt heel breed. Gelukkig kunnen we met Foundation 5 gebruiken “Onvolledige rijen”: we hoeven alleen maar het “einde” class naar de CSS-klassendefinitie van de onvolledige kolom. Dus dit is wat hier gaat gebeuren: op mobiele grootte wordt de zijbalk onder de hoofdinhoud weergegeven met een aanmeldingsformulier voor de nieuwsbrief dat het hele scherm beslaat. Op middelgroot formaat blijft de zijbalk onder de hoofdinhoud, maar het Nieuwsbrief-formulier bedekt slechts 75% van het scherm en de resterende 25% blijft leeg. Op het bureaubladformaat staat de zijbalk naast de hoofdinhoud en zal het Nieuwsbrief-formulier de hele breedte van de zijbalk opnieuw dekken. Raadpleeg de Grid-documenten voor meer informatie over onvolledige rijen. Neem nu een kijkje in de header margin-bottom: 2em; .popular-additional h4 font-size: 1.125em; margin-top: 0.4em; .row .row.popular-main margin-bottom: 1.5em;
4.4 Meer inhoud toevoegen
Titel van Laatste bericht
.row .row.latest-post margin-bottom: 1.5em; .latest-post h4 margin-top: 0; lettergrootte: 1.125em;
4.5 Paginering toevoegen
5. De zijbalk bevolken
5.1 Het nieuwsbriefformulier
Schrijf je in voor onze nieuwsbrief
Foundation Forms hebben veel andere lay-outopties zoals Prefixlabels, Prefixradiuslabels, Postfix-knoppen en Postfix-labels. We hebben hier voor de Postfix-knop gekozen omdat deze gebruiksvriendelijker is: gebruikers kunnen erop klikken en het formulier in één keer verzenden.
In het formulier voegen we een nieuwe geneste rij toe die het scherm verdeelt naar 2: 1. De tekstinvoer krijgt 8 kolommen en de postfix-knop krijgt 4. Omdat we deze lay-out zelfs op mobiel scherm willen hebben, zullen we de “kleine 8 kolommen” en “kleine 4 kolommen” CSS-selectors hier, waarbij de Small Grid de kleinste maat is waar we deze markup willen implementeren.
Je ziet nog een nieuw ding in de HTML-code waarboven de “rij instorten” klasse. Dit is de ingebouwde stijl van Foundation 5. Standaard is er een rugmarge tussen twee aangrenzende kolommen, maar als we de “ineenstorting” Klasse voor onze rij, de goot zal verdwijnen. We doen dit omdat we willen dat de knop naast de tekstinvoer staat, zonder enige ruimte ertussen.
Nu is het tijd om dit codefragment in te voegen in de
5.2 Flex-video
Onder het gedeelte Nieuwsbrief zullen we een dagelijks video-recept aan onze zijbalk toevoegen. Stichting 5 helpt ons maak ingesloten video's responsief en dwing ze automatisch te schalen met zijn Flex Video-functie.
Flex-video's gebruiken de ingebouwde “flex-video” CSS-klasse. We maken een nieuwe rij voor de zijbalk van het Daily Video Recipe en plaatsen er een brede kolom in met de “klein-12 medium-9 groot-12 kolommen einde” CSS-selectors om dezelfde reden dat we in de vorige stap een onvolledige rij in het Medium Grid hebben gebruikt.
Hier is de code die je moet plakken onder het gedeelte Nieuwsbrief. U kunt elke video van Youtube, Vimeo enz. Gebruiken.
Dagelijks video-recept
5.3 Het zijbalkmenu
Voor het zijbalkmenu gebruiken we de accordeonfunctie van Stichting 5. Accordeons zijn webelementen die de inhoud uitvouwen en samenvouwen tot logische secties.
Op onze demosite zijn deze logische secties de 3 verschillende voedselgroepen (hoofdgerechten, bijgerechten, desserts), en elke groep bevat meer kleinere groepen zoals “Gevogelte”, “Varkensvlees”, “Rundvlees”, “Vegetarisch”.
We plaatsen de hele zijbalk-accordeon in één brede kolom met dezelfde logica als in de voorgaande 5.1 en 5.2 stappen. We plaatsen de accordeon erin als een ongeordende lijst met de juiste ingebouwde CSS-klassen zoals “accordeon” en “accordeon-navigatie”.
Omdat Foundation Accordions met JavaScript werkt, kunt u het gedrag aanpassen met behulp van vooraf gemaakte JavaScript-variabelen, als u dat wilt. Om dit te doen, kijk naar de “Optionele JavaScript-configuratie” sectie in de accordeon-documenten. Het volgende codefragment komt onder het gedeelte Flex Video in het bestand index.html.
Conclusie
Nu we klaar zijn met onze demosite, laten we eens kijken wat u nog meer kunt bereiken met Foundation 5. De elementen die we in deze demo hebben gebruikt, zijn slechts een klein aantal kenmerken van het Foundation-framework. Er zijn veel andere dingen die u in uw ontwerp kunt gebruiken, zoals aanpasbare pictogrammenbalken, broodkruimels, lichtbakken, bereikschuifregelaars, formuliervalidatie en vele andere. De Docs zijn behoorlijk goed geschreven en ze helpen ontwikkelaars met veel codevoorbeelden.
Als u bekend bent met Sass heeft u nog meer opties, omdat in elk gedeelte in de Documenten wordt uitgelegd hoe u uw eigen mixins kunt bouwen en welke Sass-variabelen u kunt gebruiken om uw site aan te passen. Voordat u begint met het ontwerpen van uw webpagina, vergeet dan niet om de compatibiliteit van het Foundation-framework na te gaan om te controleren of het werkt in alle browsers waarvoor u moet bouwen.
- Demo bekijken
- Download de bron
