Auf der rechten Seite der Foren gibt es eine Reihe von Modulen. "Module" optisch, "Module" buchstäblich im Code und "Module" in dem Sinne, dass der Inhalt, den sie enthalten, eine zusammenhängende Gruppe ist, getrennt/unterschiedlich vom Inhalt anderer Module.
Das erste, das wir uns ansehen, ist das Kategorien-Modul. Vanilla Forums legt diese buchstäblich in einen Ordner namens "modules", was gut ist. Dieses spezielle ist, wie Sie vielleicht erraten, "categories.php".
Wir finden die Stelle, an der der Titel ausgegeben wird, geben ihm eine Klasse und beginnen mit dem Styling. Wir fügen nur einen kleinen unteren Abstand hinzu, wie es sich für diesen Titel gehört, aber nicht für jedes einzelne <h4> da draußen.
Dann machen wir uns an das Styling des Containers selbst. Module haben in Vanilla Forums tendenziell den Klassennamen "Box". Unsere Modul-HTML-Klasse ist "module". Wir könnten den Kampf beginnen, jedes einzelne Modul in Vanilla zu finden und unsere eigene Klasse hinzuzufügen. Manche Tage fühle ich mich dieser Herausforderung gewachsen und manche Tage sage ich nur: "Arbeite intelligenter, nicht härter." Heute arbeiten wir intelligenter. Wir erstellen einen Platzhalterselektor in Sass, der die Stile eines Moduls hat, aber ohne unsere bestehende .module-Klasse 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;
}Platzhalterselektoren geben an sich überhaupt keinen CSS-Code aus. Aber sie können mit @extend erweitert werden. So können wir jetzt einfach dafür sorgen, dass alle Vanilla-Style-Boxen unser Modul-Styling erhalten.
.Box {
@extend %fake-module;
}Wir lernen, dass whiteSmoke eine großartige Farbe ist.
In der Markup, die Vanilla uns für die Liste der Kategorien gibt, gibt es eine "active"-Klasse, damit wir den Stil etwas ändern und deutlich machen können, auf welcher Kategorie sich ein Benutzer gerade befindet (da dieses Modul auf vielen Seiten, einschließlich Homepages und Kategorieseiten, vorhanden ist).
Wir stoßen auf eine Kleinigkeit, bei der die Verwendung von -$variable nicht richtig funktionierte. Wir mussten stattdessen -#{$variable} verwenden. Nur eines dieser Dinge bei 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 auf der linken Seite der aktiven Klasse zu verwenden, wie unsere Wireframes es vorschreiben.
Wir beenden das Ganze, indem wir die Anzahl der Threads rechts positionieren, um den Benutzern ein Gefühl dafür zu geben, wie groß die Kategorie ist.