Supplement CSS-sjablonen

CSS-templates voor supplementen die u kunt aanpassen zonder opnieuw te bouwen

Een CSS-template voor supplementen is een kant-en-klaar paginaontwerp waarvan het stylesheet open voor u klaarligt: de opmaak bestaat al en de kleuren, lettertypen, tussenruimtes, knoppen en grid-gedrag bevinden zich in CSS-regels die u kunt bewerken. U schrijft geen stylesheet vanaf nul. U past dat van iemand anders aan, wat een heel ander werk is met andere valkuilen.

Wat u daadwerkelijk bewerkt

Het meeste werk komt neer op een kleine reeks waarden. Merkkleuren vervangen het palet van het template, dat meestal uit een handvol hex-waarden bestaat. Lettertypen wijzigt u in een of twee font-family-declaraties, samen met de bijbehorende groottes en regelhoogtes. Tussenruimtes worden vaak onderschat: padding en margins van secties zorgen ervoor dat een template er niet meer uitziet als de demo, en daar stapelen aanpassingen zich snel op.

Daarna volgen de herbruikbare klassen. Een template levert knopstijlen, kaartstijlen, badge-stijlen en kopniveaus. Pas elke klasse één keer aan, en elke instantie volgt vanzelf. Dezelfde regel vijftien keer bewerken of inline overrides op afzonderlijke elementen plaatsen, wijst er meestal op dat iemand de klasse heeft overgeslagen en rechtstreeks naar het element is gegaan.

De lay-out zit in Grid- en Flexbox-regels: kolomaantallen, tussenruimtes (gaps) en uitlijning. Dat geldt ook voor het responsieve gedrag binnen media queries die de indeling aanpassen op tablet- en telefoonbreedtes. Wijzigt u een kolomaantal op desktop, controleer dan direct de breekpunten. Dat is waar herstijlen het vaakst misloopt.

Verstandig om te doen voordat u definitief voor een CSS-template voor supplementen kiest: bekijk hoe het stylesheet is opgebouwd, als het voorbeeld dat toelaat. Benoemde klassen en variabelen betekenen een middag werk voor de rebranding. Duizenden gegenereerde selectors betekenen een week.

Waar aangepaste regels thuishoren

Nicepage behoudt ingebouwde bedieningselementen voor routinematige styling en gebruikt Custom CSS Code voor al het overige. Regels kunnen gelden voor een enkel element, een enkele pagina of de gehele site; de Custom CSS-handleiding legt de drie niveaus uit en hoe deze cascaderen. Aangepaste regels zijn bedoeld voor een specifieke hover-status, een vorm die de standaardopties niet kunnen maken, of een enkele uitzondering binnen een sectie. De optie voor het exporteren van minimale CSS per pagina beperkt de uitvoer van elke pagina tot de stijlen die daadwerkelijk worden gebruikt. Dit is zeer nuttig wanneer één zwaar template de basis vormt voor veel eenvoudige pagina's.

Het leeuwendeel van wat als design oogt op een supplementenpagina bestaat uit vier herhaalde waarden: een font-stack, een kleurenpalet, een schaal voor tussenruimtes en een afrondingsstraal (border-radius). Pas deze consistent aan, en het template wordt onherkenbaar veranderd. Past u acht van de tien plekken aan, dan blijft het template juist herkenbaar op die twee plekken die u bent vergeten.