Fitur Baru pada Bootstrap 4 Alpha

() translation by (you can also view the original English article)

Pada 19 Agustus 2015 Bootstrap 4 alpha dirilis ke publik, tepat empat tahun setelah pengumuman resmi mereka untuk bootstrap v1 (sebuah kebetulan bukan?).

Woohoo! Twitter Bootstrap, kerangka open-source CSS/HTML dari diriku sendiri dan @fat, sudah berjalan: http://t.co/3OOsQ5T #kaboom
— Mark Otto (@mdo) 19 Agustus 2011

Kerangka front-end populer memiliki makeover lengkap dan, sebagai penggemar Bootstrap, saya sangat bersemangat untuk mendapatkan beberapa fitur baru di tangan saya!

Setelah melewati sekitar setahun pengembangan, 1.100 commit dan 120.000 baris kode berubah; ada tumpukan perubahan dan fitur-fitur baru yang dapat kami kerahkan. Untuk menyelamatkan Anda dari semua kesulitan menjelajahi perubahan log saya telah mengumpulkan daftar fitur yang saya temukan menarik.

Modul Reset baru yang disebut "Reboot"

Mari kita mulai di mana setiap kerangka dimulai, modul reset. Modul reboot baru Bootstrap dibangun berdasarkan normalize.css tradisional dan sekarang menggerakkan semua elemen selector generik dan reset style ke file tunggal scss yang dapat diakses.

Anda juga akan melihat trik yang bagus, pengaturan box-sizing: border-box ke elemen html, kemudian secara global untuk semua elemen melalui pewarisan:

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

Hal ini memungkinkan kita untuk menimpa pengaturan lebih baik (jika diperlukan) tanpa meningkatkan kekhususan atau menggunakan !important.

Kredit untuk Jon Neal untuk ide asli dan CSS-Tricks untuk gambaran mendalam dari metode ini.

Aturan Rem dan Em!

Dalam sebuah langkah untuk membantu merampingkan CSS, Bootstrap v4 alpha membuang dukungan IE8 dan hacky poly fills CSS3. Dengan mendukung IE9+ yang telah mampu merangkul beberapa banyak modul CSS. Salah satunya adalah unit rem (root em), yang menghitung ukuran font relatif terhadap elemen root (html).

Membawa unit rem lebih jauh, kita dapat benar-benar mulai untuk menyelidiki tipografi responsif. Saat semua ukuran font didasarkan pada elemen root kita dapat membuat media queries untuk mengubah ukuran pada break point yang berbeda. Menggabungkan ini dengan grid baru mixin breakpoint dan voila!

Sebuah contoh mengubah ukuran font di seluruh situs kami bila dilihat pada perangkat sangat kecil:

html{
    font-size:16px;
}

// Creates a media query for extra small devices (0 - 34em)
@include media-breakpoint-up(xs) {
  html{
		font-size:18px;
	}
}

Baca lebih jauh dalam Panduan Comprehensif: Ketika Menggunakan Em vs. Rem oleh Kezz Bracey.

Pilihan di Flexbox

Pada dasarnya Bootstrap v4 tidak mendukung Flexbox, malah memanfaatkan float tradisional atau metode display table. Kurangnya standar integrasi Flexbox membantu ke arah dukungan IE9+, namun, jika Anda bersedia untuk mengorbankan dukungan ini dan langsung ke IE10+ Anda dapat mengaktifkan Flexbox di proyek Anda. Hal ini dilakukan dengan mengubah variabel boolean di dalam file _variables.scss; kompilasi css Anda sekarang akan termasuk style Flexbox. Flexbox tidak hanya digunakan pada grid, tetapi juga berbagai unsur-unsur lain termasuk komponen card baru, input group dan komponen media.

Misalnya

Mari kita pergi ke contoh dimana Flexbox membantu kita. Cukup sering saya akan memiliki satu set kolom inline (seperti yang digambarkan di bawah) di mana konten dalam salah satu kolom akan menambah ketinggian jauh melampaui kolom lainnya. Sebuah dilema CSS klasik. Salah satu dari banyak keuntungan dari mengaktifkan Flexbox adalah kita dapat memaksa ketinggian kolom menjadi sama. Tidak diperlukan tambahan CSS!

SCSS adalah warna hitam yang baru

Oh, btw—Bootstrap 4 akan di SCSS. Dan jika Anda peduli, v5 kemungkinan akan berada di PostCSS karena itu kedengarannya keren.
— Mark Otto (@mdo) 23 April 2015

SCSS telah dirampas LESS sebagai preprocessor CSS pilihan untuk Bootstrap v4. Seluruh basis kode CSS telah direfraktor sebagai SCSS, tanpa port resmi LESC pada saat ditulis. Mark menjelaskan beberapa alasannya dalam sebuah tweet:

Jika Anda ingin alasan: lebih banyak orang menggunakan SCSS, libsass sangatlah cepat, sintaks os lebih jelas secara eksplisit, dan saya malas dan menggunakan SCSS di GitHub.
— Mark Otto (@mdo) 23 April 2015

Jika Anda penggemar berat LESS, Mark telah meminta bantuan dalam menciptakan dan memelihara port LESS.

Card, Elemen UI yang bersatu

Bootstrap v4 telah dibersihkan komponennya dengan penghapusan well klasik, panel dan komponen thumbnail. Di tempat mereka komponen baru: card!

Komponen kartu baru memiliki aspek yang akrab dari panel, seperti judul, header dan footer dan menggulung mereka semua ke dalam konten kontainer yang rapi dan fleksibel.

Dan ada lagi:

Overlay gambar dan latar belakang

Anda dapat menetapkan latar belakang kartu dengan gambar dan overlay teks kartu dan konten lainnya. Hal ini dilakukan tanpa CSS tambahan apapun dengan menambahkan elemen berikut dalam kartu:

1	<img class="card-img" data-src="image.jpg" alt="Card image">

Menambahkan class card-inverse akan menetapkan warna font putih yang memungkinkan Anda untuk menetapkan latar belakang lebih gelap jika Anda inginkan.

Berbicara tentang latar belakang, varian warna tradisional juga dapat diterapkan ke kartu dan menyesuaikan style latar belakang. Misalnya, card-primary akan mengatur card untuk warna primer, sebagainya dan sebagainya.

Card yang Dikelompokkan

Selain standar grid dengan gutter, Anda akan juga menemukan pilihan untuk mengelompokkan card bersama-sama, menghapus jarak spasi, kemudian mengatur setiap kolom dengan ketinggian seragam. Secara default dapat dicapai dengan menggunakan display: table dan table-layout: fixed, namun jika Anda memiliki Flexbox diaktifkan sebaliknya akan menggunakan display: flex.

Style Grid Masonry

Komponen card juga dilengkapi dengan konfigurasi kolom seperti masonry yang memungkinkan card untuk bertumpuk berdasarkan ruang vertikal yang tersedia. Opsi ini tidak didukung pada IE9-itu memerlukan IE10 dan selanjutnya!

Lebih Banyak Class Utilitas?

Versi sebelumnya dari Bootstrap telah menyertakan berbagai class yang disebut "utility classes" untuk mengaktifkan penyesuaian konten secara cepat dan mudah di luar style komponen khusus. Biasanya ini telah dibatasi untuk beberapa perubahan yang cukup mendasar, seperti floating (pull-left, pull-right), warna (.text-primary dll), clearfix (.clearfix), dan beberapa lainnya.

Di Bootstrap v4 alpha kami memiliki akses ke sejumlah class utilitas baru di sekitar padding dan margin. Langkah kontroversial ini akan memungkinkan pengguna v4 Bootstrap untuk dengan cepat mendorong dan menyelaraskan konten secara seragam bertahap. Beberapa pengguna mungkin merasa class utilitas adalah satu langkah dari style inline, namun mereka menyediakan kemampuan untuk dengan cepat dan seragam style komponen tanpa membuat sebuah selector tertentu untuk melakukannya.

Class utilitas margin dan padding dibuat dalam kelipatan dari nilai spacer yang seragam. sebagai contoh:

// $spacer is a sass variable that equals 1rem or 16px

.m-a-0 { margin: 0 !important; }
.m-a { margin: $spacer !important; }
.m-a-md { margin:  ($spacer * 1.5) !important; }
.m-a-lg { margin:   ($spacer * 3) !important; }

Berikut .m-a merupakan singkatan margin pada semua sisi. Ada class untuk masing-masing sisi, axis, ukuran yang berbeda (seperti yang ditunjukkan oleh -0, -md dan -lg) dan untuk padding.

Berikut adalah tampilan beberapa class-class lain:

// Apply standard padding to all sides
.p-a { padding:        $spacer !important; }

// Apply standard padding to the top
.p-t { padding-top:    $spacer-y !important; }

// Apply standard padding to the right
.p-r { padding-right:  $spacer-x !important; }

// Apply standard padding to the bottom
.p-b { padding-bottom: $spacer-y !important; }

// Apply standard padding to the left
.p-l { padding-left:   $spacer-x !important; }

// Apply standard padding to the x axis (right and left)
.p-x { padding-right:  $spacer-x !important; padding-left:   $spacer-x !important; }

// Apply standard padding to the y axis (top and bottom)
.p-y { padding-top:    $spacer-y !important; padding-bottom: $spacer-y !important; }

Idenya di sini adalah untuk mengurangi jumlah class kustom yang sangat spesifik yang dibuat untuk menggeser konten, yang sebaliknya menggulung mereka ke dalam metode penjajaran konten yang seragam dan konsisten.

Saya telah melakukan chat ke Mark Otto (@mdo co-creator dari Bootstrap) di channel Slack umum mereka dan membahas penggunaan class-class ini, ia berkata:

"Kami mendapatkan diri kita membutuhkan mereka, dan sering mengganti nilai default untuk banyak komponen. Margin dan padding tampaknya yang paling sering ditimpa (bersamaan dengan warna dan font)." - Mark Otto

Lainnya yang Layak Disebutkan

Secara harfiah ada ratusan fitur baru dan update untuk kode dasar yang sudah ada, terlalu banyak untuk pergi ke dalam pada detail yang baik. Jadi di sini adalah beberapa lagi yang bukan daftar besar saya, tapi masih layak disebut.

Dokumentasi Baru

Dokumentasi Bootstrap v4 telah melakukan refresh. Ada sebuah struktur yang sedikit berbeda di mana fitur dipecah menjadi tata letak, konten dan komponen. Apa yang saya sangat suka tentang dokumentasi baru adalah bahwa setiap komponen memiliki halaman sendiri, sehingga mudah untuk menghubungkannya dan juga bermain-main dengan ukuran halaman untuk menguji responsif.

Tingkatan Baru Grid

Bootstrap 4 memiliki tingkat grid baru untuk menargetkan perangkat yang lebih kecil (di bawah lebar 480px), breakpoint ini telah mengambil nama kelas terkecil sebelumnya (.col-xs-XX). Dalam melakukannya, semua tingkatan grid telah pindah tajam, sehingga menciptakan tingkat terbesar baru yang disebut .col-xl-XX untuk lg sebelumnya

Seperti disebutkan dalam konversi rem dan em, tim Bootstrap telah menambahkan mixins baru untuk dengan cepat menciptakan breakpoint di sekitar breakpoint yang sudah ada. Mereka dapat digunakan dengan sintaks berikut:

// Creates a media query: @media (min-width)
@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Creates a media query: @media (max-width)
@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }

Tidak Ada Lagi Ikon

Glyphicons telah dihapus dari build; dokumentasi Bootstrap 4 akhirnya akan mencakup petunjuk tentang cara untuk menyertakan paket ikon pihak ketiga seperti Font Awesome dan Octicons.

Penulisan Ulang JavaScript

Semua plugin JavaScript telah ditulis ulang di ES6 untuk mengambil keuntungan dari spesifikasi terbaru. Anda mungkin melihat beberapa plugin dihapus (seperti plugin affix) karena mereka terus ditulis ulang dan membangun library baru.

Apa Berikutnya?

Jadi itu adalah daftar saya dari beberapa fitur baru keren yang ditambahkan di Bootstrap 4 alpha. Jika Anda ingin memeriksa seluruh log perubahan sejauh mungkin lihatlah git pull request @mdo untuk Bootstrap 4.

Saya yakin akan ada tumpukan perubahan masih datang saat timnya bekerja keras. Rencana pembangunan mereka mencakup informasi berikut

Beberapa rilis alpha lagi untuk menandai item yang diajukan oleh komunitas
Dua rilis beta setelah fitur telah diselesaikan.
Dua rilis kandidat (RC) untuk memastikan bahwa itu semua sudah dipoles siap untuk mendorong terakhir.

Tidak ada kata pada saat ini akan dirilis, seperti build sebelumnya itu akan datang ke ketika library tersebut siap. Sementara itu, mendapatkan bootstrap dan membantu mereka melacak masalah dan memberikan feedback secara umum melalui pelacak bug mereka!