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:
1 |
column-[number]--[breakpoint] |
2 |
column-4--hand
|
3 |
column-auto--wall
|
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:
1 |
<div class="row"> |
2 |
<div class="column-12--hand |
3 |
column-8--lap
|
4 |
column-6--desk
|
5 |
column-4--wall"> |
6 |
<div class="box">Responsive</div> |
7 |
</div>
|
8 |
</div>
|
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.
1 |
<div class="row"> |
2 |
<div class="column-auto--hand"> |
3 |
<div class="box">auto</div> |
4 |
</div>
|
5 |
<div class="column-auto--hand"> |
6 |
<div class="box">auto</div> |
7 |
</div>
|
8 |
<div class="column-auto--hand"> |
9 |
<div class="box">auto</div> |
10 |
</div>
|
11 |
</div>
|
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:
1 |
<div class="row start"></div> |
2 |
|
3 |
<div class="row center"></div> |
4 |
|
5 |
<div class="row end"></div> |
maupun vertikal:
1 |
<div class="row top"></div> |
2 |
|
3 |
<div class="row middle"></div> |
4 |
|
5 |
<div class="row bottom"></div> |
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.
1 |
<!doctype html>
|
2 |
<html>
|
3 |
<head>
|
4 |
<link rel="stylesheet" href="css/normalize.css"> |
5 |
<link rel="stylesheet" href="css/flexboxgrid.css"> |
6 |
<link rel="stylesheet" href="css/style.css"> |
7 |
</head>
|
8 |
<body>
|
9 |
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> |
10 |
<script src="js/script.js"></script> |
11 |
</body>
|
12 |
</html>
|
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:
1 |
<div class="row"> |
2 |
<div class="column-6--hand column-4--lap column-3--desk column-2--wall"></div> |
3 |
<div class="column-6--hand column-4--lap column-3--desk column-2--wall"></div> |
4 |
<div class="column-6--hand column-4--lap column-3--desk column-2--wall"></div> |
5 |
<div class="column-6--hand column-4--lap column-3--desk column-2--wall"></div> |
6 |
<div class="column-6--hand column-4--lap column-3--desk column-2--wall"></div> |
7 |
<div class="column-6--hand column-4--lap column-3--desk column-2--wall"></div> |
8 |
</div>
|
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 lap, column-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.
1 |
<div class="row"> |
2 |
<div class="column-6--hand column-3--lap column-2--desk column-auto--wall"></div> |
3 |
<div class="column-6--hand column-3--lap column-4--desk column-auto--wall"></div> |
4 |
<div class="column-6--hand column-3--lap column-3--desk column-auto--wall"></div> |
5 |
<div class="column-6--hand column-3--lap column-3--desk column-auto--wall"></div> |
6 |
<div class="column-6--hand column-6--lap column-5--desk column-auto--wall"></div> |
7 |
<div class="column-6--hand column-6--lap column-7--desk column-12--wall"></div> |
8 |
</div>
|
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.
1 |
(function(){ |
2 |
var playerId = "envato"; |
3 |
$.jribbble.getShotsByPlayerId(playerId, function(data){ |
4 |
var shots = data.shots; |
5 |
var h = ''; |
6 |
$(shots).each(function(i, shot){ |
7 |
h += '<div class="column-6--hand column-4--lap column-3--desk column-2--wall">'; |
8 |
h += '<a href="' + shot.url + '"><img src="' + shot.image_teaser_url + '"></a>'; |
9 |
h += '</div>'; |
10 |
});
|
11 |
$('.dribbble-shots').html(h); |
12 |
});
|
13 |
}());
|
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:
1 |
<!doctype html>
|
2 |
<html>
|
3 |
<head>
|
4 |
<link href='http://fonts.googleapis.com/css?family=Maven+Pro' rel='stylesheet' type='text/css'> |
5 |
<link rel="stylesheet" href="css/normalize.css"> |
6 |
<link rel="stylesheet" href="css/flexboxgrid.css"> |
7 |
<link rel="stylesheet" href="css/style.css"> |
8 |
</head>
|
9 |
<body>
|
10 |
|
11 |
<div class="container"> |
12 |
<h1>My Dribbble Shots</h1> |
13 |
<div class="row center dribbble-shots"> |
14 |
</div>
|
15 |
</div>
|
16 |
|
17 |
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> |
18 |
<script src="js/script.js"></script> |
19 |
</body>
|
20 |
</html>
|
Perhatikan bahwa kita juga menyertakan Google Font.
Minimal Styling
Selanjutnya, kita akan memberikan sentuhan minimal pada style.css:
1 |
body { |
2 |
font-family: 'Maven Pro', sans-serif; |
3 |
background-color: #f1faff; |
4 |
}
|
5 |
h1 { |
6 |
font-weight: 400; |
7 |
}
|
8 |
*[class^=column] { |
9 |
/*max-height: 100px;*/
|
10 |
overflow: hidden; |
11 |
margin-bottom: 12px; |
12 |
}
|
13 |
*[class^=column] img { |
14 |
width: 100%; |
15 |
}
|
16 |
|
17 |
.container { |
18 |
width: 80%; |
19 |
margin: 0 auto; |
20 |
position: relative; |
21 |
padding-top: 100px; |
22 |
}
|
23 |
|
24 |
a { |
25 |
display: block; |
26 |
opacity: 0.9; |
27 |
}
|
28 |
|
29 |
a:hover { |
30 |
opacity: 1; |
31 |
}
|
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.
