Auf der rechten Seite des Forums befinden sich eine Reihe von Modulen. "Module" visuell, "Module" wörtlich im Code und "Module", da der Inhalt, den sie enthalten, eine verwandte Gruppe ist, die vom Inhalt in anderen Modulen getrennt ist.
Das erste, das wir uns ansehen, ist das Modul "Kategorien". Vanilla Forums legt diese buchstäblich in einem Ordner namens "Module" ab, was sehr schön ist. Wie Sie sich vorstellen können, handelt es sich bei diesem speziellen um "category.php".
Wir finden den Ort, an dem der Titel ausgegeben wird, geben ihm eine Klasse und beginnen mit dem Styling. Wir fügen nur einen kleinen unteren Rand hinzu, wie es für diesen Titel angemessen ist, aber nicht jeden einzelnen
dort draußen.
Stylen Sie dann den Container selbst. Module haben in den Vanilla-Foren in der Regel den Klassennamen „Box“. Unsere Modul-HTML-Klasse ist "Modul". Wir könnten den Kampf beginnen, jedes einzelne Modul in Vanilla zu finden und unsere eigene Klasse hinzuzufügen. An manchen Tagen bin ich dieser Herausforderung gewachsen und an manchen Tagen sage ich nur: „Arbeite klüger, nicht härter.“ Heute werden wir schlauer arbeiten. Wir werden in Sass einen Platzhalter-Selektor erstellen, der die Stile eines Moduls hat, ohne jedoch unsere vorhandene .moduleKlasse neu zu erstellen .
%fake-module ( background: white; padding: $padding; clear: both; box-shadow: 0 0 5px rgba(black, 0.2); margin: 0 0 $padding 0; position: relative; )Platzhalter-Selektoren geben selbst kein CSS aus. Aber sie können @extend-ed sein. Jetzt können wir einfach alle Boxen im Vanille-Stil mit unserem Modul-Styling versehen.
.Box ( @extend %fake-module; )Wir lernen, dass whiteSmokedas eine tolle Farbe ist.
In dem Markup, das Vanilla uns für die Liste der Kategorien gibt, erhalten wir eine „aktive“ Klasse, damit wir den Stil ein wenig ändern und deutlich machen können, in welcher Kategorie sich ein Benutzer befindet (da sich dieses Modul auf vielen Seiten und Homepages befindet und Kategorieseiten enthalten).
Wir stoßen auf eine Kleinigkeit, bei der die Verwendung von - $ variable nicht richtig funktionierte, sondern stattdessen - # ($ variable). Nur eines dieser Dinge über Sass oder Ruby oder was auch immer.
Gegen 10:30 Uhr erkläre ich die Theorie, wie CSS-Dreiecke funktionieren. Wir erwägen, ein Dreieck links von der aktiven Klasse zu verwenden, da unsere Drahtgitter dikulieren.
Zum Abschluss positionieren wir die Anzahl der Threads rechts, um den Benutzern einen Eindruck davon zu vermitteln, wie groß die Kategorie ist.