Foundation Part 2 : Cara Menggunakan Framework Foundation

Foundation Part 2 : Cara Menggunakan Framework Foundation – Selamat datang kembali di tutorial foundation framework part 2. Setelah sebelumnya pada tutorial foundation part 1 : Pengenalan Framework Foundation kita belajar dan membahas tentang pengertian framework foundation, maka pada tutorial foundation framework part 2 ini kita akan belajar cara instalasi dan cara menggunakan framework foundation.

Foundation Part 2 : Cara Menggunakan Framework Foundation

Ada banyak cara instalasi framework foundation. yaitu dengan cara instalasi melalui CLI, NPM, GIT. atau bisa menggunakan link CDN online yang di sediakan oleh developer foundation. satu lagi adalah dengan cara manual. yaitu dengan cara mendownload foundation. kemudian kita ekstrak ke directory project kita.

Foundation Part 2 : Cara Menggunakan Framework Foundation

Pada tutorial instalasi dan cara menggunakan framework foundation ini, kita hanya akan melakukan instalasi dengan cara manual. karena akan sangat membutuhkan koneksi internet yang lumayan jika melakukan instalasi dengan cara lain.

BACA JUGA : PENGERTIAN DAN CARA MENGGUNAKAN BOOTSTRAP

Cara Instalasi Framework Foundation

Untuk mulai melakukan instalasi framework foundation, teman-teman bisa langsung menuju ke situs resmi foundation. di http://foundation.zurb.com. dan langsung klik download.

download framework foundation

setelah teman-teman klik download, maka akan di hadapkan dengan halaman berikut.

cara menggunakan framework foundation

pada halaman seperti di atas, teman-teman di hadapkan dengan pilihan download complete, essential,custom atau versi Sass.

Pada halaman ini juga di sediakan opsi untuk custom. jadi jika teman-teman ingin meng-custom foundation yang teman-teman download, maka bisa teman-teman lakukan pada halaman ini. misalnya teman-teman ingin mengubah warna-warna dominan dan lain-lainnya.

Tapi di sini kita hanya akan menggunakan versi complete. jadi klik pada download yang di bagian complete. karena kita tidak mengotak-atik isi dari foundation dulu. Foundation Part 2 : Cara Menggunakan Framework Foundation

Ukuran filenya cukup ringan. hanya sekitaran 200kb.

Cara Menggunakan Framework Foundation

Nah, setelah teman-teman download. silahkan teman-teman ekstrak di directory project teman-teman.

di tutorial ini, saya meng-ekstraknya di dalam folder malasngoding_foundation di desktop. karena hanya untuk membuat tutorial ini. silahkan teman-teman sesuaikan sesuai keinginan.

instalasi dan cara menggunakan framework foundation

Setelah di ekstrak kita bisa menghapus file rar/zip foundation-6.3.1-complete nya. karena kita tidak membutuhkannya lagi.

Cara penggunaan dasarnya teman-teman bisa lihat isi dari file index.html di sana. di file tersebut terdapat cara-cara penggunaan dasar seperti membuat membuat tombol, grid system dan lain-lain.

Percobaan

Oh ya, untuk semua panduannya sebenarnya sudah di sediakan pada situs resmi foundation. teman-teman bisa lihat di sini.

Sekarang mari kita lakukan percobaan untuk menggunakan framework foundation. supaya lebih mengerti cara penggunaannya. Foundation Part 2 : Cara Menggunakan Framework Foundation

Caranya buat sebuah file html baru. pada tutorial ini saya membuat file baru dengan nama malasngoding.html.

foundation part 2 cara mengguankan framework foundation

malasngoding.html

Penjelasan

Seperti yang sudah di umumkan pada situs resminya. untuk menggunakan framework foundation, kita harus menambahkan atribut ( class=”no-js” ) pada tag html pembuka.

dan kemudian harus menjalankan function foundation() .

seperti yg teman-teman perhatikan di sini. kita juga harus menghubungkan file html kita dengan file css dan js si foundation ini.

menghubungkan dengan file CSS foundation.

menghubungkan dengan file javascript foundation.

Sekedar informasi, foundation juga menggunakan bantuan jquery sebagai base javascriptnya. jadi harus di hubungkan ke jquery juga seperti contoh di atas.

Oke sekarang coba kita jalankan file malasngoding.html yang telah kita buat.

instalasi cara menggunakan framework foundation

Oke berhasil. darimana kita tau bahwa kita telah berhasil menggunakan framework foundation ? bisa teman-teman lihat dengan jenis font di atas. dan tombol berwarna biru yang kita buat dengan class “button”. untuk tutorial cara membuat tombol dengan framework foundation akan kita bahas pada tutorial selanjutnya di www.malasngoding.com.

Link CDN Foundation Framework

Berikut ini link online framework foundation, jika teman-teman ingin menggunakannya.

Sampai di sini kita telah selesai belajar cara menggunakan framework foundation. Sekian dulu tutorial Foundation Part 2 : Cara Menggunakan Framework Foundation. akan kita lanjutkan pada tutorial foundation framework selanjutnya.