Membuat Website Responsive Dengan Framework Foundation

Foundation adalah sebuah Framework HTML & CSS yang berfungsi untuk membuat website menjadi Responsive. Sama halnya seperti Framework Bootstrap, Foundation di buat untuk menampilkan sebuah website, aplikasi atau email yang dapat di buka di berbagai ukuran layar device. Berikut adalah beberapa perusahaan besar yang sudah menggunakan Framework Foundation, Facebook, eBay, Samsung, Amazon, Disney, dan masih banyak lagi. Dengan menggunakan Framework Foundation kita dapat dengan mudah membuat kerangka Font-end website dengan cepat dan rapih. Versi Framework Foundation sekarang adalah Foundation versi 6. Kelebihan dari Framework Foundation ini adalah sama seperti Framework Bootstrap, Framework Foundation juga memiliki 12 Grid System, Komponen dan Fitur lebih banyak, Pengelolaan gambar yang baik. Sedangkan kekurangan dari Framework Foundation ini adalah Dokumentasi terbatas, dan Loading template Foundation lebih berat ketimbang template Bootstrap. Nah pada tutorial saya kali ini kita akan coba membuat website Responsive menggunakan Framework Foundation ini. Baik kita akan langsung coba membuatnya saja ya teman-teman.

Hal pertama yang perlu kita siapkan adalah kita Download terlebih dahulu CSS dan jQuery dari Framework Foundation ini. Kalian bisa mendownloadnya di website Foundation yaitu www.foundation.zurb.com. Setelah kalian download berikut adalah struktur folder dari Framework Foundation ini.

Selanjutnya kalian bisa buat struktur HTML nya seperti berikut dan hubungkan file CSS dan jQuery dari Framework Foundation ini.

Kemudian kita akan coba membuat website 3 kolom menggunakan Grid System yang ada di Framework Foundation, berikut adalah script HTML untuk membuat website 3 kolom dengan Foundation.

Bisa kalian perhatikan pada script HTML di atas, pertama kalian bisa buat tag div dan tambahkan class .row, kemudian di dalam tag div class .row kalian bisa buat 3 tag div dan tambahkan class .medium-4 colomns di ke 3 tag div tersebut. Di dalam Grid System Foundation terdapat 3 nama class yaitu .small, .medium, .large, kalian tinggal menggunakannya sesuai dengan kebutuhan kalian.

Kalian bisa coba jalankan di browser kalian masing-masing, maka hasilnya akan seperti berikut.

Mudah bukan teman-teman, dengan Framework Foundation kita dapat membuat kerangka Front-end website yang dapat di buka di beberapa ukuran layar device dengan cepat dan mudah. Sekian dulu tutorial dari saya sampai ketemu di tutorial berikutnya ya teman-teman. Terima Kasih.

28 Desember 2015

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat