Share
I åpningsdelen av denne sesjonen på Foundation Framework, tok vi en titt på hvordan du kunne gjøre bruk av dette rammeverket, hva det kan gjøre og hvordan du kan mote en tilpasset bygg. I denne delen vil vi se nærmere på rutenettet, og demonstrere noen eksempler når vi går. Vi vil også riste opp ting litt og ta en titt på Orbit JavaScript Slider plugin; En flott glidebryter for å vise alle slags innhold.
Vi bruker bare ett stort bruddpunkt for rutenettet i Foundation for å skifte layouter for skjermer over 768px bred.
Stiftelsen er et moderne rammeverk som favoriserer mobilens første tilnærming. Dette betyr at den bare minste koden og eiendelene lastes først for å hjelpe sidevisningshastigheten. Som med de fleste moderne rammer, er Foundation fullt responsivt. I motsetning til de fleste bruker den bare ett bruddpunkt for strukturelle endringer. Brytepunktet definerer visningsbredden der det store rutenettet blir satt i gang, dette skjer ved 768 px.
Rutenettet har i seg selv tre deler; skrivebordet rutenettet, mobilnettet og blokkruten. Siden fundamentet er mobilt først, la oss begynne med mobilnettet.
Dette er Foundation
Koden ovenfor er bygget opp av tre viktige klasser; den første er "rad" klassen som inneholder våre kolonner, mye på samme måte som en rad i et regneark inneholder kolonner av celler. I denne demoen bruker vi et tolv kolonne rutenett, så tolv er det maksimale antall kolonner vi kan ha innenfor en rad. Å si at hvis du trenger mer, støtter Foundation opptil seksten kolonner som du kan velge i den egendefinerte byggeformen.
Klassen som definerer kolonnene her er small-12, endring av tallet i denne klassen definerer bredden på kolonnen. Å bruke "small-12" på egen hånd definerer imidlertid bare bredden. For å faktisk lage en kolonne, må vi koble den sammen med kolonnen "kolonner". Disse tre klassene er grunnlaget for rutenettet.
Helt enkelt dikterer ovennevnte markering at det er en rad med en div som skal ta opp tolv kolonner verdt plass (100% av bredden). Innenfor de tolv kolonnene er innholdet vårt. La oss ta en titt på en litt mer kompleks versjon.
Dette er et sidebjelke
Dette er innholdsområdet
I denne koden kan vi se at det er to divs med "kolonner" -kursen. Hver er kombinert med en klasse (for eksempel "small-4") for å diktere den spesifikke størrelsen. Stiftelsen linjer deretter disse kolonnene opp ved siden av hverandre i motsetning til hverandre, som de ville i vanlig HTML-dokumentflyt. Våre to kolonner opptar henholdsvis fire kolonners bredde og åtte kolonner. De to totalt en full bredde på tolv kolonner; "Small-4" er rundt 33,3% og "small-8" er omtrent 66,6% av kroppsbredden.
Det som er viktig å innse her er at disse divene er nesten uendelig nestable. Dette gir stor fleksibilitet, for eksempel:
Dette er et sidebjelke
#1
En posttittel
Dette er innholdsområdet
Du kan se at vi har lagt til noe i sidelinjen ved hjelp av en rad, i en kolonne, på rad, denne gangen bruker tre kolonner av varierende størrelse. Gode ting eh? Vel, det er nok tid til å kaste inn noen storskjermer for å dra full nytte av nettverket.
Dette er et sidebjelke
Dette er innholdsområdet
Her har vi lagt en ekstra klasse til hver av våre kolonner large-3 og large-9. Dette forteller Stiftelsen at når nettstedet vises på en større skjerm, bør det endre bredden på sidefeltet fra small-4 med 33,3% til large-3 som tilsvarer rundt 25% av kroppsbredden. Vårt hovedområde er dermed i stand til å vokse, noe som gir mer plass til innhold. Dette er et forenklet eksempel, men blir veldig nyttig når det gjelder å omorganisere oppsettet for forskjellige skjermstørrelser.
Mens vi ser på rutenettet, er det verdt å nevne det ved å bruke large-sentrert og små-sentrert Du kan raskt og sentrere en kolonne, selv om du bare kan gjøre dette hvis det er en kolonne i raden. Du kan også manipulere rekkefølgen av elementene ved hjelp av trykk og dra klasser.
39, sist
Dette tar andre div, som vanligvis vil bli vist etter den første, og trekker den til forsiden mens du trykker den første som dukker opp etterpå. Du kan derfor ha en liste til venstre og innhold til høyre på store skjermer, men trykk det på små skjermer.
Etter å ha dekket inn og ut av rutenettet, kan vi se på rutenettet som brukes til å holde listelementene jevnt fordelt, uansett hvilken skjermstørrelse. Disse er ideelle for blokkert innhold (som det som genereres av et program), da de ikke krever at rader eller kolonner vises riktig. Hvis oppsettet ditt er ment å være det samme både på skrivebordet og på mobilen, trenger du bare å bruke small-block-grid- # klasser.
Dette gjelder også nettene vi tidligere snakket om. Istedenfor å bruke small-12 og large-12 du trenger bare small-12. Lett.
Det konkluderer med de gridsystemene Foundation har å tilby i sine grunnleggende former. Husk at det lille rutenettet vil skifte til det store rutenettet når skjermbredden treffer hovedbruddspunktet. Bruk det lille rutenettet til å målrette mot mindre enheter og det store for det som vanligvis er skrivebord og større skjermer.
Vi skal riste opp ting litt nå, ved å introdusere en av Stiftelsens mange nyttige plugins; Orbit.
Denne praktiske plugin kan brukes som en skyveknapp, slik at du kan skyve i bilder, video eller vanlig HTML-innhold. Med enkel markering er det lett å ta tak i og er en ekte øye-pleaser når den brukes riktig.
Orbit bruker en liste struktur; hvert listeelement blir vist som et lysbilde. Her, sammen med vanlige bildeetiketter, inneholder våre listeposter en div med klassen bane-bildetekst Tillater oss å legge inn en bildetekst på hvert bilde. Bane tar denne koden og legger til noe mer markering for å få ting til å fungere. Den inneholder også en rekke alternativer for visning av paginering, kontroller og til og med en timer.
Ta en titt på noen eksempler på parametere du kan endre i Orbit:
timer_speed: 10000, animation_speed: 500, kuler: true, stack_on_small: true
Disse inkluderer hastigheter, punktpaginering og muligheten til å stable på små skjermer. Det er viktig å merke seg at disse er bestått ved initialisering, så du må ta standarden din $ (Document) .foundation ();, funnet nederst i indeksen.html inkludert i nedlastingen:
deretter passere i banealternativer.
I tillegg til alternativene som vises her, kan du legge til klasser for alle elementene som produseres av plugin. Disse ekstra alternativene (og mer) finnes i stiftelsesdokumenter.
Merk: Din Foundation-nedlasting vil inkludere alle JavaScript-brikkene og -brikkene du valgte, samlet inn i en minifisert fil. Dette refereres nederst i indeksen.html, men du kan også velge å ikke kommentere individuelle JavaScript-filer hvis du foretrekker:
Vil du leke med Foundation akkurat nå uten å laste den ned? Eller kanskje du vil ha et rent miljø for å teste nye ideer? Så sjekk ut denne praktiske jsfiddle. Den bruker den nyeste bygningen av Foundation og inneholder alle komponentene.
I denne delen av stiftelsesveiledningen dekket vi gridsystemene og snakket kort om Orbit-plugin. I neste avlevering vil vi se på navigasjon og delen plugin, sammen med et annet nyttig verktøy ...
Accentsconagua