Share
Hva du skal skapeEtter å ha utformet noen visuelle mocks for å hjelpe oss med å bygge vår lille app til nettleseren, la oss komme til den spennende delen og begynne å bygge!
La oss sette opp vår filstruktur for prosjektet. Det ser slik ut (med hver respektive eiendel som bor i den tilhørende mappen):
vanlig . ├── index.html └─ - eiendeler ├── css ├── img ├── js └─ - skisse
Vi har nå en mappe for hver av våre eiendeler, så vel som .skisse fil vi opprettet tidligere som holder vår side mocks.
Basert på vår filstruktur, la oss sette opp vårt grunnleggende HTML-dokument med lenker til våre eiendeler (som vi vil lage i et øyeblikk).
"html
"
Her er det vi har så langt:
Fordi denne lille appen er relativt liten og enkel, vil jeg favorisere å bruke vanilje CSS i dette prosjektet (ingen forprosessor), men du kan selvsagt skrive CSS uansett hvilken form du liker.
La oss starte med å sette opp noen grunnleggende sidestiler og kommentere referanser til fargene vi skal bruke. I eiendeler / css / styles.css la oss gjøre følgende:
"css / * Generelle stiler
Farger @ høylys: # 196E76 @text: # 4A4A4A; @ tekstlys: # 9A9A9A @ body-background: #EEEEEE; * /
*, *: før, *: etter boks-størrelse: arve; margin: 0; polstring: 0;
html boks størrelse: border-box; bakgrunn: #EEEEEE; tekst-align: center;
kropp font-size: 1em; linjehøyde: 1,5; font-familie: Lucida Grande, sans-serif; maksimal bredde: 43,75em; / * 880/16 * / margin: 0 auto; polstring: 0; farge: # 4A4A4A;
img maksimal bredde: 100%; høyde: auto;
en farge: arv; "
Her har vi satt opp noen grunnleggende sidestiler som styrer bilder, linker og boksemodellen vi skal bruke. Som du kanskje har lagt merke til, bruker vi kropp merk som en wrapper ved å sette sin max bredde. Dette vil holde alt vårt innhold sentrert midt på siden uten å strekke seg ut over en viss bredde.
Legg merke til at vi også har definert fargeverdiene vi skal bruke i de øverste kommentarene. Siden vi ikke bruker en preprosessor som lar oss sette variabler, vil disse komme til nytte når vi fortsetter å skrive stilene våre.
La oss lage overskriften til appen vår. Husk, i Sketch har vi designet dette:
Så la oss lage HTML for å matche vår mock. Vi vil sette dette innholdet i Overskrift elementet vi opprettet tidligere.
"html
Hent ikonet i full størrelse for iOS og Mac-apper.
"
Nå har vi vår apps navn og beskrivelse øverst på siden. Men stilene er ganske grunnleggende.
La oss skrive noen stiler for vår sideoverskrift som bringer den mer i tråd med vår mock:
"css / * Header Styles * / header margin: 1em 0 2em; color: # 196E76;
header h1 font-family: 'Pacifico', serif; skriftstørrelse: 3em; tekstskygge: 0 4px 2px rgba (0, 0, 0, .1); margin: 0; header h1 a text-decoration: none; header p margin-top: -.625em; tekstindeks: 7.75em; / * indent litt * / tekst-skygge: 0 1px 0px rgba (0, 0, 0, .15); skriftstørrelse: .875em; / * 14/16 * / "
Her er en kort oversikt over hva vi gjorde:
Accentsconagua
header h1 er satt til å bruke Pacicifo fra Google Fonts (husk, vi setter en link til denne ressursen i vår overskrift)header s er litt kompensert for å unngå å gå inn i nedgangen til "G" på appnavnet.Nå har vi vår overskrift som ser mer ut som designet:
Husk imidlertid at vår app skal være responsiv! Så hvis vi sjekker disse stilene på en smalere bredde ved hjelp av Chrome's dev-verktøy, vil du legge merke til at tekstinnpakningen for beskrivelsen er litt funky på grunn av vår text-indent.
For å lindre dette, på smalere bredder, fjerner vi tekstinnrykket og støter beskrivelsesteksten ned med en større margin-top så innpakning ser mer naturlig ut. La oss skrive en medieforespørsel for å hjelpe oss:
css @media skjerm og (maksimal bredde: 600px) header p text-indent: 0; margin-top: .5em;
Der har vi nå en responsiv header!
Det neste trinnet er å gå videre til inngangs- og utgangsområder av vår mock. Husk at de så noe slik ut:
Først la vi legge til inntastingsfeltet til hoved- HTML-element vi opprettet tidligere:
"html
"
Nå har vi et skjema med en innspill og en send-knapp. God semantikk så langt, men det ser ikke helt hvordan vi vil ha det. Vi må legge til noen stiler.
La oss legge til noen stiler til våre skjemainngangs- og knappelementer.
"css / * Form Input Styles for skjemainngang og -knapp * / skjema posisjon: relative;
skjemainngang bredde: 100%; skjerm: blokk; skriftstørrelse: 1em; polstring: .625em .85em; polstring-høyre: 7em; linjehøyde: 1,5; margin: 0; grense: 1px solid #bbb; boksskygge: 0 1px 3px rgba (0, 0, 0, .1) innsett, 0 2px 4px rgba (0, 0, 0, .1); border-radius: 3px; form input: fokus border-color: # 298cda; skjema-knapp text-decoration: none; bakgrunn: # 196E76; høyde: 100%; posisjon: absolutt; høyre: 0; topp: 0; linjehøyde: 1,5; farge: hvit; skriftstørrelse: 1em; grense-radius: 0 3px 3px 0; grense: 0; oversikt: 0; tekst-align: center; -webkit-utseende: ingen; margin: 0; polstring: 0 1em; font-familie: 'Pacifico', serif; skjema-knapp: svever markør: pointer; skjema-knapp: deaktivert opacity: .5; "
Her har vi lagt til noen stiler til vårt skjemainngang og -knapp, så vel som noen forskjellige stater som :sveve, :fokus, og :funksjonshemmet. Dette har gitt oss en inngangsstil akkurat slik vi designet det i vår mock.
På dette punktet kan vi lage det vi har ringt til "utdata" -området. Dette er hvor vi dynamisk vil gjøre ikonet returnert av iTunes API. På den første siden belastningen har brukeren imidlertid ikke bedt om noe. Så vi skal nå bruke vår nullstildesign for nå. Husk fra våre mocks, det ser slik ut:
Vi fortsetter å legge til i hoved- HTML-element vi har jobbet i:
"html
Skriv inn en gyldig iTunes App Store-lenke, dvs.. https://itunes.apple.com/us/app/twitter/id333903271?mt=8
"
Legg merke til at vi har lagt til utdata HTML rett etter vår inntastede HTML. Den består av en wrapper, som fungerer som den store hvite boksen i vårt design, og innholdet, som er sentrert inne i det. Vi bruker CSS til å angi .innhold element for å ha a max bredde på 512 piksler, da det er den største størrelsen der vi vil vise vårt ikon. For nå skjønt, har vi noe som ser slik ut:
Legg merke til at ikonet plassholder mangler. Hvis vi går tilbake til Sketch-dokumentet, kan vi enkelt sende ut det aktivet som en SVG for bruk i nettleseren.
Nå skal vi få bildet som vises i nettleseren.
La oss legge til noen stiler i utgangsruten vår.
"css / * Innholdsstiler Hovedbeholder for innhold, dvs. ikonene, feilmeldingene, etc * / .wrapper bakgrunn: #fff; border: 1px solid #ccc; text-align: center; polstring: 2em; margin: .5em 0 2em; bokseskygge: 0 2px 4px rgba (0, 0, 0, .1); grensestrek: 3px; stilling: relativ;
.innhold maksimal bredde: 512px; margin: 0 auto; stilling: relativ; ord-wrap: break-word; / * for lange adresser * /
.innhold * / * gjør en enkel tilbakestilling på elementer i .content * / margin: 0; polstring: 0; .content strong font-weight: bold; skjerm: blokk; "
De fleste av CSS vi la til her, har kommentarer i koden for å forklare det. Vi la til stiler til vår utvendige innpakning, da vi ikke gjorde en fullstendig CSS-tilbakestilling på siden, gjorde vi en enkel tilbakestilling på HTML-elementer inne i innholdsområdet ved å søke .innhold *.
Til slutt legger vi til noen styling for fetstilte elementer i nullstanden vår. Nå burde vi ha noe som ligner på vår mock!
Nå som vi har vår HTML-struktur alt oppsett, sammen med tilhørende stilarter, er vi klare til å hoppe inn og håndtere samspillet mellom siden med JavaScript!
I neste (og siste) opplæringen av denne serien, finner vi ut hvordan du bruker brukerinngang, foretar en API-forespørsel, og gjør utdataene i nettleseren. Ser deg der!
