Mulai cepat

Langkah 1 — Sambungkan dua berkas

Taruh di dalam <head>. Tidak ada langkah lain.

<link rel="stylesheet" href="themekit/classroom.css">
<script src="themekit/classroom.js" defer></script>

CSS menarik token dan fontnya sendiri lewat @import. Jangan memuat tokens/tokens.css lagi secara terpisah — itu memuat token dua kali.

Langkah 2 — Pakai kelas ck-

Markup biasa, tanpa JavaScript tulis sendiri. Ambil contohnya dari halaman pratinjau, jangan mengarang.

<div class="ck-card">
  <div class="ck-card__header">
    <div class="ck-card__title">Kelas hari ini</div>
    <span class="ck-badge ck-badge--success">Aktif</span>
  </div>
  <div class="ck-card__body">
    <p class="ck-text ck-muted">32 siswa, 2 belum absen.</p>
    <button class="ck-btn ck-btn--default ck-mt-4" type="button">Buka daftar</button>
  </div>
</div>

Langkah 3 — Mode gelap gratis

Tambahkan kelas dark ke <html>. Tidak ada satu pun token yang perlu ditulis ulang. Tombol data-ck-theme-toggle sudah mengurus ini sendiri.

<html lang="id" class="dark">

Kerangka halaman kosong

Ini seluruh berkas terkecil yang sudah benar — sidebar, topbar, konten, laci untuk layar kecil.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kelas Saya</title>
  <link rel="stylesheet" href="themekit/classroom.css">
</head>
<body>
  <a class="ck-skip-link" href="#konten">Lewati ke konten</a>
  <div class="ck-shell">
    <aside class="ck-sidebar">
      <div class="ck-sidebar__brand">…</div>
      <nav class="ck-sidebar__nav" aria-label="Navigasi">…</nav>
    </aside>
    <div class="ck-main">
      <header class="ck-topbar">…</header>
      <main class="ck-content" id="konten">
        <h1 class="ck-h2">Kelas Saya</h1>
      </main>
    </div>
  </div>
  <script src="themekit/classroom.js" defer></script>
</body>
</html>

Yang paling sering salah

Daftar periksa halaman baru