Langs højre side af foraene er der en række moduler. "Moduler" visuelt, "Moduler" bogstaveligt i kode og "Moduler", idet det indhold, de indeholder, er en relateret gruppe, adskilt / forskellig fra indholdet i andre moduler.
Den første vi ser på er kategorimodulet. Vanilla Forums sætter disse bogstaveligt talt i en mappe kaldet “moduler”, hvilket er rart. Denne særlige er, som du måske gætter, “categories.php”.
Vi finder det sted, hvor titlen udsendes, giver den en klasse og begynder at stylere. Vi tilføjer bare en lille bundmargen, som det er passende for denne titel, men ikke hver eneste
der ude.
Gå derefter ind i styling af selve beholderen. Moduler har tendens til at have klassenavnet "Box" inde i Vanilla Forums. Vores modul HTML-klasse er "modul". Vi kunne begynde kampen for at finde hvert enkelt modul i vanilje og tilføje vores egen klasse. Nogle dage føler jeg mig op til den udfordring, og nogle dage siger jeg bare "Arbejd smartere, ikke hårdere." I dag arbejder vi smartere. Vi laver en pladsholdervælger i Sass, der har typografierne for et modul, men uden at genskabe vores 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; )Pladsholderudvælgere udsender slet ikke nogen CSS alene. Men de kan @extend-ed. Så nu kan vi bare få alle kasser i Vanilla-stil til at have vores modul styling.
.Box ( @extend %fake-module; )Vi lærer, at det whiteSmokeer en fantastisk farve.
I den markering, som Vanilla giver os til listen over kategorier, giver det os en "aktiv" klasse, så vi kan ændre stilen en smule og gøre det tydeligt, hvilken kategori en bruger er i (da dette modul er på mange sider, hjemmesider og kategorisider inkluderet).
Vi løber ind i en lille ting, hvor brug af - $ variabel ikke fungerede rigtigt, vi var nødt til at gøre - # ($ variabel) i stedet. Bare en af disse ting om Sass eller Ruby eller hvad som helst.
Ca. 10:30 forklarede jeg teorien om, hvordan CSS-trekanter fungerer. Vi overvejer at bruge en trekant til venstre for den aktive klasse, som vores trådrammer angiver.
Vi afslutter ved at placere antallet af tråde til højre for at give brugerne en fornemmelse af, hvor stor kategorien er.