Share
Dans ce tutoriel, nous allons continuer à construire notre site de podcast. Nous allons commencer à styler notre index de messages, créer un joli petit pied de page et ajouter un peu de couleur au mélange. Tout cela en utilisant Sass et la suite Bourbon.
Oui, où étions-nous? Pour le moment, notre site ne semble pas très beau:
Actuellement, nos publications ne sont pas alignées sur le côté gauche, nous avons donc besoin d'une grille pour réparer ce gâchis. Notre cher Bourbon Neat à la rescousse! Nous allons d'abord ajouter une classe des postes comme une enveloppe pour nos messages et en faire un conteneur extérieur qui centre le contenu sur la page.
Dans “source / index.html.erb”:
<% page_articles.each_with_index do |article, i| %><%= link_to article.title, article %> <%= article.date.strftime('%b %e') %>
<%= article.body %> <% end %>
Ensuite, nous devons créer une nouvelle partition Sass pour nos styles d’index et appliquer un peu de magie, donc dans “source / stylesheets / all.sass”:
@import 'index_posts'
Et dans «source / stylesheets / _index_posts.sass»:
.poteaux + extérieur-conteneur
Je pense également que c'est une bonne idée d'ajouter une couleur de fond pour rendre notre conteneur extérieur facilement visible - pour l'instant.
Puis engagez-vous sur Git:
git add -all git commit -m 'Ajoute un Sass partiel pour le contenu des posts d'index'
Les articles, balises et éléments de calendrier récents sont dans «layout.erb» et ne nous concernent pas pour le moment. Concentrons-nous plutôt sur l’affichage de cette liste d’index. Donnons le h2 titre une classe titre de l'article et laissez le titre et les paragraphes du corps de texte s'étendre sur huit colonnes (sur douze) de la page. Les articles doivent également être décalés de deux colonnes, car nous voulons éviter que notre copie ne s'étende sur toute la page et dépasse de ce fait une largeur de ligne saine (mesure) pour une lecture de 45 à 75 caractères..
Donc, dans “source / index.html.erb”:
<% page_articles.each_with_index do |article, i| %><%= link_to article.title, article %> <%= article.date.strftime('%b %e') %>
<%= article.body %> <% end %>
Et dans «source / stylesheets / _index_posts.sass»:
.post-titre, .posts p + shift (2) + span-colonnes (8)
Nous parlons maintenant. Notre contenu est aligné et bien centré sur la page. Ce qui nous manque, c'est toute forme de hiérarchie visuelle. notre h2 les titres ne sont pas beaucoup plus gros que le contenu de nos articles. Pour offrir une meilleure expérience de lecture, nous devons nous assurer que les titres et le texte correspondant ont un meilleur contraste visuel que celui-ci..
Premièrement, nous avons besoin d’un meilleur texte, nous allons donc utiliser un assistant Middleman pour le texte factice. Ajoutons un erb extension à nos articles de blog et ajouter ce qui suit à nos messages de test.
Remarque: nous avons besoin de l'extension ".erb" uniquement parce que nous voulons exécuter du code ruby entre cette construction <%= %>.
Dans «source / posts / 2012-01-01-example-article.html.markdown.erb»:
Ceci est un exemple d'article. Vous voulez probablement le supprimer et écrire vos propres articles! <%= lorem.sentences 5 %>
Nous allons passer en revue les détails dans un moment, mais d’abord quelques autres styles dans “source / stylesheets / _index_posts.sass”:
.post-title taille de police: 1.7em .posts p taille de police: 1.05em margin-bottom: 4em
C'est un peu plus facile pour les yeux, n'est-ce pas? Nous avons ajusté les en-têtes et les paragraphes à un degré raisonnable. Un peu de marge supplémentaire entre les postes fait toute la différence. En termes de hiérarchie, c'est un bon début.
S'engager à Git:
git add --all git commit -m 'Ajuste la taille du titre et du corps du texte Ajoute du texte factice Ajoute une extension .erb aux messages factices'
Avec le pied de page. Je pense que nous devrions d'abord nous occuper des éléments flottants épouvantables au bas. Emballons «Articles récents» et «Balises» dans un pied de page et supprimons «Par année». Le balisage approprié fait partie de la mise en page globale dans «source / layouts / layout.erb». Trouvez le code dans le de côté tag ci-dessous rendement et adaptez-le comme suit. Dans “source / layouts / layout.erb”:
L’affaire par défaut ci-dessus consistant à parcourir en boucle nos publications et les balises fournies avec Middleman convient parfaitement. Je veux toutefois que ce soit un peu plus intelligent et que je présente le remaniement aux messages et balises récents. De cette façon, l'utilisateur ne voit pas seulement les dix derniers articles ou une longue liste de balises, mais une version aléatoire de ces deux éléments comportant toujours dix éléments. De plus, ils ne consomment pas beaucoup d’espace et me permettent d’aligner les deux éléments de manière cohérente dans le pied de page. J'ai renommé le h3 pour les articles également, dans «source / layouts / layout.erb»:
### Alignement
Je pense que nous avons considérablement amélioré l'expérience utilisateur grâce à cette petite amélioration. Ruby a rendu notre travail super facile. Maintenant, ce balisage n'a besoin que d'un petit coup de pouce pour un meilleur alignement. Nous créons un nouveau Sass partiel pour seulement le pied de page. Dans “source / stylesheets / all.sass”:
@import 'footer'
Et ensuite dans la partie "source / stylesheets / _footer.sass":
pied de page + bordure extérieure du conteneur: 1px solide $ remplissage-couleur-base-bordure: haut: 4em bas: 4em. posts récents + décalage (2) + span-colonnes (6) .fags-tags + span-colonnes ( 2) .recent-posts, .footer-tags h3 taille de police: 1.7em li taille de police: 1.05em
Afin de disposer de données de test tangibles, j'ai ajouté quelques exemples supplémentaires d'articles via le générateur d'intermédiaire et lui ai donné un texte factice. Via le terminal:
article d'intermédiaire 'Votre titre de fantaisie'
Je devrais probablement mentionner que je devais également ajouter une extension «.erb» à ces nouveaux messages pour le générateur de texte factice lorem. Le frontmatter contient quelques autres tags pour jouer avec.
Dans «source / posts / 2015-12-01-your-fancy-title.html.markdown.erb»:
--- titre: exemple Date de publication: 2015-12-01 tags: exemple, bourbon, soigné, intermédiaire --- Ceci est un exemple d'article. Vous voulez probablement le supprimer et écrire vos propres articles! <%= lorem.sentences 5 %>
L'objectif était d'avoir au moins dix publications et balises pour voir si tout s'alignait correctement. Voyons ce que nous avons ici:
Les couleurs de fond ont rempli leur devoir pour le moment. Éliminons-les et vérifions si nous sommes satisfaits du résultat réel:
Je pense que nous pouvons le laisser comme ça pour le moment. Il est temps d'engager nos changements!
git add… /layouts/layout.erb gco -m 'Adapte la mise en page et ajoute un pied de page' git add… /stylesheets/_footer.sass… /stylesheets/all.sass git commit -m 'Ajoute des styles pour le pied de page et importe Sass partial' git add… /posts/*.markdown.erb git commit -m 'Ajoute un tas de messages factices avec: dummy lorem text dummy tags'
Avant de continuer, nous devrions déployer sur GitHub Pages, vérifier nos progrès et nous assurer que nous n’avons aucune surprise..
intermédiaire se déployer
Ouvrez votre navigateur, allez à votrenomutilisateur.github.io/votre_nom_projet et voyez si vous êtes satisfait de votre site jusqu'à présent.
Que devrions-nous faire ensuite? Vous avez raison, le pied de page crie en grosses lettres EXTRACTION! Nous allons prendre le , créer un nouveau dossier pour les partiels et y insérer le balisage. À son tour, nous devons rendre ce partiel à partir de «source / layouts / layout.erb»:
<%= yield %><%= partial "partials/footer" %>
Puis dans le partiel “source / partials / _footer.erb”:
Si vous avez prêté une attention particulière, vous verrez que j'ai supprimé la date pour la liste d'articles dans le pied de page. Je l'ai fait pour deux raisons. Tout d’abord, nous allons économiser un peu plus d’espace afin de ne pas nous heurter facilement au scénario selon lequel l’alignement sur les balises est rompu lorsque le titre de la publication est un peu plus long. Deuxièmement, je pensais que cela distrayait un peu et que je n’en ajoutais pas trop.
Cette liste d’articles aléatoires dans le pied de page est un moyen pratique d’introduire de nouveaux éléments au public. La date ne joue pas un grand rôle dans cela. Il en va de même pour le nombre d'articles pour les liens de balises. Ils gaspillent de l'espace sans ajouter trop de valeur. De plus, si vous n'avez pas trop d'articles pour une balise donnée, celle-ci n'a pas l'air vide tout de suite. Je préférerais avoir plus d'espace pour une mise en page stable. On se sent aussi un peu plus propre, mais c'est complètement subjectif.
Commettre:
git add --all git commit -m "Extrait le pied de page en partie Supprime la date des liens de publication dans le pied de page Supprime le nombre d'articles pour les balises en pied de page N'a pas fourni suffisamment de valeur pour sacrifier de l'espace"
Tant que nous y sommes. Occupons-nous de la date dans nos titres d'index. Je pense que leur taille est bien trop importante, ce qui n'améliore pas notre hiérarchie visuelle et je n'aime pas l'avoir à la fin du titre. Je préfère le coller de l'autre côté et l'utiliser comme une ancre visuelle qui ne saute pas avec des longueurs de titre variables.
Dans “source / index.html.erb”:
<% page_articles.each_with_index do |article, i| %><%= article.date.strftime('%b %e') %> <%= link_to article.title, article %>
<%= article.body %> <% end %>
Et dans «source / stylesheets / _index_posts.sass»:
.taille de police post-date: 0.7em marge: gauche: em (-80px) droite: em (20px)
Le titre de l'article est réorganisé et commence par la plage contenant la date. J'ai laissé un petit espace entre l'étendue avec la date et le titre lui-même, car si j'aligne la date sur le texte du corps de l'article pour les écrans plus petits, un espace d'un caractère naturel se trouve entre la date et le titre. utiliser Sass inutilement.
Le code Sass est simple. Les marges négatives me permettent d’ancrer visuellement la date à gauche du titre et j’utilisais une fonction Bourbon pour convertir leurs valeurs en pixels en ems. Simple, mais j'aime la hiérarchie que nous avons réalisée. Les yeux ont quelque chose à voir avec les dates et le reste a suffisamment d’espace pour que nous puissions éviter d’utiliser des frontières pour diviser nos publications. Moi content!
S'engager à Git:
git add… /index.html.erb… /stylesheets/_index_posts.sass git commit -m 'Modifie l'ordre des date et titre de l'article sur la page d'index Styles date pour créer un ancre visuel'
Et déployer:
intermédiaire se déployer
Donnons un peu vie à cette chose, mais pas trop. Moins est plus! Je suis allé à COLOURlovers et j'ai joué avec quelques palettes de couleurs. Faites attention aux solutions qui peuvent améliorer votre hiérarchie visuelle, mais évitez les couleurs criardes. Je réalise que c'est vague, car les couleurs peuvent être très subjectives et culturellement chargées, mais c'est comme ça que je l'aborde pour le moment..
Dans nos variables “source / stylesheets / base / _variables.scss”:
$ vert matcha: # 78B69D; $ text-color: assombrit ($ gris moyen, 20%);
De retour aux affaires; Après avoir joué avec quelques idées, j'ai ajouté deux nouvelles couleurs globales à mon fichier de variables Sass de Bitters.. $ vert matcha est maintenant la couleur que je souhaite utiliser pour mon identité et placée dans ce fichier, je peux réutiliser cette variable où bon me semble. Si je devais changer d'avis sur le vert que je veux, je devrais le changer une fois. De plus, je n'étais pas trop satisfait de la couleur par défaut du texte. À l’aide d’une fonction Sass, j’ai assombri de 20% l’une des couleurs prédéfinies de Bitters et l’a enregistrée comme $ text-color. Les titres des publications en vol stationnaire, ainsi que les dates et le corps du texte ont reçu la nouvelle couleur du texte. Le défaut était trop sombre à mon avis.
Dans “source / stylesheets / base_typography.scss”:
// transition: couleur $ base-duration $ base-timing;
Et ensuite dans “source / stylesheets / _index_posts.sass”:
.post-title font-size: 1.7em une transition + (couleur .4 facile à insérer) couleur: $ matcha-green &: hover couleur: $ text-color .post-date couleur: $ text-color .posts p couleur: $ text-color
J'ai également ajouté une légère transition à travers un mixin Bourbon pour survoler .titre de l'article. Cela change de $ vert matcha à $ text-color plus de .4 secondes. Consultez mes articles sur Bourbon Mixins si vous voulez en savoir plus.
Au cas où vous vous interrogeriez sur le facilité d'entrée partie, c’est l’une des 32 façons de chronométrer les comportements de transition. ($ easy-in-out, en tant que $une variable, comme dans la documentation, provoquera une erreur). Il s’agit d’une petite amélioration, mais elle est beaucoup mieux que les paramètres par défaut du navigateur. Pour que cela fonctionne, je devais également commenter le comportement de transition par défaut de Bitters dans “base_typography.scss”..
Dans “source / stylesheets / _footer.sass”:
footer border-top: 1px solid rgba ($ text-color, .3) .recent-posts, .footer-tags color: fonce ($ medium-grey, 20%) une transition + (tous les .1s sont faciles à insérer. ) couleur: $ text-color &: survol couleur: $ matcha-green border-bottom: 2px solide $ matcha-green
Enfin, j'ai également adapté les couleurs pour le pied de page. Cela nous donne une apparence cohérente et, espérons-le, un peu de sous-estimation subtile. Le comportement de transition devait être accéléré pour les liens dans le pied de page. Puisqu'ils sont regroupés si étroitement, j'ai senti que ce serait mieux s'ils étaient un peu plus vifs et soulignés.
En termes de couleur, j'ai fait le contraire comme pour les titres dans la liste d'index. Étant donné que la liste de bas de page n'a pas besoin d'être aussi présente sur la page (en particulier avec si peu de distance entre eux), je leur ai donné la couleur de texte grise par défaut et je n'utilise que le $ vert matcha en vol stationnaire Dans cet exemple, nous utilisons uniquement les espaces et le dimensionnement du type pour obtenir une hiérarchie..
Oh, et la bordure au-dessus du pied de page avait besoin d'un peu d'opacité via le Sass rgba une fonction. Je pensais que 30% d’opacité suffisait à faire son travail sans trop se démarquer.
Pas trop minable, pour une si petite quantité de code. Exactement comme je l'aime - moins vous écrivez de code, moins il y a de bugs pour vous mordre!
S'engager à Git:
git add --all git commit -m "Première tentative de réglage des couleurs Ajoute une nouvelle couleur de marque sous la forme $ matcha-green Ajoute une nouvelle couleur de texte $: Corps Copier Afficher le titre du survol En-têtes de pied de page S'occupe des transitions en survol Commentaires en transition Bitters par défaut"
## Tweaks
Une dernière petite chose qui m'irrite est la hauteur de trait de la copie de corps. Modifions cela aussi. Dans “source / stylesheets / _index_posts.sass”:
.messages p hauteur de la ligne: 1.35em
Commettre:
git add… /source/stylesheets/_index_posts.sass git commit -m 'Ajuste la hauteur de ligne pour la copie de corps sur l'index'
Et, encore une fois, déployez:
intermédiaire se déployer
Bon travail jusqu'à présent! Il est grand temps de faire une autre pause. Dans le prochain tutoriel, nous allons ajouter une barre de navigation et une «unité héros». On se voit là-bas! Obtenez-vous une collation et se détendre un peu!
Accentsconagua