Di sepanjang sisi kanan forum ada serangkaian modul. “Modules” secara visual, “Modules” secara literal dalam kode, dan “Modules” dimana konten yang dikandungnya merupakan grup terkait, terpisah / berbeda dari konten di modul lain.
Yang pertama kita lihat adalah modul Kategori. Vanilla Forums secara harfiah meletakkan ini di folder bernama "modul", yang bagus. Yang satu ini, seperti yang mungkin Anda tebak, adalah "kategori.php".
Kami menemukan tempat di mana judul adalah keluaran, memberinya kelas, dan mulai menata gaya. Kami hanya menambahkan sedikit margin bawah yang sesuai untuk judul ini, tetapi tidak semua
di luar sana.
Kemudian pindah ke penataan wadah itu sendiri. Modul cenderung memiliki nama kelas "Kotak" di dalam Forum Vanilla. Kelas HTML modul kami adalah "modul". Kita bisa memulai pertarungan untuk menemukan setiap modul di Vanilla dan menambahkan kelas kita sendiri. Beberapa hari saya merasakan tantangan itu dan beberapa hari saya hanya mengatakan "Bekerja lebih cerdas, bukan lebih keras." Hari ini kami akan bekerja lebih cerdas. Kami akan membuat pemilih placeholder di Sass yang memiliki gaya modul, tetapi tanpa membuat ulang .modulekelas yang ada .
%fake-module ( background: white; padding: $padding; clear: both; box-shadow: 0 0 5px rgba(black, 0.2); margin: 0 0 $padding 0; position: relative; )Pemilih placeholder sama sekali tidak mengeluarkan CSS apa pun. Tapi mereka bisa @extenddikalahkan. Jadi sekarang kita bisa membuat semua kotak bergaya Vanilla memiliki gaya modul kita.
.Box ( @extend %fake-module; )Kami belajar bahwa itu whiteSmokeadalah warna yang mengagumkan.
Dalam markup yang diberikan Vanilla untuk daftar kategori, itu memberi kita kelas "aktif" sehingga kita dapat mengubah sedikit gaya dan memperjelas kategori mana pengguna berada (karena modul ini ada di banyak halaman, beranda dan halaman kategori disertakan).
Kami mengalami hal kecil di mana menggunakan - $ variable tidak berfungsi dengan benar, kami harus melakukan - # ($ variable) sebagai gantinya. Hanya salah satu dari hal-hal itu tentang Sass atau Ruby atau apa pun.
Sekitar pukul 10.30, saya menjelaskan teori tentang cara kerja segitiga CSS. Kami sedang mempertimbangkan untuk menggunakan segitiga di sebelah kiri kelas aktif, sebagai gambar rangka kami.
Kami menyelesaikannya dengan memposisikan jumlah utas ke kanan untuk memberi gambaran kepada pengguna tentang seberapa besar kategorinya.