Panduan Pengembang - JS + CSS

Pengembang

Panduan bagi pengembang untuk mengembangkan antarmuka digital pemerintah yang konsisten dan inklusif dengan INA Digital Design System (IDDS).

Persiapan

Sebelum memulai instalasi, pastikan Anda telah mempersiapkan Project Folder yang akan menggunakan INA Digital Design System.

Apa itu Project Folder?

Project folder adalah folder/direktori yang berisi semua file dan kode dari aplikasi frontend Anda, seperti contoh berikut ini:


my-project/
└── index.html    ← File ini akan menjadi entry point dari project anda

Penting: Dalam dokumentasi dan contoh kode kami, kami menggunakan Tailwind CSS v4 untuk mempermudah penyusunan tata letak tanpa harus menulis CSS kustom secara manual.

Rekomendasi Setup

Untuk mendapatkan hasil yang sama dengan contoh kami, pastikan Anda menyertakan CDN Tailwind CSS v4, Tabler Icons, dan ApexCharts di dalam tag <head> file index.html Anda. Lihat bagian Quick Start untuk detail kodenya.

Quick Start

Mulailah dengan menyertakan CSS dan JavaScript IDDS yang siap digunakan dalam produksi melalui CDN tanpa perlu melakukan langkah-langkah build.

Edit file index.html di project Anda. Tambahkan potongan kode berikut.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>IDDS demo</title>
    
    <!-- Tailwind CSS (Optional tapi disarankan untuk menyalin contoh komponen) -->
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <!-- Tabler Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css" />
    <!-- ApexCharts (Bila memerlukan komponen grafik) -->
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Tambahkan CSS dan JS IDDS. Letakkan tag link di dalam tag head untuk CSS kami, dan tag script untuk paket JavaScript kami sebelum penutup body.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>IDDS demo</title>
    
    <!-- Tailwind CSS (CDN) -->
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <!-- Tabler Icons (CDN) -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css" />
    <!-- ApexCharts -->
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

    <link href="https://unpkg.com/@idds/styles@latest/dist/index.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://unpkg.com/@idds/js@latest/dist/index.iife.js"></script>
  </body>
</html>

Hello World! Buka halaman ini di browser pilihan Anda untuk melihat halaman IDDS. Sekarang Anda dapat mulai membangun website dengan IDDS dengan menambahkan berbagai komponen yang tersedia.

Tautan CDN

Dalam dokumentasi dan berbagai snippet contoh kode yang kami sediakan, kami banyak memanfaatkan Tailwind CSS untuk mempermudah penyusunan layout tanpa harus menulis class CSS atau inline-style satu per satu secara manual. Selain itu, kami juga menggunakan Tabler Icons untuk ikonografi dan ApexCharts untuk visualisasi data atau grafik.

Oleh karena itu, jika Anda ingin menggunakan copy-paste kode dari halaman komponen kami secara penuh, Anda wajib melakukan acknowledge dengan menyertakan referensi CDN tambahan ini di dalam tag <head> pada file index.html (global layout) project Anda.

Sebagai referensi, berikut adalah link CDN selengkapnya yang kami gunakan:

Deskripsi	URL
CSS IDDS	`https://unpkg.com/@idds/styles@latest/dist/index.min.css`
JS IDDS	`https://unpkg.com/@idds/js@latest/dist/index.iife.js`
Tailwind CSS	`https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4`
Tabler Icons	`https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css`
ApexCharts	`https://cdn.jsdelivr.net/npm/apexcharts`

Download Examples

Jika Anda ingin mengunduh dan mencoba berbagai komponen dari IDDS, Anda dapat mengunduh contoh yang telah dibuat:

JS + CSS Starter Project

Starter project dengan @idds/js

Download ZIP

Cara Menggunakan:

Unzip project yang sudah didownload
Masuk ke folder project
```
cd idds-js-starter
```
Buka file index.html