In deze screencast gaan we werken aan het "Demos" -gedeelte van CSS-Tricks. Het is een vrij populair gedeelte van de site, ondanks het feit dat ik er niet zoveel tijd in stop als zou moeten. Het punt ervan is een plek op de site met een hoop downloadbare en zichtbare demo's allemaal op één plek - dus het is heel gemakkelijk om te scrollen en te bladeren en stukjes te vinden die interessant kunnen zijn voor jou en je projecten.
Qua structuur lijkt het erg op het videogedeelte. Elke demo heeft een titel en een korte beschrijving en een paar knoppen, net als elke video. Dus we zullen de lay-out modelleren, net zoals we het gebied met video's hebben gedaan. In tegenstelling tot het gedeelte met video's kunnen we de handgemaakte HTML echter niet verwijderen en vervangen door een WordPress-lus. Dat komt omdat elke demo niet binnen WordPress leeft, ze zijn onafhankelijk. Dat is oké, we zijn niet bang voor een kleine opmaak. We zullen het gewoon een beetje herschrijven om het zo perfect mogelijk te maken.
We hebben nu alle onderdelen die we nodig hebben. Wij beheren de opmaak. We beheren de CSS alleen voor dit specifieke gebied. Slechts een paar knutselen daarmee en het belangrijkste inhoudsgebied voor dit gebied is gedaan.
Aan het einde bekijken we individuele demopagina's en zien we hoe de branding van CSS-Tricks ook op die pagina's van toepassing is.