Share
Wat je gaat creërenNadat we wat visuele spotjes hebben ontworpen om ons te helpen bij het bouwen van onze kleine app voor de browser, gaan we naar het spannende gedeelte en beginnen we met bouwen!
Laten we onze bestandsstructuur voor het project instellen. Het ziet er ongeveer zo uit (met elk respectief actief in de bijbehorende map):
duidelijk. ├── index.html └── assets ├── css ├── img ├── js └── sketch
We hebben nu een map voor elk van onze items, evenals de .schetsen bestand dat we eerder hebben gemaakt en dat onze paginaspottes bevat.
Laten we, op basis van onze bestandsstructuur, ons eenvoudige HTML-document instellen met koppelingen naar onze bedrijfsmiddelen (die we in een oogwenk creëren).
"html
"
Dit is wat we tot nu toe hebben:
Omdat deze kleine app relatief klein en eenvoudig is, ga ik de voorkeur geven aan het gebruik van vanilla CSS in dit project (geen preprocessor), maar je kunt natuurlijk je CSS in elke gewenste vorm schrijven.
Laten we beginnen met het instellen van enkele basispaginastijlen en het maken van verwijzingen naar de kleuren die we zullen gebruiken. In assets / css / styles.css laten we het volgende doen:
"CSS / * Algemene stijlen
Kleuren @highlight: # 196E76 @text: # 4A4A4A; @ text-light: # 9A9A9A @ body-background: #EEEEEE; * /
*, *: before, *: after box-sizing: inherit; marge: 0; opvulling: 0;
html box-sizing: border-box; achtergrond: #EEEEEE; text-align: center;
body font-size: 1em; regelhoogte: 1,5; font-family: Lucida Grande, sans-serif; maximale breedte: 43.75em; / * 880/16 * / marge: 0 auto; opvulling: 0; kleur: # 4A4A4A;
img max-width: 100%; hoogte: auto;
een color: inherit; "
Hier hebben we een aantal basispaginastijlen ingesteld voor afbeeldingen, koppelingen en het boxmodel dat we gaan gebruiken. Zoals je misschien hebt gemerkt, gebruiken we de lichaam tag als een wrapper door het in te stellen Maximale wijdte. Hierdoor blijft al onze inhoud gecentreerd in het midden van de pagina zonder dat deze verder gaat dan een bepaalde breedte.
Merk op dat we ook de kleurwaarden hebben gedefinieerd die we in de opmerkingen bovenaan zullen gebruiken. Omdat we geen preprocessor gebruiken waarmee we variabelen kunnen instellen, zullen deze van pas komen als we doorgaan met het schrijven van onze stijlen.
Laten we de kop van onze app maken. Vergeet niet dat we in Sketch dit hebben ontworpen:
Laten we dus de HTML maken die overeenkomt met onze mock. We zullen deze inhoud in de hoofd element dat we eerder hebben gemaakt.
"html
Verkrijg volledige pictogramillustraties voor iOS- en Mac-apps.
"
Nu hebben we de naam en beschrijving van onze app boven aan de pagina. Maar de stijlen zijn vrij eenvoudig.
Laten we een aantal stijlen voor onze paginakop schrijven die het meer in lijn brengen met onze mock:
"css / * Header Styles * / header margin: 1em 0 2em; color: # 196E76;
header h1 font-family: 'Pacifico', serif; lettergrootte: 3em; text-shadow: 0 4px 2px rgba (0, 0, 0, .1); marge: 0; header h1 a text-decoration: none; header p margin-top: -.625em; tekst-inspringing: 7.75em; / * streepje iets * / tekst-schaduw: 0 1px 0px rgba (0, 0, 0, .15); font-size: .875em; / * 14/16 * / "
Hier is een kort overzicht van wat we hebben gedaan:
Accentsconagua
kop h1 is ingesteld om Pacicifo te gebruiken van Google Fonts (onthoud, we plaatsen een link naar deze bron in onze header)koptekst p is enigszins gecompenseerd om te voorkomen dat de afdaling van de "G" op de naam van de app wordt uitgevoerd.Nu zien we dat onze header meer op het ontwerp lijkt:
Onthoud echter dat onze app responsief zal zijn! Dus als we deze stijlen op een smallere breedte controleren met de dev-tools van Chrome, zult u merken dat de tekstterugloop voor de beschrijving een beetje funky is vanwege onze tekst streepje.
Om dit te verminderen, zullen we bij smallere breedten de tekstinspringing verwijderen en de beschrijvende tekst naar beneden drukken met een groter margin-top dus het inpakken ziet er natuurlijker uit. Laten we een mediaquery schrijven om ons te helpen:
css @media-scherm en (max-width: 600px) header p text-indent: 0; margin-top: .5em;
Daar hebben we nu een responsieve header!
De volgende fase is om verder te gaan naar de invoer- en uitvoergebieden van onze mock. Denk eraan dat ze er ongeveer zo uitzagen:
Laten we eerst het invoerveld toevoegen aan de hoofd HTML-element dat we eerder hebben gemaakt:
"html
"
Nu hebben we een formulier met een invoer- en een verzendknop. Goede semantiek tot nu toe, maar het ziet er niet echt uit hoe we het willen. We moeten enkele stijlen toevoegen.
Laten we enkele stijlen toevoegen aan onze formulierinvoer- en knopelementen.
"css / * Form Input Styles voor de formulierinvoer en -knop * / vorm position: relative;
vorminvoer breedte: 100%; weergave: blok; lettergrootte: 1em; opvulling: .625em .85em; opvulling rechts: 7em; regelhoogte: 1,5; marge: 0; rand: 1px vast #bbb; vakschaduw: 0 1px 3px rgba (0, 0, 0, .1) inzet, 0 2px 4px rgba (0, 0, 0, .1); grensradius: 3px; vorminvoer: focus border-color: # 298cda; vormknop text-decoration: none; achtergrond: # 196E76; hoogte: 100%; positie: absoluut; rechts: 0; boven: 0; regelhoogte: 1,5; kleur wit; lettergrootte: 1em; grensradius: 0 3px 3px 0; rand: 0; overzicht: 0; text-align: center; -webkit-uiterlijk: geen; marge: 0; opvulling: 0 1em; font-family: 'Pacifico', serif; formulierknop: hover cursor: pointer; formulierknop: uitgeschakeld dekking: .5; "
Hier hebben we enkele stijlen aan onze formulierinvoer en -knop toegevoegd, evenals enkele verschillende staten zoals : hover, :focus, en : disabled. Dit heeft ons een input gegeven, precies zoals we het in onze spot hebben ontworpen.
Op dit punt kunnen we creëren wat we het "uitvoer" -gebied noemen. Dit is waar we het pictogram dynamisch teruggeven door de iTunes API. Bij het laden van de eerste pagina heeft de gebruiker echter nog niets gevraagd. Dus gaan we voorlopig ons zero state-ontwerp gebruiken. Denk aan onze spot, het ziet er zo uit:
We blijven toevoegen aan de hoofd HTML-element waarin we hebben gewerkt:
"html
Voer een geldige iTunes App Store-link in, d.w.z.. https://itunes.apple.com/us/app/twitter/id333903271?mt=8
"
Merk op dat we de output-HTML direct na onze input-HTML hebben toegevoegd. Het bestaat uit een wikkel, die fungeert als de grote witte doos in ons ontwerp, en de inhoud, die daarin is gecentreerd. We zullen CSS gebruiken om de .inhoud element om een te hebben Maximale wijdte van 512 pixels, aangezien dat de grootste grootte is waarop we ons pictogram zullen weergeven. Maar nu hebben we iets dat er zo uitziet:
Merk op dat ons pictogram tijdelijke aanduiding ontbreekt. Als we teruggaan naar ons Schetsdocument, kunnen we dat item eenvoudig uitvoeren als een SVG voor gebruik in de browser.
Nu zouden we de afbeelding in de browser moeten laten verschijnen.
Laten we een aantal stijlen toevoegen aan onze outputbox.
"css / * Content Styles Hoofdcontainer voor inhoud, dwz de pictogrammen, foutmeldingen, enz * / .wrapper background: #fff; border: 1px solid #ccc; text-align: center; padding: 2em; margin: .5em 0 2em; vakschaduw: 0 2px 4px rgba (0, 0, 0, .1); kaderradius: 3px; positie: relatief;
.inhoud max-width: 512px; marge: 0 auto; positie: relatief; word-wrap: breekwoord; / * voor lange urls * /
.inhoud * / * doe een eenvoudige reset op elementen in .content * / marge: 0; opvulling: 0; .inhoud sterk font-weight: bold; weergave: blok; "
Het merendeel van de CSS die we hier hebben toegevoegd, bevat opmerkingen in de code om dit uit te leggen. We hebben stijlen aan onze externe wrapper toegevoegd en vervolgens, omdat we geen volledige CSS-reset op de pagina hebben aangebracht, hebben we een eenvoudige reset op HTML-elementen in ons inhoudsgebied uitgevoerd door .inhoud *.
Ten slotte hebben we wat styling toegevoegd voor vetgedrukte elementen in onze nulstaat. Nu zouden we iets moeten hebben dat op onze spot lijkt!
Nu we onze HTML-structuur volledig hebben ingesteld, samen met de bijbehorende stijlen, zijn we klaar om in te springen en de interacties van de pagina met JavaScript aan te pakken!
In de volgende (en laatste) zelfstudie van deze serie komen we erachter hoe we de gebruikersinvoer kunnen gebruiken, een API-aanvraag kunnen doen en de uitvoer in de browser kunnen weergeven. Zie je daar!
