В этом скринкасте мы будем работать над разделом «Демо» CSS-Tricks. Это довольно популярная область сайта, несмотря на то, что я не уделяю ей столько времени, сколько следовало бы. Смысл этого в том, что на сайте есть множество загружаемых и просматриваемых демоверсий в одном месте, поэтому очень легко прокручивать, просматривать и находить фрагменты, которые могут быть интересны вам и вашим проектам.
По структуре он очень похож на область видео. У каждой демонстрации есть название, краткое описание и несколько кнопок, как и у каждого видео. Итак, мы смоделируем макет так же, как и область видео. Однако, в отличие от области видео, мы не можем удалить вручную созданный HTML и заменить его циклом WordPress. Это потому, что каждая демонстрация не живет внутри WordPress, они независимы. Но это нормально, мы не боимся небольшой разметки. Мы просто немного переписываем его, чтобы сделать его настолько идеальным, насколько это возможно.
Теперь у нас есть все необходимое. Мы контролируем разметку. Мы контролируем CSS только для этой конкретной области. Немного поработав с этим, и основная область содержимого для этой области готова.
В конце мы смотрим на отдельные демонстрационные страницы и видим, как брендинг CSS-Tricks применим и к этим страницам.