Developer Guide

Panduan praktis untuk memakai ITATS Design System di aplikasi web, baik dikerjakan manual oleh developer maupun didelegasikan ke AI agent.

Prinsip Pemakaian

Mulai dari Bootstrap

Gunakan class Bootstrap 5 sebagai fondasi, lalu biarkan css/style.css memberi identitas ITATS.

Pakai Token Sistem

Prioritaskan --bs-primary, --bs-accent, radius, shadow, dan skala typography yang sudah tersedia.

Tetap Ringkas

Komponen dibuat compact. Hindari padding besar, heading terlalu berat, dan custom style yang memutus konsistensi.

Quick Start Manual

Tambahkan Bootstrap lebih dulu, lalu stylesheet dan script ITATS.

Show Code
<!-- Head -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/anwarsodik/design-system-itats@main/css/style.css?v=6">

<!-- Before closing body -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/anwarsodik/design-system-itats@main/js/script.js?v=3"></script>

Alur Kerja

  1. Tentukan kebutuhan UI: halaman auth, dashboard, tabel data, form, atau LMS.
  2. Buka halaman dokumentasi komponen terkait dari sidebar.
  3. Salin markup dari blok code dan sesuaikan data, label, serta state.
  4. Gunakan utilities Bootstrap untuk layout, spacing, responsive grid, dan alignment.
  5. Uji desktop dan mobile, termasuk komponen interaktif seperti dropdown, modal, toast, tooltip, dan collapse.

Token CSS untuk Pemula

Gunakan token yang sudah tersedia agar warna, spacing, dan tampilan tabel tetap konsisten.

Token Kegunaan Contoh
--bs-primary Warna aksi utama dan link color: var(--bs-primary);
--itats-space-1 sampai --itats-space-6 Skala jarak 4px sampai 32px gap: var(--itats-space-3);
--itats-surface-muted Permukaan sekunder yang lembut background: var(--itats-surface-muted);
--itats-table-stripe-bg Warna strip baris tabel background: var(--itats-table-stripe-bg);

Version Tagging

Tambahkan query ?v=... pada asset setelah perubahan. Saat versi berubah, CDN mengambil asset terbaru tanpa perlu clear cache Cloudflare.

<link rel="stylesheet" href=".../css/style.css?v=6">
<script src=".../js/script.js?v=3"></script>

Pola Implementasi Umum

Kebutuhan Halaman Referensi Komponen Utama
Dashboard admin admin.html Navbar, sidebar, summary cards, table, badge
Login aplikasi example-login.html Forms, buttons, card, brand panel
Daftar course/LMS example-lms-courses.html Grid, cards, badges, filters
Manajemen data tables.html Table, pagination, dropdown actions, form controls
Form input kompleks forms.html Input, select, checkbox, validation, helper text

Agentic Usage

Gunakan brief yang spesifik agar AI agent menghasilkan UI yang konsisten dengan design system ini.

Show Code
Buat halaman [nama halaman] menggunakan ITATS Design System.

Konteks:
- Stack: HTML, Bootstrap 5.3.3, css/style.css, js/script.js.
- Visual: compact, professional, ITATS Blue #06469e dan Yellow #f8b500.
- Gunakan class Bootstrap dan token CSS yang sudah ada. Jangan tambah framework.

Kebutuhan halaman:
- Tujuan: [jelaskan tujuan halaman]
- Konten utama: [section, data, tabel, form, atau card]
- State yang wajib ada: [empty, loading, error, success, disabled]
- Responsive: harus nyaman di desktop dan mobile.

Referensi:
- Lihat [nama-file.html] untuk pola layout.
- Lihat [komponen.html] untuk komponen yang digunakan.

Output:
- Edit file HTML/CSS/JS yang relevan.
- Pertahankan sidebar, Bootstrap bundle, dan js/script.js.
- Verifikasi tampilan desktop dan mobile.

Guardrail untuk Agent

  • Jangan mengganti Bootstrap dengan framework lain.
  • Jangan hardcode warna baru jika token sudah tersedia.
  • Jangan membuat komponen besar tanpa melihat halaman referensi.
  • Jangan menghapus script Bootstrap atau js/script.js dari halaman dokumentasi.
  • Gunakan markup semantic: heading berurutan, label form jelas, dan alt text pada gambar.
  • Pastikan aksi utama memakai btn-primary atau btn-accent secara konsisten.
  • Gunakan table-responsive untuk tabel yang melebar.
  • Uji elemen interaktif setelah perubahan HTML.

Checklist Review

UI dan Brand

  • Warna utama memakai ITATS Blue dan Yellow.
  • Typography tetap compact dan mudah dibaca.
  • Spacing konsisten dengan Bootstrap utilities.
  • Komponen terlihat selaras dengan halaman dokumentasi lain.

Teknis

  • Bootstrap CSS dimuat sebelum css/style.css.
  • Bootstrap bundle dan js/script.js dimuat sebelum </body>.
  • Mobile layout tidak overflow horizontal.
  • Form memiliki label, helper, dan validation feedback bila diperlukan.