Talent CSS-sjablonen

CSS-sjablonen voor artiestenoverzichten en profielkaarten

Afstand, beeldverhoudingen en visuele weergave bepalen of een artiestenoverzicht als één geheel of als een stapel onsamenhangende profielen wordt gepresenteerd. CSS-sjablonen voor artiesten worden geleverd met deze regels al vastgelegd, waardoor de waarden open blijven. Een raster van drie kolommen met artiestenkaarten ziet er overtuigend uit in een demo, totdat één kaart een lange lijst met credits bevat en de volgende kaart slechts twee regels.

Stijlkaarten met ongelijke inhoud

Geen twee artiestenprofielen wegen even zwaar, en de styling moet er sowieso voor zorgen dat het overzicht als één geheel wordt gepresenteerd. Vier regels doen het grootste deel van dat werk:

• Een vaste beeldverhouding in het gedeelte voor de portretfoto. Verticale studiofoto's en bredere foto's vullen dan dezelfde ruimte, en de uitsnede blijft consistent over de hele pagina.

• Een typografische schaal die de kaart rangschikt. De naam van de artiest staat bovenaan, de rol of specialisatie een stap lager, en de credits nog rustiger.

• Afstand die bestand is tegen een hoge dichtheid. Kaartbreedtes, rasterafstanden en interne opvulling houden een rij bij elkaar wanneer een profiel te lang is, en een regelbeperking voor de biografie voorkomt dat een uitgebreide kaart alles ernaast uitrekt.

• Hover- en focusstatussen. Een uitgelichte kaart moet er meestal anders uitzien dan de rij waarin deze zich bevindt.

Breakpoints en lokale uitzonderingen

Het aantal kolommen is de makkelijkste helft van responsief ontwerp: vier naast elkaar op een breed scherm, twee op een tablet, één op een telefoon. Wat de smalle lay-out bovenaan weergeeft, is belangrijker. Daarom horen de portretfoto, de naam en de contactactie boven een lange lijst met credits, met een kortere beeldverhouding en kleinere tussenruimtes op mobiele apparaten.

Nicepage dekt dit af met responsieve modi, van grote schermen tot verticale telefoons, en met aangepaste CSS-code die van toepassing is op een enkel element, een enkele pagina of de hele site. Exporteer minimale CSS per pagina, zodat het gepubliceerde stylesheet beperkt blijft tot de regels die een pagina daadwerkelijk gebruikt.

CSS bepaalt hoe de ledenlijst eruitziet wanneer iemand erdoorheen scrollt. Test een sjabloon eerst op de meest compacte versie, met de langste aftiteling die je publiceert en de breedste uitsnede uit je bibliotheek, voordat je het definitief vastlegt. Als het raster dan nog steeds overzichtelijk is, zal het ook goed blijven naarmate de lijst met namen groeit.