Talent CSS-sjablonen

Talent CSS-templates voor overzichtsrasters en profielkaarten

Spatiëring, beeldverhoudingen en visuele statussen bepalen of een overzicht leest als een samenhangende reeks kaarten of als een onsamenhangende verzameling profielen. Talent CSS-templates worden geleverd met die regels al geschreven, waarbij de waarden open blijven voor aanpassing. Een raster met drie kolommen aan artiestenkaarten oogt overtuigend in een demo, totdat één kaart een lange lijst met credits bevat en de volgende kaart slechts twee regels heeft.

Het stylen van kaarten met ongelijke inhoud

Geen twee talentprofielen zijn even uitgebreid, en de styling moet ervoor zorgen dat het overzicht toch als één geheel functioneert. Vier regels nemen het meeste werk voor hun rekening:

• Een vaste beeldverhouding in het portretgedeelte. Verticale studioportretten en bredere stills vullen dan hetzelfde kader, waardoor de uitsnede op de hele pagina voorspelbaar blijft.
• Een typografische schaal die de kaart hiërarchie geeft. De naam van de artiest staat bovenaan, de rol of het specialisme een trede daaronder, en de creditsregel nog ingetogener.
• Spatiëring die overeind blijft bij hoge dichtheid. Kaartbreedtes, rastertussenruimtes en interne padding houden een rij bijeen wanneer één profiel lang is, en een regellimiet voor de biografie voorkomt dat een tekstrijke kaart alles ernaast uitrekt.
• Hover- en focusstatussen. Een uitgelichte kaart moet zich meestal kunnen onderscheiden van de rij waarin deze staat.

Breekpunten en lokale uitzonderingen

Het aantal kolommen is het eenvoudigste deel van responsief ontwerpen: vier naast elkaar op een breed scherm, twee op een tablet, één op een telefoon. Wat de smalle lay-out bovenaan bewaart, is belangrijker: het portret, de naam en de contactactie horen boven een lange lijst met credits te staan, met een kortere beeldverhouding en compactere tussenruimtes op mobiele apparaten.

Nicepage dekt dit af met Responsive Modes, van grote schermen tot verticale telefoons, en met Custom CSS Code die kan worden toegepast op een afzonderlijk element, een enkele pagina of de volledige website. Export Minimal CSS Per Page houdt het gepubliceerde stylesheet beperkt tot de regels die een pagina daadwerkelijk gebruikt.

CSS bepaalt hoe het overzicht oogt wanneer iemand er doorheen scrolt. Test een template in zijn meest compacte en volle staat voordat u een keuze maakt, met de langste lijst credits die u publiceert en de breedste beelduitsnede in uw bibliotheek. Als het raster daar nog steeds helder en overzichtelijk blijft, blijft het ook overeind wanneer het roster groeit.