Aturan komponen
Penamaan, susunan berkas, struktur wajib, perilaku JavaScript, dan yang dilarang.
Penamaan
Pola blok__elemen--varian. Empat bentuk saja, tidak ada yang lain.
| Bentuk | Contoh | Arti |
|---|---|---|
| ck-blok | ck-card | Komponen mandiri |
| ck-blok__elemen | ck-card__header | Bagian yang tidak hidup tanpa bloknya |
| ck-blok--varian | ck-btn--outline | Bentuk lain dari blok yang sama |
| ck-blok__elemen--varian | ck-list__item--link | Bentuk lain dari elemen |
Tidak ada singkatan yang tidak jelas (ck-btn-2, ck-x), tidak ada nama berdasarkan warna (ck-blue-box), tidak ada huruf besar.
Susunan berkas gaya
Satu berkas CSS, urutan bagian yang tetap. Nomor bagian dipertahankan supaya mudah dirujuk.
| Urutan | Bagian | Isi |
|---|---|---|
| 1 | Impor | Font dan token |
| 2 | Reset | Normalisasi dan dasar elemen |
| 3 | Dasar | Judul, teks, tautan, kode, kisi |
| 4 | Tata letak | Shell, sidebar, topbar, konten |
| 5–30 | Komponen | Satu bagian per komponen |
| 31 | Aksesibilitas & utilitas | Skala jarak, penyaring, cetak |
| 32 | Cetak | Aturan @media print |
Struktur komponen
Sebuah komponen baru boleh dianggap selesai kalau punya semua bagian ini.
| Bagian | Wajib | Keterangan |
|---|---|---|
| Aturan blok dasar | Ya | Ukuran, bantalan, radius dari token |
| Varian | Ya | Minimal satu varian selain bentuk dasar bila ada peran berbeda |
| Keadaan hover/fokus | Ya | Fokus wajib terlihat |
| Keadaan nonaktif | Ya | Untuk semua yang bisa diklik atau diisi |
| Penyesuaian mode gelap | Ya | Otomatis bila memakai token; periksa tetap terbaca |
Halaman galeri di components/ | Ya | Tanpa itu komponen tidak terdaftar dan ditolak penjaga |
Aturan @media print | Bila perlu | Hanya untuk komponen yang relevan dicetak |
Perilaku JavaScript
Tidak ada JavaScript yang ditulis di halaman. Semua perilaku dipasang lewat atribut data-ck-* dan ditangani satu berkas, classroom.js.
| Atribut | Fungsi |
|---|---|
| data-ck-theme-toggle | Tombol ganti tema terang/gelap |
| data-ck-toggle="id" | Membuka menu dropdown |
| data-ck-open="id" / data-ck-close | Membuka dan menutup modal |
| data-ck-drawer-open="id" / data-ck-close-drawer | Laci untuk layar kecil |
| data-ck-accordion="id" | Buka-tutup akordeon |
| data-ck-toast="success" | Menampilkan notifikasi; judul lewat data-ck-toast-title |
| data-ck-sortable | Tabel bisa diurutkan per kolom |
| data-ck-check-all | Kotak centang pilih-semua di kepala tabel |
| data-ck-copy="#id" | Tombol salin isi elemen |
| data-ck-nav-filter | Penyaring navigasi sidebar |
| data-ck-year | Mengisi tahun berjalan |
Tanpa
<script> sebaris di halamanHalaman komponen tidak boleh memuat skrip sendiri. Kalau butuh perilaku baru, tambahkan di
classroom.js dengan atribut data-ck-*. Aturan ini dijaga otomatis — dulu satu halaman memanggil fungsi sebelum skripnya dimuat dan seluruh galeri gagal diam-diam.Aksesibilitas minimum per komponen
| Komponen | Syarat wajib |
|---|---|
| Tombol ikon | aria-label yang menjelaskan aksinya |
| Input | Terhubung ke label; pesan galat lewat aria-describedby |
| Modal | role="dialog", aria-modal, fokus terjebak di dalam, Esc menutup |
| Dropdown | aria-expanded, aria-haspopup, bisa ditutup dengan Esc |
| Tab | role="tablist"/tab/tabpanel, panah kiri-kanan berpindah |
| Tabel | th scope, aria-sort saat kolom diurutkan |
| Lencana status | Teks di dalamnya bermakna; warna bukan satu-satunya penanda |
| Akordeon | aria-expanded pada pemicu |
Yang dilarang
| Dilarang | Alasan |
|---|---|
| Warna, ukuran, atau bayangan mentah | Mode gelap tidak ikut berubah; check.py menolaknya |
!important | Menandakan konflik yang belum diselesaikan |
Selektor id atau kedalaman lebih dari tiga tingkat | Rapuh terhadap perubahan markup |
| Menghapus cincin fokus | Membuat halaman tidak bisa dipakai dengan papan ketik |
| Menyalin gaya komponen ke halaman alih-alih memakai kelasnya | Itulah cara sistem desain terpecah |
Lanjutan
Cara menambah komponen baru dan menjalankan penjaganya ada di Menambah komponen.