Duž desne strane foruma nalazi se niz modula. „Moduli“ vizualno, „Moduli“ doslovno u kodu i „Moduli“ po tome što je sadržaj koji sadrže povezana grupa, odvojena / različita od sadržaja ostalih modula.
Prvi koji pogledamo je modul Kategorije. Vanilla Forum ih doslovno stavlja u mapu koja se naziva „moduli“, što je lijepo. Ovaj je, kao što pretpostavljate, "categories.php".
Pronalazimo mjesto na kojem se naslov objavljuje, dajemo mu klasu i započinjemo s oblikovanjem. Samo dodajemo malu donju marginu kako je prikladno za ovaj naslov, ali ne svaku
Tamo vani.
Zatim prijeđite na oblikovanje same posude. Moduli obično imaju naziv klase "Kutija" unutar Vanilla foruma. Naš modul HTML klase je „module“. Mogli bismo započeti borbu pronalaženja svakog pojedinog modula u vanili i dodavanja vlastitog razreda. Ponekad se osjećam prihvatljivim tom izazovu, a neki dan kažem „Radite pametnije, a ne više.“ Danas ćemo raditi pametnije. U Sassu ćemo napraviti selektor rezervi, koji ima stilove modula, ali bez ponovnog stvaranja naše postojeće .moduleklase.
%fake-module ( background: white; padding: $padding; clear: both; box-shadow: 0 0 5px rgba(black, 0.2); margin: 0 0 $padding 0; position: relative; )Birači rezerviranih mjesta uopće ne izbacuju CSS. Ali oni mogu biti @extend-ed. Tako sada možemo jednostavno napraviti da sve kutije u stilu vanilije imaju naš modul.
.Box ( @extend %fake-module; )Saznajemo da whiteSmokeje to sjajna boja.
U oznaci koju nam Vanilla daje za popis kategorija, daje nam "aktivnu" klasu tako da možemo malo promijeniti stil i učiniti očitim u kojoj se kategoriji korisnik nalazi (budući da je ovaj modul na puno stranica, početnih stranica i stranice s kategorijama).
Nailazimo na sitnicu gdje korištenje - varijabla $ nije dobro funkcioniralo, umjesto toga morali smo učiniti - # ($ varijabla). Samo jedna od stvari o Sass ili Ruby ili bilo čemu drugom.
Otprilike u 10:30 objašnjavam teoriju kako funkcioniraju CSS trokuti. Razmišljamo o korištenju trokuta s lijeve strane aktivne klase, kako to odlikuju naši žičani okviri.
Završavamo postavljanjem broja niti s desne strane kako bismo korisnicima dali dojam koliko je velika kategorija.