Customize
Cara mengkustomisasi ferzui sesuai kebutuhan proyek Anda.
CSS Variables
ferzui menggunakan CSS custom properties untuk theming yang mudah.
:root {
/* Colors */
--fz-c-primary-500: #3b82f6;
--fz-c-primary-600: #2563eb;
--fz-c-success-500: #22c55e;
--fz-c-danger-500: #ef4444;
/* Spacing */
--fz-space-1: 0.25rem;
--fz-space-2: 0.5rem;
--fz-space-3: 0.75rem;
--fz-space-4: 1rem;
/* Radius */
--fz-radius-sm: 0.25rem;
--fz-radius-md: 0.5rem;
--fz-radius-lg: 0.75rem;
/* Shadows */
--fz-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--fz-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
--fz-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}
Color Customization
Ubah warna brand dengan mudah menggunakan CSS variables.
Primary
Success
Danger
Warning
Spacing Customization
Sesuaikan skala spacing untuk konsistensi visual.
p-2 (0.5rem)
p-3 (0.75rem)
p-4 (1rem)
p-5 (1.25rem)
Typography Customization
Kustomisasi font family, size, dan weight.
Extra small text
Small text
Base text
Large text
Extra large text
Component Customization
Override styles komponen dengan CSS custom properties.
Dark Mode
ferzui mendukung dark mode dengan CSS variables.
RTL Support
Dukungan RTL untuk bahasa Arabic dan Hebrew.
Build Process
Cara build ferzui untuk produksi.
# Install dependencies
npm install
# Build CSS
npm run build:css
# Build JavaScript
npm run build:js
# Watch for changes
npm run watch
Langkah Selanjutnya