Assalamu’alaikum Wa Rahmatullahi Wa Barakatuhu
Setelah sekian waktu dihabiskan untuk menjadi kuli Web Design, sekiranya akan lebih afdol lagi jika ilmu yang di pelajari selama ini dituangkan ke dalam tulisan dan berbagi ke sesama makhluk yang mempunyai pekerjaan yang sama, karena berbagi itu adalah harapan, begitu ya. :p
Bagi para kuli Web Design tentunya sudah tidak asing lagi dengan framework CSS yang bernama Bootstrap. Bootstrap sangat membantu para kuli Web Design dalam pekerjaannya merangkai puisi HTML dan CSS sewaktu membangun sebuah halaman Web.
Pembahasan yang akan saya ulas di artikel ini mengenai Bootstrap 3. Versi 3 dari Bootstrap ini masih terbilang baru dan berbeda dengan versi sebelumnya yaitu Bootstrap 2. Di dalam Bootstrap 3 ini class yang digunakan dalam Grid-nya pun berbeda. Konteks yang dipaparkan dalam Bootstrap 2 adalah berdasar pada ukuran tampilan desktop yang dibagi menjadi 3 bagian yaitu:
- Desktop – Large – Besar
- Tablet – Medium – Sedang
- Mobile – Small – Kecil
Jika dibandingkan dengan Bootstrap 3 ini, Bootstrap mengubah konsepnya agar lebih memadai untuk digunakan ke berbagai ukuran layar yang sudah sangat bervariasi saat ini.
Bootstrap 3 diperkenalkan dengan merujuk pada istilah Mobile First. Dengan istilah tersebut, kita dianjurkan memiliki perspektif dalam mendesain sebuah halaman Web dengan fokus kepada interaksi mobile terlebih dahulu sebelum menjamah ke ranah desktop. Perspektif mobile ini sebaiknya dimulai semenjak halaman web tersebut didesain, mulai dari coretan (di kertas), pola/wireframe, mockup, konsep serta UX.
Tentang CSS Mobile First
Nah, sebenarnya apa sih maksud istilah CSS Mobile First ini ? mungkin akan lebih jelas lagi jika kita langsung bereksperimen dengan istilah tersebut.
Katakanlah, kamu mempunyai sebuah tag h1 didalam halaman yang sedang kamu buat. Ketika tag h1 tersebut kamu lihat ke dalam browser memang terlihat biasa saja, lalu, kamu perkecil browsermu (tarik/drag sisi kanan browsermu ke arah kiri) sampai ke ukuran paling terkecil (ukuran mobile), tetapi tag h1 kamu tersebut tetap pada ukuran yang sama, nah, inilah pemikiran dasar tentang istilah mobile first itu tadi. Bootstrap akan mengolah ukuran tag h1 kamu tadi agar menyesuaikan dengan ukuran layar mobile. Jika kamu sudah menuliskan ke dalam CSS ukuran h1 dengan value tertentu, maka value tersebut akan terus terbaca oleh browser sampai ukuran layar terkecil sekalipun.
contoh ketika tag h1 sudah didefinisikan dengan value tertentu
h1 {
font-size: 40px;
margin-bottom: 20px;
margin-left: 20px;
}
Mungkin value 40px tersebut akan terlihat pas jika terlihat didalam ukuran desktop, tetapi ukuran tersebut akan menjadi terlalu besar jika terlihat didalam ukuran layar mobile, bahkan ukuran margin-nya pun akan terlihat terlalu besar di layar mobile.
Lalu bagaimana cara CSS Framework bekerja mengatasi value tersebut agar lebih ramah ke ukuran layar mobile ?
contoh Mixin
h1 {
font-size: 24px;
margin-bottom: 10px;
@media (min-width:@screen-tablet) {
font-size: 48px;
margin-bottom: 20px;
margin-left: 20px;
}
}
CSS diatas menjelaskan, ukuran font tersebut secara default adalah 24px, dan ukuran 48px itu akan terbaca jika ukuran layar lebih besar dari ukuran mobile, dan saya tidak memberi value margin-left pada value defaultnya, maka margin-left akan terbaca ketika layar terdeteksi melewati definisi @screen-tablet tersebut.
Tentang Grid didalam Bootstrap
Didalam Bootstrap v3 ini dipaparkan 4 macam class yang akan mendefinisikan Grid didalam HTML-mu. Jika kamu sudah terbiasa dengan class yang dipaparkan didalam Bootstrap 2, maka 4 macam class dibawah ini mungkin harus segera dibiasakan, karena memang berbeda dengan versi sebelumnya.
contoh class dalam Bootstrap 3
- col-xs-*
- col-sm-*
- col-md-*
- col-lg-*
Mungkin kamu bakal mikir “Wah harus ada 4 class didalem satu elemen, gituh???”. Jawabannya “Woles Bro” hehe, tenang…tenang.
Pada dasarnya penggunaan salah satu class diataspun sudah dapat mengatasi semua ukuran layar. 4 macam class tersebut disediakan untuk mengatasi bagaimana interaksi suatu elemen ketika ditampilkan di berbagai layar.
Sepertinya akan lebih asik jika dijelaskan seperti ini:
- xs = extra small = terkecil
- sm = small = kecil
- md = medium = sedang
- lg = large = besar
Class xs akan bekerja / aktif ketika layar berada pada ukuran terkecil, md pun akan segera aktif ketika berada di ukuran layar sedang, begitupun class lg akan aktif ketika berada di layar besar.
Begitulah cara kerja Bootstrap 3, bagaimana, sudah jelas ? / ga ngerti, belum… okay, teruskan bacanya.
Contoh 1: Kolom Single
Saya akan coba beri contoh termudah, katakanlah kamu membuat 2 buah DIV yang masing-masing mempunyai lebar 50%.
<div class=“”>Saya di Kiri</div> <div class=“”>Saya di Kanan</div>
Di Bootstrap 2, kamu akan menuliskan .span6 pada value class-nya yang kemudian div tersebut akan mempunyai value 50% pada setiap sisi, dan akan menjadi 100% lebar kanan dan kiri.
Class di dalam Bootstrap 3 berbeda, pada versi 3 ini Bootstrap berasumsi bahwa 1 kolom mempunyai value lebar 100% yang disusun secara Vertikal. Maka, jika kita menginginkan tiap sisinya mempunyai value 50%, kita harus menetapkan pada saat mana kita menginginkan tiap sisi DIV tersebut ber-value-kan 50% (kanan dan kiri).
Katakanlah, saya menginginkan 2 DIV itu berukuran 50% bersebelahan kanan dan kiri pada ukuran desktop tetapi menjadi 100% pada layar tablet maupun handphone. Maka value class pada 2 DIV tersebut dituliskan seperti ini:
<div class=“col-md-6”>Saya di Kiri</div> <div class=“col-md-6”>Saya di Kanan</div>
col-md-6 diatas itu berkata seperti ini: “Buatlah aku 6 kolom di ukuran Medium dan ukuran lebih besar bersebelahan kanan dan kiri”. Maka ukuran lain yang lebih kecil dari ukuran medium / sedang value dari kolom 50% tersebut akan menjadi 100% dan akan tersusun secara vertikal (atas dan bawah).
Kondisi yang lain, semisal, saya menginginkan 2 DIV tersebut mempunyai value 50% kanan dan kiri pada ukuran desktop tetapi saya juga tetap menginginkan ukuran DIV tersebut tetap sama pada 50% di posisi kanan dan kiri pada layar terkecil / handphone. Maka penggunaan class akan seperti ini:
<div class=“col-xs-6”>Saya di Kiri</div> <div class=“col-xs-6”>Saya di Kanan</div>
Kondisi yang lain lagi seperti, saya menginginkan 2 DIV tersebut hanya bersebelahan kanan dan kiri pada layar Desktop / besar saja, ukuran selain itu (kecil) DIV akan tersusun vertikal (atas-bawah) dan menjadi 100%, maka class yang sesuai adalah:
<div class=“col-lg-6”>Saya di Kiri</div> <div class=“col-lg-6”>Saya di Kanan</div>
Contoh 2: Kolom Campuran
Setelah kamu lihat contoh HTML diatas dan memahami bagaimana class yang dipaparkan Bootstrap 3 bekerja pada sebuah halaman Web, mari kita mengulik lebih jauh lagi tentang Bootstrap 3 ini.
Katakan, saya gunakan lagi 2 DIV di atas tadi dan tetap pada 50% kanan dan kiri.
<div class=“col-md-6”>Saya di Kiri</div> <div class=“col-md-6”>Saya di Kanan</div>
Nah, sekarang saya akan menerapkan cara lain yang unik,
Katakan, saya ingin 2 DIV tersebut berada di posisi medium dengan value 50% kanan dan kiri, tetapi saya ingin mengubahnya pada posisi large dengan value 33% di Kiri dan 66% di Kanan, maka penggunaan class tersebut akan seperti ini:
<div class=“col-md-6 col-lg-4”>Saya di Kiri</div> <div class=“col-md-6 col-lg-8”>Saya di Kanan</div>
Menurutmu penggunaan class tersebut di atas masuk akal, ndak ? di posisi Medium saya gunakan class md dan di posisi large saya gunakan class lg.
Bahkan kamu pun bisa menambahkan class-nya lagi untuk posisi layar kecil / Small, semisal, pada posisi layar Kecil 2 DIV tersebut akan berubah menjadi 25% di kiri dan 75% di kanan dengan menambahkannya seperti ini:
<div class=“col-sm-3 col-md-6 col-lg-4”>Saya di Kiri</div> <div class=“col-sm-9 col-md-6 col-lg-8”>Saya di Kanan</div>
2 DIV diatas kini memiliki 3 posisi yang berbeda. Pada ukuran layar kecil 2 DIV tersebut memiliki value 25% dan 75% kiri dan kanan, pada posisi layar medium berubah menjadi 50% kiri dan kanan, pada layar besar akan berubah lagi menjadi 33% dan 66% kiri dan kanan.
Begitulah sekelumit tentang Bootstrap 3, mudahan sharing ini dapat ngebantu yang memang sedang belajar Bootstrap, buat para master…ampun ndan. 
Sampai ketemu lagi di artikel lain.
Selamat mencoba.
Wa’alaikum Salam
The post Memahami Cara Kerja Bootstrap 3 appeared first on Virtue Magz.
