Advertisement
  1. Web Design
  2. HTML & CSS

Membangun Portofolio Grid Dribbble dengan Flexboxgrid dan Jribbble

by
Read Time:5 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Biyan Pasau (you can also view the original English article)

Membangun dengan grid telah menjadi kewajiban bagi developer front-end. Grid tidak hanya memberikan irama yang harmonis dan konsistensi dalam desain, tetapi ketika struktur grid yang terkenal digunakan, hal tersebut memberikan bahasa desain kolektif sederhana untuk tim kerja.

Flexboxgrid adalah framework baru yang memungkinkan Anda menggabungkan prediktabilitas dan struktur bahasa umum dari sistem grid dengan fleksibilitas dan kesederhanaan flexbox. Hari ini, kita akan mempelajari dasar-dasar menggunakan Flexboxgrid, dan menggunakannya untuk membangun halaman portfolio feed Dribbble sederhana. Mari mulai!

Memulai dengan CSS Flexboxgrid

Langkah pertama untuk memulai dengan Flexboxgrid adalah dengan mengambil CSS-nya. Untuk pengembangan, gunakan versi yang tidak dikecilkan (unminified).

Selanjutnya, mari kita membahas tentang bagaimana Flexboxgrid bekerja. Dokumentasi sepenuhnya tercakup di beranda Flexboxgrid.com, namun kita akan membahas poin-poin yang penting.

Kolom Responsif

Flexboxgrid dibangun untuk mendukung empat breakpoints utama, dinamakan "seenaknya" untuk menghindari masalah pemeliharaan breakpoint pixel-spesifik. Breakpoints tersebut adalah hand, lap, desk, dan wall, dinamai sesuai dengan apa yang dilihat sebagai tangan (hand), pangkuan (lap), meja (desk) dan dinding (wall) pada lebar viewport (ie: dimana perangkat mungkin menemukan dirinya sendiri). Kelas kolom itu sendiri disusun seperti ini:

Flexboxgrid adalah dua belas kolom grid, dan menggunakan kolom berbasis persentase (%) dengan kombinasi kekuatan flexbox untuk grid yang kokoh.

Catatan: dukungan browser untuk flexbox belum lengkap; Jadi sebaiknya tidak terlalu bergantung pada Flexboxgrid untuk proyek yang mewajibkan implemetasi cross-browser.

Contoh Baris

Mengambil langsung dari dokumentasi, markup untuk contoh baris yang menggunakan Flexboxgrid terlihat seperti ini:

Kolom Otomatis (Auto)

Ada lebar kolom "auto" yang tersedia di masing-masing breakpoint. Ini melakukan sesuatu yang berbeda dari aturan width: auto tradisional. Flexbox secara otomatis akan mengisi baris dengan tepat dengan kolom berukuran rata tanpa memperhatikan berapa banyak yang ditempatkan di baris.

Misalnya, dalam contoh di atas, masing-masing kolom akan mengambil hingga sepertiga.

Penjajaran (Alignment)

Ada lebih banyak yang dapat dilakukan dengan Flexboxgrid, termasuk penjajaran kolom dari baris secara horizontal:

maupun vertikal:

Flexboxgrid juga memanfaatkan teknik penataan ulang (reordering) dan pilihan spasi dinamis (dinamic spacing) Flexbox yang mudah, namun untuk saat ini kita akan fokus membuat grid Dribbble!

Grid Dribbble

Kita akan mulai dengan dokumen HTML kosong sederhana, termasuk jQuery dan Normalisasi. Jangan ragu untuk menggunakan sesuatu seperti HTML5 Boilerplate dengan tool seperti Modernizr, tapi untuk proyek ini kita akan tetap fokus pada JavaScript, HTML, dan CSS yang perlu Anda tulis sendiri.

Dari sini, kita akan membangun struktur HTML yang ingin kita gunakan, dan kemudian kita akan menghubungkan semuanya dengan API Dribbble.

Markup Grid Kita

Pertama, katakanlah kita ingin membuat grid yang dimulai dengan minimal dua blok per baris horizontal, dan bergerak hingga enam blok per baris di breakpoint wall. Berikut adalah bagaimana kita akan melakukannya:

column-6--hand menyatakan bahwa pada breakpoint hand (untuk perangkat yang bisa digenggam) setiap blok akan mengisi enam dari dua belas kolom. Oleh karena itu, kita bisa memasukkan dua thumbnail Dribbble pada satu baris layout kita saat ini.

Pada breakpoint lapcolumn-4--lap menentukan bahwa setiap blok akan selebar empat kolom, demikian kita bisa memuat tiga dalam satu baris.

Markup Yang Lebih Dinamis

Katakanlah kita ingin membuat grid menjadi lebih dinamis. Berikut adalah contoh grid baris menggunakan lebar auto dan variabel lebar.

Catatan: di breakpoint "wall", kita sebenarnya memiliki grid lima berseberangan; Ini biasanya tidak mungkin dilakukan dengan sistem grid dua belas kolom tanpa menambahkan kustom class, karena dua belas tidak dapat dibagi lima. Namun, dengan Flexbox, lebar kolom dapat dengan mudah dihitung secara otomatis.

Memasukkan Jribbble

Sekarang kita memiliki struktur grid, mari menulis kode yang diperlukan untuk membawa konten Dribbble kita. Kita akan menggunakan plugin jQuery bernama Jribbble. Anda dapat mengambil sumbernya dari GitHub. Jribbble akan membuatnya sangat mudah untuk mengambil "shot" dari Dribbble.

Sertakan Jribbble dalam file JS yang terpisah, atau di bagian atas script.js Anda. Di bawah Jribbble, kode ini akan membawa gambar Dribbble yang Anda inginkan.

Pertama-tama, bungkus kode kita dalam ekspresi fungsi yang langsung dipanggil, yang memastikan melindungi cakupan JavaScript kita. Selanjutnya, tetapkan ID "player" kita, dan selanjutnya menggunakan Jribbble untuk membawa "shot" kita. Setelah memiliki "shot", kita membangun html oleh iterasi atas setiap shot, dan mengisi sebuah elemen dengan class dribbble-shot dengan html tersebut.

Struktur HTML kita akan terlihat seperti ini:

Perhatikan bahwa kita juga menyertakan Google Font.

Minimal Styling

Selanjutnya, kita akan memberikan sentuhan minimal pada style.css:

Produk akhir Anda akan terlihat seperti ini:

Kesimpulan

Flexboxgrid menawarkan solusi grid yang sangat fleksibel yang memungkinkan beberapa kontrol yang sangat menarik terhadap jarak, ukuran, tampilan, dan bahkan urutan elemen. Ketika dikombinasikan dengan konten yang menarik, Flexboxgrid memungkinkan Anda untuk dengan mudah melakukan apa yang sebelumnya jauh lebih rumit dengan grid Anda.

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.