Share
Ce que vous allez créerAprès avoir conçu quelques simulacres visuels pour nous guider dans la construction de notre petite application pour le navigateur, passons à la partie excitante et commençons à construire!
Configurons notre structure de fichiers pour le projet. Cela ressemblera à quelque chose comme ceci (avec chaque actif respectif vivant dans le dossier correspondant):
plaine . ├── index.html └── actifs ├── css img js └── esquisse
Nous avons maintenant un dossier pour chacun de nos actifs, ainsi que le .esquisser fichier que nous avons créé plus tôt qui détient notre page se moque.
Sur la base de notre structure de fichier, configurons notre document HTML de base avec des liens vers nos actifs (que nous allons créer dans un instant).
"html
"
Voici ce que nous avons jusqu'à présent:
Parce que cette petite application est relativement petite et simple, je vais privilégier l'utilisation de CSS vanille dans ce projet (pas de préprocesseur), mais vous pouvez évidemment écrire votre CSS sous la forme de votre choix..
Commençons par définir quelques styles de page de base et en faisant des commentaires avec les couleurs que nous utiliserons. Dans assets / css / styles.css faisons ce qui suit:
"css / * Styles généraux
Couleurs @highlight: # 196E76 @text: # 4A4A4A; @ text-light: # 9A9A9A @ body-background: #EEEEEE; * /
*, *: avant, *: after box-sizing: inherit; marge: 0; rembourrage: 0;
html box-sizing: border-box; arrière-plan: #EEEEEE; text-align: center;
corps taille de la police: 1em; hauteur de ligne: 1,5; font-family: Lucida Grande, sans-serif; largeur maximale: 43.75em; / * 880/16 * / margin: 0 auto; rembourrage: 0; couleur: # 4A4A4A;
img max-width: 100%; hauteur: auto;
a couleur: hériter; "
Ici, nous avons configuré quelques styles de page de base régissant les images, les liens et le modèle de boîte que nous allons utiliser. Comme vous l'avez peut-être remarqué, nous utilisons le corps tag comme un wrapper en définissant sa largeur maximale. Cela gardera tout notre contenu centré au milieu de la page sans dépasser une certaine largeur.
Remarquez que nous avons également défini les valeurs de couleur que nous utiliserons dans les meilleurs commentaires. Puisque nous n'utilisons pas de préprocesseur permettant de définir des variables, celles-ci nous seront utiles si nous continuons à écrire nos styles..
Créons l'en-tête de notre application. Rappelez-vous, dans Sketch, nous avons conçu ceci:
Alors, créons le HTML pour correspondre à notre maquette. Nous allons mettre ce contenu dans le entête élément que nous avons créé plus tôt.
"html
Récupérer des illustrations d'icônes grandeur nature pour les applications iOS et Mac.
"
Nous avons maintenant le nom et la description de notre application en haut de la page. Mais les styles sont assez basiques.
Écrivons quelques styles pour notre en-tête de page, ce qui l’aligne davantage sur notre maquette:
"css / * Styles d'en-tête * / header margin: 1em 0 2em; color: # 196E76;
entête h1 font-family: 'Pacifico', serif; taille de police: 3em; texte ombre: 0 4px 2px rgba (0, 0, 0, .1); marge: 0; en-tête h1 a text-decoration: none; en-tête p margin-top: -.625em; retrait du texte: 7,75em; / * indent légèrement * / text-shadow: 0 1px 0px rgba (0, 0, 0, 0,15); taille de police: .875em; / * 14/16 * / "
Voici un bref aperçu de ce que nous avons fait:
Accentsconagua
en-tête h1 est configuré pour utiliser Pacicifo à partir de Google Fonts (rappelez-vous, nous mettons un lien vers cette ressource dans notre en-tête)en-tête p est légèrement décalé pour éviter de heurter le descender du «G» sur le nom de l'application.Nous avons maintenant notre en-tête qui ressemble plus à la conception:
Cependant, rappelez-vous que notre application va être sensible! Donc, si nous vérifions ces styles sur une largeur plus étroite en utilisant les outils de développement de Chrome, vous remarquerez que le retour à la ligne pour la description est un peu génial à cause de notre retrait du texte.
Pour atténuer cela, pour des largeurs plus étroites, nous allons supprimer l’indentation du texte et abaisser le texte de description avec un texte plus grand. haut de la marge si l'emballage semble plus naturel. Écrivons une requête médiatique pour nous aider:
css @ media screen et (max-width: 600px) en-tête p text-indent: 0; marge supérieure: .5em;
Là, nous avons maintenant un en-tête responsive!
La prochaine étape consiste à passer aux zones d’entrée et de sortie de notre maquette. Rappelez-vous qu'ils ressemblaient à ceci:
Premièrement, ajoutons le champ de saisie au principale Elément HTML que nous avons créé précédemment:
"html
"
Nous avons maintenant un formulaire avec une entrée et un bouton d'envoi. Jusqu'ici, bonne sémantique, mais nous ne cherchons pas tout à fait ce que nous voulons. Nous aurons besoin d'ajouter quelques styles.
Ajoutons quelques styles à nos éléments de saisie de formulaire et de bouton.
"css / * Styles de saisie de formulaire pour la saisie de formulaire et le bouton * / form position: relative;
entrée de formulaire largeur: 100%; bloc de visualisation; taille de police: 1em; rembourrage: .625em .85em; rembourrage à droite: 7em; hauteur de ligne: 1,5; marge: 0; bordure: 1px solide #bbb; boîte-ombre: 0 1px 3px rgba (0, 0, 0, .1) en médaillon, 0 2px 4px rgba (0, 0, 0, .1); border-radius: 3px; entrée de formulaire: focus border-color: # 298cda; bouton de formulaire text-decoration: none; arrière-plan: # 196E76; hauteur: 100%; position: absolue; à droite: 0; en haut: 0; hauteur de ligne: 1,5; Couleur blanche; taille de police: 1em; border-radius: 0 3px 3px 0; bordure: 0; contour: 0; text-align: center; -webkit-apparence: aucun; marge: 0; rembourrage: 0 1em; famille de polices: 'Pacifico', serif; bouton de formulaire: survoler curseur: pointeur; bouton de formulaire: désactivé opacité: .5; "
Ici, nous avons ajouté des styles à notre saisie de formulaire et à nos boutons, ainsi que différents états tels que :flotter, :concentrer, et :désactivée. Cela nous a donné une entrée de style exactement comme nous l’avons conçue dans notre maquette.
À ce stade, nous pouvons créer ce que nous appelons la zone de «sortie». C’est là que nous allons rendre dynamiquement l’icône renvoyée par l’API iTunes. Cependant, lors du chargement initial de la page, l'utilisateur n'a encore rien demandé. Nous allons donc utiliser notre conception à état zéro pour le moment. Rappelez-vous de nos simulacres, cela ressemble à ceci:
Nous continuerons à ajouter à la principale Elément HTML dans lequel nous travaillons:
"html
Entrez un lien iTunes App Store valide, c'est-à-dire. https://itunes.apple.com/us/app/twitter/id333903271?mt=8
"
Notez que nous avons ajouté le code HTML de sortie juste après notre code HTML d’entrée. Il consiste en une enveloppe, qui fait office de grande boîte blanche dans notre conception, et le contenu, qui est centré à l'intérieur de celle-ci. Nous allons utiliser CSS pour définir le .contenu élément d'avoir un largeur maximale de 512 pixels, car c’est la plus grande taille à laquelle nous allons afficher notre icône. Pour l'instant cependant, nous avons quelque chose qui ressemble à ceci:
Notez que notre espace réservé d'icône est manquant. Si nous revenons à notre document Sketch, nous pouvons facilement sortir cet actif en tant que SVG à utiliser dans le navigateur..
Maintenant, nous devrions avoir l'image apparaissant dans le navigateur.
Ajoutons quelques styles à notre boîte de sortie.
"css / * Content Styles Conteneur principal pour le contenu, c'est-à-dire les icônes, les messages d'erreur, etc. * / .wrapper background: #fff; border: 1px solid #ccc; text-align: center; padding: 2em; margin: .5em 0 2em; box-shadow: 0 2px 4px rgba (0, 0, 0, .1); border-radius: 3px; position: relative;
.content max-width: 512px; marge: 0 auto; position: relative; word-wrap: mot de rupture; / * pour les longues URL * /
.content * / * effectue une réinitialisation simple sur les éléments de .content * / margin: 0; rembourrage: 0; .content strong font-weight: bold; bloc de visualisation; "
La plupart des CSS que nous avons ajoutées ici ont des commentaires dans le code pour l'expliquer. Nous avons ajouté des styles à notre enveloppe externe, puis, comme nous n'avions pas effectué de réinitialisation CSS complète sur la page, nous avons procédé à une réinitialisation simple des éléments HTML dans notre zone de contenu en appliquant: .contenu *.
Enfin, nous avons ajouté des styles pour les éléments en gras dans notre état zéro. Maintenant, nous devrions avoir quelque chose qui ressemble à notre maquette!
Maintenant que notre structure HTML est entièrement configurée, avec les styles correspondants, nous sommes prêts à intervenir et à gérer les interactions de la page avec JavaScript.!
Dans le prochain (et dernier) tutoriel de cette série, nous verrons comment utiliser les entrées utilisateur, effectuer une demande d'API et restituer la sortie dans le navigateur. On se voit là-bas!
