Nous avons un peu une maquette de Photoshop à partir d'ici alors que nous continuons à créer le modèle pour la page de galerie individuelle.
Tout d'abord, nous avons stylisé les liens Suivant et Précédent. Ils sont dans une case absolument positionnée dans la barre de la galerie, afin que nous puissions les centrer sur la page malgré les autres boutons et trucs déjà dans la barre. Ils prennent la même classe que le bouton Submit One, donc il y a de la constance.
Ensuite, nous avons cette colonne de gauche très mince dans laquelle obtenir du texte. Nous commençons avec une grille 1/8 7/8, mais 1/8 est juste un peu trop mince. On le change en 1/4 3/4 mais c'est trop. Donc, comme le légendaire bébé ours, 1/6 5/6 était juste.
Nous faisons un travail de typographie dans cette colonne étroite, en ajoutant le titre (dans un
bien sûr, puisque c'est le titre le plus important de la page), la description et d'autres sections. La plupart de la typographie se met simplement en place sur la base de notre configuration de typographie simple et robuste.
La grille 5/6 est tout pour l'image. Beau et grand, ce qui est génial. Il a un fond gris clair, tout comme les images dans les articles de blog (par exemple
Nous pensons avoir un peu de fantaisie avec la façon dont nous stylisons les balises. Nous regardons autour de CodePen (voici un lien vers la balise «tags», META ALERT). Nous finissons par penser que c'est exagéré et les laissons comme des liens normaux.
Nous faisons fonctionner le bouton «pleine taille» de l'une des manières les plus simples possibles, ouvrons une nouvelle fenêtre qui correspond aux dimensions de l'image en taille réelle et en affichant l'image. C'est comme une boîte modale du début des années 2000! Mais j'aime ça. C'est simple, il n'a pas besoin de beaucoup de code (comme le ferait une lightbox), et il est évident d'interagir avec. C'est encore mieux, si vous me demandez.