Posts

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.

Bagaimana Cara untuk Bermigrasi dari Bootstrap Versi 3 ke 4?

Jadi apa yang perlu Anda ketahui sebelum migrasi dari Bootstrap 3 ke Bootstrap 4?

Anda beruntung ; hari ini kita akan membahas tentang perubahan dan fitur baru antara versi tersebut. Perubahan yang Anda butuhkan secara umum hanya mengganti nama class dan beberapa set-up.

Untuk menghemat banyak waktu menjelajahi perubahan log, kami telah mengumpulkan daftar dari hal-hal yang perlu Anda ketahui ketika melakukan migrasi dari Bootstrap 3 ke Bootstrap 4.

Kita akan mulai dengan membahas perubahan yang dibuat di framework Bootstrap 4 dan bagaimana hal itu akan mempengaruhi kinerja website Anda. Kemudian kita akan memeriksa cara baru menginstall bootstrap dan bagaimana sistem grid memiliki perubahan, dan bagaimana flexbox dapat membantu pada desain responsif. kita juga akan membahas beberapa perubahan komponen dan melihat apa yang terjadi di JavaScript pada versi baru.

Terakhir, kita akan melihat beberapa komponen baru termasuk card, tooltip dan flexbox. Jika Anda bersiap-siap untuk bermigrasi situs dari versi Bootstrap lama ke Bootstrap 4, dan ini adalah artikel yang Anda cari.

Let’s go kita mulai sekarang….

Perubahan global

Berikut ini adalah perubahan secara global dalam Bootstrap 4 :

  • Beralih dari Less ke Sass untuk source file CSS.
  • Beralih dari px ke rem sebagai unit CSS utama.
  • Media query sekarang di ems bukan pxs.
  • Global font-size meningkat dari 14px ke 16px.

Bootstrap Source Code

Source code Bootstrap 3 termasuk kompilasi CSS, JavaScript, dan font asset bersama dengan source Less, JavaScript dan dokumentasi. Ini memiliki hirarki file sebagai berikut :

Bootstrap-source-code

Dalam Bootstrap versi 4.0.0-alpha source Less digantikan dengan file Sass karena migrasi dai Less ke Sass melalui libSass. Sejak Bootstrap 4 tidak mendukung glyphicon lagi, folder font juga dihilangkan. Bootstrap 4 memiliki berkas hirarki berikut :

Bootstrap-4-compiled-version

Pada saat penulisan ini, versi Bootstrap 4 compiled belum tersedia.

Menginstall Bootstrap 4

Bootsrap 4 menawarkan berbagai pilihan untuk menginstall. Bootstrap 4 Alpha baru saja keluar jadi tidak semua manajer paket memiliki versi 4 alpha diterbitkan, tapi akan segera keluar.

Anda dapat memilih opsi yang Anda inginkan sesuai dengan apa yang Anda butuhkan.

  1. Source Files : Menggunakan Bootstrap dengan mendownload package source lengkap yang mencakup Sass, JavaScript dan file dokumentasi. Hal ini memmerlukan compiler Sass, Autoprefixer, dan beberapa setup. Jika Anda hanya ingin menggunakan file bootstrap Anda hanya dapat menyalin lokasi CSS dan JavaScript dalam bagian tag <link> ke tag <head> sebelum semua bagian stylesheet lainnya memuat CSS.
  2. Bootstrap CDN : Menggunakan Bootstrap CDN, disediakan gratis oleh orang-orang di MaxCDN. Copy link dalam tag <link> ke dalam tag <head> sebelum semua stylesheet lainnya memuat CSS.
  3. Package Managers : Menggunakan package manager seperti Bower, npm, meteor dan composer untuk menginstall Bootstrap. Hal ini akan memerlukan compiler Sass dan Autoprefixe untuk setup yang cocok dengan versi resmi compiled.
  4. Custom build : Jika Anda hanya perlu bagian dari CSS Bootstrap atau JS Anda dapat menggunakan salah satu dari custom build tersedia :
  • Reboot termasuk variables/mixins, Normalize, dan Reboot. Tanpa JavaScript.
  • Grid only termasuk variables/mixins dan grid system. Tanpa JavaScript.
  • Flexbox mencakup semua Bootstrap dengan flexbox diaktifkan dan dukungan browser yang lebih rendah.

Update Sistem Grid

Sistem grid Bootstrap 4 masih mengikuti HTML yang sama, tetapi perubahan satuan ukuran.

Misalnya kita masih dapat menggunakan 12 kolom kotak markup dan nest grid yang sama.

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-7 sm-6">
            <div class="row">
                <div class="col-lg-7 sm-4">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
                <div class="col-lg-5 sm-8">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
            </div>
        </div>
        <div class="col-lg-5 sm-6">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
</div>

Ini bukan baru ; Bootstrap 3 menggunakan class yang sama. Namun, class Bootstrap 4 menggunakan em bukan pixel dan mereka telah menambahkan satu tingkat baru untuk layar ekstra besar. Check out class bersamaan dengan ukuran layar mereka.

  • col-xs untuk tampilan ekstra kecil (lebar layar < 34em)
  • col-sm untuk tampilan yang lebih kecil (lebar layar ≥ 34em)
  • col-md untuk tampilan medium (lebar layar ≥ 48em)
  • col-lg untuk tampilan yang lebih besar (lebar layar ≥ 62em)
  • col-xl untuk tampilan ekstra besar (lebar layar ≥ 75em)

Hal lain yang patut dicatat adalah container dan row class. Container memiliki max-width diatur dalam rem sementara row memiliki margin kiri dan kanan negatif -.9375rem dan padding kiri dan kanan 0. 9375rem yang 15px di Bootstrap 3.

Sementara ini mungkin menjadi hal yang baik untuk mendukung semua ukuran layar, mungkin diperlukan waktu untuk beberapa web desainer dan developer untuk bisa menggunakannya karena kebanyakan dari program grafis yang sedang digunakan saat ini seperti Photoshop menggunakan pixel pada desainnya.

Jika Anda menggunakan source Sass CSS dari versi Bootstrap 4, Anda dapat mengontrol ukuran jaringan dengan mengubah variabel-variabel berikut:

  • $grid-columns : jumlah grid horizontal (12 default)
  • $grid-gutter-width : total padding di setiap grid (30px default)
  • $grid-float-breakpoint : ukuran minimum navbar menjadi dibentangkan ($screen-sm-min default)
  • $grid-float-breakpoint-max : ukuran maksimum dimana navbar mulai collapsing (deault akan menjadi ukuran $grid-float-breakpoint – 1)

Reset Komponen Pembaruan

File normalize.css Nicolas Gallagher digunakan dalam Bootstrap 3 untuk reset CSS dan diperbaiki di Bootstrap 4.

Menggunakan file sama yang Anda lihat di Bootstrap 3, mereka menambahkan beberapa reset Bootstrap dan basis style yang berguna dan mengkompresi menjadi file tunggal dan menyebutnya reboot.css. sebagai contoh, beberapa tag <table> stylenya disesuaikan untuk dasar sederhana dan kemudian memberikan .table, .table-bordered dan banyak lagi.

Class Perubahan dan Pembaruan

Ada cukup beberapa perubahan nama class antara dua versi dan beberapa class yang dihapus.

Typography

Bootstrap typography menggunakan Rems. Tidak seperti px dan em, hal itu bukan unit tetap atau relasi yang langsung atau terdekat pengukuran induknya. Unit rem dinamis dan relatif terdapat tag akar HTML. Namun, Anda tetap dapat menggunakan px, em dan pt pada proyek-proyek Bootstrap jika Anda ingin.

Untuk memberikan gambaran bagaimana Rems bekerja, Anda dapat membagi target untuk base ukuran html dalam piksel.

Katakanlah kita memiliki kode berikut.

html{
font-size: 16px; 
}
p{
font-size: 1rem; /* 1rem = 16px */
}
h1 {
    font-size: 1.875rem; /* 30px / 16px = 1.875rem */
}

Dalam contoh diatas, kita tetapkan tag paragraf ke 1 rem yang setara dengan 16px ukuran html root Anda. Sementara tag h1 akan memiliki 1.875rem jika Anda akan membagi ukuran target yang 30px dengan ukuran html root 16px.

Bootstrap 4 menarik unit Rems pada scene untuk memiliki 100% skala yang sempurna dari seluruh aplikasi. Hal ini membuat lebih mudah untuk skala atas atau skala bawah untuk perangkat. Juga patut dicatat bahwa ukuran tag html dapat disesuaikan dengan ukuran yang diinginkan.

Class Table Kontekstual

Bootstrap 3 menggunakan class kontekstual untuk menaruh beberapa warna background pada baris tabel atau cell individu. Dalam Bootstrap 4, mereka menambahkan .table- * kode awal pada setiap class kontekstual.

Tables-Contextual-Classes

Tabel Condensed Berganti nama

Bootstrap 3 menggunakan class .table-condensed untuk membuat tabel lebih ringkas dengan memotong Padding cell di setengah. Dalam Bootstrap 4, namanya diubah menjadi .table-sm untuk konsistensi.

Lihat contoh kode di bawah.

<table class="table table-striped">
   <thead>
      <tr>
         <th>Table Header 1</th>
         <th>Table Header 2</th>
         <th>Table Header 3</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Cell 1</td>
         <td>Cell 2</td>
         <td>Cell 3</td>
      </tr>
      <tr>
         <td>Cell 4</td>
         <td>Cell 5</td>
         <td>Cell 6</td>
      </tr>
      <tr>
         <td>Cell 7</td>
         <td>Cell 8</td>
         <td>Cell 9</td>
      </tr>
   </tbody>
</table>

Kode di atas akan seperti ini.

table-e1457514298578

Form Class

Form memiliki beberapa perubahan class. Dua perubahan besar dibuat yang mengubah nama class .input-lg dan .input-sm ke .form-control-lg dan .form-control-sm dan menghapus .form-group-*.

Dalam Bootstrap 4 menambahkan class baru .form-control-label untuk label vertikal center dengan .form-control.

Mari kita melihat perubahan dalam aksinya.

<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 form-control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-lg" id="inputEmail3" placeholder="Email">
    </div>
  </div>
 
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 form-control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control form-control-sm" id="inputPassword3" placeholder="Password">
    </div>
  </div>
 
  <div class="form-group row">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>

Kode di atas akan terlihat seperti ini.

signup

Migrasi lainnya

Selain penambahan untuk perubahan dan pembaruan class diatas, nama-nama class berikut juga perlu diubah jika Anda bermigrasi dari Bootstrap 3 ke Bootstrap 4.

migration

Perubahan JavaScript

Bootstrap menggunakan banyak JavaScript tergatung komponen seperti dalam komponen biasa ada perubahan tapi tidak benar-benar banyak perubahan terutama bagian JavaScript.

Pada kesempatan ini kita akan melihat beberapa penyesuaian tapi secara keseluruhan state coding sangat mirip. Berikut adalah beberapa penyesuaian :

  • Drop Support for IE8: sekarang Internet Explorer 8 support dihapus, itu aman untuk menggunakan jQUery 2.0 yang merupakan versi lebih cepat dari jQuery.
  • ES6 Support : Semua plugin ditulis dalam ES6 dan disusun dengan Babel, sebuah compiler JavaScript. Hal yang baik adalah bahwa hal itu dapat dikompilasi dan maintain(pemeliharaan) lebih mudah dan lebih cepat.
  • Masalah AMD dan UMD diselesaikan

Fitur Baru

Sebagian besar perubahan yang telah dibuat untuk membawa kesesuaian dengan skema penamaan yang digunakan oleh berbagai class tapi pada bagian ini, mari kita membahas beberapa fitur baru utama.

Card

Dalam Bootstrap 4, panel, thumbnail dan well telah dihapus dan diganti dengan card. Komponen ini dapat digunakan untuk menampilkan informasi sebagai halaman atau container yang mendukung berbagai jenis konten seperti link, teks, gambar, header, footer dan banyak lagi dengan berbagai warna background.

Untuk mengaktifkan kartu, menambahkan class .card dan .card-block untuk elemen. Ada juga beberapa class lagi yang dapat Anda gunakan dalam .card class.

  • .card-title untuk heading title
  • .card-text untuk elemen text
  • .card-header untuk header
  • .card-footer untuk footer

Lihat kode di bawah untuk melihat aksinya

<div class="card">
        <!-- Card Header -->
 
        <div class="card-header">
            Card Header
        </div>
 
        <div class="card-block">
            <!-- Card Title -->
 
            <h4 class="card-title">This is the Card Title</h4><!-- Image -->
            <img alt="" src="http://goo.gl/oxHSMr" width="280"> 
            <!-- Card Text -->
 
            <p class="card-text">These are card text. See? They are
            awesome!</p>
        </div><!-- Card Footer -->
 
        <div class="card-footer">
            Card Footer
        </div>
</div>

Kode di atas akan memiliki hasil ini.

colorful-painting

Flexbox

Fitur lain yang opsional ditambahkan dalam Bootstrap 4 adalah flexbox. Box layout yang fleksibel vs flexbox adalah model box baru yang dioptimalkan untuk layout UI ruang bekerja dengan CSS3. Hal ini memungkinkan susunan elemen pada halaman sehingga elemen “anticipate” ketika layout halaman diubah ukurannya.

Untuk mengaktifkannya di projek Bootstrap 4 Anda, mengatur variabel variabel Boolean $enable-flex untuk bernilai true dalam file _variables.scss dan setelah kompilasi berharap bahwa semua grid layout segera beralih menggunakan flexbox menyesuaikan sintaks HTML Anda.

Demo codepen oleh Nicholas Cerminara menunjukan bagaimana flexbox bekerja secara real time.

Catatan: flexbox tidak support Internet Explorer 9

Tooltip

Plugin tooltip Bootstrap awalnya didasarkan pada plugin jQuery.tipsy ditulis oleh Jason Frame. Namun, dalam Bootstrap 4 itu pindah ke Tether plugin pihak ketiga. Jika Anda ingin menggunakan fitur baru ini termasuk tether.js sebelum bootstrap.js.

Kata-kata Terakhir

Pada artikel ini, Anda telah belajar tentang hal-hal yang perlu Anda ketahui ketika melakukan migrasi dari Bootstrap 3 ke Bootstrap 4. Hal ini disarankan untuk selalu memeriksa dokumentasi resmi untuk pembaruan berikutnya.

Anda mungkin ingin mempertimbangkan untuk menggunakan package manager dalam bekerja melalui migrasi Anda. Sesuatu seperti tugas Grunt.js bersamaan dengan node.js, sehingga ketika Anda menjalankan build sistem Anda, perubahan ini dilakukan secara real time. Namun, itu perlu dicatat bahwa tidak semua package manajer memiliki Bootstrap 4 alpha dipublikasikan.

Sekian artikel baru tentang Bootstrap semoga bermanfaat dan jangan lupa untuk berbagi