Dọc theo bên phải của các diễn đàn có một loạt các mô-đun. “Mô-đun” trực quan, “Mô-đun” theo nghĩa đen trong mã và “Mô-đun” ở chỗ nội dung chúng chứa là một nhóm có liên quan, tách biệt / khác với nội dung trong các mô-đun khác.
Cái đầu tiên chúng ta xem xét là mô-đun Danh mục. Diễn đàn Vanilla thực sự đặt những thứ này trong một thư mục có tên là “mô-đun”, thật tuyệt. Cái cụ thể này, như bạn có thể đoán, là “category.php”.
Chúng tôi tìm nơi xuất ra tiêu đề, phân loại tiêu đề và bắt đầu tạo kiểu. Chúng tôi chỉ thêm một ít lề dưới phù hợp cho tiêu đề này, nhưng không phải mọi
ngoài đó.
Sau đó chuyển sang tạo kiểu cho chính vùng chứa. Các mô-đun có xu hướng có tên lớp là “Box” bên trong Diễn đàn Vanilla. Lớp HTML mô-đun của chúng tôi là "mô-đun". Chúng tôi có thể bắt đầu cuộc chiến tìm kiếm từng mô-đun đơn lẻ trong Vanilla và thêm lớp của chúng tôi. Một số ngày tôi cảm thấy thích thú với thử thách đó và một số ngày tôi chỉ nói "Làm việc thông minh hơn, không chăm chỉ hơn." Hôm nay chúng ta sẽ làm việc thông minh hơn. Chúng tôi sẽ tạo một bộ chọn trình giữ chỗ trong Sass có các kiểu của một mô-đun, nhưng không tạo lại .modulelớp hiện có của chúng tôi .
%fake-module ( background: white; padding: $padding; clear: both; box-shadow: 0 0 5px rgba(black, 0.2); margin: 0 0 $padding 0; position: relative; )Bộ chọn trình giữ chỗ hoàn toàn không xuất ra bất kỳ CSS nào. Nhưng chúng có thể được @extend-ed. Vì vậy, bây giờ chúng ta có thể làm cho tất cả các hộp kiểu Vani có kiểu dáng mô-đun của chúng ta.
.Box ( @extend %fake-module; )Chúng tôi biết rằng đó whiteSmokelà một màu sắc tuyệt vời.
Trong phần đánh dấu mà Vanilla cung cấp cho chúng tôi cho danh sách các danh mục, nó cung cấp cho chúng tôi một lớp “hoạt động” để chúng tôi có thể thay đổi kiểu một chút và làm rõ người dùng đang ở danh mục nào (vì mô-đun này nằm trên rất nhiều trang, trang chủ và các trang danh mục bao gồm).
Chúng tôi gặp một vấn đề nhỏ trong đó việc sử dụng - biến $ không hoạt động đúng, chúng tôi phải làm - # ($ biến) thay thế. Chỉ một trong những điều đó về Sass hoặc Ruby hoặc bất cứ điều gì.
Vào khoảng 10:30, tôi giải thích lý thuyết về cách hoạt động của các hình tam giác CSS. Chúng tôi đang xem xét sử dụng một hình tam giác ở bên trái của lớp đang hoạt động, vì các khung dây của chúng tôi phân chia.
Chúng tôi kết thúc bằng cách định vị số lượng chủ đề ở bên phải để cho người dùng biết danh mục lớn như thế nào.