По дясната страна на форумите има поредица модули. „Модули“ визуално, „Модули“ буквално в код и „Модули“, тъй като съдържанието, което съдържат, е свързана група, отделна / различна от съдържанието в други модули.
Първият, който разглеждаме, е модулът Категории. Vanilla Forums буквално ги поставя в папка, наречена „модули“, което е хубаво. Този конкретен, както се досещате, е „categories.php“.
Намираме мястото, където се извежда заглавието, даваме му клас и започваме да оформяме. Просто добавяме малко долно поле, както е подходящо за това заглавие, но не всеки
там
След това преминете към стилизиране на самия контейнер. Модулите са склонни да имат име на клас „Кутия“ във Ваниловите форуми. Нашият модул HTML клас е „модул“. Можем да започнем борбата с намирането на всеки един модул във ванилия и добавяне на собствен клас. Няколко дни се чувствам отговорен на това предизвикателство, а други дни просто казвам „Работете по-умно, не по-усилено“. Днес ще работим по-умно. Ще направим селектор на заместител в Sass, който има стиловете на модул, но без да създаваме отново нашия съществуващ .moduleклас.
%fake-module ( background: white; padding: $padding; clear: both; box-shadow: 0 0 5px rgba(black, 0.2); margin: 0 0 $padding 0; position: relative; )Селекторите на заместители изобщо не извеждат никакъв CSS. Но те могат да бъдат @extend-ed. Така че сега можем просто да направим всички кутии във ванилов стил да имат нашия модулен стил.
.Box ( @extend %fake-module; )Научаваме, че това whiteSmokeе страхотен цвят.
В маркирането, което Vanilla ни дава за списъка с категории, той ни дава „активен“ клас, за да можем да променим стила малко и да стане ясно коя категория е потребителят (тъй като този модул е на много страници, начални страници и страници с категории).
Сблъскваме се с малко нещо, при което използването - $ променлива не работи правилно, вместо това трябваше да направим - # ($ променлива) Само едно от онези неща за Сас или Руби или каквото и да било.
Около 10:30 обяснявам теорията за това как работят CSS триъгълниците. Обмисляме да използваме триъгълник вляво от активния клас, тъй като нашите жични рамки отразяват.
Завършваме, като позиционираме броя на нишките вдясно, за да дадем на потребителите представа колко голяма е категорията.