Bangun Situs Web Superfast dengan Foundation 5 [A Guide]
Menggunakan kerangka kerja frontend dapat meningkatkan alur kerja desain web Anda dengan banyak cara. Bisa membantu Anda mengikuti prinsip-prinsip desain modern seperti pendekatan mobile-first, markup semantik, dan desain responsif. Kamu bisa memanfaatkan banyak elemen CSS dan JavaScript yang siap digunakan dan secara signifikan mempercepat proses pengembangan Anda, membebaskan lebih banyak waktu untuk fokus pada desain pengalaman visual dan pengguna.
Zurb Foundation 5 adalah salah satu kerangka kerja frontend yang paling kuat di pasar. Ini dibangun secara logis, mudah digunakan dan sepenuhnya gratis. Ini memungkinkan Anda memanfaatkan kisi-kisi CSS yang fleksibel bahwa memfasilitasi dalam penciptaan tata letak yang bersih, ramah-pengguna. Kerangka kerja Foundation juga sangat teruji, sehingga dibutuhkan kompatibilitas lintas-browser dan lintas-perangkat.
Dalam tutorial ini saya akan menunjukkan kepada Anda bagaimana Anda dapat membangun situs web superfast dengan Zurb Foundation 5. Anda dapat melihat hasil akhir di halaman demo.
Saya akan membuat tata letak situs web, tugas menambahkan elemen desain halus sedang menunggu untuk Anda. Situs web yang akan kita buat bersama dalam tutorial ini akan mewujudkan impian perancang UX modern: ia akan responsif, mobile-first, user-friendly, dan semantik.
Karena panjangnya panduan ini, berikut adalah pintasan untuk sampai ke bagian yang Anda inginkan dengan cepat:
- Mengunduh Foundation 5
- Memahami Grid
- Kapan Menggunakan Kelas Besar-N, Sedang-N Dan Kecil-N
- Menambahkan Bilah Menu Atas
- Mengisi Bagian Utama
- Menambahkan Panel Untuk Posting Populer
- Menambahkan 3 Posting Lebih Banyak Ke Panel Populer
- Prettying Up CSS
- Menambahkan Beberapa Konten Lainnya
- Menambahkan Pagination
- Mengisi Sidebar
- Formulir Newsletter
- Flex Video
- Menu Sidebar
- Kesimpulan
1. Mengunduh Foundation 5
Anda dapat mengunduh Foundation 5 dalam 4 bentuk berbeda:
- kode lengkap
- versi yang lebih ringan dengan hanya kode esensial
- versi khusus tempat Anda dapat menyesuaikan apa yang Anda butuhkan dan yang tidak
- versi Sass jika Anda ingin mengatur variabel dan mixins Anda di SCSS.
Dalam tutorial ini saya akan memilih kode Lengkap dengan vanilla CSS, tetapi tentu saja Anda dapat memilih versi lain jika Anda ingin merampingkan situs Anda dan hanya menggunakan apa yang benar-benar Anda butuhkan..
Setelah Anda mengunduh dan membuka paket file zip, buka file index.html di browser Anda dan Anda akan melihat sesuatu seperti ini:
Yap, devs menyertakan tautan praktis dalam file indeks. Anda dapat membiarkannya seperti ini dan membuat file baru untuk prototipe Anda dengan nama home.html atau yang serupa, tetapi Anda tidak benar-benar perlu menyimpannya karena Anda dapat dengan mudah mencapai Dokumentasi Yayasan kapan pun Anda mau.
Buka file index.html di editor kode favorit Anda dan hapus semua yang ada di dalamnya bagian, tetapi sebelum penutupan Aturan gaya yang kami tambahkan ke app.css file untuk membuat prototipe kami adalah: Sebagai Foundation 5 menggunakan unit relatif, kita perlu menggunakan “em”-s atau “rem”-s bukannya piksel untuk mengikuti aturan. (Anda dapat membaca tentang unit CSS: Pixel vs ems vs% di sini.) Saya menggunakan ekstensi Firebug Firefox untuk menentukan di mana saya harus menimpa aturan CSS Foundation 5, Anda dapat menggunakan ekstensi browser pengembangan web lainnya jika Anda mau. Di sini, di cuplikan CSS singkat ini, kami hanya perlu mengganti CSS default Foundation hanya sekali, pada aturan terakhir (.row .row.popular-main). Seperti apa bentuk situs demo sekarang: Menggunakan aturan yang sama seperti sebelumnya, kami akan menambahkan lebih banyak konten ke bagian utama halaman. Konten yang akan kami tambahkan sekarang adalah Posting terbaru dengan thumbnail kecil. Foundation 5 memiliki gaya thumbnail yang sudah disiapkan sebelumnya yang akan kami gunakan di Langkah ini. Thumbnail Yayasan gunakan a kelas CSS pra-bangun disebut “th” yang perlu kita tambahkan ke gambar yang ingin kita tampilkan sebagai gambar mini dengan cara yang bisa Anda lihat dalam cuplikan kode di bawah ini. Untuk setiap Posting Terbaru kami menambahkan baris baru di bawah Panel Populer dengan kelas kustom CSS disebut “posting terbaru”. Pada ukuran tablet dan desktop, kami akan menampilkan thumbnail kecil menggunakan kelas thumbnail Foundation di sebelah kiri, dan judul serta deskripsi singkat di sebelah kanan. Di seluler, tajuk utama dan uraiannya akan berada di bawah gambar kecil. Sekarang saya menggunakan “menengah-3 kolom” dan “menengah-9 kolom” kelas untuk membuat mereka membagi layar menjadi 1: 3, 25% untuk gambar dan 75% untuk teks naik dari ukuran sedang. Masukkan potongan kode berikut di bawah Panel Populer tiga kali (untuk tiga Posting Terbaru). Di sini saya hanya memasukkan kode satu baris Postingan Terbaru, karena semuanya menggunakan markup HTML yang sama, hanya kontennya yang berbeda. Konten Posting Terbaru ... File CSS khusus kami dibuat pada Langkah 4.3, app.css juga mendapat beberapa aturan gaya baru untuk menjaga tampilan demo tetap rapi. Catatan: Jika Anda ingin menambahkan CSS khusus Anda sendiri ke Foundation, jangan pernah lupa untuk memeriksa, dengan alat web dev, di mana Anda harus mengganti aturan default. Dalam cuplikan CSS di bawah ini, kita perlu menimpanya di aturan pertama (.row .row.latest-post). Pada aturan kedua cukup menggunakan pemilih kustom kita sendiri (.latest-post h4). Prototipe kami sekarang terlihat seperti ini: Pada langkah ini kita akan menambahkan pagination keren di bawah Posting Terbaru. Foundation 5 membantu kita dengan kelas paginasi yang nyaman dan siap pakai. Kami menggunakan kode yang sama pada langkah ini yang dapat Anda temukan di “Maju” bagian di dalam Pagination Documents. Berikut adalah Posting Terbaru dengan bagian Pagination yang baru ditambahkan: Sekarang kita siap dengan konten utama dari situs demo kita, saatnya untuk mengisi sidebar kanan. Bilah sisi kanan akan tergelincir di bawah konten utama pada ukuran ponsel dan tablet. Anda harus memasukkan semua potongan kode di bagian ini di dalam Bilah sisi kiri akan berisi Formulir Pendaftaran Newsletter (1), Video Terbaru (2) dan Menu Bilah Samping bergaya akordion di bawah nama panggilan “Cookbook kami” (3). Pada akhir langkah ini kami akan siap dengan demo kami yang akan terlihat seperti ini: Untuk membuat formulir di Foundation 5, Anda tidak perlu melakukan apa pun, cukup tempatkan kotak di dalam a Tag HTML. Jika Anda melihat potongan kode di bawah ini, Anda akan melihat bahwa kami meletakkan formulir di baris di mana kami menetapkan pemilih CSS yang berbeda untuk semua 3 kisi: “kecil-12”, “sedang-9”, dan “besar-12”. Kami memilih solusi ini karena Formulir Nawala 100% lebar terlihat keren pada ukuran ponsel, tetapi sangat canggung pada ukuran tablet karena menjadi sangat lebar. Untungnya Yayasan 5 memungkinkan kita menggunakannya “Baris tidak lengkap”: kita hanya perlu menambahkan “akhir” kelas ke definisi kelas CSS dari kolom tidak lengkap. Jadi inilah yang akan terjadi di sini: pada ukuran seluler bilah samping akan ditampilkan di bawah konten utama dengan Formulir Pendaftaran Nawala yang mencakup seluruh layar. Pada ukuran sedang bilah samping akan tetap berada di bawah konten utama, tetapi Formulir Nawala hanya akan mencakup 75% layar, dan 25% sisanya akan tetap kosong. Pada ukuran desktop bilah samping akan berada tepat di sebelah konten utama, dan Formulir Nawala akan mencakup seluruh lebar bilah samping lagi. Lihat Grid Documents untuk membaca lebih lanjut tentang Baris Tidak Lengkap. Sekarang lihat di dalam header margin-bottom: 2em; .popular-tambahan h4 ukuran font: 1.125em; margin-top: 0.4em; .row .row.popular-main margin-bottom: 1.5em;
4.4 Menambahkan Beberapa Konten Lainnya
Judul Posting Terbaru
.baris .row.latest-post margin-bottom: 1.5em; .test-post h4 margin-top: 0; ukuran font: 1.125em;
4.5 Menambahkan Pagination
5. Mengisi Sidebar
5.1 Formulir Newsletter
Mendaftar Untuk Newsletter Kami
Formulir Foundation memiliki banyak opsi tata letak lain seperti Label Awalan, Label Radius Awalan, Tombol Postfix, dan Label Postfix. Kami memilih opsi Tombol Postfix di sini karena lebih ramah pengguna: pengguna dapat mengkliknya dan mengirim formulir sekaligus.
Di dalam formulir kami akan menambahkan baris bersarang baru yang membagi layar menjadi 2: 1. Input teks akan mendapatkan 8 kolom dan tombol postfix akan mendapatkan 4. Karena kami ingin memiliki tata letak ini bahkan di layar ponsel, kami akan mengatur “kolom-8 kecil” dan “kolom kecil-4” Penyeleksi-CSS di sini, Kotak Kecil menjadi ukuran terkecil tempat kami ingin menerapkan markup ini.
Anda dapat melihat hal baru lainnya dalam kode HTML di atas yang merupakan “keruntuhan baris” kelas. Ini adalah gaya bawaan Foundation 5. Secara default ada selokan antara dua kolom yang berdekatan, tetapi jika kita menambahkan “jatuh” kelas ke baris kami, selokan akan hilang. Kami melakukan ini karena kami ingin tombol berada tepat di sebelah input teks tanpa spasi di antara mereka.
Sekarang saatnya memasukkan potongan kode ini ke dalam
5.2 Flex Video
Di bawah Bagian Nawala, kami akan menambahkan Resep Video Harian ke bilah sisi kami. Foundation 5 membantu kita membuat video yang tertanam responsif dan memaksa mereka untuk menskala secara otomatis dengan fitur Video Flex-nya.
Video Flex menggunakan built-in “flex-video” Kelas CSS. Kami membuat baris baru untuk bagian sidebar Resep Video Harian dan menempatkan satu kolom lebar di dalamnya dengan “small-12 medium-9 large-12 kolom berakhir” Penyeleksi CSS untuk alasan yang sama kami menggunakan baris tidak lengkap di Medium Grid pada langkah sebelumnya.
Berikut adalah kode yang perlu Anda rekatkan di bawah Bagian Newsletter. Anda dapat menggunakan video apa pun dari Youtube, Vimeo dll.
Resep Video Harian
5.3 Menu Sidebar
Untuk Menu Bilah Samping, kami akan menggunakan fitur Akordeon Foundation 5. Akordeon adalah elemen web yang memperluas dan menciutkan konten menjadi bagian logis.
Di situs demo kami, bagian logis ini adalah 3 grup makanan yang berbeda (Hidangan Utama, Makanan Ringan, Makanan Penutup), dan masing-masing kelompok berisi kelompok yang lebih kecil seperti “Unggas”, “Babi”, “Daging sapi”, “Vegetarian”.
Kami menempatkan seluruh Accordion sidebar ke dalam satu kolom lebar dengan logika yang sama seperti pada Langkah 5.1 dan 5.2. Kami menempatkan akordeon di dalamnya sebagai daftar tidak berurutan dengan kelas CSS bawaan yang sesuai seperti “akordeon” dan “navigasi akordeon”.
Saat Foundation Accordions berfungsi dengan JavaScript, Anda dapat menyesuaikan perilakunya dengan bantuan variabel JavaScript yang dibuat sebelumnya jika Anda mau. Untuk melakukannya, lihat “Konfigurasi JavaScript Opsional” bagian dalam Dokumen Akordeon. Cuplikan kode berikut ini muncul di bawah bagian Video Flex di dalam file index.html.
Kesimpulan
Sekarang kita siap dengan situs demo kami, mari kita lihat apa lagi yang dapat Anda capai dengan Foundation 5. Elemen yang kami gunakan dalam demo ini hanyalah seperangkat fitur kerangka kerja Foundation. Ada banyak hal lain yang dapat Anda manfaatkan dalam desain Anda, seperti Icon Bar yang dapat disesuaikan, Breadcrumbs, Lightboxes, Range Slider, Validasi Formulir, dan banyak lainnya. Documents ditulis dengan sangat baik dan membantu pengembang dengan banyak contoh kode.
Jika Anda terbiasa dengan Sass, Anda memiliki lebih banyak opsi karena setiap bagian di Documents menjelaskan bagaimana Anda bisa membuat mixin Anda sendiri, dan variabel-variabel Sass mana yang dapat Anda gunakan untuk menyesuaikan situs Anda. Sebelum Anda mulai merancang halaman web Anda, jangan lupa untuk memeriksa kompatibilitas kerangka kerja Foundation untuk memastikan itu berfungsi pada semua browser yang Anda butuhkan untuk membangun.
- Lihat Demo
- Sumber Unduhan
