We hebben een beetje een Photoshop-mockup om vanaf hier te werken terwijl we doorgaan met het bouwen van de sjabloon voor de individuele galerijpagina.
Ten eerste hebben we de links Volgende en Vorige gestileerd. Ze bevinden zich in een absoluut gepositioneerde doos in de galerijbalk, zodat we ze op de pagina kunnen centreren ondanks de andere knoppen en zo die al in de balk staan. Ze nemen dezelfde klasse aan als de Submit One-knop, dus er is daar constantheid.
Vervolgens hebben we deze zeer slanke linkerkolom waarin we tekst kunnen krijgen. We beginnen met een 1/8 7/8 raster, maar 1/8 is net iets te smal. We veranderen het naar 1/4 3/4 maar dat is teveel. Dus net als de legendarische babybeer was 1/6 5/6 precies goed.
We doen wat typografisch werk in die smalle kolom en voegen de titel toe (in een
tag natuurlijk, aangezien dit de belangrijkste titel op de pagina is), de beschrijving en andere secties. De meeste typografie valt gewoon op zijn plaats op basis van onze eenvoudige en stevige typografie-opzet.
Het 5/6 raster is alles voor de afbeelding. Lekker groot, wat geweldig is. Het heeft een lichtgrijze achtergrond, net zoals afbeeldingen in blogposts (bijv
We denken erover na om een beetje chique te worden met hoe we de tags stylen. We kijken rond op CodePen (hier is een link naar de "tags" -tag, META ALERT). We denken dat dat overdreven is en laten ze als normale links.
We zorgen ervoor dat de knop "volledige grootte" werkt op een van de eenvoudigste manieren die mogelijk zijn, door een nieuw venster te openen met de afmetingen van de afbeelding op volledige grootte en de afbeelding erin te tonen. Het is net een modale doos uit de vroege jaren 2000! Maar ik vind het leuk. Het is eenvoudig, het heeft niet veel code nodig (zoals een lightbox zou doen), en het is duidelijk om ermee te communiceren. Het is zelfs nog beter, als je het mij vraagt.