Supplement CSS-sjablonen

Aanvullende CSS-sjablonen die u kunt aanpassen zonder alles opnieuw op te bouwen

Een aanvullend CSS-sjabloon is een kant-en-klaar paginaontwerp dat wordt geleverd met een open stylesheet: de markup bestaat al en de kleuren, lettertypen, afstand, knoppen en het gedrag van het raster zijn vastgelegd in CSS-regels die u kunt bewerken. U schrijft geen stylesheet helemaal vanaf nul. U wijzigt de stylesheet van iemand anders, wat een andere taak is met andere valkuilen.

Wat u daadwerkelijk bewerkt

Het meeste werk komt neer op een kleine set waarden. Merkkleuren vervangen het kleurenpalet van het sjabloon, dat meestal bestaat uit een handvol hexadecimale waarden. Lettertypen veranderen in één of twee font-family-declaraties, plus de groottes en regelhoogtes eromheen. Afstand is het onderdeel dat mensen vaak onderschatten: sectiepadding en marges zorgen ervoor dat een sjabloon er niet hetzelfde uitziet als de demo, en dat is waar de bewerkingen zich opstapelen.

Dan komen de herbruikbare klassen. Een sjabloon biedt u stijlen voor knoppen, kaarten, badges en kopniveaus. Pas elke klasse één keer aan en elke instantie volgt. Het vijftien keer bewerken van dezelfde regel, of het toevoegen van inline overrides aan individuele elementen, is meestal een teken dat iemand de klasse heeft overgeslagen en direct naar het element is gegaan.

De lay-out wordt bepaald door Grid- en Flexbox-regels: aantal kolommen, tussenruimte, uitlijning. Hetzelfde geldt voor het responsieve gedrag, binnen mediaqueries die elementen opnieuw tekenen bij verschillende schermbreedtes (tablet en telefoon). Wijzig het aantal kolommen op een desktop en controleer direct de breakpoints. Dat is waar het herstylingproces het vaakst misgaat.

Het is de moeite waard om te doen voordat je een CSS-sjabloon voor een supplement kiest: bekijk hoe het stylesheet is geschreven, als de preview dat toelaat. Benoemde klassen en variabelen betekenen een middag aan herontwerpen. Duizenden gegenereerde selectors betekenen een week.

Waar aangepaste regels thuishoren

Nicepage behoudt de ingebouwde besturingselementen voor routinematige styling en laat aangepaste CSS-code over voor al het andere. Regels kunnen van toepassing zijn op een enkel element, een enkele pagina of de hele site; De Aangepaste CSS-handleiding legt de drie niveaus uit en hoe ze op elkaar voortbouwen. Aangepaste regels zijn bedoeld voor een specifieke hover-status, een vorm die de standaardbesturingselementen niet produceren, of een enkele uitzondering binnen een sectie. De optie 'Minimale CSS per pagina exporteren' beperkt de uitvoer van elke pagina tot de stijlen die die pagina gebruikt. Dit is handig wanneer één zwaar sjabloon veel eenvoudige pagina's voedt.

Het grootste deel van wat op een supplementpagina als ontwerp wordt gezien, bestaat uit vier herhaalde waarden: een lettertypestapel, een kleurenpalet, een spatiëringsschaal en een randradius. Verander deze consequent en het sjabloon wordt onherkenbaar. Verander acht van de tien plekken en het blijft herkenbaar op precies de twee plekken die je hebt gemist.