Po pravej strane fór je rad modulov. „Moduly“ vizuálne, „Moduly“ doslova v kóde a „Moduly“ v tom, že obsah, ktorý obsahujú, je príbuzná skupina, samostatná / odlišná od obsahu v iných moduloch.
Prvý, na ktorý sa pozrieme, je modul Kategórie. Fórum Vanilla Forum ich doslova ukladá do priečinka s názvom „moduly“, čo je pekné. Tento konkrétny, ako asi tušíte, je „categories.php“.
Nájdeme miesto, kde sa titul nachádza, dáme mu triedu a začneme so stylingom. Iba sme pridali malý spodný okraj, ktorý je vhodný pre tento titul, ale nie každý
tam vonku.
Potom pokračujte v tvarovaní samotnej nádoby. Moduly majú vo Vanilla Forums zvyčajne názov triedy „Box“. Naša trieda HTML modulu je „modul“. Mohli by sme začať boj s nájdením každého modulu vo Vanille a pridaním vlastnej triedy. Niektoré dni cítim, že som na túto výzvu, a iné dni iba poviem: „Pracujte inteligentnejšie, nie ťažšie.“ Dnes budeme pracovať inteligentnejšie. V Sass urobíme selektor zástupných znakov, ktorý má štýly modulu, ale bez opätovného vytvorenia našej existujúcej .moduletriedy.
%fake-module ( background: white; padding: $padding; clear: both; box-shadow: 0 0 5px rgba(black, 0.2); margin: 0 0 $padding 0; position: relative; )Selektory zástupných znakov vôbec nevydajú žiadny CSS. Ale môžu byť @extend-ed. Takže teraz môžeme jednoducho vyrobiť, aby všetky škatule v štýle vanilky mali štýl nášho modulu.
.Box ( @extend %fake-module; )Dozvedáme sa, že whiteSmokeje to úžasná farba.
V označení, ktoré nám dáva Vanilla pre zoznam kategórií, nám dáva „aktívnu“ triedu, aby sme mohli trochu zmeniť štýl a dať jasne najavo, v ktorej kategórii sa užívateľ nachádza (pretože tento modul je na mnohých stránkach, domovských stránkach a kategórie).
Narazili sme na maličkosť, kde použitie - premenná $ nefungovalo správne, museli sme namiesto toho urobiť - # (premenná $). Len jedna z vecí o Sassovi alebo Ruby alebo o čomkoľvek inom.
Asi o 10:30 vysvetľujem teóriu fungovania trojuholníkov CSS. Zvažujeme použitie trojuholníka vľavo od aktívnej triedy, pretože to naznačujú naše drôtové modely.
Dokončíme to umiestnením počtu vlákien doprava, aby sme používateľom získali predstavu o tom, aká veľká je kategória.