Foundation - Instalasi

Pada bab ini, kita akan membahas tentang cara menginstal dan menggunakan Foundation di website.

Unduh Foundation

Saat Anda membuka link foundation.zurb.com , Anda akan melihat layar seperti di bawah ini -

Klik Download Foundation 6 tombol, Anda akan diarahkan ke halaman lain.

Di sini Anda dapat melihat empat tombol -

Download Everything - Anda dapat mengunduh versi Foundation ini, jika Anda ingin memiliki semuanya dalam kerangka kerja yaitu vanilla CSS dan JS.
Download Essentials - Ini akan mengunduh versi sederhana yang mencakup kisi, tombol, tipografi, dll.
Custom Download - Ini akan mengunduh pustaka khusus untuk Foundation, itu termasuk elemen dan menentukan ukuran kolom, ukuran font, warna dll.
Install via SCSS - Ini akan mengarahkan Anda ke halaman dokumentasi untuk menginstal Foundation untuk situs.

Anda dapat mengklik Download Everythingtombol untuk mendapatkan semuanya dalam kerangka yaitu CSS dan JS. Karena file terdiri dari semua hal dalam kerangka, jadi setiap kali Anda tidak perlu menyertakan file terpisah untuk fungsionalitas individual. Pada saat menulis tutorial ini, versi terbaru (Foundation 6) telah diunduh.

Struktur File

Setelah Foundation diunduh, ekstrak file ZIP, dan Anda akan melihat file / struktur direktori berikut -

Seperti yang Anda lihat, ada CSS dan JS yang dikompilasi (foundation. *), Serta CSS dan JS yang dikompilasi dan dikecilkan (foundation.min. *).

Kami menggunakan versi CDN pustaka sepanjang tutorial ini.

Template HTML

Template HTML dasar menggunakan Foundation seperti yang ditunjukkan di bawah ini -

<!DOCTYPE html>
<html>
   <head>
      <title>Foundation Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">

      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous">

      <!-- Compressed JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"></script>
   </head>

   <body>
      <h1>Hello, world!</h1>
   </body>
</html>

Bagian berikut menjelaskan kode di atas secara rinci.

Doctype HTML5

Fondasi terdiri dari elemen HTML dan properti CSS tertentu yang memerlukan penggunaan doctype HTML5. Oleh karena itu, kode berikut untuk doctype HTML5 harus disertakan di awal semua proyek Anda menggunakan Foundation.

<!DOCTYPE html>
<html>
   ....
</html>

Seluler Pertama

Ini membantu untuk responsif terhadap perangkat seluler. Anda perlu menyertakan fileviewport meta tag ke elemen <head>, untuk memastikan rendering yang tepat dan zoom sentuh pada perangkat seluler.

<meta name = "viewport" content = "width = device-width, initial-scale = 1">

properti lebar mengontrol lebar perangkat. Menyetelnya ke lebar perangkat akan memastikan bahwa itu dirender di berbagai perangkat (ponsel, desktop, tablet ...) dengan benar.
initial-scale = 1.0 memastikan bahwa saat dimuat, halaman web Anda akan ditampilkan dengan skala 1: 1, dan pembesaran tidak akan diterapkan di luar kotak.

Inisialisasi komponen

Skrip jQuery diperlukan di Foundation untuk komponen seperti modals dan dropdown.

<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>

Keluaran

Mari kita lakukan langkah-langkah berikut untuk melihat bagaimana kode yang diberikan di atas bekerja -

Simpan kode html yang diberikan di atas firstexample.html mengajukan.
Buka file HTML ini di browser, output ditampilkan seperti yang ditunjukkan di bawah ini.