Edit Desain CSS Anda Di-Browser dengan CSS George

Pernahkah Anda menginginkannya? lakukan pengeditan langsung di browser Anda tanpa beralih kembali ke file CSS Anda? Salah satu solusinya adalah Alat Pengembang Chrome tetapi beberapa pengembang lebih suka alur kerja yang lebih sederhana.

Di situlah CSS George masuk. Ini gratis alat pengeditan dalam peramban bekerja di atas KURANG dan itu diprakarsai oleh a file JavaScript sederhana.

Sebagian besar pengembang lebih suka editor berbasis browser karena tidak semua orang menggunakan precompiler KURANG. Tapi CSS George tidak berjalan pada lingkungan KURANG yang dapat diinstal dengan cepat via npm.

Jika Anda telah menginstal npm maka Anda dapat menjalankan kode sederhana ini tambahkan file sumber ke proyek Anda saat ini:

 npm instal --save-dev css-george 

Atau kamu bisa tarik George.js mengajukan dari GitHub yang di-host di samping semua file sumber lainnya. Seluruh proyek ini gratis dan open source sehingga Anda bisa unduh salinan lengkap dari GitHub jika Anda tidak ingin menggunakan npm.

Dengan .js file ditambahkan ke header situs Anda, Anda bisa mulai menjalankan fungsi George langsung dari browser. Untuk buka jendela editor, klik tombol tilde yang dapat diakses dari Shift + 'yang terletak di sudut kiri atas sebagian besar keyboard. SEBUAH jendela baru akan muncul yang terlihat seperti ini:

Dari layar ini, Anda bisa edit variabel KURANG digunakan untuk semuanya, mulai dari warna hingga ukuran font atau keluarga font.

Di sinilah plugin KURANG menjadi suatu keharusan karena Anda harus memberi tahu CSS George variabel mana yang akan dimasukkan. Setelah diatur, Anda bisa saja buka editor browser CSS George dan pergi ke kota.

Saya harap jelas bahwa alat ini jangan disertakan saat runtime. Kecuali Anda secara khusus ingin membiarkan pengunjung edit warna dan gaya halaman, yang umumnya bukan ide yang baik. Tapi untuk pengujian lokal, CSS George adalah alat langka yang menawarkan utilitas untuk semua pengembang frontend.

Kamu bisa lihat langsung pada halaman demo CSS George, atau unduh salinan lengkap melalui npm atau dari repo GitHub.