Birthday Sale! Up to 40% off unlimited courses & creative assets Birthday Sale! Save up to 40%!
Advertisement
  1. Web Design
  2. Flexbox
Webdesign

Tip Singkat: Cara Membangun Layout Blog dengan Bulma

by
Difficulty:IntermediateLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Imam Firmansyah (you can also view the original English article)

Dalam tips singkat ini, kita akan menggunakan Bulma, CSS Framework berbasis Flexbox yang populer yang dibuat oleh Jeremy Thomas, untuk membangun tata letak blog yang responsif.

Seperti biasa, untuk mendapatkan ide awal tentang apa yang akan kita buat, lihat demo terkait pada Codepen (lihat versi yang lebih besar untuk pengalaman yang lebih baik):

Memulai dengan Bulma

Bulma hanya membutuhkan satu file CSS saja. Anda dapat mengambil salinan file ini dengan mengunjungi halaman GitHub-nya, melalui manajer paket (misalnya npm), atau CDN (mis. cdnjs).

Untuk tutorial ini, kita akan memilih opsi terakhir. Jadi, kami menempatkan link ke file yang dibutuhkan dalam <head> di dokumen HTML kami.

Sekarang, kita siap untuk mulai membangun layout blog!

Membangun Layout

Grid kami akan memiliki lebar maksimum dan akan dipusatkan secara horizontal. Untuk mencapai hal ini, kami menggunakan bantuan class pada Bulma bernama section dan container.

Pada layar kecil semua artikel harus ditumpuk secara vertikal, seperti ini:

Bulma mobile layout

Bulma secara default, dirancang mengutamakan perangkat mobile, menempatkan artikel di atas satu sama lain di bawah lebar viewport 769px. Yang harus kita lakukan adalah membangun layout blog saat viewport melebihi 768px.

Untuk melakukan itu, kita hanya membutuhkan satu elemen: tile. Seperti yang akan Anda lihat sebentar lagi, triknya adalah menyarangkan beberapa elemen tile.

Dengan pemikiran tersebut, mari kita lihat lebih dekat tata letak desktop yang diinginkan. Seperti yang dapat Anda lihat dari visualisasi berikut, ini terdiri dari tiga baris:

Untuk setiap baris, Bulma mengharapkan setidaknya hirarki seperti ini:

Mari Kita Jelaskan:

  • Kita mulai dengan tingkat elemen tile paling atas yang berisi semua elemen tile lainnya.
  • Di dalamnya, kita menambahkan elemen tile yang disalurkan pada sumbu horizontal. Ditambah lagi, berdasarkan grid dua belas kolom, kita dapat menetapkan lebar spesifik untuk elemen-elemen ini. Hal ini dimungkinkan dengan menggunakan class is-* dimana * adalah angka antara 1 dan 12. Misalnya, elemen tile dengan class is-6 akan menempati 50% ruang horizontal.
  • Untuk menumpuk elemen tile secara vertikal, kita menggunakan kelas is-vertical.
  • Begitu kita ingin menambahkan konten ke elemen tile, kita tetapkan kelas is-child ke dalamnya dan kelas is-parent ke induk element tile.

Pada tahap ini kita siap untuk menerapkan teori ini.

Baris #1

Baris pertama berisi tiga kolom. Kolom pertama dan ketiga menempati seperempat lebar baris, sedangkan yang kedua menghabiskan satu setengah dari lebar baris. Selain itu, kolom ketiga terdiri dari dua anak kolom.

Berdasarkan apa yang telah kita bahas di atas, inilah markup yang dibutuhkan:

Perhatikan bahwa kita mendefinisikan lebar tertentu hanya untuk kolom kedua melalui class is-6. Tentu, jika kita mau, kita bisa menambahkan kelas is-3 ke kolom pertama dan ketiga juga. Tapi ini tidak diperlukan karena kedua kolom semakin meningkat (mereka memiliki flex-grow: 1) untuk berbagi ruang horisontal yang tersisa.

Selain itu, hanya untuk styling, kami menetapkan beberapa class kustom untuk setiap artikel. Dan untuk kesederhanaan, kami menghilangkan isi artikel.

Baris #2

Mirip dengan baris pertama, baris kedua berisi tiga kolom. Yang pertama menempati satu setengah dari lebar baris, sedangkan yang kedua dan ketiga menempati seperempat lebar baris. Selanjutnya, kolom kedua mencakup dua anak kolom.

Inilah markup terkait:

Baris #3

Baris ketiga sedikit lebih rumit; Di sini kita memiliki dua kolom. Yang pertama dua kali lebih besar, relatif terhadap yang kedua. Dalam kolom pertama, kita memiliki dua sub-baris. Sub-baris pertama berisi tiga kolom berukuran sama, sedangkan sub-baris kedua mencakup dua kolom berukuran sama.

Markup untuk kasus ini adalah sebagai berikut:

Seperti yang akan Anda lihat dari kode di atas, hierarki bersarang akan terlihat seperti ini:

Jika Anda ingin mendapatkan ide yang lebih baik tentang bagaimana elemen tile bekerja, pastikan untuk memeriksa dokumentasi dan juga menggunakan alat pengembang browser favorit Anda untuk memeriksa kelas terkait.

Dukungan Browser

Flexbox sekarang sangat mendukung, dan tata letak blog kita karenanya harus bekerja di semua browser modern.

Namun, saat saya menguji halaman diberbagai browser, Saya menemukan bahwa IE 11 tidak menghasilkan hasil yang diinginkan. Inilah yang Saya lihat:

Di sisi lain, pengujian dengan Microsoft Edge Saya tidak menemukan masalah ini. Mungkin itu semacam bug dengan versi terbaru IE. Bagaimana pun, saya mencoba untuk melihat apakah ada perbaikan cepat untuk menghindari masalah ini.

Saya memecahkannya dengan menambahkan flex-basis: auto ke artikel dan elemen tile tingkat atas dari element tile vertikal dari baris ketiga (lihat hierarki sebelumnya).

Sekali lagi, ini adalah solusi singkat yang tampaknya bekerja untuk contoh khusus ini. Untuk implementasi Anda sendiri, Anda mungkin harus membuat beberapa perubahan lain dalam kode Anda.

Kesimpulan

Dalam tip singkat ini, kami belajar bagaimana membangun grid blog yang responsif dengan Bulma, kerangka kerja yang dibangun di atas Flexbox.

Pernahkah Anda mencoba Bulma dalam proyek Anda? Apa yang kamu pikirkan tentang itu? Bagikan pengalaman Anda pada komentar di bawah ini.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.