A fórumok jobb oldalán egy sor modul található. A „modulok” vizuálisan, a „modulok” szó szerint kódban, a „modulok” pedig abban az értelemben, hogy az általuk tartalmazott tartalom egy kapcsolódó csoport, amely különálló / különbözik a többi modul tartalmától.
Az első, amelyet megnézünk, a Kategóriák modul. A Vanilla Fórumok ezeket szó szerint egy „modulok” mappába helyezi, ami nagyon jó. Ez a bizonyos, mint sejtheti, a „categories.php”.
Megtaláljuk azt a helyet, ahol a cím kimenetre kerül, osztályt adunk neki, és elkezdjük a stílust. Csak egy kis alsó margót adunk hozzá, ami megfelel ennek a címnek, de nem mindegyiket
kint.
Ezután térjen át a konténer stílusára. A modulok osztályneve általában „Box” vanília fórumokon belül. A modul HTML osztályunk „modul”. Megkezdhettük a harcot, hogy megtaláljuk a Vanilla minden egyes modulját, és felvegyük a saját osztályunkat. Néhány nap úgy érzem, hogy megfelelek ennek a kihívásnak, és néhány nap csak azt mondom, hogy „Dolgozz okosabban, ne keményebben”. Ma okosabban fogunk dolgozni. A Sass-ban elkészítünk egy helyőrző-választót, amely rendelkezik egy modul stílusával, de anélkül, hogy újból létrehoznánk a meglévő .moduleosztályunkat.
%fake-module ( background: white; padding: $padding; clear: both; box-shadow: 0 0 5px rgba(black, 0.2); margin: 0 0 $padding 0; position: relative; )A helyosztók kiválasztói egyáltalán nem adnak ki egyetlen CSS-t sem. De lehet @extend-ed. Tehát most már csak azt tehetjük meg, hogy az összes Vanília stílusú dobozban legyen a modul stílusa.
.Box ( @extend %fake-module; )Megtudjuk, hogy whiteSmokeez egy fantasztikus szín.
A Vanilla által a kategóriák listájához adott jelöléssel egy „aktív” osztályt kap, így egy kicsit megváltoztathatjuk a stílust, és nyilvánvalóvá tehetjük, hogy a felhasználó melyik kategóriába tartozik (mivel ez a modul sok oldalon, kezdőlapon található) és kategóriaoldalakat is).
Belefutunk egy apróságba, ahol a - $ változó használata nem működött jól, helyette meg kellett tennünk - # ($ változó). Csak egy ilyen dolog Sassról, Rubyról vagy bármi másról.
Körülbelül 10: 30-kor elmagyarázom a CSS háromszögek működésének elméletét. Fontolóra vesszük egy háromszög használatát az aktív osztály bal oldalán, mivel drótvázaink megegyeznek.
Befejezzük, hogy a szálak számát jobbra helyezzük, hogy a felhasználók megértsék, mekkora a kategória.