Längs högra sidan av forumen finns en rad moduler. "Moduler" visuellt, "Moduler" bokstavligen i kod och "Moduler" genom att innehållet de innehåller är en relaterad grupp, separat / skiljer sig från innehållet i andra moduler.
Den första vi tittar på är modulen Kategorier. Vanilla Forums bokstavligen lägger dessa i en mapp som heter "moduler", vilket är trevligt. Denna speciella är, som du kanske gissar, “categories.php”.
Vi hittar platsen där titeln matas ut, ger den en klass och börjar styling. Vi lägger bara till en liten bottenmarginal som är lämpligt för denna titel, men inte varje enskild
där ute.
Gå sedan in i att forma själva behållaren. Moduler brukar ha klassnamnet "Box" i Vanilla Forums. Vår modul HTML-klass är ”modul”. Vi kan börja slåss för att hitta varje modul i Vanilla och lägga till vår egen klass. Vissa dagar känner jag mig för den utmaningen och vissa dagar säger jag bara "Arbeta smartare, inte hårdare." Idag ska vi arbeta smartare. Vi gör en platshållarväljare i Sass som har en modulstilar, men utan att återskapa vår befintliga .moduleklass.
%fake-module ( background: white; padding: $padding; clear: both; box-shadow: 0 0 5px rgba(black, 0.2); margin: 0 0 $padding 0; position: relative; )Platshållare väljer inte alls någon CSS. Men de kan göras @extend. Så nu kan vi bara göra att alla rutor i vaniljstil har vår modulstyling.
.Box ( @extend %fake-module; )Vi lär oss att det whiteSmokeär en fantastisk färg.
I den markering som Vanilla ger oss för kategorilistan ger den oss en "aktiv" klass så att vi kan ändra stilen lite och göra det uppenbart vilken kategori en användare är i (eftersom den här modulen finns på många sidor, hemsidor och kategorisidor ingår).
Vi stöter på en liten sak där användning - $ variabel inte fungerade rätt, vi var tvungna att göra - # ($ variabel) istället. Bara en av de sakerna om Sass eller Ruby eller vad som helst.
Klockan 10:30 förklarade jag teorin om hur CSS-trianglar fungerar. Vi överväger att använda en triangel till vänster om den aktiva klassen, som våra trådramar anger.
Vi avslutar med att placera antalet trådar till höger för att ge användarna en känsla av hur stor kategorin är.