Bina Laman Web Superfast dengan Yayasan 5 [Panduan]
Menggunakan rangka frontend dapat meningkatkan aliran kerja reka bentuk web anda dalam banyak cara. Ia boleh membantu anda mengikuti prinsip reka bentuk moden seperti pendekatan pertama mudah alih, markup semantik dan reka bentuk responsif. Awak boleh mengambil leverage dari banyak elemen CSS dan JavaScript sedia digunakan dan ketara mempercepat proses pembangunan anda, membebaskan lebih banyak masa untuk memberi tumpuan kepada reka bentuk pengalaman visual dan pengguna.
Yayasan Zurb 5 adalah salah satu rangka kerja frontend yang paling kuat di pasaran. Ia dibina secara logik, mudah digunakan dan sepenuhnya bebas. Ia membolehkan anda menggunakan grid CSS fleksibel itu memudahkan dalam mewujudkan susun atur yang bersih dan mesra pengguna. Kerangka Yayasan juga diuji dengan sangat ketat, sehingga dapat menjaga keserasian lintas-browser dan keserasian lintas-peranti.
Dalam tutorial ini, saya akan menunjukkan kepada anda bagaimana anda boleh membina laman web superfast dengan Zurb Foundation 5. Anda boleh melihat hasil akhir pada halaman demo.
Saya akan membuat susun atur laman web, tugas menambah unsur reka bentuk yang halus sedang menunggu untuk anda. Laman web yang akan kami buat bersama dalam tutorial ini akan mencapai impian pereka UX moden: ia akan responsif, mudah alih pertama, mesra pengguna, dan semantik.
Disebabkan panjang panduan ini, berikut adalah pintasan untuk sampai ke bahagian yang anda mahu dengan cepat:
- Memuat turun Yayasan 5
- Memahami Grid
- Bila Menggunakan Kelas Besar-N, Medium-N Dan Kecil-N
- Menambah Bar Menu Teratas
- Mengandung Bahagian Utama
- Menambah Panel Untuk Posts Popular
- Menambah 3 Lebih Banyak Catatan Kepada Panel Popular
- Prettying CSS
- Menambah Beberapa Kandungan Lebih Banyak
- Menambah Penomboran
- Mengandungi Sidebar
- Borang Surat Berita
- Video Flex
- Menu Sidebar
- Kesimpulannya
1. Memuat turun Yayasan 5
Anda boleh memuat turun Yayasan 5 dalam 4 bentuk yang berbeza:
- kod lengkap
- versi yang lebih ringan dengan hanya kod penting
- versi khusus di mana anda boleh menyesuaikan apa yang anda perlukan dan apa yang tidak
- versi Sass jika anda mahu menetapkan pembolehubah dan campuran anda dalam SCSS.
Dalam tutorial ini saya akan memilih kod lengkap dengan CSS vanila, tetapi sudah tentu anda boleh memilih versi lain jika anda ingin menyelaraskan laman web anda dan hanya menggunakan apa yang anda perlukan.
Selepas anda memuat turun dan membongkar fail zip, buka fail index.html dalam penyemak imbas anda dan anda akan melihat sesuatu seperti ini:
Yep, devs termasuk pautan berguna dalam fail indeks. Anda boleh meninggalkannya dengan cara ini dan membuat fail baru untuk prototaip anda dengan nama home.html atau sesuatu yang serupa, tetapi anda tidak perlu menyimpannya kerana anda boleh dengan mudah mencapai Dokumentasi Yayasan apabila anda mahu.
Buka fail index.html dalam editor kod kegemaran anda dan hapus segala-galanya di dalamnya seksyen, tetapi sebelum penutupan Peraturan gaya yang kita tambahkan kepada app.css fail kepada prototaip kami adalah: Oleh kerana Foundation 5 menggunakan unit relatif, kita perlu gunakan “em”-s atau “rem”-bukannya piksel untuk bersaing dengan peraturan. (Anda boleh membaca tentang unit CSS: Pixels vs ems vs% di sini.) Saya menggunakan pelanjutan Firebug Firefox untuk menentukan di mana saya harus mengatasi peraturan CSS Foundation 5, anda boleh menggunakan sambungan pelayar pembangunan web yang lain jika anda mahu. Di sini dalam cuplikan CSS pendek, kita hanya perlu mengatasi CSS lalai Foundation hanya sekali, pada peraturan yang terakhir (.row .row.popular-utama). Inilah yang kelihatan seperti tapak demo sekarang: Menggunakan peraturan yang sama seperti sebelum ini kami akan menambah lebih banyak kandungan ke bahagian utama halaman. Kandungan yang akan kami tambah sekarang akan menjadi Catatan Terkini dengan lakaran kecil. Yayasan 5 mempunyai gaya imej kecil yang telah disediakan terlebih dahulu yang akan kami gunakan dalam Langkah ini. Thumbnail Foundation menggunakan a kelas CSS pra-dibina dipanggil “th” yang perlu kita tambahkan pada imej yang ingin kita paparkan sebagai gambar kecil dengan cara anda dapat melihatnya dalam coretan kod di bawah. Untuk setiap Post Terkini kami menambah baris baru di bawah Panel Popular dengan kami kelas CSS tersuai dipanggil “jawatan terkini”. Pada saiz tablet dan desktop, kami akan menunjukkan lakaran kecil menggunakan kelas thumbnail Foundation di sebelah kiri, dan tajuk dan penerangan ringkas di sebelah kanan. Di telefon bimbit, tajuk utama dan penerangan akan berada di bawah lakaran kecil. Sekarang saya menggunakannya “medium-3 tiang” dan “medium-9 tiang” kelas untuk menjadikan mereka membahagi skrin menjadi 1: 3, 25% untuk imej dan75% untuk teks dari saiz sederhana. Masukkan coretan kod berikut di bawah Panel Popular tiga kali (untuk tiga Terkini). Di sini saya hanya memasukkan kod satu baris Iklan terkini, kerana mereka semua menggunakan markup HTML yang sama, hanya kandungan yang berbeza. Kandungan Terbaru ... Fail CSS tersuai kami dibuat dalam Langkah 4.3, app.css juga mendapat beberapa peraturan gaya baru untuk menjaga rupa demo kemas. Catatan: Jika anda ingin menambahkan CSS khusus anda kepada Yayasan, jangan lupa untuk memeriksa, dengan alat web dev, di mana anda perlu mengatasi peraturan lalai. Dalam coretan CSS di bawah, kita perlu mengatasi mereka dalam peraturan pertama (.row.row.latest-post). Dalam peraturan kedua sudah cukup untuk menggunakan pemilih tersuai kami sendiri (.latest post h4). Prototaip kami kini kelihatan seperti ini: Dalam langkah ini kita akan menambah penomboran yang sejuk di bawah Post Terkini. Yayasan 5 memberi kita bantuan dengan kelas penomboran yang mudah digunakan. Kami menggunakan kod yang sama dalam langkah ini yang boleh anda dapati di “Advanced” bahagian dalam Dokumen Pagination. Berikut adalah Post Terkini dengan seksyen Penambahan yang baru ditambah: Sekarang kita sudah siap dengan kandungan utama laman demo kami, sudah tiba masanya untuk mengisi bar sisi kanan. Bar sisi kanan akan tergelincir di bawah kandungan utama pada saiz mudah alih dan tablet. Anda perlu memasukkan semua coretan kod dalam bahagian ini di dalam Bar sisi kiri akan mengandungi Borang Daftar Surat Berita (1), Video Terkini (2) dan Menu Sidebar gaya akordion di bawah nama panggilan “Buku masakan kami” (3). Pada akhir langkah ini kami akan bersedia dengan demo kami yang akan kelihatan seperti ini: Untuk membina borang di Yayasan 5, anda tidak perlu melakukan apa-apa lagi, hanya letakkan grid di dalam a Tag HTML. Sekiranya anda melihat coretan kod di bawah, anda akan melihat bahawa kami meletakkan borang berturut-turut di mana kami menetapkan pemilih CSS yang berbeza untuk semua 3 grid: “kecil-12”, “sederhana-9”, dan “besar-12”. Kami memilih penyelesaian ini kerana Form Newsletter luas 100% kelihatan sejuk pada saiz mudah alih, tetapi ia benar-benar canggung pada saiz tablet kerana ia menjadi sangat lebar. Luckily Foundation 5 membolehkan kami menggunakannya “Baris Tidak Selesai”: kita hanya perlu menambah “akhir” kelas kepada definisi kelas CSS bagi lajur yang tidak lengkap. Jadi inilah yang akan berlaku di sini: pada saiz mudah alih bar sisi akan dipaparkan di bawah kandungan utama dengan Borang Daftar Surat Berita yang meliputi seluruh skrin. Pada saiz sederhana bar sisi akan tetap di bawah kandungan utama, tetapi Borang Newsletter hanya akan meliputi 75% skrin, dan baki 25% akan tetap kosong. Pada saiz desktop, bar sisi akan berada di sebelah kandungan utama, dan Borang Newsletter akan meliputi lebar lebar sidebar sekali lagi. Lihat Dokumen Grid untuk membaca lebih lanjut mengenai Baris Tidak Selesai. Sekarang perhatikan di dalam header margin-bottom: 2em; .popular-tambahan h4 font-size: 1.125em; margin-top: 0.4em; .row .row.popular-main margin-bottom: 1.5em;
4.4 Menambah Beberapa Kandungan Lebih Banyak
Tajuk Post Terkini
.baris .row.latest-post margin-bottom: 1.5em; .latest-post h4 margin-top: 0; saiz fon: 1.125em;
4.5 Menambah Penomboran
5. Mengepung Sidebar
5.1 Borang Surat Berita
Daftar Kepada Surat Berita kami
Bentuk Yayasan mempunyai banyak pilihan susun atur lain seperti Label Awalan, Label Radius Awalan, Button Postfix, dan Label Postfix. Kami memilih pilihan Button Postfix di sini kerana ia lebih mesra pengguna: pengguna boleh mengklik padanya dan menghantar borang sekaligus.
Di dalam borang kami akan menambah baris bersarang baru yang membahagikan skrin kepada 2: 1. Input teks akan mendapat 8 lajur dan butang postfix akan mendapat 4. Seperti yang kita mahu mempunyai susun atur ini walaupun pada skrin mudah alih, kita akan menetapkan “kecil-8 tiang” dan “kecil-4 tiang” CSS-selectors di sini, Grid Kecil adalah saiz terkecil di mana kita ingin melaksanakan markup ini.
Anda boleh melihat satu lagi perkara baru dalam kod HTML di atas iaitu “runtuh baris” kelas. Ini adalah gaya terbina dalam Foundation 5. Secara lalai terdapat longkang di antara dua lajur bersebelahan, tetapi jika kita menambah “runtuh” kelas ke baris kami, longkang akan hilang. Kami melakukan ini kerana kami mahu butang itu bersebelahan dengan input teks tanpa sebarang ruang di antara mereka.
Kini sudah tiba masanya untuk memasukkan coretan kod ini ke dalam
5.2 Flex Video
Di bawah Bahagian Newsletter kami akan menambah Resipi Video Harian ke bar sisi kami. Yayasan 5 membantu kami membuat video terbenam responsif dan memaksa mereka untuk skala secara automatik dengan ciri Video Flexnya.
Video Flex menggunakan terbina dalam “flex-video” Kelas CSS. Kami membuat barisan baru untuk seksyen bar sisi Resipi Video Harian dan letakkan satu ruangan lebar di dalamnya dengan “kecil-12 medium-9 besar-12 tiang berakhir” Pemilih CSS atas sebab yang sama kami menggunakan baris yang tidak lengkap dalam Grid Sederhana dalam langkah sebelumnya.
Berikut adalah kod yang anda perlu tampal di bawah Seksyen Surat Berita. Anda boleh menggunakan mana-mana video dari Youtube, Vimeo dan sebagainya.
Resipi Video Harian
5.3 Menu Sidebar
Untuk Menu Sidebar, kami akan menggunakan ciri Accordion Yayasan 5. Akordion adalah elemen web yang mengembangkan dan meruntuhkan kandungan ke dalam bahagian logik.
Di laman demo kami, bahagian logik ini adalah 3 kumpulan makanan yang berlainan (Hidangan Utama, Hidangan Sampingan, Pencuci Mulut), dan setiap kumpulan mengandungi kumpulan yang lebih kecil seperti “Ayam”, “Babi”, “Daging lembu”, “Vegetarian”.
Kami meletakkan keseluruhan Sidebar Accordion ke dalam satu lajur yang luas dengan logik yang sama seperti dalam 5.1 dan 5.2 Langkah sebelumnya. Kami meletakkan akordion di dalamnya sebagai senarai tidak teratur dengan kelas CSS terbina dalam yang sesuai seperti “akordion” dan “navigasi accordion”.
Sebagai Akordion Foundation berfungsi dengan JavaScript, anda boleh menyesuaikan kelakuannya dengan bantuan pemboleh ubah JavaScript yang telah dibina jika anda mahu. Untuk berbuat demikian, lihat “Konfigurasi JavaScript Pilihan” seksyen dalam Dokumen Akordion. Coretan kod berikut datang di bawah bahagian Video Flex di dalam fail index.html.
Kesimpulannya
Sekarang kita sudah bersedia dengan tapak demo kami, mari lihat apa lagi yang boleh anda capai dengan Yayasan 5. Unsur-unsur yang kami gunakan dalam demo ini hanyalah sekumpulan kecil ciri-ciri rangka kerja Yayasan. Terdapat banyak perkara lain yang boleh anda gunakan dalam reka bentuk anda, seperti Bar Ikon yang disesuaikan, Breadcrumbs, Lightboxes, Slider Rentang, Borang Pengesahan, dan banyak lagi. Dokumen ini ditulis dengan baik dan mereka membantu pemaju dengan banyak contoh kod.
Jika anda sudah biasa dengan Sass anda mempunyai lebih banyak pilihan kerana setiap bahagian dalam Dokumen menerangkan bagaimana anda boleh membina mixin anda sendiri, dan pembolehubah Sass yang anda boleh gunakan untuk menyesuaikan laman web anda. Sebelum anda mula merancang halaman web anda jangan lupa untuk memeriksa keserasian rangka kerja Yayasan untuk memastikan ia berfungsi pada semua pelayar yang anda perlukan untuk membina.
- Lihat Demo
- Muat turun Sumber
