Zuivel CSS-sjablonen

CSS-sjablonen voor zuivelproducten voor consistente productkaarten

Een hoge glazen fles, een gedrongen yoghurtbakje en een platte, vacuümverpakte wigvormige foto hebben compleet verschillende verhoudingen, en hun namen variëren van vier tot veertig tekens. De regels die ervoor zorgen dat ze er allemaal als één merk uitzien, staan in het stylesheet, en dat is de laag die de CSS-sjablonen voor zuivelproducten je bieden.

Eén stylesheet die bereiken samenhoudt

Gedeelde regels doen het stille werk. De opvulling van kaarten, de kopgroottes en de afbeeldingsgebieden blijven identiek in de hele catalogus, zodat een bezoeker die kefir met drinkyoghurt vergelijkt, producten vergelijkt in plaats van lay-outs.

Een betrouwbare set standaardiseert meestal de onderdelen die nooit mogen afwijken:

• afbeeldingsgebieden met een vaste beeldverhouding, zodat een fles en een kaasverpakking netjes in één rij staan;

• één afstandsschaal die wordt gedeeld door kaarten en specificatierijen;

• lettergroottes voor de productnaam, het categorielabel en het verpakkingsgewicht;

• badgeklassen voor biologische, lactosevrije en seizoensgebonden producten.

Variabelen, modifiers en breakpoints in de praktijk

Merkkleuren, hoekradius en basisafstand horen in variabelen die eenmalig worden gedeclareerd, zodat een rebranding slechts op één plek hoeft te worden aangepast in plaats van op tweehonderd selectors. Categorie-modifiers behandelen vervolgens de daadwerkelijke verschillen: een kaaskaart kan een bredere afbeeldingskader gebruiken, terwijl een melkkaart een compacte labelrij behoudt.

Houd die uitzonderingen beperkt, want één promotieverpakking met een ongebruikelijk lange naam mag nooit de regels voor een hele reeks herschrijven. Aangepaste CSS-code in Nicepage kan worden toegepast op een enkel element, een pagina of de hele website, wat meestal het verschil maakt tussen een kleine aanpassing en een puinhoop.

Breakpoints verdienen de waarden die voor deze catalogus zijn gekozen. Nicepage hanteert visuele regels voor elke responsieve weergave, van grote schermen tot verticale telefoons, en de documentatie over responsieve lay-outs legt uit hoe die weergaven zich gedragen wanneer de breedte verandert.

Zweefeffecten en verpakkingsverhoudingen

Visuele weergaven zijn belangrijker in een voedingscatalogus dan je misschien denkt. Bij het hoveren met de muis kan een kaart worden opgetild en een tweede afbeelding van de verpakking worden weergegeven. Bij focus via het toetsenbord moet de omtrek zichtbaar blijven op een licht kleurenpalet. Een niet-beschikbaar artikel moet gedempt worden weergegeven en de prijs moet worden gemaskeerd, terwijl het wel op de pagina blijft staan. Een klant die de kefir van vorige week niet kan vinden, zal immers denken dat het hele merk ermee is gestopt.

Elk van deze weergaven is een visuele keuze, terwijl de velden binnen de kaart deel uitmaken van de structuur. Een set die de moeite waard is om te behouden, biedt voorspelbare selectiemogelijkheden voor het eerste deel en laat het tweede deel ongewijzigd.