Na desni strani forumov je vrsta modulov. „Moduli“ vizualno, „Moduli“ dobesedno v kodi in „Moduli“, ker je vsebina, ki jo vsebujejo, povezana skupina, ločena / drugačna od vsebine v drugih modulih.
Prvi, ki ga pogledamo, je modul Kategorije. Vanilla Forums jih dobesedno shrani v mapo, imenovano "moduli", kar je lepo. Ta je, kot lahko uganite, "categories.php".
Poiščemo mesto, kjer je naslov izpisan, mu damo razred in začnemo oblikovati. Dodamo le malo spodnjega roba, kot je primerno za ta naslov, vendar ne vsakega posebej
tam zunaj.
Nato preidite na oblikovanje same posode. Moduli imajo navadno ime razreda "Box" znotraj Vanilla Forumov. Naš razred HTML modula je “module”. Lahko bi začeli boj za iskanje vsakega posameznega modula v Vaniliji in dodajanje lastnega predavanja. Včasih se počutim kos temu izzivu, drugič pa rečem: "Delaj pametneje, ne težje." Danes bomo delali pametneje. V Sassu bomo naredili izbirnik za ograde, ki ima sloge modula, vendar brez ponovne izdelave našega obstoječega .modulerazreda.
%fake-module ( background: white; padding: $padding; clear: both; box-shadow: 0 0 5px rgba(black, 0.2); margin: 0 0 $padding 0; position: relative; )Izbirniki nadomestnih znakov sploh ne oddajajo nobenega CSS-ja. Lahko pa jih @extend-ed. Zdaj lahko naredimo, da imajo vse škatle v stilu vanilije naš modul.
.Box ( @extend %fake-module; )Naučimo se, da whiteSmokeje to čudovita barva.
V oznaki, ki nam jo Vanilla dodeli za seznam kategorij, nam da "aktivni" razred, tako da lahko nekoliko spremenimo slog in pojasnimo, v kateri kategoriji je uporabnik (ker je ta modul na veliko straneh, domačih straneh in strani s kategorijami).
Naletimo na malenkost, kjer uporaba - spremenljivka $ ni delovala pravilno, namesto tega smo morali narediti - # (spremenljivka $). Samo ena od stvari o Sass ali Ruby ali karkoli že.
Približno ob 10.30 razložim teorijo, kako delujejo trikotniki CSS. Razmišljamo o tem, da bi uporabili trikotnik na levi strani aktivnega razreda, kot odrivajo naši žični okvirji.
Končamo tako, da število niti postavimo na desno, da uporabniki dobijo občutek, kako velika je kategorija.