Share
Ce veți creaDupă ce am proiectat niște miscări vizuale pentru a ne ajuta să ne construim aplicația mică pentru browser, să ajungem la partea interesantă și să începem să construim!
Să configuram structura noastră de fișiere pentru proiect. Se va arăta cam așa (cu fiecare activ în fiecare dosar corespunzător):
simplu. ───────────────────────────────────────────────────────────────────────────
Acum avem un dosar pentru fiecare dintre activele noastre, precum și pentru .schiță fișierul pe care l-am creat mai devreme, care ține de machetele paginii noastre.
Pe baza structurii noastre de fișiere, să configurați documentul HTML de bază cu link-uri către activele noastre (pe care le vom crea într-un moment).
„html
"
Iata ce avem pana acum:
Deoarece această mică aplicație este relativ mică și simplă, am să prefer să folosesc CSS de vanilie în acest proiect (fără preprocesor), dar, evident, puteți scrie CSS în orice formă doriți.
Să începem prin stabilirea unor stiluri de bază de pagină și prin trimiterea de referințe la culorile pe care le vom folosi. În active / css / styles.css să facem următoarele:
"css / * Stiluri generale
Culorile @ highlight: # 196E76 @text: # 4A4A4A; @ text-light: # 9A9A9A @ body-background: #EEEEEE; * /
*, *: înainte, *: după size-box: moștenire; marja: 0; umplutura: 0;
html box-size: border-box; fundal: #EEEEEE; text-align: centru;
corp font-size: 1em; înălțimea liniei: 1,5; font-familie: Lucida Grande, sans-serif; max-lățime: 43,75; / * 880/16 * / marja: 0 auto; umplutura: 0; culoare: # 4A4A4A;
img max-lățime: 100%; înălțime: auto;
a culoare: moștenire; “
Aici am setat câteva stiluri de bază de pagină care reglementează imaginile, link-urile și modelul de cutie pe care îl vom folosi. După cum probabil ați observat, folosim corp etichetați ca un înveliș prin setarea sa lățimea maximă. Acest lucru va păstra întregul conținut centrat în mijlocul paginii fără a depăși o anumită lățime.
De asemenea, am definit valorile culorilor pe care le vom folosi în comentariile de sus. Deoarece nu folosim un preprocesor care să ne permită să setăm variabilele, acestea vor fi la îndemână pe măsură ce continuăm să scriem stilurile noastre.
Să creați antetul aplicației noastre. Rețineți că în Sketch am proiectat acest lucru:
Deci, hai sa cream HTML pentru a se potrivi cu macheta noastra. Vom pune acest conținut în antet element pe care l-am creat mai devreme.
„html
Preluați ilustrații de amploare pentru aplicații iOS și Mac.
"
Acum avem numele și descrierea aplicației noastre în partea de sus a paginii. Dar stilurile sunt destul de fundamentale.
Să scriem câteva stiluri pentru antetul paginii noastre care o aduce mai mult în conformitate cu falsa noastră:
"css / * Stiluri de antet * / header margin: 1em 0 2em; culoare: # 196E76;
antetul h1 font-family: 'Pacifico', serif; font-size: 3m; text-shadow: 0 4px 2px rgba (0, 0, 0, .1); marja: 0; antetul h1 a text-decoration: none; antet p margin-top: -625em; text-liniuță: 7,75; / * liniuță ușor * / text-shadow: 0 1px 0px rgba (0, 0, 0, .15); font-size: .875em; / * 14/16 * / "
Iată o scurtă trecere în revistă a ceea ce am făcut:
Accentsconagua
antetul h1 este setat să utilizeze Pacicifo din Google Fonts (rețineți, am stabilit un link către această resursă în antetul nostru)header p este ușor de compensat pentru a evita rularea în descendentul "G" din numele aplicației.Acum, antetul nostru arată mai mult ca designul:
Cu toate acestea, rețineți că aplicația noastră va fi receptivă! Deci, dacă verificăm aceste stiluri pe o lățime mai mică folosind instrumentele dev ale Chrome, veți observa că înfășurarea textului pentru descriere este puțin funky din cauza noastră text-liniuță.
Pentru a atenua acest lucru, la lățimi mai restrânse, vom elimina indentul textului și vom lovi textul descrierii cu un număr mai mare margin-top astfel încât ambalajul pare mai natural. Să scriem o interogare media care să ne ajute:
ecranul css @media și (max-width: 600px) header p text-indent: 0; margin-top: .5em;
Acolo, acum avem un antet receptiv!
Următoarea etapă este trecerea la zonele de intrare și de ieșire ale bătăilor noastre. Amintiți-vă că au arătat ceva de genul:
Mai întâi, să adăugăm câmpul de intrare la principal Elementul HTML pe care l-am creat mai devreme:
„html
"
Acum avem un formular cu o intrare și un buton de trimitere. Semantica bună până acum, dar nu prea ne uităm cum o dorim. Va trebui să adăugăm câteva stiluri.
Să adăugăm câteva stiluri elementelor noastre de intrare și elemente de buton.
"css / * Forme de introducere a formularului pentru formularul de intrare și butonul * / form position: relative;
formă de intrare lățime: 100%; afișare: bloc; dimensiune font: 1em; padding: .625em .85em; umplutură-dreapta: 7em; înălțimea liniei: 1,5; marja: 0; frontieră: 1px solid #bbb; box-shadow: 0 1px 3px rgba (0, 0, 0, .1) inset, 0 2px 4px rgba (0, 0, 0, .1); raza de graniță: 3 pixeli; formular de intrare: focus border-color: # 298cda; butonul formular text-decoration: none; fundal: # 196E76; înălțime: 100%; poziția: absolută; dreapta: 0; top: 0; înălțimea liniei: 1,5; culoare albă; dimensiune font: 1em; raza de graniță: 0 3px 3px 0; frontieră: 0; contur: 0; text-align: centru; -webkit-aspect: nici unul; marja: 0; umplutura: 0 1em; font-family: 'Pacifico', serif; butonul formular: hover cursor: pointer; butonul formular: dezactivat opacity: .5; “
Aici am adăugat câteva stiluri pentru formularul nostru de intrare și buton, precum și unele state diferite cum ar fi :planare, : focus, și : dezactivat. Acest lucru ne-a dat o contribuție stilistică doar așa cum am proiectat-o în momeala noastră.
În acest moment putem crea ceea ce am numit zona "ieșire". Aici vom reda dinamic pictograma returnată de API-ul iTunes. Cu toate acestea, la încărcarea inițială a paginii, utilizatorul nu a solicitat încă nimic. Deci, pentru moment, vom folosi modelul de stare zero. Amintiți-vă de falsurile noastre, arată astfel:
Vom continua să adăugăm la principal Elementul HTML la care lucrăm:
„html
Introduceți un link valabil pentru magazinul de aplicații iTunes, adică. https://itunes.apple.com/us/app/twitter/id333903271?mt=8
"
Observați că am adăugat HTML-ul de ieșire imediat după codul nostru de intrare. Este alcătuită dintr-un înveliș, care acționează ca o cutie albă mare în designul nostru, și conținutul, care este centrat în interior. Vom folosi CSS pentru a seta .conţinut element pentru a avea a lățimea maximă de 512 pixeli, deoarece aceasta este cea mai mare dimensiune la care vom afișa pictograma noastră. Pentru moment, însă, avem ceva care arată astfel:
Observați că simbolul nostru de simbol lipsește. Dacă ne întoarcem la documentul Sketch, putem scoate cu ușurință acel material ca SVG pentru a fi utilizat în browser.
Acum ar trebui să avem imaginea afișată în browser.
Să adăugăm câteva stiluri casetei noastre de ieșire.
"css / * Stiluri de continut Container principal pentru continut, adica pictograme, mesaje de eroare, etc * / .wrapper fundal: #fff; margine: 1px solid #ccc; text-align: center; padding: 2em; margin: .5em 0 2im; cutie-umbra: 0 2px 4px rgba (0, 0, 0, .1); raza graniței: 3px; poziția: relativă;
.conținut max-width: 512px; marja: 0 auto; poziție: relativă; cuvânt-wrap: break-cuvânt; / * pentru urlări lungi * /
.conținut * / * face o resetare simplă a elementelor din .content * / margin: 0; umplutura: 0; .content puternic font-weight: bold; afișare: bloc; “
Majoritatea CSS pe care le-am adăugat aici au comentarii în cod pentru a le explica. Am adăugat stiluri în pachetul nostru existent, atunci, pentru că nu am făcut o resetare completă a CSS pe pagină, am făcut o resetare simplă a elementelor HTML din interiorul zonei noastre de conținut prin aplicarea .conținut *.
În cele din urmă, am adăugat un anumit stil pentru elementele îndrăznețe în starea noastră zero. Acum ar trebui să avem ceva asemănător cu bătaia noastră!
Acum, că avem structura noastră HTML toate configurarea, împreună cu stilurile corespunzătoare, suntem gata să sari și să manipuleze interacțiunile paginii cu JavaScript!
În următoarea (și finală) tutorial din această serie, vom afla cum să luăm intrarea utilizatorilor, să facem o cerere API și să redați rezultatele în browser. Ne vedem acolo!
