Share
Dans la partie précédente de cette série, nous avons découvert l'API Behance, en l'utilisant pour capturer des éléments du portefeuille d'un utilisateur et les afficher sur une page Web. Dans cette partie, nous styliserons la page Web en présentant les éléments du portefeuille de manière suffisamment attrayante..
Pour commencer, nous allons préparer notre boîte à outils:
Nous utiliserons Normaliser pour rendre les styles d'élément de base plus cohérents sur différents navigateurs et minimiser les risques de résultats inattendus..
Nous utiliserons également LESS pour personnaliser notre site Web. Quel que soit le préprocesseur que vous préférez, il est vivement recommandé de les utiliser dans votre flux de travail. Je suis un grand fan de, au lieu d'avoir à chaluter la couleur désirée dans le sélecteur de couleurs à partir d'une application séparée, en utilisant simplement des fonctions de contrôle LESS telles que alléger() et assombrir() pour nous donner une gamme de variantes de couleur.
Pour nous aider plus loin, nous utiliserons LESSHat pour nous aider à écrire Moins code avec sa collection Mixins. Nous utiliserons également les Remixins développés par Christopher Ramírez. Remixins est une collection de Mixins à convertir px dans rem unités en. La collection comprend les Mixins pour spécifier taille de police, marge, rembourrage, largeur et la taille, et position CSS (la gauche, droite, bas, et Haut).
De plus, nous aurons également besoin d'un outil pour compiler LESS dans le CSS normal. Dans ce didacticiel, nous utiliserons une application appelée Koala, disponible sous Windows, OSX et Ubuntu. Vous pouvez bien entendu utiliser le compilateur que vous préférez, mais avec un peu de chance, vous pourrez suivre ce tutoriel quelle que soit la plate-forme que vous utilisez..
Pour plus d'informations sur LESS, reportez-vous à ces didacticiels:
Les polices système par défaut comme Arial ne le font tout simplement pas pour moi aujourd'hui. Donc, dans ce tutoriel, je vais plutôt utiliser Google Fonts. J'ai choisi Cantata One pour l'en-tête et Open Sans pour le corps du texte par défaut. Ceci est une préférence personnelle, vous êtes libre d'exclure Google Fonts ou d'utiliser des alternatives si vous le souhaitez..
Nous allons également utiliser des icônes de polices pour un peu de décoration sur notre site Web. Ces jours-ci, nous avons une tonne d'options pour les icônes de polices. Cependant, au cours de mes recherches, j'ai été assez surpris de constater que seules quelques-unes de ces polices incluent l'icône Behance dans leur collection. Quoi qu’il en soit, nous utiliserons dans ce tutoriel Foundation Icon Fonts 3, car il contient l’icône Behance et est également disponible via un CDN..
Dans le répertoire racine de notre projet, créons de nouveaux dossiers nommés Moins et css (qui sera le dossier de sortie du fichier LESS). Créez un nouveau fichier nommé style.less et récupérez Remixins ainsi que LESShat. Mettez ces trois feuilles de style MOINS dans le Moins dossier. À ce stade, la liste des fichiers et des dossiers de notre répertoire de projet devrait ressembler à ceci:
| - css | - index.html '- less | - lesshat.less | - remixins.less' - style.less
Ajoutez ensuite Normalize, les polices Foundation Icon et notre feuille de style Google Font dans le tête tag, avec style.css, qui sera le fichier de sortie de style.less.
En outre, ouvrez l'application Koala (ou la forme de compilation que vous préférez) et ajoutez-y notre répertoire de projet..
Le répertoire du projet en KoalaAvant d'écrire un style, ajoutons quelques icônes sur notre site Web. Tout d'abord, nous allons ajouter la marque d'emplacement de la carte à côté de l'élément de localisation de l'utilisateur avec marqueur de fi classe. Ajouter cette classe à côté du profil-location classe comme si:
…user.city, user.country…
Cela va ajouter un :avant pseudo élément à la div, injecter l'icône du marqueur à travers nos icônes de fondation. Ensuite, nous ajouterons le logo Behance dans la section pied de page avec le fi-social-behance classe.
…Behance
…
Ouvrons notre style.less et importons lesshat.less et remixins.less en utilisant le (référence) marque.
@import (référence) 'lesshat.less'; @import (référence) 'remixins.less';
le (référence) La marque a été introduite dans MOINS 1.5. Cela signifie que LESS utilisera le fichier uniquement à titre de référence. Il ne compilera pas le contenu et ne l'exportera pas dans le fichier. C'est une fonctionnalité très puissante qui minimise les styles en double et inutiles.
Dans style.less, nous ajouterons les variables suivantes qui stockent la palette de couleurs et la famille de polices de notre site Web..
@ bg-body: #fafafa; @ bg-header: # 303746; @ couleur-base: # 353537; @ color-name: # e0e0e0; @ color-title: # 6b919f; @ font-body: 'Open Sans', Arial, sans-serif; @ font-name: 'Cantata One', Géorgie, Times, serif;
Le fait de placer ces variables à un endroit donné sert en quelque sorte de guide de style, mais il nous aide également à conserver nos styles de manière plus pratique. Par exemple, s'il y a quelque chose dans le site Web que nous voulons changer, nous pouvons simplement changer la valeur dans ces variables. C'est un moyen beaucoup plus sûr de modifier les styles, au lieu d'effectuer "Rechercher et remplacer".
Même si nous avons ajouté Normalize, qui a normalisé nos styles d'éléments, nous avons encore quelques styles à modifier pour répondre à nos besoins particuliers. Pour commencer, nous allons modifier la taille de la boîte, en définissant la taille de la boîte pour tous les éléments (y compris les pseudo-éléments). boîte à bordure. Cela donnera à nos dimensions une base beaucoup plus contrôlable pour travailler à partir de.
Nous pouvons appliquer cela avec le .taille de la boîte Mixins de la bibliothèque LESSHat, comme suit:
*, *: avant, *: après .box-sizing (border-box);
Ensuite, nous allons définir le html taille de la police à 62,5%, qui est une approche pour rendre les unités relatives plus gérables.
html taille de la police: 62,5%;
62,5% ici est mesuré par rapport à la norme de navigateur de 1em qui est 16px; donc 62,5% de 16px est égal à 10. Ce faisant, nous pourrons facilement calculer la conversion de rem dans px en le multipliant par 10. 1.2rem, par exemple, sera égal à 12px et ainsi de suite. De plus, si nous jetons un coup d’œil à la source remixins.less, nous trouverons la taille de la police de base dans @ base-font-size-px variable est définie à 10.
Vous pouvez vous référer à ces articles pour plus d'informations sur l'unité relative CSS:
Nous utilisons un figure élément pour contenir la couverture de l'image de portefeuille. Mais notre figure L'élément a hérité des valeurs de marge de Normaliser, ce qui crée un espace blanc non voulu entre les images du portefeuille. Donc, ici, nous allons supprimer la marge de la figure élément.
figure marge: 0; / * écrase le style par défaut Normalize.css * /
L'utilisation d'un hack de clearfix est une méthode populaire car elle permet de résoudre certains problèmes de mise en page causés par des éléments flottants qui ne parviennent pas à effacer leurs éléments enfants. Nous allons donc ici ajouter le conseil de clearfix de Nicolas Gallagher que nous avons transformé en MOINS.
.clearfix * zoom: 1; &: before, &: after content: ""; affichage: table; &: after clear: both;
Si vous regardez notre structure HTML, nous avons ajouté clearfix classe à certains éléments.
Pour le corps, nous allons définir les styles de police qui s’appliquent sur toute la page. Ces styles incluent la taille de la police, sa couleur, son poids, sa famille et la couleur de l’arrière-plan. Ici, nous allons utiliser le .taille de police() mixin de la bibliothèque Remixins pour générer la taille de la police. Tous les Mixins inclus dans la bibliothèque Remixins génèrent un px unité de repli, utile pour les navigateurs qui ne supportent pas la rem unité.
body .font-size (16px); couleur de fond: @ bg-body; couleur: @ couleur-base; famille de polices: @ font-base; poids de la police: 300;
Après avoir enregistré le fichier, Koala compilera automatiquement le résultat. Et le code ci-dessus devrait ressembler à ceci en CSS normal.
corps font-size: 16px; taille de la police: 1.6rem; couleur de fond: #fafafa; couleur: # 353537; famille de polices: 'Open Sans', Arial, sans-serif; poids de la police: 300;
Ensuite, nous allons ajouter les styles pour le site Web, comme suit:.
.portfolio-header .padding (50px, 0); couleur de fond: @ bg-header; text-align: center; .profile-avatar img .size (80px); rayon de bordure: 50%; .profile-name .font-size (24px); .margin-bottom (10px); couleur: @ nom-couleur; famille de polices: @ nom-polices; poids de la police: 400; .profile-fields .max-width (320px); .font-size (14px); couleur: alléger (@ bg-header, 50%); marge gauche: auto; marge droite: auto; .field-list padding: 0; .field-item display: inline-block; &: after content: ','; &: last-child: after content: "; .profile-location .font-size (14px); color: lighten (@ bg-header, 30%); &: before .margin-right (10px); .font-size (18px);
C'est une bonne partie de la syntaxe, alors décomposons-le et examinons ce qu'il fait. Tout d'abord, nous avons ajouté une couleur de fond dans l'en-tête avec la couleur stockée dans notre @ bg-header variable. Nous utilisons .rembourrage() Mixins de Remixins pour ajouter un rembourrage en haut et en bas de l'en-tête, offrant ainsi davantage d'espace blanc vertical. Nous avons également ajouté text-align: center donc notre contenu semble plus en ordre.
.portfolio-header .padding (50px, 0); couleur de fond: @ bg-header; text-align: center;…
Nous avons défini la taille de l'image d'avatar de l'utilisateur avec .Taille() Mixins et fait circulaire en définissant le rayon de la frontière à 50%. Vous pouvez voir que ces styles sont déclarés dans .profil-avatar img.
.profile-avatar img .size (80px); rayon de bordure: 50%;
Vous trouverez ci-dessous les règles relatives au nom d'utilisateur. Ici, nous définissons la taille de la police avec un .taille de police() mixin. Nous avons déployé le @ nom-couleur variable pour la couleur de la police et a transmis la famille de polices avec @famille de polices variable. Et enfin, nous avons ajouté poids de la police: 400; pour rendre la police plus audacieuse que le reste.
.nom-profil .font-size (24px); .margin-bottom (10px); couleur: @ nom-couleur; famille de polices: @ nom-polices; poids de la police: 400;
Ensuite, nous examinerons les règles de la zone des champs de créations utilisateur, que nous ciblons avec .champs de profil. Dans Behance, vous pouvez ajouter autant de compétences ou de spécialités de terrain que vous le souhaitez. Cela signifie que chaque utilisateur peut avoir des descriptions de compétences courtes ou très longues. J'ai donc décidé de régler la largeur avec un largeur maximale. Nous définissons la couleur de la police 50% plus claire à partir de l’arrière-plan de l’en-tête avec alléger (@ bg-header, 50%).
En outre, chacun des éléments de champ est séparé par une virgule que nous avons fournie via un :après pseudo-élément. Cependant, logiquement, le dernier élément ne devrait pas avoir de virgule. Nous avons donc sélectionné le dernier élément avec :dernier enfant et mettre le contenu propriété d'être vide contenu:".
.profil-champs . max-largeur (320px); .font-size (14px); couleur: alléger (@ bg-header, 50%); marge gauche: auto; marge droite: auto; .field-list padding: 0; .field-item display: inline-block; &: after content: ','; &: last-child: after content: ";
Vous trouverez ci-dessous les règles de style pour le style de l'emplacement de l'utilisateur. Ici, nous définissons la couleur légèrement plus claire que la couleur de fond, 30% pour être exact. Et nous avons aussi légèrement creusé l’écart entre le texte et l’icône de marqueur des polices Foundation Icon Fonts en ajoutant marge droite au :avant pseudo-élément.
.profil-location .font-size (14px); couleur: alléger (@ bg-header, 30%); &: before .margin-right (10px); .font-size (18px);
Après avoir ajouté ces styles, l'en-tête devrait maintenant ressembler à ceci:
L'extrait suivant contient tous les styles de notre portefeuille.
.zone de portefeuille .margin (50px, auto); .max-width (960px); largeur: 100%; .portfolio-list padding-left: 0; .portfolio-item .margin-bottom (30px); hauteur (320 px); .padding (0, 15px); float: gauche; type de style de liste: aucun; largeur: 33,33333333333333%; .portfolio-content text-align: center; .portfolio-cover width: 100%; .portfolio-image border: 8px solid #fff; largeur maximale: 100%; .portfolio-title .font-size (14px); couleur: assombrir (@ color-title, 10%); text-transform: capitalize; alignement vertical: milieu; largeur: 100%; .portfolio-fields .font-size (12px); couleur: fonce (@ bg-body, 30%); .field-list padding: 0; .field-item display: inline-block; &: after content: ','; &: last-child: after content: ";
Beaucoup de styles ci-dessus sont décoratifs. Mais voici quelques points importants à noter:
Tout d'abord, nous définissons le .zone de portefeuille largeur à 100%, mais conservez la largeur maximale à 960px. Cela permettra à la largeur de s’adapter gracieusement dans une taille de fenêtre plus petite. En outre, comme vous pouvez le voir ci-dessus, nous avons défini la .élément de portefeuille largeur à 33,33333333333333%. C'est parce que nous allons afficher trois éléments sur chaque ligne. le 33,33333333333333% est dérivé de la division de 100% par 3.
le .couverture de portefeuille width est réglé sur 100%, il remplira donc la largeur de son parent. le .portfolio-image est réglé avec largeur maximale: 100% ainsi, l'image ne dépassera pas la largeur du parent, quelle que soit sa taille. Tous ces paramètres de largeur nous aideront à rendre notre site fluide.
Maintenant, la section du portefeuille devrait ressembler à ceci.
Ensuite, nous allons ajouter les styles pour le pied de page. Le pied de page est clair et simple. il se compose uniquement du texte "Powered by" et d'une icône Behance des polices Foundation Icon. Vous trouverez ci-dessous toutes les règles de style pour le pied de page..
.portfolio-footer .margin (30px, auto); .max-width (960px); text-align: center; largeur: 100%; .power-by .font-size (12px); couleur: fonce (@ bg-body, 30%); text-transform: majuscule; .power-logo .width (36px); hauteur (36 px); couleur: # 1769ff; affichage: inline-block; marge: 0 auto; débordement caché; position: relative; texte-décoration: aucun; retrait du texte: 100%; espace blanc: maintenant; &: before .line-height (38px); .font-size (36px); affichage: inline-block; hauteur: 100%; gauche: 0; position: absolue; retrait du texte: 0; en haut: 0; largeur: 100%;
Comme pour la section portefeuille, définissez la largeur du pied de page sur 100% et alignez-la au centre de la fenêtre du navigateur avec marge: 0 auto;. Nous alignons également tout le contenu sur le centre pour lui donner une apparence ordonnée. Nous cachons ensuite le texte à l'intérieur .logo de puissance en utilisant la méthode Kellum et n’afficher que le logo Behance avec sa couleur de marque, bleu # 1769ff.
Remarque: Behance a toute une section pour les développeurs sur leurs directives de marque si vous voulez jeter un oeil.
Le pied de page devrait maintenant paraître assez complet, comme.
Nous avons une mise en page fluide, mais nous allons maintenant rendre notre page Web réactive. Heureusement, notre site Web n’est qu’une page Web simple, avec une mise en page très simple. Donc, il ne faudra pas de code long pour le rendre réactif. Pour commencer, nous allons ajouter la méta-fenêtre (cruciale) dans la tête étiquette.
Ensuite, nous ajoutons quelques requêtes multimédia, comme suit.
Écran @média uniquement et (largeur minimale: 768px) et (largeur maximale: 959px) .portfolio-area .portfolio-item width: 50%; @ Écran uniquement multimédia et (largeur maximale: 767px) .portfolio-area .portfolio-item height: auto; largeur: 100%;
Ces requêtes multimédias affichent deux éléments dans une rangée comprise entre 959px et 768px, et un élément lorsque la largeur de la fenêtre est égale ou inférieure à 767px..
Notre site Web de portefeuille dans différentes tailles de fenêtresAprès avoir stylé l’esthétique de notre page, il ne reste plus qu’à ajouter du style. Dans la prochaine et dernière partie de cette série, nous autoriserons les visiteurs à cliquer sur chaque vignette pour en voir une version plus grande. De plus, nous ajouterons des animations CSS3 pour améliorer l'expérience..
Accentsconagua