Share
I denne opplæringen skal jeg løpe gjennom prosessen med å lage den enkle Instagram-baserte porteføljen som designet i en tidligere opplæring av Tomas Laurinavicius.
Thomas har gjort en god jobb, og holder designen enkel, romslig og funksjonell, så jeg tror det er bare rettferdig, vi gjør det samme når vi bygger det. For å gjøre livet enklere skal vi stole på noen få verktøy og biblioteker, så la oss begynne å se på dem.
Det er noen ting vi må klargjøre før vi starter oppbyggingen vår. De er:
Først og fremst må du få Sass opp og kjøre på maskinen din. Den enkleste måten å gjøre det på er å bruke en av de utmerkede appene som er tilgjengelige for å gjøre alt som skjer og kompilere. Jeg bruker for tiden Koala som er kryssplattform og gratis, så det er et veldig godt alternativ for å komme raskt opp. Det finnes alternativer som Scout, Prepros og Compass app. De gir nær nok samme funksjonalitet, så valget er ditt!
Neste opp er Bootstrap. Vi skal bruke Bootstrap på et svært grunnleggende nivå, for å håndtere noen av de responsive elementene på siden. Vi ønsker spesielt å laste ned Sass versjon så vi kan inkludere det i vårt eget stilark og gjøre bruk av de tilgjengelige variablene. Gå videre og last ned den nyeste versjonen.
Nesten der! Vi trenger nå å ta tak i en kopi av Instafeed.js som håndterer alle arbeidstakernes bilder fra Instagram. Det er verdt å merke seg at for å få alt fra Instagram må du gi plugin med en klient-ID som kan genereres ved å registrere seg på Instagram og fylle ut skjemaet i utvikler-delen.
Til slutt bør vi laste ned den nyeste versjonen av Modernizr, så hvis det er nødvendig, kan vi målrette mot bestemte nettleserfunksjoner, og vi har også HTML5-shim for eldre nettlesere. Dette er ikke strengt nødvendig, men jeg liker å inkludere det i prosjekter bare for å være sikker.
Nå har vi disse eiendelene vi kan begynne å bygge!
Vi må lage noen filer og mapper for prosjektet vårt, så fortsett og opprett følgende i rotkatalogen av prosjektet.
Dette er vår grunnleggende startblokk. Deretter finner du Bootstrap-arkivet du lastet ned tidligere, og trekker det ut et sted du lett kan finne. Inne i den utpakkede mappen skal være en mappe som heter eiendeler. Åpne denne mappen og du vil se noe som ligner på følgende:
Kopier fonterkatalog inn i roten av prosjektet med de andre mappene vi nettopp har laget. Åpne opp Javascripts og kopier bootstrap.jsfilen inn i jsmappe av prosjektet vårt. Til slutt åpner du stilark kataloger og kopierer bootstrap.scssfil og bootstrapmappe inn i css mappe av prosjektet vårt. Våre filer og mapper skal nå se slik ut ...
Godt jobba! Finn nå instafeed.min.js og Modernizr filer du lastet ned tidligere, og kopier dem til jsmappe. Vi trenger bare å sette opp noen flere ting før vi kan begynne å lage oppsettet.
Nå er det på tide å sette prosjektet opp i Sass-appen du har valgt å bruke. I Koala handler dette om å dra mappen til appvinduet. Jeg tror det er en lignende prosess for de andre også. Den neste tingen jeg alltid gjør når du setter opp ting, er å se på Sass-kompileringsalternativene og, hvis tilgjengelig, merk av i boksen for å bruke Autoprefixer. Denne praktiske tillegget vil analysere vår Sass-fil og legge til eventuelle leverandørprefikser vi trenger, slik at vi ikke trenger å bekymre oss for å skrive dem selv. Du kan gjerne spille om med innstillingene din Sass app gir for å få det beste oppsettet for deg. Jeg liker å holde ting enkelt og vil normalt bare sjekke Autoprefix og en utgangsstil av Utvidet (komprimert i produksjon).
Åpne prosjektet i hvilken redaktør du bruker, så vi kan legge til noen få filer.
Først av alt under csskatalog legg til en fil som heter style.scss. Så inne i js mappe legg til en fil som heter app.js.
Pass på at du oppdaterer Sass-appen du bruker, slik at den plukker opp de nye filene. Noen gjør dette automatisk, men det er best å sjekke og manuelt oppdatere om nødvendig.
Jeg tror det er all filen satt opp for nå. Vi kan fortsette med å lage oppsettet!
Åpne opp index.html og skriv inn (eller kopier / lim inn) følgende grunn HTML:
Instagram Portfolio
Vi har vår første bit av kode! La oss slå det ned.
De delen inneholder nødvendig visningsporttag så våre medieforespørsler fungerer riktig. Deretter gir vi siden en tittel og inkluderer en tagg for de forskjellige Google-skriftene vi vil bruke. Skriftene her er basert på de som brukes i design av Thomas. Neste linje kan virke rart fordi vi ikke har opprettet en style.css filen ennå, men å generere den filen vil bli håndtert av vår Sass-kompilator. Til slutt inkluderer vi Modernizr.
De elementet inneholder fire andre elementer for å holde hver av de båndene som vises på designet. Jeg har brukt noen beskrivende klasser til elementer slik at vi tydelig kan se hva de skal brukes til.
Legg til følgende utdrag under bunntekst-bunn seksjon:
Disse >
Vi har våre grunnleggende byggeklosser, så la oss fortsette ved å sette opp vår style.scss filen litt.
/ * * Egendefinerte variabler * / $ hovedfonter: 'Lato', sans-serif; $ sub-font: 'Montserrat', sans-serif; $ fancy-skrifttype: 'Kaushan Script', kursiv; $ fontstørrelse: 16px; $ svart: # 000; $ hvit: #FFF; $ grå: # 585c65; $ mediumgrey: # 9b9b9b; $ lysegrå: #eeeeee; $ blå: # 3466a1; $ polstring: 10px; $ margin: 10px; / * * Overstyr Bootstrap-variabler * / $ font-family-sans-serif: $ main-font; @import 'bootstrap';
Her setter vi opp noen variabler som vi kan bruke i stilarket vårt senere. Først opp er noen skriftrelaterte variabler. Dette er hvor vi tar med Google-skriftene vi inkluderte tidligere, og gir hver en tilbakebetaling hvis en eller annen grunn ikke laster eller jobber skrifttypen.
Vi har da noen fargevariabler som er blitt plukket fra designet. Dette er en grunn jeg elsker Sass så mye som vi kan sette opp våre farger her og glemme å huske eller kopiere hex-verdier over alt.
Til slutt, for våre tilpassede variabler, har vi en enkel marginal og polstring. Jeg liker å inkludere disse selv, jeg bruker dem ikke alltid. Det er fint å ha en grunnverdi å jobbe med og gir oss muligheten til å gjøre ensartede endringer i elementer som bruker variablene.
Det neste avsnittet er hvor vi inkluderer Bootstrap, men før vi gjør det, bør vi sette Bootstrap-hovedskriftsvariabelen $ font-family-sans-serif å likne vår tidligere opprettet $ Hoved-font variabel. Dette betyr at når Bootstrap er kompilert, vil den bruke hovedtypen vår i stedet for sin egen.
De @importereerklæring her inkluderer ikke .SCSS på slutten av filen, da dette ikke er nødvendig når du inkluderer andre Sass-filer. Sass er flink nok til å søke etter og finne den riktige filen. Lagre filen, og forhåpentligvis vil Sass-appen din innse at du har lagret en Sass-fil og kompilere style.css.
La oss fortsette å legge til noen stiler:
* posisjon: relativ; boks-størrelse: border-box; body color: $ gray; skriftstørrelse: $ font-size; header maks-høyde: 600px; høyde: 600px; overløp: skjult;
Her bruker vi universell velgeren * å sette alt som stilling: relativså det er ingen overraskelser når du bruker absolutt posisjonerte elementer. Det er også praktisk å universelt sette box-sizing eiendom til border-box slik at vi kan bruke prosentvise bredder og ikke bekymre deg for noen polstring elementet har innvirkning på oppsettet.
Vi setter deretter en standard skriftfarge og størrelse for kroppen vår og gir element litt høyde.
Det er det for vår Sass-fil for nå. Hodet tilbake i index.html filen slik at vi kan begynne å jobbe med overskriften.
Overskriften til denne designen er ukomplisert i design, noe som gjør det enklere å bygge det. Markeringen vi skal jobbe med, er som følger:
JonathanHallo! Jeg er Jonathan
Jeg elsker å reise rundt i verden og designe vakre ting
Facebook Twitter Instagram
Dette skal gå inn mellom vår tags. Du vil legge merke til at bildetageren først refererer til et bilde som ikke eksisterer. Vi må kutte dette bildet ut av PSD. Jeg vil ikke gå inn i detaljene om hvordan du gjør det i denne opplæringen, men hvis du trenger hjelp med prosessen, sjekk ut dette raske tipset.
Resten av toppteksten består av tre div elementer som inneholder navn, titler og sosiale lenker. Jeg har brukt noen klasser til disse elementene som vi vil bruke neste i vår Sass-fil.
La oss starte med å legge til noen linjer med kode inne i vår Overskrift erklæring.
img posisjon: fast; topp: 0px; venstre: 50%; margin-venstre: -600px; bredde: 1200px; @media skjerm og (min bredde: $ skjerm-lg) top: auto; venstre: auto; margin: 0; bredde: 100%;
Dette burde være nestet innsiden de Overskrift del av vår Sass-fil rett under deklarasjonene for selve overskriften.
Du ser her at vi har satt posisjonen til imgtag til fast. Dette betyr at bildet vil holde seg i posisjon når brukeren ruller, og dermed skape en dybdefølelse. Tanken er at innholdet ruller opp over bildet i overskriften. Når vi vedtar en mobil første metodikk, gir våre basestiler bildet et sett bredde og plasserer det i midten ved å bruke en negativ venstre margin, akkurat halvparten av bredden. Dette virker fordi transformasjonspunktet til bildet i CSS er øverst til venstre, så når vi gir en venstre: 50%erklære det vil plassere den venstre kanten av elementet i midten av skjermen. Det lille negative marginaltricket hjelper oss med riktig sentrert elementer med absolutt eller fast posisjonering.
Vi har da først bruk av en av våre størrelser for skjermstørrelse. Vi sier her: På store vindustørrelser gjør bildet fylle nettleserbredden og plasser den tilbake i øverste venstre hjørne. Viktig, vi må nullstille marginen slik at bildet ikke blir trukket til venstre litt.
La oss ta en første titt på arbeidet vårt i nettleseren!
La oss fortsette ...
.navn font-size: 21px; posisjon: absolutt; topp: 50px; venstre: 50px; farge: $ hvit; .titles posisjon: absolutt; bunn: 40%; bredde: 100%; tekst-align: center; @media skjerm og (min bredde: $ skjerm-lg) bunn: 50%; h1, h2 bredde: 100%; farge: $ hvit; margin: 0;
Her setter vi opp Navnog titler elementernes posisjon og skriftstiler. Vi må bruke en medieforespørsel på titlerelement for å skyve det opp litt mer på store skjermer. La oss utføre en rask oppdatering i nettleseren.
Det ser bedre ut allerede! La oss rydde opp de overskriftene litt mer.
h1 tekst-transform: store bokstaver; font-weight: 700; skriftstørrelse: 36px; brevavstand: 0,06em; margin-bunn: $ margin; span display: block; @media skjerm og (min bredde: $ skjerm-md) display: inline; h2 font-size: 16px; bredde: 70%; margin: 0 auto; @media skjerm og (min bredde: $ skjerm-lg) bredde: 100%; margin: 0;
Det viktigste å merke seg her ville være stil for spanelement. Vi bruker spanmerk i koden vår for å pakke inn en del av hovedteksten. Dette gjør at vi kan målrette den i CSS og, slik vi har gjort her, endre oppsettet. På mobil trenger vi det å være et blokknivåelement, så det stabler under, men på større skjermer er det greit for det å kjøre sammen med som vanlig tekst. Dette burde se mye bedre nå ...
En rask stil vi bør legge inn er for navnet i øverste venstre hjørne. Plasser følgende kode i slutten av Sass-filen, utenfor Overskrift blokkere.
.fancy font font-family: $ fancy-font;
Vi søker vår fancy font til ethvert element med denne klassen. Dette er slik at vi kan bruke dette når vi trenger det, og det er ikke begrenset til noe bestemt element.
Vi bør være oppmerksom på de sosiale ikonene som i dette tilfellet vil innebære å lage sprites for normale oppløsnings skjermer og høyoppløselig (retina) skjermer.
Gå videre til Iconfinder og ta tak i hvert av ikonene i designet. Det er best å velge en større størrelse enn vi trenger, så det er ingen problemer som skalerer dem. Jeg velger alltid 256px størrelsen.
I din grafiske redigeringsprogramvare (for eksempel Photoshop) oppretter du en ny fil som er 152px med 52px. Dra i hvert av ikonene og skala hver til 48px med 48px. Ikonene kommer svart, men vi trenger dem til å være hvite, så bruk et filter til hver enkelt.
Nå må vi plassere dem. Vi har to piksler med plass rundt hverandre, så flytt den første til venstre kanten og knyt den bort med to piksler. Likeledes nudge den bort fra toppkanten med to piksler. Plasser de neste ikonene to piksler fra toppkanten og to piksler unna hverandre. Du burde ende opp med dette:
Dette blir vår Retina-versjon. Ignorer den svarte bakgrunnen her, jeg har lagt til dette bare slik at vi faktisk kunne se ikonene i bildet.
Bruke Photoshop Lagre for web funksjon (eller tilsvarende i søknaden din) lagre dette bildet med filnavnet [email protected]. Pass på at du plasserer den i bildemappen av prosjektet vårt. Nå må vi endre størrelsen på spritbildet for å gjøre standardoppløsningsstørrelsen. Vi kan gjøre dette i Photoshop direkte i Lagre for web dialogboks. Det viktigste er at bildet må endres til 76px med 52px. Lagre denne størrelsen som sosial-sprite.pngog legg det i bildemappen også.
Med det har vi våre sprites så la oss skrive noen kode for å bruke dem! Plasser følgende kode tilbake inne i Overskriftdelen rett etter stilene for h1og h2.
.sosialt stilling: absolutt; topp: 55px; høyre: 50px; overløp: skjult; a float: left; bredde: 26px; høyde: 26px; margin: 0 5px; tekstindeks: -9999px; bakgrunn: url (... /images/social-sprite.png) no-repeat; opasitet: 0,8; &: svever opacity: 1.0; @ media skjerm og (-webkit-min-enhet-pixel-forhold: 2), skjerm og (-min-enhet-pixel-forhold: 2) bakgrunn: url (... /images/[email protected] ) ingen gjentakelse; bakgrunnsstørrelse: 76px 26px; & .facebook bakgrunnsstilling: 0px 0px; & .twitter bakgrunnsposisjon: -25px 0px; & .instagram bakgrunnsstilling: -50px 0px;
Wow, det ser komplisert ut, selv om det egentlig ikke er ærlig! Til å begynne med plasserer vi innpakningen .sosial element i øverste høyre hjørne.
Deretter bruker vi noen stiler til koder for å sette opp høyden og bredden til hver og for å fjerne teksten fra visning ved hjelp av en stor text-indent. Vi stiller også grunnlaget opasitettil 0,8 som vi bytter til 1,0 på svinger. Dette gir en enkel overgangseffekt.
Den neste delen er for våre sprites. Vi må la enheter med høye DPI-skjermer vite hvor de skal finne den høyere oppløsningsaktiviteten som medieforespørselen tar vare på pent. Vi må sørge for å sette background-size eiendom slik at bildet skaleres ned til "riktig" størrelse. Nå må vi sette Bakgrunnen-stillingfor hvert ikon. Lagre, lagre, lagre og oppdatere!
Som du kan se vår fancy-font stilen jobber med navnet og våre sosiale ikoner ser nydelig ut. Godt jobbet!
Den neste delen skal håndtere hovedinnholdet der vi skal bruke Instafeed.js til å koble til Instagrams API og trekke gjennom noen bilder til vår side.
Vi begynner med å legge til noen oppslag til vår index.htmlside, så åpne den og kopier / lim inn følgende inne i stikkord:
Siste bilder
309 LikerFantastisk arkitektur #architecture #testing16. september 2014
Du vil se her Jeg har merket opp hver seksjon vi trenger for Instagram-bildene. Koden for dette vil ikke faktisk lastes fra HTML-siden, men i stedet fra JavaScript vil vi skrive for Instafeed.js. Ikke bekymre deg for dette for nå, vi prøver bare å få stylingen rett på dette stadiet.
En ting du kanskje merker, hvis du har brukt Bootstrap før, er at vi bruker noen Bootstrap-klasser for første gang. Vi benytter oss av COL-xs-xx, col-sm-xx, col-md-xx, col-lg-xx klasser for å justere elementene i forskjellige skjermstørrelser. Måten Bootstrap-gridet fungerer i et nøtteskall, er gjennom beholdere, rader og kolonner. Hver radmå være inne a container og hver kolonne må være inne a rad. Det må også være totalt tolv kolonneri hver rad. Det er her klassene liker COL-xs-12kom inn i den. På skjermstørrelsen xs dette elementet bør omfatte tolv kolonner som, visuelt på skjermen, vises som en stor kolonne.
Likeledes, hvis vi setter col-xs-12 col-sm-6 col-md-3som klasser på et element vil det instruere elementet å ha en full bredde layout på xsskjermstørrelse, to kolonnerpå sm skjermstørrelse og fire kolonner på md skjerm størrelse. Det er litt forvirrende først, men hvis du får hodet ditt rundt hvordan klassene heter og hva hver og en representerer på skjermen, blir det ganske intuitivt å bruke til slutt.
Lær mer om Bootstrap i gratis Tuts + kurs Bootstrap 3 for Web Design.Et annet poeng å nevne er bruken av test_img.jpgsom ikke eksisterer ennå. Dette er et plassholderbilde jeg opprettet for å bruke i oppslaget. Du kan gjerne lage din egen eller bruke den i de angitte kildefilene, bare sørg for at du legger den inn i Bilder katalog.
Nå har vi markeringen la oss legge til noen stiler:
.instagram-wrap bakgrunn: $ lightgrey; .instagram-innhold h3 text-transform: store bokstaver; brevavstand: 0.5em; skriftstørrelse: 12px; font-weight: 700; tekst-align: center; polstring: $ polstring * 5 0; farge: mørkere ($ lysegrå, 20%);
Du må plassere denne koden rett etter hele Overskrift blokkere i hoved-Sass-filen. Det gjelder noen bakgrunnsfargeegenskaper og skriftstiler. Lagre Sass-filen og ta en titt i nettleseren.
Den lille mengden kode har gjort en betydelig forskjell. Vi må gjøre det enda bedre skjønt, så tilbake i Sass-filen legger du til følgende kode:
.bildeboks margin: 0 0 $ margin * 3 0; .image-wrap img width: 100%; .likes posisjon: absolutt; bunn: 5px; venstre: 15px; polstring: $ polstring / 2; bakgrunn: $ black; bakgrunn: rgba ($ svart, 0,4); farge: $ hvit; .description font-family: $ sub-font; skriftstørrelse: 12px; bakgrunn: $ white; farge: $ mediumgrey; brevavstand: 1px; polstring: $ polstring * 1,5; høyde: 75px; overløp: skjult; hvit-rom: nowrap; tekstoverløp: ellipsis;
Dette må gå like etter h3erklæring inne .instagram-innhold.La oss raskt løpe gjennom denne bit for bit. Vi gir vår .foto-boksnoen bunnmargin, slik at hver av dem er pent plassert. Vi trenger ikke å bekymre oss for venstre og høyre avstand som det håndteres av Bootstrap. Vi sørger da for eventuelle bilder i vår .image-wrap er 100% bred slik at de skaleres med nettleseren. De .liker elementet må plasseres helt i nederste venstre hjørne av bildeboksen og den har hvit tekst på halv gjennomsiktig svart bakgrunn.
Til slutt, stilene for .beskrivelse. De siste fire egenskapene tillater boksen å gjemme overfylt tekst på en grasiøs måte ved å gi en ellipse på slutten. Det gode ved å gjøre dette i CSS er at når boksene endrer størrelse, blir innholdet mer eller mindre avslørt, men ellipsene vil fortsatt gjøre jobben hvis nødvendig. Nettleserstøtte er også veldig komplett.
Tid igjen for å lagre filen og oppdatere nettleseren:
Dette ser flott ut nå! Jeg tror det neste trinnet bør erstatte vår HTML med de faktiske Instagram-feedbildene ved hjelp av Instafeed.js.
Måten denne plugin-funksjonen gjør, gjør det enkelt for alle å legge til et Instagram-feed på deres nettsted. Du trenger imidlertid en Client ID fra Instagram for å bruke den. Du kan få en ved å registrere deg for en Instagram-konto og gå over til utvikler-delen for å konfigurere klient-IDen din.
Når du har det som er satt opp, må vi legge til følgende kode til app.js fil:
$ (funksjon () // Oppsett instafeed feed = ny Instafeed (clientId: '97ae5f4c024c4a91804f959f43f2635f', mål: 'innfelt', få: 'tagget', tagName: 'photographyportfolio', lenker: true, limit: 8, sortBy: 'most recent', oppløsning: 'standard_resolution', mal: ''); feed.run (); );likes LikerBildetekstenModel.date
La meg kjøre ned hva som skjer her:
For det første, noen jQuery. Start med en dokumentklar funksjon (forkortet versjon) slik at ingenting går før vi er klare.
For det andre, erklære a matevariabel og sett verdien til en ny forekomst av Instafeed.
Neste forsyning Instafeed med noen alternativer for å kontrollere hva den returnerer:
Accentsconagua
klient-ID - Klient-IDen du oppnådde fra Instagram.mål - ID av elementet på siden du vil fylle med bilder.få - Modusen Instafeed kjører inn. Ved å bruke 'merket' her, så vet Instafeed at vi søker etter tagname.TagNavn - Navnet på merket for å søke etter.lenker - Enten å sette inn bildene i koblinger tilbake til Instagramgrense - Begrens mengden bilder som er returnert. Nyttig for personsøking.Sorter etter - Slik sorterer du de returnerte bildene. Satt til senest for vårt prosjekt.Vedtak - Størrelsen på bildene returnerte.mal - HTML-en som skal brukes når du gjør bildene på siden. Vi bruker merkingen vi opprettet tidligere. Instafeed bruker curly braces til å indikere hvor de ulike egenskapene til bildet vil bli satt inn.Til slutt, kjør fôret!
Hvis du lagrer filen og oppdaterer nettleseren, bør du se noe som ligner på dette:
Hvis du har noen problemer, må du kontrollere at klient-IDen er riktig og koden er OK. Hvis du bruker det som er oppgitt i kildefilene, bør alt være bra. Du bør se åtte bilder returnert fra Instagram med liker og beskrivelser viser.
Vi trenger nå å rydde opp HTML-en vår fordi vi fortsatt har den innledende malen vi kodet tidligere. Bytt tilbake til index.htmlog finn følgende kode ...
309 LikerFantastisk arkitektur #architecture #testing16. september 2014
Enten fjern eller kommentere dette. Jeg har bestemt meg for å kommentere det slik at jeg senere kan referere til det hvis det er nødvendig.
Tilbake i index.html legg til følgende kode inne i element.
Ta kontakt
Jeg skyter, designer og skriver. Ikke nøl med og ta kontakt med meg hvis du trenger litt kreativt arbeid gjort. Jeg jobber alltid for å oppnå mitt beste og oppfylle kundens behov
Kontakt nå
Som du kan se bruker vi flere Bootstrap-klasser her. Denne gangen forteller det dette elementet til alle tolv kolonner hele tiden.
La oss også legge til stilene for denne delen.
bunntekst bakgrunn: $ white; polstring: $ polstring * 3 0; tekst-align: center; @media skjerm og (min bredde: $ skjerm-lg) polstring: $ polstring * 10 0; h4 skriftstørrelse: 36px; tekst-align: center; font-weight: 700; tekst-transformer: store bokstaver; brevavstand: 2px; .omtekst polstring: 0 $ polstring * 3; @media skjerm og (min bredde: $ skjerm-lg) bredde: 650px; margin: 0 auto; .contact-now-btn display: inline-block; bredde: 70%; polstring: $ polstring * 2 $ polstring * 5; margin-topp: $ margin * 2; farge: $ hvit; bakgrunn: $ grå; skriftstørrelse: 13px; brevavstand: 1px; tekst-dekorasjon: ingen; tekst-transformer: store bokstaver; @media skjerm og (min bredde: $ skjerm-md) bredde: 60%; @ media skjerm og (min bredde: $ skjerm-lg) bredde: 20%; margin-topp: $ margin * 5; &: svever bakgrunn: lyser ($ grå, 5%);
En annen komplisert ser blokkering av kode! Igjen er det ikke så skummelt. Det er egentlig bare å sette inn noen farger, skriftstørrelser og avstand. Vi bruker noen få medieforespørsler for å trekke elementer i forskjellige stillinger for forskjellige skjermstørrelser. Spesielt, den .kontakt-nå-btn som trenger to nivåer av media spørring for å justere størrelsen, ender opp på sitt minste på store skjermer. Hvis du lagrer filene og oppdaterer nettleseren, bør du se noe sånt ...
La oss fullføre dette med den siste delen jeg liker å ringe .bunntekst-bunn.
2014 © Jonathan White. Alle rettigheter reservert.
Legg til litt tekst i den delen i HTML-koden. Åpne deretter Sass-filen og legg til følgende stiler:
.footer-bottom bakgrunn: $ white; polstring: $ polstring $ polstring * 6; border-top: 2px solid $ lightgrey; brevavstand: 2px; tekst-align: center; farge: $ mediumgrey; tekst-transformer: store bokstaver; @media skjerm og (min-bredde: $ skjerm-md) polstring: $ polstring * 4 0;
Dette kan plasseres under bunntekst stiler. Vi bruker avstand mellom bokstavene å plassere bokstavene i ordene litt ut. Denne delen har ganske lite avstand til venstre og høyre som bytter til toppen og bunnen på større skjermer. Lagre filen og oppdatere nettleseren.
Vi er ferdige! Oppsettet ser fantastisk ut på mobil og skrivebord, og vi har klart å få bilder direkte fra Instagram ved hjelp av Instafeed. Bra gjort!
Det jeg liker om dette oppsettet er at du kunne tilpasse det til noe slags porteføljeinnhold. Vi kunne ha vært mer eventyrlystne med Bootstrap og Sass, men ofte trenger du bare ikke å dersom grunnleggende jobber feilfritt. Det vi har her er et glimrende fundament for å utvide og tilpasse.
Jeg håper du fulgte trinnene uten problemer og har lært noe nytt underveis. Ta gjerne tanker, forslag eller forbedringer i kommentarene. For eksempel er det et merkelig problem med måten Safari gjør siden hvis du ruller for fort - forslag til hvorfor det skjer er veldig velkommen! Takk for at du leste.
