Langs høyre side av forumene er det en serie moduler. "Moduler" visuelt, "Moduler" bokstavelig talt i kode og "Moduler" ved at innholdet de inneholder er en beslektet gruppe, skilt / forskjellig fra innholdet i andre moduler.
Den første vi ser på er modulen Kategorier. Vanilla Forums legger bokstavelig talt disse i en mappe som heter “moduler”, noe som er hyggelig. Denne spesielle er, som du kanskje gjetter, "categories.php".
Vi finner stedet der tittelen sendes ut, gir den en klasse og begynner å stylere. Vi legger bare til en liten bunnmargin som det passer for denne tittelen, men ikke hver eneste
der ute.
Gå deretter inn i styling av selve beholderen. Moduler har en tendens til å ha klassenavnet "Box" i Vanilla Forums. Vår modul HTML-klasse er “modul”. Vi kunne begynne kampen for å finne hver eneste modul i Vanilla og legge til vår egen klasse. Noen dager føler jeg meg med den utfordringen, og noen dager sier jeg bare "Jobb smartere, ikke vanskeligere." I dag skal vi jobbe smartere. Vi lager en plassholdervelger i Sass som har stilene til en modul, men uten å gjenskape vår eksisterende .moduleklasse.
%fake-module ( background: white; padding: $padding; clear: both; box-shadow: 0 0 5px rgba(black, 0.2); margin: 0 0 $padding 0; position: relative; )Plassholdervelgere sender ikke ut noe CSS i det hele tatt. Men de kan bli @extendreddet. Så nå kan vi bare gjøre at alle bokser i vaniljestil har modulstyling.
.Box ( @extend %fake-module; )Vi lærer at det whiteSmokeer en fantastisk farge.
I markeringen som Vanilla gir oss for listen over kategorier, gir den oss en "aktiv" klasse, slik at vi kan endre stilen litt og gjøre det tydelig hvilken kategori en bruker er i (siden denne modulen er på mange sider, hjemmesider og kategorisider inkludert).
Vi støter på en liten ting der bruk av - $ variabel ikke fungerte riktig, vi måtte gjøre - # ($ variabel) i stedet. Bare en av de tingene om Sass eller Ruby eller hva som helst.
Rundt klokka 10:30 forklarte jeg teorien om hvordan CSS-trekanter fungerer. Vi vurderer å bruke en trekant til venstre for den aktive klassen, slik trådrammene våre angir.
Vi avslutter med å plassere antall tråder til høyre for å gi brukerne en følelse av hvor stor kategorien er.