Share
Dans ce didacticiel, nous allons terminer notre application web pour que tout soit parfait et fonctionne parfaitement sur toutes les tailles d'écran. La dernière fois, nous avons terminé en stylisant les boîtes de message, ne laissant que le contenu à faire. Allons-nous plonger? D'accord!
Vous devrez peut-être rattraper les parties précédentes de ce tutoriel, dans ce cas:
.message-content width: 100%; couleur: plus foncé ($ gris, 30%); Écran @média et (largeur-min: $ pause-deux) largeur: 75%; Flotter à droite; Écran @média et (min-largeur: $ break-trois) largeur: 85%; Écran @média et (largeur-min: $ break-four) largeur: 75%;
Les déclarations de contenu du message assurez-vous que la largeur se comporte lorsque le navigateur redimensionne. Nous avons besoin qu'il soit 100% large pour les petits écrans afin qu'il soit bien placé sous l'image. Une fois que nous avons frappé notre $ pause deux largeur, nous devons ensuite faire flotter le contenu à droite et tirer légèrement la largeur pour compenser.
Les autres points de rupture ici s’assurent simplement que la largeur s’échelonne bien par rapport à la largeur du navigateur, ainsi sur une résolution tablette-esque notre messagerie est toujours empilé verticalement mais notre contenu du message est flotté à l'intérieur, ce qui signifie que la largeur de 75% n'est probablement pas assez large. Nous réduisons la largeur à 75% une fois que nous arrivons aux tailles basées sur le bureau pour tenir compte de messagerie être flottant et plus étroit.
a color: $ green; &: hover color: $ red; h3, p, div margin: 0; h3 font-family: $ title-font; taille de police: 200%; poids de la police: 400; espacement des lettres: -0.02em; couleur: noir; p couleur: $ rouge; poids de police: 600; div margin-top: $ margin; débordement caché; -ms-text-overflow: points de suspension; -o-text-overflow: ellipsis; débordement de texte: points de suspension;
Les styles suivants sont vraiment simples. Nous ne faisons que donner des liens un $ green couleur avec un $ rouge survolez et annulez les marges définies sur les éléments h3, p et div contenus dans contenu du message. Les styles individuels pour les éléments h3, p et div sont un peu plus sophistiqués. le h3 est prêt à utiliser $ title-font et a quelques l'espacement des lettres définir pour tirer légèrement dans l'espacement légèrement pour correspondre plus étroitement à la conception. le div Les styles de balises sont axés sur le maintien du contenu, nous nous assurons donc que le débordement est caché et s'il y a un débordement, nous montrons un ellipse pour indiquer qu'il y a plus de texte. Ce genre de chose peut être fait avec un code côté serveur (et le serait probablement) mais il est bien de l'inclure ici dans le CSS pour les besoins de ce tutoriel..
Enregistrez votre travail et rendez-vous sur le navigateur…
C'est génial! Nous avons trois dispositions légèrement différentes, qui sont toutes contrôlées par les styles simples ci-dessus. Cela complète le CSS pour la messagerie il ne nous reste plus qu'à copier le balisage cinq fois et modifier le contenu en fonction du design. Si cette application fonctionnait réellement, nous n'aurions pas besoin de le faire, mais pour ce tutoriel, il le faut! Donnez-vous cinq minutes pour copier, coller et changer le code de chaque case.
Jetons simplement un autre coup d’œil rapide dans le navigateur pour vérifier que nos styles fonctionnent parfaitement lorsque nous en avons plusieurs. messagerie…
Belle! Notre application Web prend définitivement forme et nos boîtes de messages fonctionnent comme prévu, quelle que soit la taille du navigateur..
Nous avons maintenant conquis la plupart de nos applications Web, mais il reste une section importante: la bas de page. Cette partie de notre application est importante car elle héberge le lieu où un utilisateur peut taper / poster son message. Il y a quelques éléments assez délicats à cela, alors commençons!
Tout d’abord, écrivons le balisage suivant dans notre fichier index.html:
Il y a quelques sections dans ce pied de page. La forme au milieu est le principal domaine d’intervention qui, bien que non nécessaire ici, permettra à l’utilisateur de poster son message. le social-btns aura besoin de certains styles de mise en page et tout le contenu du pied de page doit être centré sur l'écran. Commençons par le haut et passons directement au CSS…
footer padding: $ padding * 4; text-align: center; fond: $ blanc; h4 margin-top: 0px; famille de polices: $ title-font; taille de police: 26px; poids de la police: 400; couleur: $ gris foncé;
Tout d'abord, nous devrions définir rembourrage sur le bas de page repousser joliment tout du bord. Pour que tout soit centré sur l'écran, nous venons de régler le aligner le texte propriété au centre. Les styles pour le slogan / en-tête ici sont assez simples et ressemblent beaucoup à ce que nous avons fait auparavant pour un titre. Voyons cela dans le navigateur!
C'est un bon début, mais nous avons encore du chemin à faire! Continuons dans notre dossier Sass.
.connect-box width: 100%; marge: 0 auto; Écran @media et (min-width: $ break-three) width: 525px; .connected-as, .connect-message background: lighten ($ grey, 4%);
Comme beaucoup de nos éléments, le boîte de connexion devrait être 100% large pour les écrans plus petits. Il devrait alors basculer, à notre $ pause trois point, à la largeur vue dans la conception qui est 525px. Nous définissons ensuite la couleur de fond du connecté-comme et message de connexion à une couleur gris clair.
.connecté-en tant que border-top-left-radius: 5px; border-top-right-radius: 5px; bas de la bordure: 1px solide $ blanc; text-align: left; rembourrage: $ padding / 2 $ padding * 2; .connected-image width: 30px; hauteur: 30px; rayon de bordure: 50%; float: gauche; marge-droite: $ margin / 2; span float: left; hauteur: 30px; hauteur de ligne: 30px; couleur: $ gris foncé; .disconnect position: absolute; en haut: -10px; à droite: -10px; rembourrage: $ padding / 2 $ padding; marge supérieure: 3px; border-radius: 20px; fond: $ blanc; texte-décoration: aucun; couleur: $ gris foncé; text-transform: majuscule; taille de police: 80%; &: hover background: $ red; couleur: $ blanc; Écran @média et (min-largeur: $ pause-deux) position: statique; Flotter à droite;
Ce bon morceau de CSS est pour la partie supérieure de notre boîte de connexion. La première étape consiste à arrondir en haut à droite et à gauche de connecté-comme. Nous souhaitons également une légère séparation entre cette case et la section ci-dessous, donc une simple 1px solide $ blanc border fera bien l'affaire. Enfin, nous avons besoin de rembourrage, mais nous avons besoin de plus à gauche et à droite que nous ne le faisons en haut et en bas, donc pour que les choses restent belles et bien tenues, nous utilisons simplement notre $ rembourrage variable et diviser par deux pour le haut et le bas et multiplier par deux pour la gauche et la droite. C’est un excellent exemple de changement de notre valeur variable qui conservera toujours tout dans la même proportion.
Les deux déclarations suivantes contrôlent l'image de profil Twitter des utilisateurs connectés et leur @nom d'utilisateur. Pour que les choses restent standard, nous définissons la largeur et la hauteur de l'image dans le CSS afin que nous sachions qu'il s'agira toujours d'un carré de la taille correcte. Pour le faire apparaître comme un cercle, appliquez simplement un rayon de la frontière de 50% à elle. L'image de profil et @ nom d'utilisateur doivent être laissés à la flotteur et nous devons laisser une marge au @username pour l'éloigner de l'image de profil..
le déconnecter bouton a quelques choses différentes en cours. Pour les résolutions sur petit écran, nous avons besoin que ce bouton soit à l'écart de l'autre texte à l'intérieur de cette zone. J'ai donc décidé qu'une bonne option serait de le positionner absolument juste au-dessus et au-delà de son conteneur. Une position de -10px pour le haut et à droite c'est bien. Vous voudrez peut-être jouer avec cela si vous pensez que cela pourrait être mieux placé. Les autres styles ici contrôlent le look avec un simple flotter l'état ajoutant une belle gras $ rouge couleur pour souligner l'action de déconnexion. Le peu de réactivité ici ne fera que ramener le bouton dans le flux de documents et le faire flotter à la droite, de manière à ce qu'il se trouve en face des détails de Twitter. Cela se produira pour tout ce qui est au-dessus de notre $ pause deux point.
Enregistrer, enregistrer, enregistrer! Il est temps de regarder à nouveau:
Vous cherchez bien! Nous sommes sur le point de terminer ceci maintenant. Ensuite, la zone de message.
.connect-message border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; textarea border: none; fond: transparent; largeur: 100%; hauteur: 130px; rembourrage: $ padding * 2; -webkit-transition: facilité de box-shadow 0.4s; -moz-transition: facilité de 0.4 secondes pour Box-Shadow; -o-transition: facilité de l'ombre de la boîte 0,4s; -ms-transition: box-shadow 0.4s facilité; transition: boîte-shadow 0.4s facilité; &: focus contour: none; -webkit-box-shadow: encart 0px 0px 20px darken ($ grey, 10%); box-shadow: incrément 0px 0px 20px darken ($ grey, 10%); -webkit-transition: facilité de box-shadow 0.4s; -moz-transition: facilité de 0.4 secondes pour Box-Shadow; -o-transition: facilité de l'ombre de la boîte 0,4s; -ms-transition: box-shadow 0.4s facilité; transition: boîte-shadow 0.4s facilité;
Ce bloc doit être placé après la connecté-comme bloquer, mais toujours dans l'ensemble bas de page déclarations.
le message de connexion boîte a des coins arrondis en bas à gauche et à droite pour compléter l'apparence de la conteneur global avoir des coins arrondis. La zone de texte elle-même a définitivement besoin de style, car les valeurs par défaut du navigateur sont très moches! Ces styles sont assez simples, mais vous pouvez voir que nous ajoutons une transition CSS pour boîte ombre. La conception n'a pas montré quel concentrer Etat devrait ressembler alors j'ai décidé d'avoir un fondu d'ombre subtile tout autour de l'intérieur de la boîte. Il disparaît ensuite lorsque la mise au point est perdue.
Voyons-le en action allons-nous?
Je pense que ça a l'air bien! L'ombre de la boîte peut ne pas vous convenir, alors jouez avec cela pour obtenir quelque chose qui vous semblera juste.
.post-btn width: 100%; text-align: center; rembourrage: $ padding * 2; marge supérieure: $ margin * 2; fond: $ green; couleur: $ blanc; poids de la police: 500; bordure: aucune; border-radius: 5px; -webkit-transition: toutes les 0.4s sont faciles; -moz-transition: tous les 0.4s facilité; -o-transition: tous les 0.4s facilité; -ms-transition: tous les 0.4s facilité; transition: tous les 0.4s à l'aise; &: hover background: lighten ($ green, 10%); -webkit-transition: toutes les 0.4s sont faciles; -moz-transition: tous les 0.4s facilité; -o-transition: tous les 0.4s facilité; -ms-transition: tous les 0.4s facilité; transition: tous les 0.4s à l'aise;
Le tout important Poster 'Merci' bouton! Des styles assez simples ici. Le bouton doit simplement remplir la largeur du conteneur à tout moment. Il devrait également être un peu éloigné de la zone de message, de sorte que certains haut de la marge nous aide ici. Nous avons une autre déclaration de transition, mais cette fois, elle est définie sur tout afin d'animer chaque propriété qui a un changement de valeur pour que tout reste lisse. Cela signifie également qu'à l'avenir, nous pouvons ajouter d'autres styles, comme un Couleur changer en vol stationnaire et tout sera encore animé.
Enregistrez le fichier et jetez un autre coup d'œil:
Charmant. C'est exactement ce que nous voulons. Il est temps de styler ces liens de médias sociaux.
.boutons sociaux padding-left: 0px; marge supérieure: $ margin * 2; Écran @média et (largeur-min: $ pause-trois) remplissage: $ remplissage * 3 0 $ remplissage * 3 117px; marge supérieure: 0px; .social-btn padding: $ padding / 2 14px; largeur: 100%; bloc de visualisation; marge: $ marge / 2 0; border-radius: 20px; text-align: center; couleur: $ blanc; texte-décoration: aucun; text-transform: majuscule; taille de police: 70%; Écran @média et (largeur-min: $ break-trois) float: left; marge: $ margin / 2; rembourrage: $ padding / 2 $ padding * 2; largeur: auto; .twitter background: # 00acee; &: hover background: lighten (# 00acee, 10%); .facebook background: # 3b5998; &: hover background: lighten (# 3b5998, 10%);
Ce code devrait aller à l'intérieur du bas de page bloquer dans notre fichier Sass. L’idée avec ces boutons est qu’ils soient 100% larges et empilés verticalement aux résolutions mobile / tablette. Ensuite, au fur et à mesure que vous montez sur le bureau, ils doivent correspondre à la conception. La requête des médias pour le boutons sociaux impliquait pas mal d’essais et d’erreurs pour obtenir un regard "centré" sur la taille des postes de travail. La valeur de 117px pour le rembourrage gauche était le point que j'ai trouvé pour donner le résultat souhaité.
Chaque social-btn a quelques styles simples pour donner l'apparence de base. Nous spécifions ensuite les styles pour chaque bouton. Dans cette application, c'est juste un Couleur de fond différence. Notez ici que j'ai utilisé la valeur hexadécimale et non une variable Sass. Il n'y a pas de vraie raison à cela, c'est que c'est le seul endroit où ces couleurs sont utilisées, donc les changer ne serait pas vraiment un problème. Si nous avions les liens sociaux ailleurs, je les aurais certainement définis comme variables. Les deux boutons ont une version légèrement plus claire de leurs fonds sur flotter.
Avant de jeter un coup d'oeil, nous pouvons aussi bien mettre en place notre bloc de style final:
.copyright taille de la police: 90%; couleur: $ gris foncé; Écran @média et (largeur-min: $ break-trois) taille de la police: 100%
Comme son nom l'indique, ce bloc contrôle notre petite balise Copyright dans le pied de page. La taille de la police correspond aux changements de taille du navigateur, affichant 100% à $ pause trois.
Enregistrez et jetez un coup d'œil à notre chef-d'œuvre!
Agréable! Tout a l'air génial et cela termine à peu près notre interface Web App de Noël!
C'est un thème fortement saisonnier, basé sur un concept de Noël et du nouvel an. Avec juste un petit ajustement, vous pouvez facilement le modifier pour répondre à vos besoins, par exemple:
J'espère vraiment que vous avez aimé travailler avec moi via cette application Web. C'était un projet amusant à construire et je suis heureux d'avoir pu partager mes techniques sur la façon de le construire. Le code source est toujours disponible via les liens de téléchargement, alors n'hésitez pas à fouiller et à me faire savoir dans les commentaires vos pensées, ou si l'un de vous voudrait l'améliorer de quelque manière que ce soit.
Merci à Tomas pour la conception initiale, et merci de lire et de suivre.
Accentsconagua