Bootstrap 4
beberapa bulan lalu telah dirilis dalam versi alfa (sekarang versi alfa
kedua). Versi terbaru ini terasa lebih segar karena memang kreatornya
mengaku menulis ulang kode programnya dari awal. Sejumlah perubahan dan
pembaruan disematkan di dalamnya. Para pengguna (pengembang, desainer,
maupun pemrogram) baru atau yang sebelumnya telah merasa familiar dengan
versi 3 perlu melakukan adaptasi untuk bermigrasi ke versi baru ini.
Satuan ukuran CSS yang sebelumnya piksel (px) sekarang diganti dengan satuan ukuran relatif rem.
Ukuran font baku berubah dari 14 px menjadi 16 px. Ada kelas yang
dihapus, ada juga tambahan kelas baru, baik tambahan asli maupun hasil
pengubahan kelas lama. Komponen card digadang-gadang menjadi pengganti komponen panel, thumbnail, dan well yang ditiadakan. Selain itu masih banyak lagi poin perubahan yang mesti diperhatikan dalam versi ini.
Satu poin yang membuat saya bahagia adalah adanya kelas baru untuk mengatur spasi (margin dan padding)
pada konten yang dapat dipakai secara lebih cepat. Dengan kelas ini
pengaturan spasi bisa dilakukan secara lebih rapi dan teratur. Kelas ini
menggunakan format sebagai berikut:
{property}-{sides}-{size}
Property adalah opsi dari m untuk margin atau p untuk padding. Sedangkan sides merupakan sisi tempat spasi akan diletakkan. Ia bisa bernilai:
- t untuk top (atas)
- b untuk bottom (bawah)
- l untuk left (kiri)
- r untuk right (kanan)
- x untuk dua sisi pada sumbu x, yakni kiri dan kanan
- y untuk dua sisi pada sumbu y, yakni atas dan bawah
- a untuk keempat sisi, atas, kanan, bawah, dan kiri.
Parameter terakhir adalah sizes yang
memuat nilai ukuran spasi: hanya ada empat opsi nilai baku yang
disediakan, yaitu 0, 1, 2, dan 3. Nilai ini dihitung berdasarkan ukuran
unit global CSS yang secara baku bernilai 1 rem. Kita dapat mengubah
ukuran ini melalui variabel global $spacer lalu mengompilasi ulang CSS Bootstrap.
- 0 berarti 0 * $spacer, sehingga margin dan padding bernilai 0
- 1 berarti 1 * $spacer, sehingga sisi x dan y bernilai 1 rem
- 2 berarti 1,5 * $spacer, sehingga sisi x dan y bernilai 1,5 rem
- 3 berarti 3 * $spacer, sehingga sisi x dan y bernilai 3 rem
Nah, berikut contoh penggunaan kelas ini:
- m-t-1 sama artinya dengan {margin-top: 1rem !important }
- p-l-2 sama artinya dengan {padding-left: 1.5rem !important }
- m-x-3 sama artinya dengan {margin-left: 3rem !important; margin-right: 3rem !important }
- p-y-1 sama artinya dengan {padding-top: 1rem !important; padding-bottom: 1rem !important }
- m-a-2 sama artinya dengan {margin: 1.5rem !important}
- p-a-0 sama artinya dengan {padding: 0 !important}
Selain contoh-contoh di atas, Bootstrap juga menyertakan kelas m-x-auto yang mengatur margin horizontal dengan nilai auto.
Kelas spasi ini dapat disematkan di dalam berbagai komponen. Dengan
begitu, saya pikir, tata letak komponen dalam desain antarmuka akan
lebih terjaga konsistensinya, dan, bagi pengembang, tidak terlalu repot
menulis baris kode style baru untuk memarkir komponen ini dan itu — kecuali jika memang diperlukan.
Tidak ada komentar:
Posting Komentar