Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Salvattore

Membuat Grid Dinamis Dengan Salvattore dan Bootstrap Dalam 10 Menit

by
Difficulty:IntermediateLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Yosef Andreas (you can also view the original English article)

Salvattore menggembar-gemborkan dirinya sebagai alternatif jQuery Masonry dengan satu perbedaan penting: itu menggunakan konfigurasi CSS bukannya JavaScript. Jenis grid ini dapat dilihat di seluruh web, mungkin yang paling terkenal pada Pinterest.

Hari ini, kita akan menggunakan Salvattore dikombinasikan dengan Twitter Bootstrap 3 untuk membuat struktur grid mengalir secara responsif yang menakjubkan.

Memulai: Apa Yang Akan Kamu Butuhkan

Pertama-tama, kamu perlu mengambil librari Salvattore JavaScript (minified atau sumber). Berikutnya, kamu akan ingin menautkannya dengan CSS Twitter Bootstrap. Alih-alih mendownload dan hosting salinan sendiri, kita akan meminjam ini langsung dari BootstrapCDN milik NetDNA.

Setelah ini selesai, kamu siap untuk memulai dengan mengkonfigurasi Salvattore!

Berikutnya, kamu akan membutuhkan entah stylesheet eksternal atau sebuah tag <style type='text/CSS'> dalam header. tag in your header. tag in your header. tag in Kebanyakan dari kerja kita akan dilakukan dalam stylesheet.

Catatan: kamu harus mencantumkan atribut type dan rel untuk Salvattore untuk berkerja dengan benar.

Dasar Singkat Grid Bootstrap

Twitter Bootstrap menyediakan sebuah struktur grid fleksibel yang ampuh dan fokus pada query media dari bawah ke atas. Mari lihat pada baris umum kolom.

Kamu akan menyadari dalam markup di atas pola col-[size]-[column number]. Dg ukuran tersedia xs, sm, md, dan lg, kita dapat mengatur ukuran kolom yang berbeda untuk breakpoint yang berbeda tanpa menuliskan query media yang spesifik. Lihat contoh ini yang menunjukkan bagaimana kolom berubah pada lebar layar yang berbeda.

Bootstrap Panels

Kita akan membuat sebuah grid mengalir menggunakan komponen panel Bootstrap. Markup untuk membuat panel dibangun seperti ini:

Menempatkannya Bersama-sama Dengan Salvattore Magic

Sekarang setelah kita memiliki potongan Bootstrap yang kita  butuhkan, kita akan meletakkan semuanya bersama-sama dengan Salvattore. Untuk sekarang, kita akan mulai dengan enam panel kosong; nantinya, kita akan membuat semuanya dinamis untuk memberikan beberapa konten pada tiap panel.

Agar Salvattore berkerja dengan benar, kontainer grid kita membutuhkan atribut data-columns. Berikut adalah tampak sementara markup kita:

Berikutnya, kita akan pergi ke stylesheet kita dan menambahkan label berikut via pseudo-elements:

Breakpoint yang telah kita pilih memetakan langsung ke query media Bootstrap. Salvattore menggunakan pseudo-element ::before dan atribut content untuk menentukan class kolom yang dibuat, dan kemudian berusaha untuk memecah elemen secara merata ke dalam kolom tersebut.

Membuatnya Dinamis

Kita telah menjaga secara ketat dalam CSS sejauh ini, namun jika kamu ingin melangkah lebih jauh, JavaScript dapat menawarkan barang-barang bagus.

Salvattore membawa hal-hal selangkah lebih jauh dengan menawarkan fungsionalitas penambahan. Dengan function dan sebuah koneksi ke API (kita menggunakan Google's Book API untuk menarik buku oleh Ernest Hemingway), kita dapat menggunakan grid dinamis. Berikut JavaScript yang akan kita gunakan:

Catatan: Diperlukan jQuery

Pertama-tama buat sebuah function append yang membawa judul dan konten, dan membungkusnya dalam markup panel. Kemudian kita menggunakan function salvattore['append_elements'](grid, [item]) untuk menambahkan item ke grid kita. Terakhir, kita menjalankan panggilan AJAX untuk menarik data dinamis.

Agar ini berkerja dengan benar, kita akan ingin menghilangkan semua konten di dalam grid holder.

Salvattore akan mengisi kolom untuk kita.

Markup final akan tampak seperti ini:

Kesimpulan

Salvattore membuat grid bergaya Masonry yang dinamis sangat mudah bagi seseorang yang tidak tahu banyak tentang JavaScript. Dengan mengatakan itu, dengan jumlah kecil JavaScript, membuat grid dinamis dan dipasangkan dengan konten dinamis terasa sangat menyenangkan. Terakhir, Bootstrap menyediakan struktur penamaan class yang fleksibel untuk membangun grid dengan mudah untuk breakpoint manapun.

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.