Panduan lengkap untuk menginstal ferzui framework dengan berbagai metode yang tersedia.
ferzui dapat diinstal dengan beberapa cara. Pilih metode yang paling sesuai dengan kebutuhan proyek Anda:
Perfect untuk prototyping dan proyek kecil
Recommended untuk proyek production
Untuk proyek tanpa package manager
CDN adalah cara tercepat untuk memulai dengan ferzui. Cocok untuk prototyping dan proyek kecil.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My ferzui App</title>
<!-- ferzui CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ferzui@latest/dist/ferzui.css">
</head>
<body>
<!-- Your content here -->
<div class="container">
<h1>Hello ferzui!</h1>
<button class="btn btn-primary">Click me</button>
</div>
<!-- ferzui JS -->
<script src="https://cdn.jsdelivr.net/npm/ferzui@latest/dist/ferzui.js"></script>
</body>
</html><!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ferzui@latest/dist/ferzui.css">
<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/ferzui@latest/dist/ferzui.js"></script>Untuk menggunakan versi tertentu, ganti @latest dengan nomor versi:
<!-- CSS v1.0.0 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ferzui@1.0.0/dist/ferzui.css">
<!-- JavaScript v1.0.0 -->
<script src="https://cdn.jsdelivr.net/npm/ferzui@1.0.0/dist/ferzui.js"></script>NPM adalah cara yang direkomendasikan untuk proyek production. Memberikan kontrol penuh atas customization dan performa.
# Using npm
npm install ferzui
# Using yarn
yarn add ferzui
# Using pnpm
pnpm add ferzui
# Using bun
bun add ferzui// Import CSS
import 'ferzui/dist/ferzui.css';
// Import JavaScript (optional)
import 'ferzui/dist/ferzui.js';
// Or import specific components
import { Modal, Dropdown, Toast } from 'ferzui';// Import CSS
require('ferzui/dist/ferzui.css');
// Import JavaScript
require('ferzui/dist/ferzui.js');module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
};import { defineConfig } from 'vite';
export default defineConfig({
css: {
preprocessorOptions: {
scss: {
additionalData: `@import "ferzui/src/scss/ferzui.scss";`
}
}
}
});Download file CSS dan JavaScript langsung dari GitHub untuk proyek yang tidak menggunakan package manager.
# Clone the repository
git clone https://github.com/FerzDevZ/ferzui.git
# Navigate to the directory
cd ferzui
# Install dependencies (optional)
npm install
# Build the project (optional)
npm run buildSetelah download, include file CSS dan JavaScript di HTML Anda:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My ferzui App</title>
<!-- Include downloaded CSS -->
<link rel="stylesheet" href="path/to/ferzui.css">
</head>
<body>
<!-- Your content here -->
<div class="container">
<h1>Hello ferzui!</h1>
<button class="btn btn-primary">Click me</button>
</div>
<!-- Include downloaded JavaScript -->
<script src="path/to/ferzui.js"></script>
</body>
</html>Pastikan ferzui berhasil diinstal dengan benar:
Buka Developer Tools dan periksa apakah CSS ferzui sudah dimuat:
// In browser console
console.log(document.querySelector('link[href*="ferzui"]'));Coba buat komponen sederhana:
<button class="btn btn-primary">Test Button</button>Pastikan JavaScript ferzui sudah dimuat:
// In browser console
console.log(typeof window.ferzui);