Apakah kerangka kerja web seperti Bootstrap atau HTML5 boilerplate menawarkan sesuatu kepada perancang (bukan pengembang)?

Catatan, ini tentang desain lebih dari pengembangan.

Saya membangun situs dari awal dengan CSS dan HTML yang ditulis tangan sepenuhnya.

Saya sudah tahu tentang template pre-build css seperti Bootstrap atau HTML5 Boilerplate selama beberapa waktu. Saya telah melihat mereka sebentar di masa lalu tetapi tidak pernah benar-benar menggunakan mereka untuk apa pun. Saya tidak memiliki masalah mengatur ulang CSS, atau termasuk javascript saat diperlukan, atau mengkonfigurasi untuk viewports.

Malam ini, saya membuat kode halaman HTML5 / CSS dasar. Tidak ada yang benar-benar menghancurkan bumi dalam hal tata letak. Hanya titik melompat. Setelah itu saya memutuskan untuk memberikan Bootstrap pusaran dengan tata letak yang sama. Ini 960px cukup standar, 3 kolom dengan halaman gambar pahlawan.

Ketika saya mengubah Bootstrap, saya sadar bahwa 80% atau lebih dari waktu saya dihabiskan untuk mempelajari kelas atau id apa yang diterapkan pada sesuatu, kemudian menemukan bahwa dalam CSS untuk menyesuaikan. Menjadi jelas bahwa Bootstrap tidak akan menyelamatkan saya waktu sama sekali. Faktanya, Bootstrap akan sangat meningkatkan waktu produksi karena * CSS yang terlalu templated.

* ( dengan "terlalu templated" Maksud saya ada banyak CSS yang saya mungkin tidak akan gunakan untuk situs web tertentu. Bukan berarti tidak ada CSS yang tidak perlu secara keseluruhan. )

Saya mengerti bahwa jika saya terbiasa dengan Bootstrap saya akan terbiasa dengan nama kelas / id dan lokasi umum di stylesheet. Jadi, saya bersedia sedikit menekuk pada waktu yang saya perlukan, menyadari bahwa beberapa di antaranya adalah karena ketidaktahuan saya sendiri.

Namun, saya bertanya-tanya apakah Bootstrap et. Al. hanya kruk yang melumpuhkan desainer dengan sendok memberi mereka kode merek mereka sendiri. Dengan demikian mengunci basis konsumen yang akan sepenuhnya bergantung pada solusi pihak ketiga dan fungsinya untuk semuanya, atau setidaknya mayoritas. Ini mengingatkan saya pada orang-orang yang hanya dapat mendesain situs web jika mereka dapat menggunakan Dreamweaver. Dan surga melarang jika mereka tidak memiliki akses ke Dreamweaver dan perubahan diperlukan.

Ketika saya membangun sebuah situs saya menggunakan kelas standar dan nama ID saya sendiri. Saya menyusun CSS bagaimana itu intuitif bagi saya. Saya memiliki set templat pra-bangun untuk pengaturan cepat. Karenanya, situs apa pun yang saya bangun dapat saya edit dengan cukup cepat. Menggunakan salah satu paket pra-konfigurasi front-end hanya berarti saya perlu belajar mereka konvensi penamaan dan mereka struktur daripada mengandalkan saya sendiri.

• Adakah yang bisa memuji saya kebajikan besar dari sistem templating seperti Bootstrap atau HTML5 Boilerplate ?
• Apa yang membuat mereka berharga bagi Anda?
• Apakah Anda hanya terbiasa dengan sistem yang Anda gunakan sehingga Anda dapat menavigasi dengan mudah atau apakah Anda masih harus mencari item?
• Bisakah Anda membangun situs tanpa mereka jika Anda harus?

Saya sudah banyak meneliti kerangka kerja bulan lalu atau lebih. Saya belum benar-benar masuk ke salah satu solusi, tetapi beberapa alternatif kerangka kerja yang ada di daftar pendek saya adalah Foundation , Intuit dan YAML dan Base .

Hal yang baik tentang ini adalah bahwa mereka tidak memiliki tampilan 'Bootstrap', dan tampaknya mendorong desainer untuk melakukan pekerjaan mereka (desain), sementara mereka mengurus responsif.

Berikut adalah daftar besar kerangka kerja dan info lebih lanjut dalam hal ini artikel .

Seperti yang disebutkan, saya telah melakukan kerja keras penelitian, tetapi belum mulai mengujinya, jadi komentar apa pun yang mendukung kerangka kerja apa pun akan membantu.

Keuntungan cenderung terutama:

• Rapid Prototyping (yaitu, kecepatan)
• Konsistensi peramban Cross bawaan

Jika Anda perlu membuat kisi, dan kisi yang harus Anda buat sesuai dengan kerangka kerja CSS yang sudah dibuat sebelumnya, maka logikanya adalah Anda berada di tengah jalan dengan menggunakan kerangka itu.

Semua yang dikatakan, saya cenderung setuju dengan Anda. Kerangka kerja CSS, IMHO, seperti template desain visual yang jika memenuhi 90% dari tujuan Anda, mereka bagus, tetapi jika tidak, maka Anda menghabiskan lebih banyak waktu dan upaya untuk memodifikasi default vs hanya membangun dari awal kamu sendiri.

TAMBAHAN:

Saya harus menambahkan satu lagi manfaat potensial:

• ini adalah sistem yang terdokumentasi

Dalam lingkungan perusahaan, di mana Anda mungkin memiliki beberapa pengembang ujung depan, dan proyek dapat berlangsung beberapa tahun dengan beberapa tim pengembang ujung depan yang berbeda, memiliki kerangka kerja lapisan presentasi yang mendokumentasikan dapat membantu.

Itu tidak berarti bahwa kerangka buatan Anda sendiri tidak dapat didokumentasikan, hanya saja dokumentasi seringkali bukan prioritas.

Saya kenal dengan HTML5 Boilerplate, tapi saya lebih akrab dengan Bootstrap, jadi saya akan membicarakannya. Ingat bahwa keduanya diarahkan pada dua tugas yang berbeda, (H5BP adalah templat dinormalisasi responsif, Bootstrap adalah kumpulan widget HTML / CSS / JS dan kisi-kisi responsif.) Bahkan, keduanya dapat digunakan bersama .

Namun, saya bertanya-tanya apakah Bootstrap et. Al. hanya kruk yang melumpuhkan desainer dengan sendok memberi mereka kode merek mereka sendiri. Dengan demikian mengunci basis konsumen yang akan sepenuhnya bergantung pada solusi pihak ketiga dan fungsinya untuk semuanya, atau setidaknya mayoritas. Ini mengingatkan saya pada orang-orang yang hanya dapat mendesain situs web jika mereka dapat menggunakan Dreamweaver. Dan surga melarang jika mereka tidak memiliki akses ke Dreamweaver dan perubahan diperlukan.

Analogi gagal di sini karena Anda memiliki akses penuh ke sumber Bootstrap. Jika Anda tidak suka cara kerja sesuatu, Anda bisa mengubahnya. Bagi saya itu kebalikan dari kruk - Anda dapat menggunakan kode sumber untuk mempelajari teknik css.

Saya tidak setuju bahwa "mendesain situs web" harus sedekat itu dengan logam seperti yang saya percaya C coders perlu memiliki pengetahuan mendalam tentang bahasa assembly. Meskipun analogi itu gagal karena menyesuaikan HTML / CSS hanyalah masalah memperluas penyeleksi dan menambahkan apa yang Anda butuhkan.

Adakah yang bisa memuji saya kebajikan besar dari sistem templating seperti Bootstrap atau HTML5 Boilerplate?

Fitur pembunuh Bootstrap, bagi saya, adalah gaya widget dan komponen Javascript yang konsisten dan mudah diterapkan. Ingin tautan terlihat seperti tombol? Tambahkan kelas '.btn'. Mau meja? Tambahkan kelas '.table'. Ingin elemen navigasi? Siapkan daftar yang tidak diurutkan dan tambahkan kelas navigasi.

Dropdown, popover, peringatan, dll. Mudah ditambahkan ke elemen dengan atribut data. Bootstrap mencakup serangkaian ikon yang terlihat sangat bagus yang dapat dengan mudah diintegrasikan ke dalam widget.

Apa yang membuat mereka berharga bagi Anda?

• Dapat dengan cepat membuat prototipe situs
• Semua debugging cross-browser dan cross-platform css telah dilakukan untuk saya.
• CSS yang mudah dikustomisasi dengan berbagai pilihan variabel sehingga saya dapat bereksperimen dan membuat prototipe layout dengan cepat.
• Widget navigasi standar
• Kode sumber terbuka dan gratis, saya bisa mendapatkan tangan saya kotor dan menyesuaikan KURANG jika saya memerlukan mixin baru atau mengubah perilaku seperti yang saya butuhkan.

Apakah Anda hanya terbiasa dengan sistem yang Anda gunakan sehingga Anda dapat menavigasi dengan mudah atau apakah Anda masih harus mencari item?

Salah satu fitur terbesar dari Bootstrap adalah dokumentasi yang luar biasa . Saya dapat menavigasi dengan mudah dan penyeleksi css intuitif dan mudah diingat.

Bisakah Anda membangun situs tanpa mereka jika Anda harus?

Ya, tapi itu jelas lebih banyak pekerjaan. Saya dapat fokus pada UX dan tata letak prototipe cepat dengan widget yang terlihat bagus dan fungsionalitas yang konsisten.

Yang menyenangkan tentang templating systems and frameworks adalah mereka dapat menghemat banyak waktu jika Anda bekerja dengan cara yang mereka inginkan. Jadi, dengan Bootstrap, setelah Anda mempelajari semantik mereka untuk melakukan JS carousel, hampir secara kriminal mudah diterapkan. Selain itu, Bootstrap tampaknya menjadi jauh lebih sederhana jika Anda menggulung sendiri sebelum memulai atau menggunakan sesuatu seperti bootstrap-sass di Rails untuk mengubah variabel-variabel tersebut dengan cepat; itu akan menyelamatkan Anda dari mengubah segalanya di sekitar nanti.

DA01 berbicara tentang konsistensi peramban ... itu faktor besar bagi saya. Itu sebabnya saya menggunakan jQuery meskipun sejumlah orang di SO akan mengingatkan Anda bahwa menambahkan perpustakaan besar hanya untuk melakukan beberapa hal adalah pemborosan sumber daya. Saya tahu bahwa ketika saya menggunakan jQuery, itu akan bekerja di satu set browser tertentu, dan meskipun saya mungkin dapat mencapai solusi yang lebih ringan sendiri, saya merasa lebih bermanfaat untuk mempelajari bagaimana jQuery ingin saya menulis JavaScript lalu lakukan dengan cara mereka.

Pada akhirnya, saya cenderung menemukan kerangka kerja HTML / CSS terbatas; Saya cukup aneh kontrol yang saya masih suka kode dengan tangan ketika saya bisa. Tapi, saya menghargai kenyataan bahwa orang yang lebih pintar dan lebih maju daripada saya menghabiskan banyak waktu untuk mengatur kerangka / kerangka ini.

Karena ketertarikan, apakah ada di antara Anda yang bekerja dalam tim besar untuk perusahaan besar?

Kerangka kerja seperti bootstrap fantastis untuk membuat standar kode yang konsisten di seluruh proyek, itu juga berarti bahwa ketika merekrut untuk pengembang baru, mereka yang memiliki pengalaman kerangka kerja populer akan terbiasa dengan sintaks dan dapat menjadi produktif lebih cepat ... berita bagus untuk perusahaan besar.

Juga .. dengan kerangka kerja seperti bootstrap, mereka senantiasa menjaganya agar diperbarui dengan mendukung lebih banyak ukuran layar, lebih banyak perangkat dan fitur yang lebih baik, ke perusahaan seperti kita (di mana kita menggunakan bootstrap) ini menghasilkan uang yang pada dasarnya disimpan.

Membaca beberapa jawaban sejauh ini, mereka tampaknya berpikiran sangat sempit, saya berasumsi bahwa sebagian besar jawabannya adalah dari orang-orang yang terbiasa bekerja sendiri atau dalam tim yang sangat kecil dan pada proyek-proyek kecil di mana hal semacam ini biasanya tidak menjadi masalah. .

Menambahkan apa yang telah dikatakan dalam jawaban sebelumnya yang hebat, keuntungan lain dari templat ini adalah konsistensi lintas perangkat . Grid bawaan membuatnya sangat mudah untuk dirancang untuk OS apa pun.

Saya masih lebih suka menulis kode sendiri, karena alasan berikut:

• Keakraban dengan apa yang sudah saya tulis. Jika saya perlu mengubah apa pun, saya tahu persis di mana itu;

• Struktur proyek-sentris. Setiap situs / aplikasi baru akan memiliki kebutuhan yang berbeda dari sebelumnya, sehingga file dan sumber daya mungkin perlu diatur secara terpisah.

• Tampilan khusus untuk berbagai perangkat.

Kecuali jika Anda membuat halaman yang sangat terbatas, Anda akhirnya akan menambah lebih banyak gaya ke elemen baru, dan menimpa yang sudah ada.

Karena saya suka bekerja dengan desain responsif, alasan utama mengapa saya tidak akan menggunakannya adalah karena saya lebih suka merancang setiap langkah responsif "secara terpisah" dan secara keseluruhan. Dan template ini biasanya bekerja dengan grid yang kurang lebih kaku yang tidak dapat Anda atur sepenuhnya.

Keuntungan terbesar adalah bahwa Anda dapat bereksperimen dengan mengubah ukuran sendiri, bukan hanya berspekulasi seperti apa jadinya.

Saya memiliki pendekatan pengembangan yang sangat "konten pertama" di mana saya sebenarnya mengkodekan navigasi dan menambahkan konten teks. Itu cenderung memaparkan Anda pada hal-hal yang tidak Anda antisipasi ketika Anda berada dalam fase desain.

Dengan menggunakan kerangka kerja seperti Bootstrap Twitter, Anda sebenarnya dapat menguji halaman saat masih dalam desain dan bahkan mungkin mengungkap masalah kegunaan dan tantangan Pengalaman Pengguna lainnya. Kerangka kerja memiliki banyak kelas yang dapat digunakan kembali yang Anda akan terbiasa dan akan menghemat waktu Anda.

Anda menyebutkan bahwa Anda banyak kode dari awal. Ketika saya memiliki sesuatu yang harus sangat khusus atau sangat ringan, saya menggunakan Skeleton

Selama bertahun-tahun, saya terbiasa melakukan handcode segala sesuatu, tetapi saat ini saya cenderung menggunakan Bootstrap. Mengapa saya melakukan itu?

1. Saya mendapatkan tata letak responsif dengan sedikit kerja. Di beberapa situs web yang saya kerjakan, hanya perlu beberapa penyesuaian kecil untuk mendapatkan tata letak yang dioptimalkan untuk tablet dan seluler. Navbar responsif adalah salah satu komponen bootstrap favorit saya.
2. Kontrol default tidak konsisten antara browser dan OS, belum lagi semuanya buruk rupa OS atau browser apa pun yang Anda gunakan. Dengan bootstrap, Anda mendapatkan tampilan yang layak, konsisten, dan sedikit kerja. Namun, jika Anda ingin mengatur ulang semua kontrol, maka ya, Bootstrap tidak akan menghemat banyak waktu, tetapi dalam pengalaman saya, sebagian besar waktu Anda tidak akan memiliki cukup waktu untuk mengatur ulang semua kontrol tetapi masih merasa kesal dengan standar jelek tersebut. kontrol.
3. Ini membatasi apa yang ingin Anda lakukan, yang merupakan hal yang baik, karena ketika bekerja dalam CSS murni Anda cenderung ingin mengubah setiap hal kecil (warna, ketebalan batas, gradien, bayangan, radius perbatasan, transisi, dan daftar berjalan), sementara secara individu mereka mengambil sedikit waktu, secara keseluruhan itu adalah waktu yang besar. Ketika mengerjakan proyek dengan tenggat waktu, Anda ingin membatasi apa yang dapat dan tidak bisa Anda lakukan; menggunakan framework memungkinkan Anda berpikir dalam komponen berbutir kasar alih-alih properti CSS apa yang akan diubah.
4. Beberapa kerangka kerja sisi server memiliki integrasi dengan bootstrap. Misalnya, ketika menggunakan django-bootstrap, Anda bisa melakukan saja {{ form|as_bootstrap }}untuk mendapatkan bentuk-bentuk gaya bootstrap, termasuk highlight merah pada pesan kesalahan, dll

Ketika saya mengubah Bootstrap, saya sadar bahwa 80% atau lebih dari waktu saya dihabiskan untuk mempelajari kelas atau id apa yang diterapkan pada sesuatu, kemudian menemukan bahwa dalam CSS untuk menyesuaikan.

Di situlah Anda salah. Jika Anda ingin mendapat manfaat dari Bootstrap, Anda tidak boleh terlalu banyak menyesuaikan; Anda memberikan fleksibilitas karena harus dan mampu mengubah segala sesuatu saat menggunakan komponen yang sudah dibuat sebelumnya. Anda tidak boleh menghabiskan waktu menggergaji atau mengukir papan kayu saat mendekorasi kamar dari komponen IKEA.

Bootstrap bagus ketika Anda perlu dengan cepat menambal situs web yang berfungsi dari komponen prebuilt; komponen mereka memang menonjol seperti jempol jika Anda menempatkan mereka di situs dengan desain mewah jadi saya biasanya drop Bootstrap untuk proyek-proyek semacam itu.

Menggunakan salah satu paket front-end pra-konfigurasi hanya berarti saya perlu mempelajari konvensi penamaan mereka dan struktur mereka daripada mengandalkan saya sendiri.

Itu sebenarnya keuntungan menggunakan paket populer. Lebih mudah untuk menyerahkan proyek ke pengembang lain ketika Anda berdua tahu apa yang "btn-group", "btn btn-large" lakukan, dengan kerangka kerja pribadi mereka harus mempelajari kekhasan Anda (atau lebih umum, mereka hanya akan mengalir) css Anda dengan perubahannya, dan tidak ingin mencoba menguraikan atau memodifikasi kode Anda).

Apakah Anda hanya terbiasa dengan sistem yang Anda gunakan sehingga Anda dapat menavigasi dengan mudah atau apakah Anda masih harus mencari item?

Yang umum seperti btn, tabel, baris *, span *, dll akan alami. Tetapi untuk html untuk komponen utama, jauh lebih cepat untuk hanya menyalin-menempel dari contoh mereka daripada mengetiknya.

Bisakah Anda membangun situs tanpa mereka jika Anda harus?

Pernah ke sana, melakukan itu, berkali-kali.

mereka hanya baik untuk:

1. desainer yang tidak familier dengan pengkodean tetapi menginginkan solusi untuk membawa desain mereka ke situs.
2. cara untuk mengalirkan produksi lini untuk seseorang yang tidak ingin membangun kerangka kerja mereka sendiri.

secara pribadi saya memiliki metode saya sendiri dan tidak memiliki keinginan untuk pergi rute ini karena saya sudah belajar bagaimana kode CSS, HTML dan jQuery. Saya memang melihat manfaatnya bagi orang-orang yang tidak memiliki petunjuk dan berusaha mempelajari cara membuat kode. Pasti menyenangkan melihat sesuatu seperti ini sekitar lima tahun yang lalu. Juga, seperti yang telah Anda nyatakan, Anda perlu waktu lebih lama untuk menerapkan ini dalam metode produksi Anda saat ini.

EDIT: tidak mencoba untuk melakukan highjack utas Anda, tetapi saya juga ingin tahu hal yang sama tetapi dalam hal WordPress. Saya telah menggunakan WordPress dengan ringan tetapi saya tidak tahu apakah suatu kerangka kerja bermanfaat. Saya telah merencanakan untuk menggunakan cara lama sampai saya dapat menemukan manfaat besar.

Bootstrap bagus sebagai titik awal untuk tata letak yang responsif. Tapi sejauh desain saya pikir itu kurang. Ini memang terlihat seperti 'bootstrappy', yang karena templatnya sudah terlalu digunakan ..

Tetapi Anda harus mengingat untuk apa bootstrap dibuat, itu untuk membawa konsistensi pada aplikasi internal yang dibuat oleh twitter, dan jika Anda menggunakannya untuk itu, atau bahkan jika pengembang Anda yang ingin cepat merapikan di sana web aplikasi tanpa banyak berpikir, mungkin sebagai mvp atau prototipe alat yang sangat bagus.