Bootstrap veya HTML5 boyler gibi web çerçeveleri bir tasarımcıya (geliştirici değil) bir şey sunuyor mu?

Not, bu tasarım geliştirme ile ilgili çok daha fazla.

Tamamen elle yazılmış CSS ve HTML ile siteleri sıfırdan inşa ediyorum.

Bootstrap veya HTML5 Boilerplate gibi css şablonlarını bir süredir önceden biliyorum . Geçmişte onlara kısaca baktım ama aslında hiçbir şey için onları kullanmaya hiç başlamadım. CSS’yi sıfırlama veya gerektiğinde javascript dahil etme veya görünümler için yapılandırma konusunda hiçbir sorunum yok.

Bu akşam, temel bir HTML5 / CSS sayfasını kodladım. Mizanpaj açısından dünyayı parçalayan hiçbir şey yok. Sadece bir atlama noktası. Daha sonra Bootstrap'a aynı düzende bir koşuşturma vermeye karar verdim. Kahraman resim sayfasıyla birlikte oldukça standart bir 960px, 3 sütun.

Bootstrap'ı değiştirdiğimde, zamanımın% 80 veya daha fazlasının bir sınıfa hangi sınıfın veya kimliğin uygulandığını öğrenmek için harcadığı, ardından bunu ayarlamak için CSS'de bulduğu ortaya çıktı. Bootstrap'ın beni hiçbir zaman kurtarmayacağı belli oldu. Aslında, Bootstrap * aşırı tempolu CSS nedeniyle üretim sürelerini büyük ölçüde artıracaktı.

* ( "aşırı tempolu" derken, büyük olasılıkla herhangi bir web sitesi için kullanmayacağım çok fazla CSS var. Genel olarak gereksiz CSS olmadığı için. )

Bootstrap'a aşina olsaydım, sınıf / kimlik adlarını ve stil sayfalarındaki genel yeri bilirdim. Bu yüzden, beni alırken biraz eğilmeye razıyım, bir kısmının kendi tanıdıklığımdan kaynaklandığının farkına vardım.

Ancak, yardım edemem ama Bootstrap et. ark. sadece tasarımcıları kendi marka kodlarını besleyerek kaşıkla sakatlayan koltuk değnekleridir. Böylece, tamamen üçüncü taraf bir çözüme bağlı olacak ve her şeyin veya en azından çoğunluğun işlevselliğine dayanan bir tüketici tabanında kilitleme. Bana sadece bir web sitesi tasarlayabilenleri Dreamweaver kullanıyorsa hatırlatıyor. Dreamweaver'a erişimi yoksa ve değişiklik yapılması gerekiyorsa cennet yasak.

Bir site oluştururken kendi standart sınıf ve ID isimlerimi kullanıyorum. CSS'yi benim için ne kadar sezgisel olarak yapılandırıyorum. Hızlı kurulum için kendi hazır yapım şablonlarım var. Bu yüzden inşa ettiğim herhangi bir siteyi oldukça hızlı bir şekilde düzenleyebilirim. Önceden yapılandırılmış ön uç paketlerinden herhangi kullanarak basitçe öğrenmek gerektiği anlamına gelmektedir onların adlandırma kuralları ve bunların başıma güvenmek yerine yapıyı.

• Herhangi biri bana Bootstrap veya HTML5 Boilerplate gibi şablonlama sistemlerinin büyük erdemlerini anlatabilir mi?
• Onları sizin için değerli yapan nedir?
• Yalnızca kullandığınız sisteme aşina mısınız, böylece kolayca gezinebiliyor musunuz, yoksa yine de öğeleri avlamak mı istiyorsunuz?
• Zorunda olsaydı onlarsız bir site kurar mısın?

Geçen ay çok daha fazla çerçeveyi araştırıyordum. Aslında çözümlerin hiçbirine dalmadım, ancak kısa listemde yer alan birkaç çerçeve alternatifi Foundation , Intuit ve YAML ve Base .

Bu konuda iyi olan şey, 'Bootstrap' görünümüne sahip olmadıkları ve tasarımcıları kendi işlerine (tasarımlarına) teşvik ederken, duyarlılıkla ilgilenmeleri gibi görünüyor.

İşte bu yazıda çerçevelerin büyük bir listesi ve daha fazla bilgi .

Daha önce de belirtildiği gibi, araştırma çalışmasını yaptım, ancak test etmeye başlamadım, bu nedenle çerçevelerin herhangi birini savunan yorumlar yardımcı olabilir.

Avantajları öncelikle olma eğilimindedir:

• Hızlı Prototipleme (yani hız)
• Dahili Cross tarayıcı tutarlılığı

Bir ızgara oluşturmanız gerekiyorsa ve oluşturmanız gereken ızgara önceden oluşturulmuş CSS çerçevesine uyuyorsa, mantık orada çerçeveyi kullanarak yarı yolda olmanızdır.

Bütün bunlar size katılıyorum. CSS çerçeveleri, IMHO, hedeflerinizin% 90'ını karşılarlarsa harika olmaları için görsel tasarım şablonları gibidir; kendi sıfırdan.

EK:

Bir tane daha potansiyel fayda eklemeliyim:

• belgelenmiş bir sistem

Birkaç ön uç geliştiriciye sahip olabileceğiniz bir işletme ortamında ve proje birkaç ön uç geliştirici ekibiyle birkaç yıl sürebilir, belgelenmiş bir temel sunum katmanı çerçevesine sahip olmak size yardımcı olabilir.

Bu, kendi ev yapınızdaki çerçevenin belgelenemediğini söylemek değildir, sadece belgelerin genellikle bir öncelik olmadığı anlamına gelir.

HTML5 Boilerplate'i tanıyorum, ancak Bootstrap'a daha aşinayım, bu yüzden konuşacağım. Her ikisinin de iki farklı göreve yönelik olduğunu unutmayın (H5BP duyarlı bir normalleştirilmiş şablondur, Bootstrap bir HTML / CSS / JS widget'ları ve duyarlı bir ızgara koleksiyonudur.) Aslında birlikte kullanılabilirler .

Ancak, yardım edemem ama Bootstrap et. ark. sadece tasarımcıları kendi marka kodlarını besleyerek kaşıkla sakatlayan koltuk değnekleridir. Böylece, tamamen üçüncü taraf bir çözüme bağlı olacak ve her şeyin veya en azından çoğunluğun işlevselliğine dayanan bir tüketici tabanında kilitleme. Bana sadece bir web sitesi tasarlayabilenleri Dreamweaver kullanıyorsa hatırlatıyor. Dreamweaver'a erişimi yoksa ve değişiklik yapılması gerekiyorsa cennet yasak.

Önyükleme kaynağına tam erişiminiz olduğundan benzerlik burada başarısız olur. Bir şeyin nasıl çalıştığını sevmiyorsanız, değiştirebilirsiniz. Bana göre bir koltuk değneği karşısında - css tekniklerini öğrenmek için kaynak kodunu kullanabilirsiniz .

"Bir web sitesi tasarlamanın", metal kodlayıcıya C kodlayıcılarının derli toplu dil bilgisine sahip olması gerektiğine inandığımdan daha yakın olması gerektiğine katılıyorum. Her ne kadar bu analoji düz olsa da, HTML / CSS'yi ayarlamak sadece seçicileri genişletmek ve ihtiyacınız olanı eklemekle ilgili bir meseledir.

Herhangi biri bana Bootstrap veya HTML5 Boilerplate gibi şablonlama sistemlerinin büyük erdemlerini anlatabilir mi?

Bootstrap'ın katil özelliği benim için widget stilini ve Javascript bileşenlerini uygulamak tutarlı ve kolaydır. Bir düğme gibi görünmek için bir bağlantı ister misiniz? '.Btn' sınıfı ekleyin. Bir masa ister misin? Bir '.table' sınıfı ekleyin. Gezinme öğesi ister misiniz? Sırasız bir liste oluşturun ve gezinti sınıfları ekleyin.

Açılan pencereler, açılır pencereler, uyarılar vb. Veri özelliklerine sahip öğelere kolayca eklenir. Bootstrap, widget'lara kolayca entegre edilebilen çok hoş görünümlü bir simge kümesi içerir.

Onları sizin için değerli yapan nedir?

• Siteleri hızlı bir şekilde prototip edebilir
• Çapraz tarayıcı ve çapraz platform css tüm hata ayıklama benim için yapıldı.
• Çok çeşitli değişkenlerle kolayca özelleştirilmiş CSS, böylece mizanpajları hızlıca deneyebilir ve prototip edebilirim.
• Standart gezinme widget'ları
• Kaynak kodu açık ve ücretsiz, ellerimi kirletebilir ve yeni bir karışıma ihtiyacım olursa veya davranışımı istediğim şekilde değiştirirsem LESS'i özelleştirebilirim.

Yalnızca kullandığınız sisteme aşina mısınız, böylece kolayca gezinebiliyor musunuz, yoksa yine de öğeleri avlamak mı istiyorsunuz?

Bootstrap'ın en büyük özelliklerinden biri mükemmel belgeleridir . Kolayca gezinebiliyorum ve css seçicileri sezgisel ve hatırlaması kolay.

Zorunda olsaydı onlarsız bir site kurar mısın?

Evet, ama açıkça daha fazla iş. UX ve hızlı prototip mizanpajlara bitmiş iyi görünümlü aletler ve tutarlı işlevsellikle odaklanabiliyorum.

Templating sistemleri ve çerçeveler hakkında güzel bir şey onlar size çok zaman kaydedebilirsiniz olmasıdır IFF onlar istediğiniz şekilde çalışır. Öyleyse, Bootstrap ile bir JS atlıkarınca yapmak için semantiklerini öğrendikten sonra uygulanması neredeyse suç basit. Ayrıca, başlamadan önce kendi yuvarlamanızı ya da Rails'deki bootstrap-sass gibi bir şeyi anında kullanmanız durumunda Bootstrap çok daha basit görünüyor ; Daha sonra her şeyi değiştirmekten sizi kurtaracak.

DA01 tarayıcı tutarlılığı hakkında konuşuyor ... benim için büyük bir faktör. Bu yüzden SO'da herhangi bir sayıda kişi, sadece birkaç şeyi yapmak için büyük bir kütüphane eklemenin bir kaynak israfı olduğunu hatırlatsa da, jQuery kullanıyorum. JQuery kullandığımda, belirli bir tarayıcı setinde çalışacağını biliyorum ve bu yüzden muhtemelen kendi başıma daha hafif bir çözüm elde etsem de, jQuery'nin benden yazmamı istediğini öğrenmenin daha faydalı olduğunu gördüm. JavaScript ve sonra kendi yolunu yap.

Sonunda, HTML / CSS çerçevelerini kısıtlayıcı bulmaya eğilimliyim; Hala yapabildiğim zaman elle kodlamayı sevdiğim bir kontrol manyağıyım. Ancak, insanların benden daha akıllı ve daha gelişmiş olmalarına, bu şablonları / çerçeveleri kurmak için çok zaman harcadıklarına saygı duyuyorum.

İlgilendiğiniz, büyük bir şirket için büyük bir ekipte çalışan var mı?

Bootstrap gibi çerçeveler, bir proje boyunca tutarlı bir kod standardı oluşturmak için harikadır, ayrıca yeni geliştiriciler için işe alım yaparken, popüler bir çerçeve deneyimine sahip olanların sözdizimini çok iyi bildiği ve daha hızlı bir şekilde üretken olabileceği anlamına gelir ... büyük şirketler için harika bir haber.

Ayrıca .. bootstrap gibi çerçevelerle, daha fazla ekran boyutu, daha fazla cihaz ve daha iyi özellikler, bizimki gibi bir şirkete (bootstrap kullandığımız yer) desteklenerek sürekli güncellenmektedir.

Şimdiye kadar cevapların bir kısmını okuduklarında çok dar gözüküyorlar, cevapların çoğunun eskiden tek başlarına veya çok küçük takımlarda çalışan kişilerden ve bu tür bir şeyin genellikle sorun olmadığı küçük projelerden kaynaklandığını düşünüyorum. .

Daha önceki cevaplarda söylenenlere ek olarak, bu şablonlara bir başka avantaj da cihazlar arası tutarlılık olacaktır . Yerleşik ızgaralar, herhangi bir işletim sistemi için tasarım yapmayı çok kolaylaştırır.

Hala aşağıdaki nedenlerden dolayı kendi kodumu yazmayı tercih ediyorum:

• Zaten yazdıklarımla aşinalık. Bir şeyi değiştirmem gerekirse, tam olarak nerede olduğunu biliyorum;

• Proje merkezli yapı. Her yeni site / uygulamanın öncekinden farklı ihtiyaçları olacaktır, bu nedenle dosya ve kaynakların ayrı ayrı organize edilmesi gerekebilir.

• Farklı cihazlar için özelleştirilmiş görünümler.

Çok sınırlı bir sayfa yapmadığınız sürece, yeni öğelere gittikçe daha fazla stil ekleyip mevcut olanların üzerine yazmanız gerekir.

Duyarlı tasarımlarla çalışmayı sevdiğim için onları kullanmamamın ana nedeni, her duyarlı aşamayı "ayrı ayrı" ve bir bütün olarak tasarlamayı tercih etmemdir. Ve bu şablonlar genellikle tam olarak ayarlayamadığınız, az çok katı bir ızgara ile çalışır.

En büyük avantaj, sadece neye benzeyeceğini speküle etmek yerine, yeniden boyutlandırmayı denemenizdir.

Gezinmeyi gerçekten kodladığım ve metin içeriğini eklediğim çok "ilk önce içerik" geliştirme yaklaşımım var. Sizi tasarım aşamasındayken beklemeyeceğiniz şeylere maruz bırakma eğilimindedir.

Twitter Bootstrap gibi bir çerçeve kullanarak, sayfaları hala tasarım halindeyken test edebilir ve kullanılabilirlik sorunlarını ve diğer Kullanıcı Deneyimi zorluklarını bile ortaya çıkarabilirsiniz. Çerçeveler, aşina olacağınız ve size zaman kazandıracak çok sayıda yeniden kullanılabilir sınıfa sahiptir.

Sıfırdan çok kod yazdığından bahsettin. Çok özel veya çok hafif olması gereken bir şeye sahip olduğumda, Skeleton ile gidiyorum.

Yıllarca her şeyi elden kodlardım, ancak bugünlerde Bootstrap kullanma eğilimindeyim. Neden bunu yapıyorum?

1. Çok az çalışma ile duyarlı bir düzen alıyorum. Üzerinde çalıştığım bazı web sitelerinde, tablet ve mobil olarak optimize edilmiş bir düzen elde etmek için birkaç küçük düzeltmeye ihtiyacı var. Duyarlı navbar, en sevdiğim bootstrap bileşenlerinden biri.
2. Varsayılan kontroller, tarayıcılar ve işletim sistemleri arasında tutarlı değildir, kullandığınız işletim sistemi veya tarayıcıdan bağımsız olarak hepsi çirkindir. Önyükleme ile iyi ve tutarlı bir görünüm elde edersiniz ve çok az iş hissedersiniz. Yine de tüm kontrolleri kontrol altına almak istiyorsanız, o zaman evet, Bootstrap size çok zaman kazandırmaz, ama benim deneyimime göre, çoğu zaman her kontrolün sınırlandırılması için yeterli zamanınız olmaz, ama yine de çirkin varsayılan tarafından tahriş hissedersiniz kontrolleri.
3. Ne yapmak istediğinizi sınırlar, ki bu iyi bir şeydir, çünkü saf CSS'de çalışırken her küçük şeyi (renk, kenarlık kalınlığı, gradyan, gölge, kenarlık yarıçapı, renk geçişler ve liste devam eder), bireysel olarak az zaman alırlarsa da, genel olarak büyük bir zaman alıcıdır. Son teslim tarihi olan projeler üzerinde çalışırken, yapabileceklerinizi ve yapamadıklarınızı sınırlandırmak istersiniz; çerçeveleri kullanmak, hangi CSS özelliklerinin ayarlayacağı yerine kaba taneli bileşenlerde düşünmenizi sağlar.
4. Bazı sunucu tarafı çerçevelerinin önyükleme ile tümleştirmesi var. Örneğin, django-bootstrap kullanırken, sadece {{ form|as_bootstrap }}hata mesajlarında kırmızı vurgulama gibi önyükleme stili biçimli formlar elde etmek için yapabilirsiniz .

Bootstrap'ı değiştirdiğimde, zamanımın% 80 veya daha fazlasının bir sınıfa hangi sınıfın veya kimliğin uygulandığını öğrenmek için harcadığı, ardından bunu ayarlamak için CSS'de bulduğu ortaya çıktı.

Yanlış anladığın yer orası. Bootstrap’dan yararlanmak istiyorsanız, çok fazla kişiselleştirme yapmamalısınız; Önceden oluşturulmuş bileşenleri kullanırken her şeyi ince ayar yapma zorunluluğunuzun esnekliğini bırakıyorsunuz. IKEA bileşenlerinden bir odayı dekore ederken ahşap testereleri kesmek veya oymak için zaman harcamamalısınız.

Önceden oluşturulmuş bileşenlerden çalışan bir web sitesini hızlıca kurmanız gerektiğinde önyükleme iyidir; Fantezi tasarımları olan sitelere koyarsanız, bileşenleri ağrılı parmak gibi yapışır, bu yüzden genellikle bu tür projeler için Bootstrap'ı düşürürüm.

Önceden konfigüre edilmiş ön uç paketlerinden herhangi birini kullanmak, yalnızca kendi başıma güvenmek yerine adlandırma kurallarını ve yapılarını öğrenmem gerektiği anlamına gelir.

Bu aslında popüler bir paket kullanmanın bir avantajı. Her ikiniz de "btn-group", "btn btn-large" ın ne yaptığını bildiğinizden, kişisel çerçeveli olarak kendi özelliklerinizi öğrenmek zorunda kalacaklarını (veya daha yaygın, sadece basamaklandırırlardı) bir projeyi başka bir geliştiriciye teslim etmek daha kolaydır. css'ınız değişiklikleriyle ve kodunuzu deşifre etmeye veya değiştirmeye çalışmayın).

Yalnızca kullandığınız sisteme aşina mısınız, böylece kolayca gezinebiliyor musunuz, yoksa yine de öğeleri avlamak mı istiyorsunuz?

Btn, table, row *, span *, etc gibi yaygın olanlar doğal olur. Ancak ana bileşenler için html için, örnekleri yazmak yerine örneklerinden kopyalayıp yapıştırmak çok daha hızlı.

Zorunda olsaydı onlarsız bir site kurar mısın?

Orada bulundum, birçok kez yaptım.

onlar sadece şunun için iyi:

1. kodlamaya uygun olmayan ancak tasarımlarını bir siteye getirmek için bir çözüm isteyen tasarımcılar.
2. kendi çerçevesini oluşturmak istemeyen biri için hat üretimini hızlandırmanın bir yolu.

Şahsen benim kendi yöntemlerim var ve bu rotaya gitme arzum yok çünkü CSS, HTML ve jQuery kodlarını nasıl öğrendiğimi çoktan öğrendim. Bunlarda hiçbir ipucu olmayan ve kodlamayı öğrenmeye çalışanlar için bir fayda görüyorum. Beş yıl önce böyle bir şey görmek güzel olurdu. Ayrıca, belirttiğiniz gibi, bunu mevcut üretim yönteminizde uygulamanız daha uzun sürer.

EDIT: iş parçacığınızı yükseltmeye çalışmıyorum ama ben de aynı şeyi merak ediyorum ama WordPress ile ilgili olarak. Hafifçe WordPress kullandım ancak bir çerçevenin yararlı olup olmadığını bilmiyorum. Büyük bir fayda bulana kadar eski moda yoldan gitmeyi planladım.

Bootstrap, duyarlı bir düzen için başlangıç ​​noktası olarak iyidir. Ama tasarım kadarıyla ben oldukça eksik olduğunu düşünüyorum. Bir tür 'bootstrappy' görünüşünü kullanıyor, çünkü onun şablonu aşırı kullanılmış.

Ancak, açılışta ne yapılması gerektiğine dikkat etmelisiniz, twitter tarafından oluşturulan ev içi uygulamalara tutarlılık getirecekti ve bunun için kullanacak olsaydınız, ya da hızlı bir şekilde çeki düzen vermek isteyen bir geliştiriciniz olsa bile çok düşünmeden app, belki de bir mvp veya prototip olarak onun gerçekten harika bir araçtır.