Share
In het openingsgedeelte van deze sessie over het Foundation Framework hebben we gekeken hoe u dit framework kunt gebruiken, wat het kan doen en hoe u een custom build kunt maken. In dit deel zullen we in detail kijken naar het rastersysteem, waarbij we enkele voorbeelden laten zien. We zullen ook een beetje opschudden en een kijkje nemen naar de plug-in Orbit JavaScript Slider; een goede schuifregelaar voor het weergeven van allerlei soorten inhoud.
We gebruiken slechts één belangrijk breekpunt voor het raster in Foundation om lay-outs te verplaatsen voor schermen van meer dan 768 px breed.
Foundation is een modern raamwerk dat de voorkeur geeft aan de eerste mobiele benadering. Dit betekent dat de absolute minimumcode en activa eerst worden geladen om de renderen van de pagina te ondersteunen. Zoals met de meeste moderne frameworks, is Foundation volledig responsive. In tegenstelling tot de meeste, maakt het gebruik van slechts één breekpunt voor structurele verandering. Het breekpunt definieert de viewport-breedte waarmee het grote raster in actie wordt gebracht, dit gebeurt bij 768 px.
Het rastersysteem zelf bestaat eigenlijk uit drie delen; het bureaubladraster, het mobiele netwerk en het blokraster. Omdat de basis eerst mobiel is, laten we beginnen met het mobiele netwerk.
Dit is Foundation
De bovenstaande code is opgebouwd uit drie belangrijke klassen; de eerste is de "rij" -klasse die onze kolommen vasthoudt, net zoals een rij in een spreadsheet kolommen met cellen bevat. In deze demo gebruiken we een raster met twaalf kolommen, dus twaalf is het maximale aantal kolommen dat we binnen één rij kunnen hebben. Zeggen dat, als u meer wilt, Foundation ondersteunt tot zestien kolommen die u kunt selecteren in het aangepaste build-formulier.
De klasse die de kolommen hier definieert is small-12, Als u het getal in deze klasse wijzigt, wordt de breedte van de kolom gedefinieerd. Het gebruik van "small-12" op zichzelf definieert alleen de breedte. Om een kolom daadwerkelijk aan te maken, moeten we deze koppelen met de klasse "columns". Deze drie klassen vormen de basis voor het netwerksysteem.
Simpel gezegd, de bovenstaande markup dicteert dat er een rij is, met een div die twaalf kolommen aan ruimte inneemt (100% van de breedte). Binnen de twaalf kolommen is onze inhoud. Laten we een iets complexere versie bekijken.
Dit is een zijbalk
Dit is het inhoudsgebied
In deze code kunnen we zien dat er twee divs zijn met de klasse "columns". Elk is gekoppeld aan een klasse (zoals "small-4") om de specifieke grootte te dicteren. Foundation lijnt vervolgens deze kolommen naast elkaar in tegenstelling tot boven op elkaar, zoals ze zouden doen bij een normale HTML-documentstroom. Onze twee kolommen bezetten respectievelijk vier kolommen 'breedte en acht kolommen. De twee tellen een volledige breedte van twaalf kolommen; "Kleine-4" is ongeveer 33,3% en "kleine-8" is ongeveer 66,6% van de lichaamsbreedte.
Het is belangrijk om je hier te realiseren dat deze divs bijna oneindig nestbaar zijn. Dit biedt grote flexibiliteit, bijvoorbeeld:
Dit is een zijbalk
# 1
Een berichttitel
Dit is het inhoudsgebied
U kunt zien dat we in een deel van de inhoud aan de zijbalk hebben toegevoegd met een rij, in een kolom, op een rij, deze keer met gebruik van drie kolommen van verschillende grootten. Geweldig spul, toch? Welnu, het is waarschijnlijk tijd om een code van een groot scherm in te voeren om optimaal gebruik te maken van het rastersysteem.
Dit is een zijbalk
Dit is het inhoudsgebied
Hier hebben we een extra klas toegevoegd aan elk van onze kolommen large-3 en large-9. Dit vertelt Foundation dat wanneer de site wordt bekeken op een groter scherm, dit de breedte van de zijbalk van de small-4 met van 33,3% naar large-3 wat neerkomt op ongeveer 25% van de lichaamsbreedte. Ons hoofdgebied kan dus groeien, waardoor er meer ruimte is voor inhoud. Dit is een simplistisch voorbeeld, maar wordt erg handig als het gaat om het opnieuw rangschikken van uw lay-out voor verschillende schermformaten.
Terwijl we naar het rastersysteem kijken, is het de moeite waard te vermelden dat door het gebruik van large-centered en small-centered je kunt een kolom snel en eenvoudig centreren, hoewel je dit alleen kunt doen als er één kolom in de rij is. U kunt ook de volgorde van elementen manipuleren met behulp van de Duwen en Trekken klassen.
39, laatste
Dit neemt de tweede div, die meestal wordt weergegeven na de eerste en trekt deze naar voren terwijl je de eerste duwt om achteraf te verschijnen. U kunt daarom een lijst aan de linkerkant en inhoud aan de rechterkant op grote schermen hebben, maar deze hieronder op kleine schermen indrukken.
Nadat we de ins en outs van de rastersystemen hebben besproken, kunnen we naar het blokraster kijken dat wordt gebruikt om lijstelementen op gelijke afstanden te houden, ongeacht de schermgrootte. Deze zijn ideaal voor geblokkeerde inhoud (zoals die is gegenereerd door een toepassing) omdat ze geen rijen of zelfs kolommen vereisen om correct te worden weergegeven. Als uw lay-out hetzelfde moet zijn op zowel desktop als mobiel, dan hoeft u alleen de small-block-GRID # klassen.
Dit is ook het geval voor de netwerken waarover we eerder gesproken hebben. In plaats van gebruiken small-12 en grote 12 je zou alleen nodig hebben small-12. Gemakkelijk.
Dat concludeert de roostersystemen die Foundation te bieden heeft in hun basisvormen. Houd er rekening mee dat het kleine raster naar het grote raster gaat zodra de breedte van het scherm het belangrijkste breekpunt bereikt. Gebruik het kleine raster om kleinere apparaten te targeten en de grote voor wat doorgaans desktops en grotere schermen zijn.
We gaan de zaken nu wat opschudden door een van de vele nuttige plug-ins van de Foundation te introduceren; Baan.
Deze handige plug-in kan worden gebruikt als een schuifregelaar, zodat u kunt schuiven in afbeeldingen, video of normale HTML-inhoud. Met eenvoudige opmaak is het gemakkelijk om grip op te krijgen en is het een echte eye-pleaser wanneer het op de juiste manier wordt gebruikt.
Orbit gebruikt een lijststructuur; elk lijstitem dat als een dia wordt weergegeven. Hier, samen met reguliere afbeeldingslabels, bevatten onze lijstitems een div met de klas orbit-caption zodat we bij elke afbeelding een bijschrift kunnen plaatsen. Orbit neemt deze code en voegt wat meer markup toe om de zaken te laten werken. Het bevat ook een aantal opties voor het weergeven van paginering, bedieningselementen en zelfs een timer.
Bekijk enkele voorbeelden van parameters die u in Orbit kunt wijzigen:
timer_speed: 10000, animation_speed: 500, bullets: true, stack_on_small: true
Deze omvatten snelheden, bullet paginering en de optie om op kleine schermen te stapelen. Het is belangrijk om te weten dat deze worden doorgegeven bij initialisatie, dus u zou uw standaard moeten nemen $ (Document) .foundation ();, te vinden onderaan de index.html opgenomen in de download:
geef dan de baanopties door.
Naast de hier getoonde opties kunt u klassen toevoegen aan alle elementen die door de plug-in worden geproduceerd. Deze extra opties (en meer) zijn te vinden in de documentatie van de Foundation.
Notitie: Uw Foundation-download bevat alle JavaScript-bits en -stukken die u hebt gekozen, gecompileerd tot één verkleind bestand. Dit staat onderaan de index.html, maar u kunt er ook voor kiezen om individuele JavaScript-bestanden van commentaar te voorzien als u dat liever heeft:
Wil je nu spelen met Foundation zonder het te downloaden? Of wilt u misschien een schone omgeving om nieuwe ideeën te testen? Bekijk dan deze handige jsfiddle. Het maakt gebruik van de nieuwste build van Foundation en bevat alle componenten.
In dit gedeelte van de Foundation-gids hebben we de rastersystemen besproken en kort gesproken over de Orbit-plug-in. In de volgende aflevering kijken we naar navigatie en de sectie-plug-in, samen met nog een handig hulpmiddel ...
Accentsconagua