Apa yang diharapkan dengan Bootstrap 4

Dalam beberapa tahun terakhir, Bootstrap menjadi sangat populer. Ada kemungkinan besar Anda telah menemukan atau membuat tema WordPress yang menggabungkan elemen Bootstrap. Ini telah berkembang dari kerangka kerja pra-responsif dasar menjadi kerangka kerja responsif yang kuat, kaya fitur, dan modern. Bootstrap 3 telah ada cukup lama, jadi sangat menarik untuk mempelajari tentang apa yang akan terjadi selanjutnya di Bootstrap 4.

Status Bootstrap 4

Bootstrap 4 saat ini sedang dalam pengerjaan dan belum siap untuk digunakan dalam produksi. Saat ini dalam versi alpha. Ini adalah kesempatan yang baik untuk melihat pratinjau dan menjadi akrab dengan bagaimana ini akan membantu Anda dengan proyek-proyek masa depan.

Dokumentasi untuk Bootstrap 4 belum selesai, jadi eksperimen adalah cara yang baik untuk menguji beberapa fitur baru. Setelah secara resmi tersedia untuk penggunaan produksi, Anda akan menyadari semua peningkatan baru yang hebat.

Dibuat untuk peramban modern

Saat kami bergerak maju di web, semakin sulit untuk mendukung browser lama sambil menggunakan yang terbaru dan terbaik dari apa yang ditawarkan pengembangan web. Terlepas dari apakah ini musik di telinga Anda, kita semua bisa setuju bahwa teknik CSS3 yang lebih baik menjadi lebih mudah saat bekerja dengan browser modern. Bootstrap 4 mungkin saja cara yang sempurna untuk membuat istirahat bersih dari browser lama. Dengan pembaruan ini, dukungan Internet Explorer 8 sepenuhnya dihentikan. Perlu diingat bahwa kerangka kerja masih mendukung Internet Explorer 9 dan masih mendukung CSS3 tanpa banyak masalah.

Penyetelan Ulang yang Ditingkatkan

Anda mungkin sudah terbiasa dengan Normalize.css, yang merupakan opsi reset yang bagus. Ada reset baru dan lebih baik dengan hal-hal khusus Bootstrap yang ditambahkan ke dalamnya yang disebut reboot.css. Spesifik bootstrap adalah hal-hal seperti ukuran kotak: batas, rem sebagai unit pengukuran, gaya tautan, dan gaya formulir. Ini adalah perpaduan yang bagus antara Normalize.css dan kebutuhan Bootstrap tertentu, jadi Anda pasti akan memulai dengan baik.

KELANCANGAN

Pada hari-hari Bootstrap sebelumnya, sepertinya KURANG lebih disukai. Dengan perubahan industri dan preferensi desainer yang condong ke SASS, itulah yang disukai saat ini. Jika Anda ingat kembali ke Versi 3, saat itulah opsi SASS tersedia dengan opsi port. Sampai sekarang, tidak ada dukungan yang direncanakan untuk KURANG.

Kustomisasi

Bootstrap 4 memudahkan untuk membuat desain khusus Anda, semua dilakukan dengan cara yang terorganisir. Semua opsi variabel dikonsolidasikan ke dalam satu file. SASS dapat dikompilasi dengan mudah dan tidak perlu lembar gaya terpisah, seperti yang telah ada di masa lalu.

Ada beberapa opsi penyesuaian baru di Bootstrap 4. Anda dapat melihat status saat ini di sini. Kemungkinan besar akan berkembang sedikit karena detailnya terus dirilis.

Perlu diingat, ini adalah penyesuaian yang mudah untuk disiapkan di awal:

• Default tubuh
• Variabel warna
• kotak fleksibel
• Opsi desain CSS3 seperti transisi, sudut membulat, bayangan jatuh, dll.
• Pengukuran jarak
• Gaya tautan
• Titik putus jaringan
• Wadah kotak
• Kolom kisi
• Ukuran tipografi
• Komponen
• Tabel
• Lagi!

Flexbox siapa?

Flexbox tentu saja semakin populer dan kita akan melihat semakin banyak desainer web menggunakan ini. Ini adalah alat yang hebat untuk digunakan karena menyediakan opsi tata letak yang sederhana dan fleksibel dengan gaya CSS. Jika Anda menyukai kemudahan penyelarasan vertikal konten dalam elemen induk, menyusun ulang konten di seluruh perangkat dan resolusi layar dengan bantuan kueri media, dan menghargai cara mudah untuk memiliki kolom dengan ketinggian yang sama di kisi Anda, Flexbox adalah solusi yang bagus .

Sebelum Anda menjalankan dan mengonversi semua proyek Anda, ada hal penting yang perlu disebutkan. Meskipun dukungan browser telah meningkat secara drastis, Internet Explorer 9 masih kekurangan dukungan Flexbox. Dalam hal kemudahan penggunaan, Bootstrap 4 memudahkan penggunaan Flexbox jika Anda tidak memerlukan dukungan IE9. Pada dasarnya, yang harus Anda lakukan adalah menemukan file _variables.scss dan mengubah $enable-flex dari false menjadi true. Jika Anda sudah familiar dengan SASS, ini adalah hal yang cepat untuk dilakukan.

Pembaruan jaringan

Jika Anda sudah lama menjadi penggemar Bootstrap, Anda mungkin ahli tentang cara kerja sistem grid, bersama dengan konvensi penamaan. Dengan Bootstrap 4, sintaks tetap sama tetapi ada perbedaan dengan pengukuran yang digunakan. Sistem grid sekarang didasarkan pada "rem." Ini adalah penyesuaian jika Anda terbiasa dengan desain piksel yang sempurna, karena sekarang semuanya akan lebih lancar.

Saat berpisah dengan piksel yang sudah biasa kita gunakan, mari kita lihat contoh sesuatu yang umum seperti .container dan .row. Wadah sekarang memiliki set lebar maksimum dalam rems. Sebuah baris memiliki default margin kiri dan kanan negatif -.9375rem , sedangkan kolom memiliki default padding kiri dan kanan 0.9375rem . Seperti yang mungkin Anda ingat, nilai-nilai ini sebelumnya 15px di Bootstrap 3. Nilai rem baru ini sebanding dengan itu.

Kueri media yang disempurnakan

Kueri media di versi Bootstrap sebelumnya agak umum dan terkadang kustom harus dibuat. Inilah penampilan mereka:

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Sekarang, pendekatan yang lebih mobile dapat dilakukan dengan kueri media yang diperbarui ini:

// Small devices (landscape phones, 34em and up)
@media (min-width: 34em) { ... }

// Medium devices (tablets, 48em and up)
@media (min-width: 48em) { ... }

// Large devices (desktops, 62em and up)
@media (min-width: 62em) { ... }

// Extra large devices (large desktops, 75em and up)
@media (min-width: 75em) { ... }

Jika Anda menginginkan sesuatu yang berbeda, breakpoint dapat dikonfigurasi di SASS jika Anda ingin memilih sendiri.

Kartu sebagai pengganti

Familiar dengan panel, well, dan thumbnail? Kartu sekarang menjadi yang terbaru dan terbaik, dan menawarkan beberapa opsi gaya yang hebat. Salah satu contohnya adalah Grup Kartu. Meskipun jumlah teks bervariasi, tinggi kartunya sama, tanpa bergantung pada JavaScript. Ini bekerja dengan Flexbox dan mode grid default. Saat menggunakan Flexbox, kartu dibuat menggunakan properti Flexbox. Kisi default menggunakan trik CSS untuk menghindari kebutuhan akan JavaScript. Wadah menggunakan display: table; dan setiap “kartu” display: table-cell; memberikannya properti tabel - dari sinilah tinggi kolom yang sama berasal.

Tipografi

Ingat bagaimana grid sekarang menggunakan rems? Yah, masuk akal jika tipografi juga melakukannya! Saat memikirkan hal ini, ingatlah bahwa semua ukuran font relatif terhadap elemen root, tag HTML. Saat Anda mengubah ukuran font (atau gaya lainnya) pada tag HTML, Anda dapat dengan mudah menata dan menskalakan gaya di seluruh proyek Anda.

Mari kita asumsikan elemen HTML Anda ditata dengan font-size: 16px . Katakanlah Anda ingin tag h5 Anda menjadi ukuran itu, Anda akan mendeklarasikan ukuran font 1rem.

h5 {
font-size: 1rem;
}

Sekarang, mungkin ada beberapa matematika yang terlibat bergerak maju. Jika Anda ingin tag h1 Anda menjadi 40px, berikut cara mengetahuinya:

h1 {
font-size: 2.5rem; /* 16 * 2.5 = 40px */
}

Belum merasa rems? Anda masih dapat menggunakan piksel dan ems untuk ukuran jika Anda mau.

Lebih banyak gaya tajuk

Judul sangat bagus untuk membangun hierarki. Tetapi bagaimana jika Anda menginginkan sesuatu yang lebih menonjol daripada h1, h2, h3, dll? Nah, kabar baiknya adalah, Anda dapat menambahkan kelas tampilan heading ke heading standar yang membuatnya lebih besar. Ini akan terlihat seperti:

<h1 class="display-4">Heading Display 4</h1>

A display-4 lebih besar dari display-2 .

Ukuran file lebih kecil

Bootstrap 4 memiliki footprint yang lebih kecil. Ini sebenarnya sekitar 30% lebih kecil dari versi terbaru, Bootstrap 3. Sebelumnya sekitar ~123kb dan sekarang ~88kb. Luar biasa karena lebih kecil dan masih memiliki fitur hebat yang sama.

Ingatlah bahwa ada opsi untuk hanya menggunakan bagian Bootstrap yang Anda butuhkan, yang membuat ukuran file menjadi lebih kecil.

Tidak ada lagi Glyphicon?

Glyphicon banyak digunakan di versi Bootstrap sebelumnya, jadi sedih melihatnya pergi. Jangan khawatir, ini bukan akhir dari ikon web. Sebagai gantinya, FontAwesome juga akan melayani Anda. Anda juga dapat memeriksa Octigons Github untuk opsi ikon yang hebat.

Pindah ke Bootstrap 4

Meskipun saat ini dalam versi alfa, tidak ada alasan mengapa Anda tidak dapat bekerja dengannya di lingkungan pengujian. Kode sumber tersedia di cabang v4-dev di GitHub. Saat Anda bereksperimen dan melihat apa pun yang perlu diperhatikan, ada permintaan tarik pengembangan dan pelacakan yang menyertakan catatan tentang perubahan dan peningkatan baru lainnya.

Semuanya dalam versi alfa, dan pada akhirnya akan ada rilis beta setelah fitur dan fungsionalitas siap untuk diuji. Setelah beta, dua kandidat rilis akan digunakan untuk menguji berbagai hal dalam produksi. Ketika semuanya berjalan dengan baik, rilis final akan siap!

Kami baru saja menggores permukaan di sini dan percakapan Bootstrap 4 baru saja dimulai. Sangat menyenangkan untuk melihat apa yang akan terjadi di masa depan dan saya semakin bersemangat untuk melihatnya keluar dari alfa. Pastikan untuk mengawasi pembaruan dan unduh salinan untuk menguji komponen Bootstrap 4 yang baru.