Panduan lengkap untuk menggunakan ferzui framework dengan contoh-contoh praktis.
ferzui menggunakan struktur HTML yang sederhana dan intuitif. Setiap komponen memiliki class yang jelas dan mudah dipahami.
<!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>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ferzui@latest/dist/ferzui.css">
</head>
<body>
<div class="container">
<h1>Welcome to ferzui</h1>
<p>This is a basic page using ferzui framework.</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/ferzui@latest/dist/ferzui.js"></script>
</body>
</html>ferzui menggunakan sistem grid yang responsif dan mudah digunakan.
<!-- Fixed width container -->
<div class="container">
<!-- Your content here -->
</div>
<!-- Full width container -->
<div class="container-fluid">
<!-- Your content here -->
</div>Fixed width container
Full width container
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h5>Column 1</h5>
<p>This is the first column.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h5>Column 2</h5>
<p>This is the second column.</p>
</div>
</div>
</div>
</div>
</div>This is the first column.
This is the second column.
Berikut adalah komponen-komponen dasar yang paling sering digunakan:
<!-- Button variants -->
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-outline">Outline</button>
<!-- Button sizes -->
<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary">Default</button>
<button class="btn btn-primary btn-lg">Large</button><div class="card">
<div class="card-header">
<h5>Card Title</h5>
</div>
<div class="card-body">
<p>This is the card content. You can put any content here.</p>
<button class="btn btn-primary">Action</button>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>This is the card content. You can put any content here.
<form>
<div class="mb-3">
<label for="email" class="form-label">Email address</label>
<input type="email" class="form-control" id="email" placeholder="name@example.com">
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="remember">
<label class="form-check-label" for="remember">
Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>ferzui menyediakan banyak utility classes untuk styling cepat:
<!-- Margin -->
<div class="m-1">Small margin</div>
<div class="m-3">Medium margin</div>
<div class="m-5">Large margin</div>
<!-- Padding -->
<div class="p-1">Small padding</div>
<div class="p-3">Medium padding</div>
<div class="p-5">Large padding</div>
<!-- Specific sides -->
<div class="mt-3 mb-3">Top and bottom margin</div>
<div class="px-3">Horizontal padding</div><!-- Text alignment -->
<p class="text-start">Left aligned text</p>
<p class="text-center">Center aligned text</p>
<p class="text-end">Right aligned text</p>
<!-- Text colors -->
<p class="text-primary">Primary text</p>
<p class="text-success">Success text</p>
<p class="text-warning">Warning text</p>
<p class="text-danger">Danger text</p>
<!-- Text weight -->
<p class="fw-bold">Bold text</p>
<p class="fw-normal">Normal text</p>
<p class="fw-light">Light text</p>Left aligned text
Center aligned text
Right aligned text
Primary text
Success text
Warning text
Danger text
Bold text
Normal text
Light text
Beberapa komponen ferzui memerlukan JavaScript untuk interaktivitas:
<!-- Modal trigger -->
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch Modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal Title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>Selalu gunakan elemen HTML yang sesuai dengan semantiknya. Gunakan <button> untuk tombol, <form> untuk formulir, dll.
Design untuk mobile terlebih dahulu, kemudian gunakan breakpoints untuk desktop. ferzui menggunakan pendekatan mobile-first.
Selalu sertakan atribut ARIA yang diperlukan dan pastikan kontras warna memenuhi standar WCAG AA.
Gunakan utility classes untuk styling yang sering digunakan dan hindari CSS custom yang tidak perlu.