W tym screencastie będziemy pracować nad obszarem „Demos” w CSS-Tricks. To dość popularny obszar serwisu, mimo że nie poświęcam mu tyle czasu, ile powinienem. Chodzi o to, że jest to miejsce na stronie z mnóstwem wersji demonstracyjnych do pobrania i przeglądania w jednym miejscu - więc bardzo łatwo jest przewijać i przeglądać oraz znajdować fragmenty, które mogą być interesujące dla Ciebie i Twoich projektów.
Struktura jest bardzo podobna do obszaru wideo. Każde demo ma tytuł i krótki opis oraz kilka przycisków, tak jak każdy film. Będziemy więc modelować układ, tak jak zrobiliśmy to w obszarze filmów. Jednak w przeciwieństwie do obszaru wideo nie jesteśmy w stanie usunąć ręcznie stworzonego kodu HTML i zastąpić go pętlą WordPress. Dzieje się tak, ponieważ każde demo nie jest dostępne w WordPressie, są one niezależne. W porządku, nie boimy się małych znaczników. Po prostu napiszemy go trochę ponownie, aby był tak doskonały, jak to tylko możliwe.
Mamy teraz wszystkie potrzebne bity. Kontrolujemy znaczniki. Kontrolujemy CSS tylko dla tego konkretnego obszaru. Tylko kilka majsterkowania z tym i głównym obszarem zawartości dla tego obszaru jest zrobione.
Na koniec przyglądamy się poszczególnym stronom demonstracyjnym i widzimy, jak branding CSS-Tricks odnosi się również do tych stron.