Scaffale Modelli CSS

Modelli CSS per librerie che mantengono l'allineamento

Una libreria di copertine appare ordinata solo se lo stile la mantiene coerente. Scansioni di copertine rigide, foto di copertine in brossura e vecchie edizioni non hanno mai le stesse dimensioni, e un modello per libreria deve mantenerle in un unico riquadro, garantendo al contempo la leggibilità di titoli e nomi degli autori sottostanti.

Le immagini di copertina hanno proporzioni irregolari

Le immagini dei libri raramente hanno le stesse proporzioni. Una ristampa può essere tozza, un volume d'arte quasi quadrato, una scansione di un classico ritagliata nella parte superiore. Le stesse dimensioni delle carte non si traducono in copertine uguali, ed è proprio questa discrepanza a rendere la libreria disordinata. Un "proporzioni" fisso sull'area della copertina, con una regola "object-fit" che permette all'immagine di riempirla, mantiene ogni carta alla stessa altezza e ritaglia l'illustrazione ai bordi anziché allungarla.

I titoli lunghi creano un altro problema di allineamento. Due righe di testo sotto una copertina e quattro sotto la successiva spostano i nomi degli autori ad altezze diverse lungo la riga.

Poche scelte stilistiche contribuiscono in modo determinante all'impatto visivo di una collezione di libri:

• un rapporto fisso per l'area della copertina, in modo che una ristampa tozza e un volume illustrato alto occupino lo stesso spazio;

• un limite di righe per i titoli, che mantiene la riga dell'autore alla stessa altezza in ogni scheda;

• ampi spazi tra i gruppi, in modo che le nuove uscite e i titoli selezionati dallo staff appaiano come scaffali separati;

• un effetto al passaggio del mouse che rivela una valutazione o una riga di sinossi.

Nicepage gestisce la maggior parte di questi aspetti tramite i suoi controlli visivi, e l'elemento Griglia imposta le colonne e gli spazi.

Le colonne della Griglia si riducono su schermi stretti

Uno schermo ampio può ospitare comodamente una lunga fila di copertine. La stessa fila su un telefono di solito si riduce a una o due colonne, ed è utile verificare cosa succede tra questi due estremi in ogni Modalità Responsive.

Mantieni la copertina, il titolo e l'autore leggibili a qualsiasi larghezza. Le etichette di genere e le note sull'edizione possono ridursi su schermi piccoli, poiché un lettore che scorre uno scaffale su un telefono guarda prima l'immagine. Una biblioteca personale può permettersi una maggiore densità di contenuti rispetto alla selezione di una libreria, dove ogni copertina è anche un prodotto.

Regole personalizzate per un singolo scaffale

A volte un gruppo di libri necessita di funzionalità non offerte dai controlli standard, come ad esempio un contorno dorato per i libri premiati. Nicepage supporta i controlli CSS personalizzati per un singolo elemento, una singola pagina o l'intero sito, coprendo così tali eccezioni.

Valutare un template in base allo scaffale più affollato fornisce maggiori informazioni rispetto alla schermata iniziale demo. Caricate il titolo più lungo, la peggiore scansione di copertina e il gruppo più numeroso che pubblicate, quindi verificate se le righe sono ancora allineate.