Lungo il lato destro dei forum sono presenti una serie di moduli. "Moduli" visivamente, "Moduli" letteralmente in codice e "Moduli" in quanto il contenuto che contengono è un gruppo correlato, separato / diverso dal contenuto in altri moduli.
Il primo che esaminiamo è il modulo Categorie. Vanilla Forums li mette letteralmente in una cartella chiamata "moduli", il che è carino. Questo in particolare, come puoi immaginare, è "categories.php".
Troviamo il punto in cui viene emesso il titolo, gli assegniamo una classe e iniziamo a creare lo stile. Aggiungiamo solo un piccolo margine inferiore appropriato per questo titolo, ma non tutti
là fuori.
Quindi passa allo stile del contenitore stesso. I moduli tendono ad avere un nome di classe di "Box" all'interno di Vanilla Forums. La nostra classe HTML del modulo è "modulo". Potremmo iniziare la lotta per trovare ogni singolo modulo in Vanilla e aggiungere la nostra classe. Alcuni giorni mi sento all'altezza di questa sfida e alcuni giorni dico semplicemente "Lavora in modo più intelligente, non di più". Oggi lavoreremo in modo più intelligente. Creeremo un selettore segnaposto in Sass che ha gli stili di un modulo, ma senza ricreare la nostra .moduleclasse esistente .
%fake-module ( background: white; padding: $padding; clear: both; box-shadow: 0 0 5px rgba(black, 0.2); margin: 0 0 $padding 0; position: relative; )I selettori segnaposto non restituiscono alcun CSS da soli. Ma possono essere @extendeliminati. Quindi ora possiamo semplicemente fare in modo che tutte le scatole in stile Vanilla abbiano il nostro stile di modulo.
.Box ( @extend %fake-module; )Impariamo che whiteSmokeè un colore fantastico.
Nel markup che Vanilla ci fornisce per l'elenco delle categorie, ci fornisce una classe "attiva" in modo che possiamo cambiare un po 'lo stile e rendere ovvio in quale categoria si trova un utente (poiché questo modulo è su molte pagine, home page e pagine di categoria incluse).
Ci imbattiamo in una piccola cosa in cui l'uso di - $ variable non ha funzionato correttamente, abbiamo dovuto invece fare - # ($ variable). Solo una di quelle cose su Sass o Ruby o qualsiasi altra cosa.
Verso le 10:30 spiego la teoria di come funzionano i triangoli CSS. Stiamo considerando di utilizzare un triangolo a sinistra della classe attiva, come indicano i nostri wireframe.
Terminiamo posizionando il numero di thread a destra per dare agli utenti un'idea di quanto sia grande la categoria.