Boekenplank CSS-sjablonen

Boekenplank-CSS-templates voor boekencollecties die netjes uitgelijnd blijven

Een plank vol omslagen oogt alleen overzichtelijk als de styling het geheel bij elkaar houdt. Scans van gebonden boeken, foto's van pockets en oude edities hebben nooit hetzelfde formaat, en een boekenplanktemplate moet ze binnen één kader houden terwijl titels en auteursnamen eronder goed leesbaar blijven.

Omslagillustraties hebben ongelijke verhoudingen

Boekafbeeldingen hebben zelden dezelfde verhouding. Een herdruk kan gedrongen zijn, een kunstboek bijna vierkant en een gescande klassieker aan de bovenkant bijgesneden. Gelijke kaartafmetingen leveren geen gelijke omslagen op, en dat verschil maakt een plank rommelig. Een vaste „beeldverhouding” (aspect-ratio) voor het omslaggebied, met een regel voor „inhoudsinpassing” (object-fit) waardoor de afbeelding het vlak vult, houdt elke kaart op dezelfde hoogte en snijdt de afbeelding aan de randen bij in plaats van deze uit te rekken.

Lange titels zorgen voor de andere vorm van scheefgroei. Twee regels tekst onder de ene omslag en vier onder de volgende duwen de auteursnamen binnen een rij naar verschillende hoogtes.

Enkele stylingbeslissingen bepalen het grootste deel van de visuele rust bij een boekencollectie:

• een vaste verhouding voor het omslaggebied, zodat een compacte herdruk en een hoog kunstboek dezelfde ruimte innemen;
• een regellimiet voor titels, waardoor de auteursregel op elke kaart op één vaste hoogte blijft;
• royale tussenruimtes tussen groepen, zodat nieuwe uitgaven en aanbevelingen als afzonderlijke planken overkomen;
• een hover-status die een beoordeling of één regel samenvatting toont.

Nicepage regelt het meeste hiervan via de visuele instellingen, en het Raster-element bepaalt de kolommen en tussenruimtes.

Rasterkolommen krimpen op smalle schermen

Een breed beeldscherm biedt comfortabel plaats aan een lange rij omslagen. Diezelfde rij valt op een telefoon meestal terug naar één of twee kolommen, en wat er tussen die extremen gebeurt, is de moeite waard om in elke responsieve modus te controleren.

Houd de omslag, de titel en de auteur op elke breedte leesbaar. Genrelabels en editie-opmerkingen kunnen op kleine schermen kleiner worden weergegeven, aangezien een lezer die op een telefoon een plank scant eerst naar de illustratie kijkt. Een persoonlijke bibliotheek kan een hogere dichtheid aan dan het aanbod van een boekwinkel, waar elke omslag ook een product is.

Aangepaste regels voor een enkele plank

Soms heeft één groep iets nodig wat de standaardopties niet bieden, zoals een gouden omlijning voor prijswinnaars. Nicepage ondersteunt aangepaste CSS-besturing voor een enkel element, een afzonderlijke pagina of de hele site, waarmee dergelijke uitzonderingen eenvoudig kunnen worden opgevangen.

Een template beoordelen op basis van de drukst bezette plank vertelt meer dan de demo-startpagina laat zien. Vul de plank met uw langste titel, uw slechtste omslagscan en de grootste groep die u publiceert, en kijk vervolgens of de rijen nog steeds netjes uitgelijnd zijn.