Setelah memahami apa itu Foundation, kini saatnya kita mulai mempraktikkan cara menggunakannya untuk membangun halaman web. Ada dua cara utama untuk memulai: menggunakan versi terkompilasi (pre-compiled) atau menginstal Foundation secara lokal menggunakan CLI (Command Line Interface).
Opsi 1: Menggunakan Foundation Terkompilasi (Paling Mudah)
Ini adalah cara termudah dan tercepat untuk memulai, cocok untuk pemula atau proyek yang tidak membutuhkan kustomisasi mendalam. Anda cukup menyertakan file CSS dan JavaScript Foundation ke dalam file HTML Anda.
- Buat File HTML:
Buat file HTML baru, misalnya index.html, dan sertakan struktur dasar HTML5.
- Sertakan File CSS:
Tambahkan tautan ke file CSS Foundation di dalam tag <head>. Anda dapat mengambilnya dari CDN (Content Delivery Network) atau mengunduh dan menyimpannya secara lokal. Menggunakan CDN sangat direkomendasikan karena lebih cepat dan efisien.
HTML<head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css" crossorigin="anonymous" /> </head> - Sertakan File JavaScript:
Tambahkan skrip JavaScript Foundation di bagian bawah tag <body> Anda. Pastikan untuk juga menyertakan jQuery karena Foundation bergantung padanya untuk beberapa komponen.
HTML<body> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js" crossorigin="anonymous"></script> <script> $(document).foundation(); </script> </body>Skrip
$(document).foundation();berfungsi untuk menginisialisasi semua plugin JavaScript Foundation di halaman Anda.
Opsi 2: Menginstal Foundation secara Lokal (Cara Profesional)
Ini adalah cara yang lebih canggih dan disarankan untuk proyek yang lebih besar atau yang membutuhkan kustomisasi. Anda akan menggunakan Foundation CLI untuk menginstal Foundation sebagai proyek baru dan mengkompilasi file Sass Anda.
- Instal Node.js:
Pastikan Anda sudah menginstal Node.js dan npm di komputer Anda. Anda bisa mengunduhnya dari situs resmi Node.js.
- Instal Foundation CLI:
Buka terminal atau Command Prompt Anda dan jalankan perintah berikut untuk menginstal Foundation CLI secara global.
Bashnpm install -g foundation-cli - Buat Proyek Baru:
Arahkan terminal Anda ke folder tempat Anda ingin membuat proyek, lalu jalankan perintah berikut.
Bashfoundation new --framework sites --template zurb-templateAnda akan diminta untuk memberikan nama proyek. Setelah proses instalasi selesai, masuklah ke folder proyek yang baru dibuat.
Bashcd [nama-proyek-anda] - Jalankan Proyek:
Jalankan perintah berikut untuk memulai server lokal dan mengawasi perubahan pada file Anda.
Bashnpm startPerintah ini akan secara otomatis membuka halaman web di browser Anda. Setiap kali Anda melakukan perubahan pada file Sass atau HTML, halaman akan otomatis diperbarui.
Mulai Membangun dengan Grid
Setelah berhasil menginstal Foundation, Anda dapat mulai menggunakan komponen-komponennya. Sistem grid adalah salah satu pondasi utama Foundation. Berikut contoh sederhana untuk membuat tata letak dua kolom:
<div class="grid-x grid-padding-x">
<div class="cell large-6">
<div class="callout">Kolom 1</div>
</div>
<div class="cell large-6">
<div class="callout">Kolom 2</div>
</div>
</div>
grid-x: Mendefinisikan sebuah baris (row)grid-padding-x: Menambahkan padding horizontal di antara kolom.cell: Mendefinisikan sebuah sel (column).large-6: Menentukan lebar kolom sebesar 6 unit dari total 12 unit grid saat layar berukuran besar (large).
Dengan mengikuti langkah-langkah ini, Anda sudah siap untuk mulai membangun tata letak dasar menggunakan Foundation. Pada tutorial berikutnya, kita akan mendalami lebih jauh tentang sistem grid dan komponen-komponen UI lainnya.
