Apa yang harus Desainer Ketahui tentang Bootstrap 4

Sejak Agustus 2011, ketika Bootstrap pertama kali diluncurkan, telah mendapatkan popularitas dalam desain web dan dunia development. Secara keseluruhan style sheet CSS-driven dengan poweful, mobile pertama, responsif, framework front-end dengan banyak fitur baru yang ditambahkan termasuk tuan rumah plugin JavaScript, tool dan icon yang berjalan seiring dengan bentuk dan beberapa komponen lainnya, cukup aman dan bisa dikatakan bahwa Bootstrap telah menempuh perjalanan panjang.

Untuk saat ini kita memiliki Bootstrap 4 dengan versi alpha yang merupakan rilisan belum lengkap dan tidak cocok untuk produksi. Dengan versi ini ada perubahan besar ditoko. Banyak fitur baru yang ditambahkan dan pilihan kutomisasi akan tersedia.

Meskipun mungkin ada beberapa argumen tentang Bootstrap yang merupakan framework CSS terbaik untuk digunakan, hampir setiap desainer dapat membangun apapun cukup banyak dengan Bootstrap, dan kritikus juga bisa jika mereka mengambil sedikit waktu untuk mengkonfigurasi styling Boostrap standar.

Mengapa Desainer Menyukai Bootstrap

Jika Anda seorang desainer, Anda mungkin menikmati dalam membuat desain dengan framework Bootstrap. Berikut adalah beberapa alasan mengapa desainer menyukai bootstrap :

  • Gratis. Bootstrap open source. Tidak perlu menarik keluar kartu kredit Anda.
  • Kekuatan system grid : bootstrap memiliki responsif terbaik, sistem grid untuk mobile pertama yang tersedia. Sangat mudah untuk digunakan dan fleksibel yang memungkinkan Anda untuk menghasilkan layout prototipe dan membuat kustomisasi mudah.
  • Kustomisasi : Bootstrap sepenuhnya dapat kutomisasi. Itu berarti Anda dapat membuat desain yang berbeda dari itu, mengabaikan tampilan dasar template Bootstrap. Semua CSS dan JavaScript dapat diganti jadi tidak ada masalah pekerjaan dengan hal itu.
  • Pengembangan yang pesat : Bootstrap menawarkan CSS dan komponen JavaScript yang dapat  digunakan kembali yang dapat membantu desainer dengan mudah membuat fungsi dan elemen yang mereka butuhkan untuk desain mereka.
  • Dokumentasi yang sangat baik : Bootstrap memiliki dokumentasi yang luar biasa yang dapat membantu Anda untuk memahami setiap bagian dari framework apakah Anda seorang pemula ataupun sudah profesional.

Hal yang Perlu Diketahui Desainer tentang Bootstrap 4

Sebagai seorang desainer, perlu mempelajari fitur terbaru dan terupdate. Untuk desain website dengan Bootstrap Anda mungkin berpikir secara berbeda, tapi kita tidak berpikir itu membuang-buang waktu dalam mengetahui dan memahami hal-hal yang perlu dipertimbangkan ketika merancang situs web berbasis Bootstrap.

Warna

Bootstrap 4 hadir dengan lima warna utama didalamnya. Warna-warna ini hadir dengan class masing-masing dan prefiks yang dapat digunakan kembali diberbagai komponen seperti button, link  dan alert. Lihat gambar dibawah ini.

Catatan : Dalam Bootstrap 3 class defaultnya adalah “btn-secondary”.

bootstrap-4-colors

System Grid Bukan Pixel Lagi

Dalam Bootstrap versi 1-3, grid diukur melalui pixel. Namun, dalam Bootstrap 4, grid diukur melalui ems dan rems. Jadi jika Anda bekerja pada Photoshop desain tata letak sebuah situs web itu cukup membantu jika Anda akan melihat hasil pengukuran yang setara dengan ems untuk pixel.

Grid-System-e1444291529140

Gutter

Bootstrap biasanya datang dengan lebar 30 gutter, 15px disetiap sisi kolom. Ini berarti padding kiri dan kanan untuk kolom akan 15px setiap sisi, dimana sebagai margin kiri dan margin kanan untuk baris adalah 15px. Itu memberi Anda gambaran bagaimana Anda akan menempatkan ruang pada setiap kolom pada desain Anda.

Salah satu hal yang baik tentang Bootstrap 4 adalah memungkinkan Anda menyesuaikan dan mengkompilasi pembangunan Anda sendiri berdasarkan kebutuhan Anda. Termasuk juga warna, ukuran kontainer dan gutter padding. Seringkali Anda ingin memilih kolom dan menghapus padding dengan CSS. Anda dapat membuat sendiri class helper utility Anda untuk mencapainya dengan cepat. Periksa contoh kode dibawah ini :

 

.no-gutter > [class*='col-'] {
    padding-right:0;
    padding-left:0;
}

Memperbaiki navbar

Hal yang paling sulit dan paling rumit ketika menggunakan Bootstrap 3 adalah navbar. Sangat sulit untuk mencari tahu navbar karena Anda perlu menambahkan banyak class untuk membuatnya. Selain itu, Anda juga perlu pergi ke CSS Anda untuk menyesuaikan warna dan beberapa style.

Dalam Bootstrap 4, ada banyak class yang telah dihapus dan lebih banyak pilihan untuk skema warna yang ditambahkan. Hal ini memberikan lebih banyak pilihan untuk mengontrol layout navigasi website. Anda dapat memeriksa dokumentasi disini jika Anda ingin mempelajarinya lebih lanjut.

bootstrap-4-navbar

Opt-in flexbox untuk Desain Responsif Bisa Diaktifkan

Bootstrap 4 memungkinkan pengguna untuk menggunakan modus Layout Flexbox CSS3. Flexbox adalah mode layout yang menawarkan susunan elemen pada halaman untuk tujuan responsif. Ini menyediakan container fleksibel yang dapat memperluas atau menyusut ukuran elemen pada area pandang yang berbeda.

Sementara ini hal besar tentang desainer mencoba untuk membuat desain responsif mereka, ini hanya akan bekerja pada browser yang lebih tinggi dari Internet Explorer 9.

Mengoptimalkan Styles Menggunakan SASS Daripada LESS

Bootstrap 3 digunakan LESS sebagai CSS pre-processor utama, namun karena populer developer front-end kontributor telah beralih ke SASS melalui Libsass Sass Compiler yang ditulis dalam C/C++ Bootstrap 4.

Sekarang Anda dapat menyesuaikan style seperti warna, jarak, link style, tipografi, tabel, breakpoint grid dan container melalui berkas _variables.scss.

Kesimpulan

Meskipun Bootstrap hanya salah satu dari banyak framework yang tersedia untuk menciptakan desain responsif, website mobile pertama, ia menawarkan banyak kemungkinan untuk desainer. Mengetahui tentang pembaruan dan komponen baru akan membuat pembangunnan yang lebih mudah.

Kami harap Anda menikmati ketika membaca artikel ini. Jangan lupa untuk berbagi atau share agar ilmu kita bertambah.

Comments

comments