Dokumentasi classroom-themekit
Peta isi, empat aturan pokok, dan urutan baca yang disarankan.
Theme kit HTML/CSS/JS untuk seluruh area dalam aplikasi classroom. Kit ini memindahkan sistem desain aplikasi aslinya (Next.js + React + Tailwind) menjadi berkas statis yang bisa dipakai halaman mana pun.
Siapa pun yang membangun halaman di dalam aplikasi: halaman baru, prototipe, halaman statis, atau halaman lama yang sedang dipindahkan. Satu-satunya cara agar dua halaman terlihat satu keluarga adalah memakai kit ini, bukan menyalin gayanya.
Peta isi
| Halaman | Isinya | Kapan dibaca |
|---|---|---|
| Mulai cepat | Lima menit sampai halaman pertama jalan | Hari pertama |
| Pemasangan | Berkas, urutan pemuatan, cara memasang di proyek lama | Sebelum menempel ke proyek nyata |
| Standar desain | Aturan mengikat: warna, jarak, huruf, keadaan, gerak | Sebelum menulis tampilan apa pun |
| Token & variabel | Daftar lengkap token beserta nilainya | Saat butuh nilai pasti |
| Aturan komponen | Penamaan, struktur, larangan, perilaku JS | Saat menambah atau mengubah komponen |
| Aksesibilitas | Sasaran WCAG, kontras terukur, pola ARIA | Saat menyentuh interaksi |
| Migrasi dari Tailwind | Peta kelas Tailwind lama ke kelas ck- | Saat memindahkan halaman lama |
| Menambah komponen | Alur kerja dan penjaga otomatis | Sebelum mengirim perubahan |
Empat aturan pokok
Kalau hanya satu halaman dokumentasi yang dibaca, baca ini.
Semua warna, ukuran, radius, dan bayangan datang dari tokens/tokens.css. Tidak ada angka atau warna yang ditulis langsung di komponen.
ck-Kit ini hidup berdampingan dengan gaya lama tanpa bertabrakan. Tidak ada selektor elemen telanjang, tidak ada !important.
Dua berkas, satu tag. Tidak ada Tailwind, tidak ada bundler, tidak ada dependensi. Yang bisa dibuka di peramban adalah yang dikirim.
tools/check.py menolak perubahan yang melanggar aturan di atas. Aturan yang tidak dijaga mesin akan hilang dalam sebulan.
Alur baca yang disarankan
- 1Mulai cepatBuat satu halaman kosong dan pasang kit.
- 2Standar desainPahami aturan sebelum menulis tampilan.
- 3Pratinjau komponenCari komponen yang sudah ada sebelum membuat yang baru.
- 4KontribusiKirim perubahan lewat penjaga otomatis.
Versi & status
| Versi kit | 1.0.0 |
| Sumber sistem asli | arsasatria/classroom @ 18f41f9 |
| Cakupan | inner-classroom (bukan landing page) |
| Token | 138, terang + gelap |
| Halaman komponen | 42 |
| Dependensi runtime | 0 |