Boekenplank CSS-sjablonen

CSS-sjablonen voor boekenplanken die netjes uitgelijnd blijven

Een boekenplank met omslagen ziet er alleen netjes uit als de styling ervoor zorgt dat alles er netjes uitziet. Scans van hardcovers, foto's van paperbacks en oude edities hebben nooit dezelfde afmetingen, en een sjabloon voor een boekenplank moet ze in één kader houden, terwijl de titels en auteursnamen eronder leesbaar blijven.

Omslagafbeeldingen hebben vaak ongelijke verhoudingen

Afbeeldingen van boeken hebben zelden dezelfde verhoudingen. Een herdruk kan gedrongen zijn, een kunstboek bijna vierkant, en een gescande klassieker bovenaan afgesneden. Gelijke kaartformaten zorgen niet voor gelijke omslagen, en dat verschil zorgt ervoor dat een boekenplank er rommelig uitziet. Een vaste "aspect-ratio" voor het omslaggebied, met een "object-fit"-regel die de afbeelding het hele gebied laat vullen, zorgt ervoor dat elke kaart dezelfde hoogte heeft en dat de afbeelding aan de randen wordt bijgesneden in plaats van uitgerekt.

Lange titels zorgen voor de andere vorm van scheefstand. Twee regels tekst onder de ene omslag en vier onder de volgende zorgen ervoor dat auteursnamen over de hele rij op verschillende hoogtes komen te staan.

Een paar stijlkeuzes bepalen grotendeels de visuele impact van een boekencollectie:

• een vaste verhouding voor het omslaggebied, zodat een gedrongen herdruk en een hoog kunstboek evenveel ruimte innemen;

• een regellimiet voor titels, waardoor de auteursregel op elke kaart dezelfde hoogte heeft;

• ruime tussenruimte tussen groepen, zodat nieuwe uitgaven en aanbevelingen van de redactie als aparte planken worden weergegeven;

• een hover-effect dat een beoordeling of een korte samenvatting toont.

Nicepage regelt het meeste hiervan met de visuele instellingen, en het rasterelement bepaalt de kolommen en tussenruimte.

Rasterkolommen krimpen op smalle schermen

Een breed scherm biedt comfortabel plaats aan een lange rij omslagen. Dezelfde rij op een telefoon valt meestal in één of twee kolommen, en het is de moeite waard om te controleren wat er tussen deze uitersten gebeurt in elke responsieve modus.

Zorg ervoor dat de omslag, de titel en de auteur leesbaar blijven op elke breedte. Genre-aanduidingen en editie-informatie kunnen kleiner worden op kleine schermen, omdat een lezer die een plank op een telefoon bekijkt, eerst naar de illustratie kijkt. Een persoonlijke bibliotheek kan een hogere dichtheid aan boeken hebben dan een boekhandel, waar elke omslag ook een product is.

Aangepaste regels voor één plank

Soms heeft een bepaalde groep iets nodig wat de standaardinstellingen niet bieden, zoals een gouden rand voor prijswinnende boeken. Nicepage ondersteunt aangepaste CSS-instellingen voor een enkel element, een enkele pagina of de hele website, waarmee dergelijke uitzonderingen worden afgedekt.

Een sjabloon beoordelen op basis van de drukste plank vertelt je meer dan het startscherm van de demo. Vul het met je langste titel, je slechtste omslagscan en de grootste groep die je publiceert, en kijk of de rijen nog steeds netjes uitgelijnd zijn.