Component 0 - Copy this Html, Bootstrap Component to your project
"Saya ingin Anda membuat sebuah framework CSS custom yang modern, modular, reusable, dan responsif. Framework ini harus menggabungkan pendekatan utility-first (seperti Tailwind CSS) dengan component-based design (seperti Bootstrap). Berikut adalah spesifikasi lengkap yang harus dipenuhi: 1. Core Variables & Resets Sertakan sistem variabel global untuk warna, typography, spacing, shadows, border radius, z-index, dan transisi. Gunakan reset CSS modern untuk memastikan konsistensi lintas browser. Pastikan variabel CSS dapat di-overwrite untuk kustomisasi tema. 2. Color System Sistem warna yang lengkap mencakup primary, secondary, success, warning, danger, light, dark, dan neutral shades. Tambahkan dukungan untuk dark mode dengan preferensi otomatis (prefers-color-scheme) dan manual melalui class atau variabel. 3. Typography Sertakan skala tipografi modular (misalnya: --font-size-base, --font-size-lg, dll.). Dukungan untuk beberapa jenis font (sans-serif, serif, monospace). Utility classes untuk alignment, weight, line-height, dan text transformation. 4. Spacing & Layout Buat sistem spacing modular berbasis 8px scale. Sertakan utilitas margin dan padding yang fleksibel (contoh: .m-1, .p-2, .mx-auto). Tambahkan sistem grid 12 kolom yang responsif dengan breakpoint umum (sm, md, lg, xl, xxl). Sertakan utilitas flexbox dan grid CSS untuk layout dinamis. 5. Utility Classes Buat utilitas atomic untuk display, visibility, text alignment, text color, background color, border, shadow, opacity, cursor, overflow, position, sizing, dan transform. Tambahkan utilitas interaktif seperti hover, focus, active, dan disabled states. 6. Components Buat komponen UI lengkap yang siap pakai: Buttons (primary, secondary, outline, icon buttons, sizes, states) Cards (header, body, footer, hover effects) Forms (input fields, checkboxes, radio buttons, select dropdowns, file uploads, range sliders) Navigation (navbar, sidebar, breadcrumb, pagination) Alerts, badges, tooltips, modals, dropdowns, tabs, accordions Tables (striped, hoverable, responsive) Progress bars, loaders, toggle switches Pastikan setiap komponen memiliki styling default yang estetis dan mudah dikustomisasi. 7. Interactivity Tambahkan animasi halus untuk hover, focus, dan transisi. Buat utilitas untuk efek animasi seperti fade-in, slide, scale, dan rotate. Tambahkan dukungan untuk micro-interactions (contoh: toggle switch, button click effects). 8. Responsive Design Implementasikan media queries untuk breakpoint umum (sm, md, lg, xl, xxl). Tambahkan utilitas responsive seperti .sm\:d-none, .md\:flex, .lg\:text-center. Pastikan semua komponen dan utilitas sepenuhnya responsif. 9. Accessibility Pastikan semua komponen mendukung aksesibilitas (ARIA roles, keyboard navigation, focus states). Gunakan kontras warna yang memadai sesuai standar WCAG. 10. Performance & Caching Optimalkan ukuran file CSS dengan hanya menyertakan kode yang digunakan. Gunakan CSS variables untuk mengurangi redundansi. Pastikan framework kompatibel dengan tools modern seperti PostCSS, Sass, atau Less. 11. Templates Sertakan template starter untuk halaman umum seperti dashboard, landing page, blog, e-commerce, dan login page. Template harus menggunakan komponen dan utilitas dari framework. 12. Compatibility Pastikan framework kompatibel dengan browser modern (Chrome, Firefox, Safari, Edge) dan versi lama (IE11+ jika memungkinkan). Tambahkan polyfills atau fallback untuk fitur CSS eksperimental jika diperlukan. 13. Documentation Sertakan dokumentasi lengkap dalam bentuk HTML atau Markdown: Penjelasan tentang instalasi, penggunaan, dan kustomisasi. Contoh kode untuk setiap komponen dan utilitas. Panduan untuk membuat tema kustom. 14. Testing Pastikan framework telah diuji pada berbagai perangkat (desktop, tablet, mobile). Lakukan pengujian lintas browser untuk memastikan konsistensi. Tambahkan unit test untuk komponen utama jika memungkinkan. 15. Optional Features Tambahkan fitur unik seperti generator tema otomatis, animasi timeline, atau dukungan RTL (Right-to-Left). Sertakan utilitas untuk gambar responsif, lazy loading, dan aspect ratio. Framework ini harus dibuat dengan pendekatan modular sehingga setiap bagian dapat digunakan secara independen tanpa bergantung pada keseluruhan framework. Pastikan hasil akhirnya adalah framework yang lightweight , performant , dan easy to use ."