9 Alat / Tools Terbaik untuk Menciptakan Bootstrap Themes & Template Website

Tidak ada jalan lain. Membuat tema untuk Bootstrap bisa menjadi pekerjaan yang besar. Datang dengan tampilan dan nuansa adalah langkah pertama tapi menerapkannya dapat merasa menakutkan. Jangan khawatir, ada alat yang dapat digunakan untuk mempercepat proses dan bahkan membuatnya menyenangkan.

Berikut adalah daftar alat terbaik saya telah menemukan untuk mengembangkan tema Bootstrap.

Yang satu ini mungkin tampak jelas, tetapi Anda harus menggunakan kode editor yang layak jika Anda ingin efisien kode tema Bootstrap. Luhur Text menawarkan beberapa fitur sederhana yang akan membuat hidup Anda lebih mudah dan mempercepat proses Anda. Pertama saya ingin membagi jendela menjadi dua kolom. Di sebelah kiri saya punya halaman HTML dan di sebelah kanan saya punya file CSS saya. Saat aku sedang membangun keluar komponen saya dapat beralih antara tampilan. Untuk mengakses pandangan ini pergi ke Lihat> Layout dan pilih Kolom: 2.

Fitur sederhana kedua Anda dapat menggunakan adalah side bar. Untuk mengaktifkannya, masuk ke Lihat> Side Bar dan pilih Tampilkan Side Bar. Setelah sidebar aktif, buka File> Open Folder dan pilih folder untuk proyek Anda. Ini akan memuat semua file untuk direktori proyek Anda ke bar sisi. Sekarang Anda dapat membuka file dengan satu klik pada mereka di side bar. trik sederhana lain tapi itu akan menghemat waktu satu ton. Jika Anda ingin mempelajari lebih lanjut tentang menggunakan Sublime Text, Anda harus memeriksa Wes Bos 'buku Sublime Text Power User.

Ketika mengembangkan tema Bootstrap pada Mac, alat yang ampuh yang dapat Anda gunakan adalah Hammer. Hammer memungkinkan Anda untuk super-biaya pengembangan tema Anda dengan menggunakan HTML termasuk, variabel, filepaths pintar, dan autoreload. Anda dapat bekerja dengan bahasa seperti SASS, CoffeeScript, HAML, dan penurunan harga dan kemudian mengkompilasi semuanya ke vanili HTML & CSS. e-book saya Menguasai Bootstrap meliputi topik ini secara rinci.

Anvil

Anvil adalah menu bar aplikasi untuk mengelola website lokal. Ini dari pengembang yang sama di belakang Hammer dan bekerja bergandengan tangan. Gunakan Hammer untuk membangun dan mengkompilasi tema Anda, kemudian gunakan Anvil untuk melihat mereka secara lokal. Anda memiliki segala yang dibutuhkan untuk mengembangkan tema lokal kemudian mengirimkannya kepada pelanggan Anda.

Less

Jika Anda telah menggunakan Bootstrap untuk sementara maka Anda mungkin akrab dengan menggunakan Kurang. Jika tidak, apa yang Anda tunggu? Menggunakan perpustakaan Kurang variabel melalui semua komponen Anda adalah salah satu hal terbaik yang dapat Anda lakukan untuk mempercepat pengembangan tema. Mengubah hal-hal seperti warna, font, perbatasan, margin, padding, dll ... di satu tempat. Saya menulis posting di sini tahun lalu disebut Ambil rasa sakit dari Bootstrap theming dengan Kurang. Check it out untuk petunjuk lebih lanjut tentang bagaimana menggunakan Kurang di Bootstrap.

Grunt

Grunt adalah tugas pelari JavaScript. Jika Anda sedang mencari cara untuk mempercepat proses theming Anda ingin untuk mengotomatisasi tugas yang berulang dan Grunt dapat membantu dengan itu. Grunt adalah seperti Hammer tetapi Anda mendapatkan lebih banyak kontrol. Ini berjalan dari baris perintah dan menggunakan Node.js. Anda harus menginstal Node lokal pertama jika Anda ingin menggunakan Grunt. Setelah Anda menginstalnya, lihat panduan Persiapan.

Dalam docs Anda akan melihat Anda perlu membuat file package.json. file ini akan menginstal semua dependensi yang diperlukan untuk proyek Anda. Beberapa dependensi Anda akan ingin menyertakan adalah untuk Bootstrap, Kurang, dan concat minimal. Hanya mencari "Bootstrap" paket NPM untuk menemukan potongan kode yang benar Anda butuhkan.

Hal berikutnya yang perlu Anda lakukan adalah file setup Grunt Anda. Setiap proyek Grunt membutuhkan Gruntfile.js mana Anda memuat dalam konfigurasi proyek Anda. Mengimpor file package.json, setup jalur ke sumber dan tujuan Anda file, dan memuat plugin NPM khusus. Ada banyak lagi yang dapat Anda lakukan di sini tapi itu umumnya cara kerjanya. Setelah Anda selesai menyiapkan berkas Grunt Anda Anda dapat mulai untuk membangun proyek Anda. Setelah selesai menggunakan Grunt untuk mengkompilasi versi produksi untuk Anda.

MAMP

Jika Anda sedang mencari server localhost berfitur lengkap, saya pasti akan checkout MAMP. MAMP memungkinkan Anda untuk menjalankan hal-hal seperti PHP yang dapat berguna ketika mengintegrasikan Bootstrap menjadi tema WordPress. Alat ini adalah untuk pengguna yang menginginkan lingkungan server seperti nyata pada mesin lokal mereka.

Bootstrapdocs

Ini adalah situs berguna yang telah diarsipkan dokumentasi Bootstrap untuk semua versi sebelumnya dari kerangka. Jika Anda menemukan diri Anda masih menggunakan versi lama Bootstrap, situs ini memiliki versi warisan setiap situs docs dapat Anda gunakan.

Glyphsearch

Font web icon yang datang dengan Bootstrap mengagumkan tapi itu besar! Glyphsearch memungkinkan Anda untuk mencari ikon di set dan akan meludahkan nama kelas CSS untuk Anda. Anda dapat dengan mudah menyalin mereka dan paste ke dalam tata letak Anda. Ini akan menghemat banyak jam mencari nama kelas.

Harp

Kecapi adalah alat saya saat ini pilihan. Ini memberikan kemudahan Hammer dengan kontrol Grunt. Masalah dengan Hammer adalah bahwa jika Anda ingin menggunakan sesuatu seperti Kurang itu bisa rumit; mungkin tapi sulit. Dibandingkan dengan Grunt, Anda mendapatkan semua kontrol tetapi dapat cukup teknis untuk setup. Kecapi jatuh tepat di tengah-tengah untuk saya. Ini adalah alat baris perintah sehingga Anda butuhkan untuk menjadi nyaman di sana tapi itu jauh lebih mudah untuk setup. Sekali lagi Anda perlu menginstal Node dan kemudian menginstal Harp. Dengan perintah hanya pasangan Anda mendapatkan akses ke hal-hal seperti HTML termasuk, variabel dan auto-kompilasi Kurang. Harp juga menawarkan dukungan untuk SASS, Stylus, CoffeeScript, penurunan harga, Jade dan EJS.

Saya baru saja merilis kursus email gratis yang disebut Bootstrap Tema Made Easy yang menjelaskan cara membuat tema Bootstrap dengan Harp.

Tweet

Subscribe to receive free email updates: