Neste screencast vamos trabalhar na área “Demos” do CSS-Tricks. É uma área bastante popular do site, apesar do fato de eu não dedicar tanto tempo quanto deveria. O objetivo disso é um lugar no site com uma carga de demos para download e visualização, tudo em um só lugar - então é muito fácil rolar e navegar e encontrar partes que podem ser do interesse para você e seus projetos.
Em estrutura, é muito semelhante à área de vídeos. Cada demonstração tem um título e uma breve descrição e alguns botões, assim como cada vídeo. Portanto, modelaremos o layout da mesma forma que fizemos na área de vídeos. No entanto, ao contrário da área de vídeos, não podemos remover o HTML feito à mão e substituí-lo por um loop WordPress. Isso porque cada demo não reside dentro do WordPress, eles são independentes. Tudo bem, porém, não temos medo de uma pequena marcação. Vamos apenas reescrever um pouco para torná-lo o mais perfeito possível.
Agora temos todos os bits de que precisamos. Nós controlamos a marcação. Nós controlamos o CSS apenas para esta área específica. Apenas alguns ajustes nisso e a área de conteúdo principal para esta área está concluída.
No final, examinamos as páginas de demonstração individuais e vemos como a marca dos CSS-Tricks se aplica a essas páginas também.