Po prawej stronie forów znajduje się seria modułów. „Moduły” wizualnie, „Moduły” dosłownie w kodzie, a „Moduły” w tym, że zawartość, którą zawierają, jest powiązaną grupą, odrębną / różną od zawartości innych modułów.
Pierwszym z nich jest moduł Kategorie. Vanilla Forums dosłownie umieszcza je w folderze o nazwie „moduły”, co jest miłe. Ten konkretny, jak można się domyślić, to „category.php”.
Znajdujemy miejsce, w którym wyświetlany jest tytuł, nadajemy mu klasę i rozpoczynamy stylizację. Po prostu dodajemy niewielki dolny margines, który jest odpowiedni dla tego tytułu, ale nie dla każdego
tam.
Następnie przejdź do stylizacji samego pojemnika. Moduły mają zwykle nazwę klasy „Box” na Vanilla Forum. Nasza klasa modułu HTML to „moduł”. Moglibyśmy rozpocząć walkę o znalezienie każdego modułu w Vanilla i dodanie własnej klasy. Czasami czuję się gotowy na to wyzwanie, a czasami po prostu mówię „Pracuj mądrzej, a nie ciężej”. Dzisiaj będziemy pracować mądrzej. W Sassie utworzymy selektor zastępczy, który będzie miał style modułu, ale bez ponownego tworzenia naszej istniejącej .moduleklasy.
%fake-module ( background: white; padding: $padding; clear: both; box-shadow: 0 0 5px rgba(black, 0.2); margin: 0 0 $padding 0; position: relative; )Selektory zastępcze w ogóle nie wyświetlają żadnego kodu CSS. Ale można je @extend-ed. Teraz możemy po prostu nadać wszystkim pudełkom w stylu Vanilla nasz styl modułowy.
.Box ( @extend %fake-module; )Dowiadujemy się, że whiteSmoketo niesamowity kolor.
W znaczniku, który Vanilla podaje nam jako listę kategorii, daje nam „aktywną” klasę, dzięki czemu możemy nieco zmienić styl i pokazać, w której kategorii znajduje się użytkownik (ponieważ ten moduł znajduje się na wielu stronach, stronach głównych i strony kategorii).
Napotkaliśmy małą rzecz, w której użycie - $ zmienna nie działało dobrze, zamiast tego musieliśmy zrobić - # ($ zmienna). Tylko jedna z tych rzeczy o Sassie, Ruby czy czymkolwiek.
Około 10:30 wyjaśniam teorię działania trójkątów CSS. Rozważamy użycie trójkąta po lewej stronie aktywnej klasy, zgodnie z naszymi modelami szkieletowymi.
Kończymy umieszczając liczbę wątków po prawej stronie, aby użytkownicy mogli zorientować się, jak duża jest kategoria.