Stedelijk CSS-sjablonen

Hoogwaardige urbane CSS-templates

Het stylesheet van een urban template bepaalt hoe een straatfoto over de volle breedte aansluit op een compact blok met adressen, data en prijzen. Urbane CSS-templates worden geleverd met die regels al geschreven, van rastergedrag tot typografische schaal en componentstijlen. Een galerij met moderne architectuur leunt misschien op dunne scheidingslijnen en ingetogen grijstinten, terwijl een pagina voor stadstours kiest voor opvallende kleurvlakken en grote routenummers. Beide zijn afhankelijk van dezelfde soorten regels.

Visuele patronen achter een stedelijk karakter

Een aantal visuele patronen komt in de meeste urbane stylesheets terug, en elk patroon is een set CSS-regels die u kunt bewerken:

• Modulaire rasters gebouwd met CSS Grid, waarin tour- of projectkaarten dezelfde breedte en tussenruimte delen.
• Vaste beeldverhoudingen voor foto's, waardoor een verticale straatfoto en een breed skyline-panorama dezelfde galerij kunnen delen zonder ongelijke tussenruimtes.
• Compacte metadatarijen gerangschikt met Flexbox voor wijk, duur of prijs, opgemaakt in kleine hoofdletters met een ruime letterspatiëring.
• Overlays die een dicht blok met feiten scheiden van een drukke foto, zoals een donkere halfdoorschijnende laag achter witte tekst.

Omdat deze patronen zich herhalen, horen ze thuis in gedeelde klassen. Eén card-klasse kan tours, projecten en evenementen bedienen, terwijl een modifier-klasse alleen aanpast wat afwijkt, zoals een gedempte weergave voor uitverkochte data. Hover- en focus-states zijn opgenomen in dezelfde regels, zodat een kaart overal op dezelfde manier reageert.

Breekpunten ingesteld per component

Goede breekpunten ontstaan door te kijken hoe individuele componenten verkleinen. De metadatarij op een tourkaart bezwijkt meestal als eerste, lang voordat de foto in de problemen komt, en een media query kan deze onder de titel laten doorlopen. Het paneel met het ontmoetingspunt volgt daarna. Op telefoons verplaatst dit zich doorgaans onder de foto, en een lagere foto houdt het adres direct in beeld op het eerste scherm. Smalle koppen moeten ook in de gaten worden gehouden, omdat ze kunnen afbreken tot één woord per regel. De responsieve modi van Nicepage tonen elke lay-out van grote schermen tot telefoons, waarbij tussenruimtes en lettergroottes voor elke modus instelbaar zijn.

Aangepaste regels tot een minimum beperkt

Sommige stedelijke details vereisen een aangepaste regel, zoals een grijswaardenfilter dat verdwijnt bij een hover of een gestreepte scheidingslijn die doet denken aan wegmarkeringen. Nicepage ondersteunt aangepaste CSS voor een enkel element, één pagina of de hele site. De content zelf blijft onaangeroerd terwijl het uiterlijk verandert. Om urbane CSS-templates te vergelijken, telt u hoeveel paginatypes de gedeelde klassen kunnen bedienen. Als tours, galerijen en contactgegevens dezelfde paar componenten hergebruiken, blijven overschrijvingen zeldzaam en is het stylesheet eenvoudig te onderhouden.