Pod pravou stranou fór je řada modulů. „Moduly“ vizuálně, „Moduly“ doslova v kódu a „Moduly“ v tom, že obsah, který obsahují, je příbuzná skupina, oddělená / odlišná od obsahu v jiných modulech.
První, na který se podíváme, je modul Kategorie. Vanilla Forums je doslova ukládá do složky s názvem „moduly“, což je hezké. Tento konkrétní, jak asi uhodnete, je „categories.php“.
Najdeme místo, kde je titul vypsán, dáme mu třídu a začneme stylovat. Jen jsme přidali malý spodní okraj, jak je vhodné pro tento titul, ale ne každý
tam venku.
Poté přejděte do stylingu samotného kontejneru. Moduly mají ve Vanilla Forums obvykle název třídy „Box“. Naše třída HTML třídy je „modul“. Mohli jsme zahájit boj s hledáním každého modulu ve Vanille a přidáním vlastní třídy. Někdy se na tuto výzvu cítím a někdy jen řeknu: „Pracujte chytřeji, ne těžší.“ Dnes budeme pracovat chytřeji. V Sassu uděláme zástupný selektor, který má styly modulu, ale aniž bychom znovu vytvořili naši stávající .module
třídu.
%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 symbolů vůbec nevydávají žádný CSS. Ale mohou být @extend
-ed. Takže teď můžeme jen zajistit, aby všechny boxy ve stylu vanilky měly styl našeho modulu.
.Box ( @extend %fake-module; )
Dozvídáme se, že whiteSmoke
je to úžasná barva.
Ve značce, kterou nám Vanilla dává pro seznam kategorií, nám dává „aktivní“ třídu, abychom mohli trochu změnit styl a dát jasně najevo, ve které kategorii se uživatel nachází (protože tento modul je na mnoha stránkách, domovské stránky a stránky kategorií).
Narazili jsme na maličkost, kde použití - proměnná $ nefungovalo správně, místo toho jsme museli udělat - # (proměnná $). Jen jedna z těch věcí o Sassovi nebo Ruby nebo cokoli jiného.
Asi v 10:30 vysvětluji teorii fungování trojúhelníků CSS. Uvažujeme o použití trojúhelníku nalevo od aktivní třídy, jak to naznačují naše drátové modely.
Dokončíme tím, že umístíme počet podprocesů doprava, abychom uživatelům poskytli představu o tom, jak velká je kategorie.