Mempercepat Pengembangan Aplikasi dengan Bootstrap

Bootstrap adalah salah satu kerangka kerja front-end HTML/CSS/JS terbaik dan paling banyak digunakan. Hampir semua pengembang web yang telah membuat satu atau dua situs web telah mendengar tentang kerangka kerja populer ini. Ini menawarkan begitu banyak komponen dan sumber daya siap pakai, Bootstrap dapat secara signifikan mempercepat pengembangan aplikasi Anda.

Setiap pengembang yang baik peduli dengan penghematan setiap detik dalam proses pengembangan mereka. Menjadi efisien berarti penerapan lebih cepat - semakin cepat dan sering kami menerapkan, semakin cepat pengguna akhir kami mendapatkan produk yang lebih baik. Oleh karena itu menghabiskan beberapa jam atau hari untuk merencanakan proses dan strategi dapat menghemat tidak hanya beberapa menit, tetapi juga berjam-jam.

Saya pribadi telah bekerja dengan kerangka kerja ini selama 4 tahun terakhir pada 90% proyek saya. Dalam artikel ini, saya ingin berbagi dengan Anda beberapa tips yang dapat membantu Anda mempercepat pengembangan aplikasi Anda tanpa melewatkan beberapa kemampuan luar biasa dari Bootstrap.

Memahami Bootstrap

Meskipun ini adalah kerangka kerja yang sangat mudah untuk memulai, jangan tertipu oleh kesederhanaannya pada pandangan pertama. Sebelum bergegas ke sebuah proyek, habiskan waktu bermain dengan kerangka kerja dan dapatkan informasi tentang bagian-bagian penting dari infrastruktur dan komponen yang menarik. Ini akan membantu menghindari 10 Kesalahan Bootstrap Paling Umum.

Dedikasikan satu jam untuk membaca dokumentasi di situs Bootstrap atau belajar lebih banyak dari posting bagus di blog Toptal, Apa itu Bootstrap? Tutorial Singkat tentang Apa, Mengapa, dan Bagaimana. Dan, artikel bagus Bootstrap 3 Tips dan Trik yang Mungkin Belum Anda Ketahui di scotch.io.

Jika Anda menganggap membaca dokumentasi sebagai tugas yang membosankan dan Anda lebih suka membaca beberapa kode, maka tempat terbaik untuk memulai adalah situs web Bootstrap. Buka inspektur web Anda, pindai kode sumber situs, dan periksa setiap blok kode dan elemennya. Ini mungkin salah satu cara terbaik dan tercepat untuk memahami dasar-dasarnya.

Gali struktur halaman dan pelajari bagaimana tata letak dibuat.

 <div class="container"> <div class="row"> ... </div> </div>

… ubah ukuran jendela browser Anda atau gunakan Chrome Viewport Resizer untuk mempelajari lebih lanjut tentang utilitas kueri media.

 /* 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) { ... }

 @media (max-width: @screen-xs-max) { ... } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } @media (min-width: @screen-lg-min) { ... }

… dan bagaimana dan kapan menggunakannya, kenali kelas kolom untuk hasil desain responsif terbaik.

 <div class="row"> <div class="col-sm-7 col-md-9 col-xs-6">Left column</div> <div class="col-sm-5 col-md-3 col-xs-6">Right column</div> </div>

Lihatlah W3Schools di mana Anda akan menemukan referensi Bootstrap lengkap dari semua kelas CSS, komponen, dan plugin JavaScript - semuanya dengan contoh “Coba Sendiri”:

• Sistem grid Bootstrap menjelaskan: grid di Bootstrap
• Kelas CSS dasar: tipografi, tombol, formulir dan elemen formulir, kelas pembantu, gambar, tabel
• Komponen individu: glyphicons, drop-down, navs.

Periksa kode sumber dan dan cobalah untuk mengenal sebanyak mungkin nama kelas. Pelajari tentang kasus penggunaannya - bagaimana, kapan, dan mengapa. Ini akan membantu Anda bergerak maju lebih cepat saat menulis HTML dan menata elemen UI. Mempelajari lebih lanjut tentang komponen-komponen ini akan membantu Anda menghindari membuat stylesheet Anda membengkak dengan banyak kode duplikat yang tidak perlu. Jaga agar tetap ramping dan bersih dengan menggunakan dan menggunakan kembali komponen yang ada, daripada membuat terlalu banyak komponen baru yang melakukan hal yang sama seperti yang sudah ada dalam kerangka kerja.

Ini sangat penting ketika bekerja dalam tim yang terdiri dari beberapa pengembang. Pastikan Anda tidak berakhir dengan menulis banyak kode duplikat yang membuat terlalu banyak gaya untuk kasus yang sama setiap kali berulang kali ketika menerjemahkan desain baru ke kode. Menjaga pengembangan UI konsisten dan didokumentasikan dengan baik dengan panduan gaya UI juga dapat menambahkan beberapa simpul ke kerja tim yang produktif. Selain itu, Anda akan menemukan bahwa ketika menambahkan fitur atau halaman baru ke aplikasi Anda, Anda akan bergerak maju dengan lebih sedikit frustrasi. Saya telah terlibat dalam lebih dari selusin proyek besar, dan sebagai perbandingan saya telah melihat sejumlah kasus di mana kerangka kerja benar-benar diretas dan setiap kali kode CSS baru ditambahkan, itu akan merusak UI di halaman lain. Akan sangat melelahkan menelusuri semua situs dan memperbaiki jenis bug ini. Tidak hanya itu, pikirkan tentang biaya dan semua uang yang dihabiskan untuk waktu pengembang ekstra dan bantuan QA.

7 Kesalahan Penataan Waktu yang Paling Umum

1. Saat memusatkan teks atau div

Jika Anda perlu memusatkan div dan/atau konten, Anda dapat menggunakan salah satu kelas berikut:

Gunakan pusat teks

 <p class="text-center">I am centered text</p>

… atau blok tengah

 <div class="center-block">I am centered text</div>

bukan .center atau <center>

2. Saat mengubah ukuran font

Jika Anda membutuhkan font yang lebih kecil atau lebih besar, Anda dapat menggunakan salah satu kelas berikut:

 <p class="lead">I'm bigger paragraph text.</p>

 <p class="small">I'm smaller paragraph text.</p>

Jika Anda membutuhkan header yang lebih besar atau lebih kecil, jangan lupa tentang .h1 , .h2 , .h3 , .h4 , .h5 , .h6 , .small . Gunakan seperti ini:

 <h1 class="h2">Smaller Title with .h2</h1>

 <h3 class="h1">Bigger Title with .h1</h3>

 <h4 class="small">Smaller Title with .small</h4>

3. Saat membersihkan pelampung atau memaksa elemen untuk membersihkan sendiri anak-anaknya

Tidak perlu membuat kelas seperti .clear, Anda selalu dapat menggunakan .clearfix Bootstrap sebagai gantinya.

 <div class="clearfix">...</div>

4. Saat membunuh .row class margin

Cukup gunakan .clearfix daripada mendefinisikan gaya Anda sendiri (atau lebih buruk lagi, menggunakan gaya sebaris):

 <div class="clearfix">...</div>

5. Saat unstyling atau inlining unordered list dan elemen lainnya

Hapus gaya daftar default dan margin kiri pada item daftar. Ini hanya berlaku untuk item daftar anak langsung. Jika Anda perlu menerapkan hal yang sama untuk daftar bersarang, Anda juga perlu menambahkan nama kelas pada daftar tersebut.

 <ul class="list-unstyled"> <li>...</li> </ul> <ul class="list-inline"> <li>...</li> </ul>

Demikian pula, untuk kotak centang atau tombol radio, kami memiliki .checkbox-inline dan .radio-inline .

Dan Anda selalu dapat menambahkan .form-inline ke formulir Anda (yang tidak harus berupa <form> ) untuk kontrol rata kiri dan blok sebaris.

6. Saat mengukur tombol

Ingin tombol yang lebih besar atau lebih kecil? Tambahkan .btn-lg , .btn-sm , atau .btn-xs untuk ukuran tambahan.

7. Saat melayang dan menyelaraskan item ke kanan atau kiri

Float elemen ke kiri atau kanan dengan kelas. !penting disertakan untuk menghindari masalah kekhususan. Kelas juga dapat digunakan sebagai mixin dengan praprosesor CSS apa pun.

Gunakan .pull-right , .pull-left , .text- right , .text- left alih-alih .right , .left , .left -float , .right-float .

 <div class="pull-left">...</div> <div class="pull-right">...</div>

Sejajarkan kembali teks dengan mudah ke komponen dengan kelas perataan teks.

 <p class="text-left">Left aligned text.</p> <p class="text-right">Right aligned text.</p>

Jangan Menyesuaikan File Inti Kerangka Secara Langsung

Saat mengerjakan proyek besar, saya menemukan bahwa cara terbaik untuk menggunakan kerangka kerja secara efektif adalah dengan membangunnya dan tidak menyesuaikan file intinya secara langsung. Konsep ini mirip dengan platform dan perpustakaan lain yang mungkin Anda gunakan untuk proyek tersebut.

Meskipun, jika Anda sedang membangun situs kecil dan memiliki mockup desain yang mungkin tidak memerlukan banyak perubahan atau pembaruan, Anda mungkin menemukan bahwa menyesuaikan kerangka kerja untuk kebutuhan Anda adalah pilihan yang lebih baik. Misalnya Anda mungkin ingin menghapus semua hal yang tidak Anda perlukan secara langsung di file kerangka kerja, atau Anda dapat membuka bagian penyesuaian situs Bootstrap di mana Anda dapat dengan mudah mengonfigurasi semua komponen, variabel, dan plugin jQuery untuk mendapatkan yang Anda inginkan. versi sendiri. Dalam hal ini, Anda dapat mempercepat pengembangan situs dan memangkas waktu penataan atau menangani penggantian.

Namun, jika Anda memulai atau bekerja di situs besar dengan beberapa pengembang atau lebih - yang terbaik adalah menjaga semuanya tetap terpisah dan terorganisir dengan baik. Pindahkan file kerangka kerja di luar folder CSS kustom utama dan simpan di folder non-edit non-versi dan hapus CSS yang tidak digunakan dengan menggunakan plugin Grunt atau Gulp grunt-uncss atau gulp-uncss. Alternatif lain untuk memisahkannya adalah dengan menyajikannya melalui CDN. Memisahkan kode kerangka kerja dan tidak tersentuh memberi Anda opsi yang lebih baik dan lebih cepat saat memutakhirkannya ke versi terbaru. Ini juga membantu meminimalkan sejumlah masalah skalabilitas dan gaya, atau melambat saat membuat penambahan dengan perubahan UI berkelanjutan yang cepat.

Manfaatkan alat scaffolding seperti Yeoman atau Slush, dan manajer paket seperti Bower, Python's pip, Node's NPM, atau Ruby Gems karena mereka melakukan lebih dari sekadar menambahkan file ke jalur aplikasi Anda. Saya sangat menghargai kekuatan Bower - itu pasti dapat melakukan lebih dari sekadar mengunduh satu atau dua file. Menggunakan manajer paket adalah ide yang bagus karena kemungkinan besar kompleksitas proyek Anda akan bertambah dan jumlah plug-in pihak ketiga dan cara Anda memeliharanya akan menjadi gila dan memakan waktu. Bower akan membantu Anda melacak setiap plugin dan dependensinya termasuk apa pun yang terkait dengan Bootstrap.

Memanfaatkan Sumber Daya Bootstrap yang Tersedia untuk Pengembangan Aplikasi

Dengan popularitas Bootstrap, datanglah banyak sumber daya yang bermanfaat: artikel, tutorial, plug-in dan ekstensi pihak ketiga, template, pembuat tema, dan sebagainya. Jadi, apakah Anda sedang mencari inspirasi atau cuplikan kode, Anda akan memiliki semua yang Anda butuhkan untuk mempercepat kemajuan Anda.

Anda akan berpikir bahwa memiliki begitu banyak sumber daya yang tersedia, setiap orang akan memanfaatkannya dan menggunakannya melalui proyek mereka, tetapi percaya atau tidak - bukan itu masalahnya. Beberapa pengembang membuang waktu mereka dan memperlambat kemajuan proyek dengan melewatkan beberapa cuplikan kode atau sumber daya yang bagus. Meskipun Anda tidak boleh hanya menyalin dan menempel secara membabi buta, Anda harus memahami bagian yang baik dan mengadopsinya ke gaya pengkodean dan kebutuhan teknis Anda. Kemampuan untuk menemukan dan memilah sumber daya yang baik dan dapat memanfaatkannya secara efektif juga merupakan keterampilan dan membutuhkan pengalaman dan pengetahuan selama bertahun-tahun.

Di bawah ini Anda akan menemukan daftar sumber daya yang berguna untuk memulai:

Template, Tema, dan Plugin

Tema Resmi dari pembuat Bootstrap: themes.getbootstrap.com.

Pasar dengan tema dan template Bootstrap premium: wrapbootstrap.com, themeforest.net, creativemarket.com/themes/bootstrap.

Tema & Template Bootstrap Gratis: startbootstrap.com, www.bootstrapzero.com, shapebootstrap.net/free-templates.

“Daftar Badass Besar” - daftar 319 sumber daya Bootstrap yang berguna: bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources/

AngularJS

BootstrapUI ditulis dalam AngularJS murni oleh Tim AngularUI.

ReactJS

React-Bootstrap adalah pustaka komponen front-end yang dapat digunakan kembali. Anda akan mendapatkan tampilan dan nuansa dari Twitter Bootstrap, tetapi dengan kode yang jauh lebih bersih, melalui kerangka kerja React.js Facebook.

Django

Integrasi bootstrap 3 dengan Django: https://github.com/dyve/Django-bootstrap3

Jekyll

Jekyll-Bootstrap adalah perancah blog lengkap untuk blog berbasis Jekyll.

WordPress

Tema pemula WordPress Sage dengan alur kerja pengembangan front-end modern. Berdasarkan HTML5 Boilerplate, gulp, Bower, dan Bootstrap.

Desain Bahan

Desain Material untuk Bootstrap adalah tema untuk Bootstrap 3 yang memungkinkan Anda menggunakan Desain Material Google baru di kerangka kerja front-end favorit Anda.

Kesimpulan

Bootstrap adalah salah satu kerangka kerja terbaik yang tersedia yang menawarkan banyak alat dan sumber daya hebat untuk mempercepat dan mempercepat proses pengembangan aplikasi Anda.

Ini menghemat banyak jam/hari kerja saat merancang dan mengkodekan UI yang mengagumkan. Setiap komponen dan plugin didokumentasikan secara menyeluruh dengan contoh langsung dan blok kode untuk penggunaan dan penyesuaian yang lebih mudah. Ini sangat direkomendasikan oleh banyak pengembang dan sangat populer untuk pembuatan prototipe dan produksi. Ini adalah alat yang sangat bagus untuk membuat situs web responsif yang ramah seluler. Bootstrap memberi Anda titik awal yang bagus untuk banyak jenis proyek, opsi untuk menyerahkannya kepada desainer dan mengatakan "buat ini terlihat mewah!" tanpa mereka perlu meretas kode. Yang terpenting, ini memungkinkan Anda untuk mengembangkan struktur terlebih dahulu, dan menangani font, warna, dan gaya mewah nanti. Luangkan waktu untuk mempelajari apa yang dapat dilakukan dan cerdas tentang bagaimana menggunakannya dengan cara terbaik sehingga Anda bisa mendapatkan tempat yang Anda inginkan lebih cepat.