Abbiamo un po 'di un mockup di Photoshop su cui lavorare da qui mentre continuiamo a costruire il modello per la singola pagina della galleria.
Per prima cosa, abbiamo designato i collegamenti Successivo e Precedente. Sono in una casella assolutamente posizionata nella barra della galleria, in modo da poterli centrare sulla pagina nonostante gli altri pulsanti e le cose già presenti nella barra. Prendono la stessa classe del pulsante Invia uno, quindi c'è costanza.
Successivamente abbiamo questa colonna di sinistra molto sottile in cui ottenere il testo. Iniziamo con una griglia 1/8 7/8, ma 1/8 è solo un po 'troppo sottile. Lo cambiamo in 1/4 3/4 ma è troppo. Quindi, come il leggendario orsetto, 1/6 5/6 era giusto.
Facciamo un po 'di lavoro tipografico in quella colonna stretta, aggiungendo il titolo (in un file
ovviamente, poiché è il titolo più importante della pagina), la descrizione e altre sezioni. La maggior parte della tipografia va a posto in base alla nostra configurazione tipografica semplice e robusta.
La griglia 5/6 è tutta per l'immagine. Bello e grande, il che è fantastico. Ha uno sfondo grigio chiaro, proprio come le immagini nei post del blog (es
Pensiamo di avere un po 'di fantasia con il modo in cui modelliamo i tag. Ci guardiamo intorno su CodePen (ecco un link al tag "tags", META ALERT). Finiamo per pensare che sia eccessivo e li lasciamo come collegamenti normali.
Facciamo in modo che il pulsante "full size" funzioni in uno dei modi più semplici possibili, aprendo una nuova finestra che è la dimensione dell'immagine full size e mostra l'immagine al suo interno. È come una scatola modale dei primi anni 2000! Ma mi piace. È semplice, non ha bisogno di un mucchio di codice (come farebbe un lightbox) ed è ovvio con cui interagire. È anche meglio, se me lo chiedi.