Bir gözlemle başlayalım: Bana bazı çerçeveleri seviyorum. Tekerleği tamamen yeniden icat etmeye ya da bir düğmeyi sıfırdan şekillendirmeye alternatif olarak, temel HTML / CSS / JavaScript ihtiyaçlarınız için hepsi bir arada bir çözüme sahip olmak zor.
Sorun şu ki, tam orada söylediğim şey buydu. Çerçeveler gerçekten hepsi bir arada bir çözüm değiller mi? Onları modüler ve özelleştirmesi kolay hale getirdiğimiz her şey için bazen ihtiyacımız olan şeylere sahip değiller.
Mümkün olan her olası HTML parçacığını, öğe stilini veya javascript işlevini eklemek imkansızdır. Ama sonra, bu da iyi bir şey olabilir.
Bir çerçeveye ihtiyacımız olmayan pek çok şey olabilir. En sinir bozucu işimden bazıları, Bootstrap'ın devasa CSS dosyalarından elle arama yaparak tasarımma zarar veren bazı küçük kodları değiştirdi.
Örneğin Bootstrap'ın gezinme çubuğu bileşenini alın. Harika, kusursuz çalışıyor ve güzel görünüyor. Ancak, büyük bir şekilde göründüğü yolu değiştirmeye çalışırsanız, çok fazla stil değiştirmeniz gerekir ve hepsini bulmak biraz zaman alır. İstediğiniz sayfanın üst kısmında yer alan yatay bir bağlantı listesi varsa, yeni bir kodu sıfırdan kodlamak daha kolay olabilir.
Ama hey, orada daha popüler çerçeveler, özellikle Bootstrap, çok özelleştirme araçları var, değil mi? Evet, bu harika bir şey, ama varsayılan seçenekler size çalışmak için yeterince yer vermiyor.
Basitçe söylemek gerekirse, eğer odak noktanız yaratıcılık üzerindeyse, büyük bir çerçeve muhtemelen gitmenin yolu değildir. Elbette, onu kesebilirsin ama bu çok zaman alacak.
Çalıştığım bir sorun daha var: JavaScript uyuşmazlıkları. Gerçekten programcı olmayan bir adam olarak, bu acı verici oldu.
Özellikle, birkaç jQuery eklentisini Foundation'a dayalı bir tasarıma entegre etmeye çalıştığım bir zaman vardı. Bu kendi başına bir anlaşma değil, ancak hata ayıklama için daha fazla zaman harcıyor.
Tabii ki, bu geçen yıl biraz zaman oldu. Aynı çerçeve ve eklentilerin yeni sürümleriyle aynı şeyi denediysem ne olacağını bilmiyorum, ama yine de düşünülmesi gereken bir şey.
Özet olarak, çerçevelerin basitçe cevap olmadığı zamanlar vardır. Bu, araç setinin buraya geldiği yer ve bir tane olmalı.
Bu makalenin bağlamında, bir araç takımı, projelerinizi çok daha hızlı kodlamanıza olanak tanıyan, kendinden toplanan ve küratörlüğünü almış bir araç, parçacık, eklenti ve kaynak kümesidir. İnsanlar genellikle bu kaynakları zamanla bulur ve bunlara eklenir. Bu kişisel bir şey ve gerçekten kendin yapmalısın.
benzerlikler
farklılıklar
Bir araç kitinin bir çerçeve üzerindeki avantajı, çok yönlülüğüdür. Daha önce de belirttiğimiz gibi, tasarım sınırlarını zorlamayı planladığınız projelerde, bir çerçeve genellikle çok hantaldır.
Aynı kalite, küçük-orta ölçekli projelerde de çerçevenin çöküşüdür. Tanıtım amaçlı açılış sayfası oluşturuyor musunuz? Tek sayfalık bir site mi? Basit bir blog mu? Sonra bir çerçeve muhtemelen sadece gereksizdir. Sıfırdan başlayarak, projenin her detayını siz yapın.
Söyleyecek kadar ileri gideceğim - bu sadece benim düşüncem - çoğu içerik odaklı web sitesinin tam teşekküllü bir çerçeveye ihtiyacı yoktur. İstisna, büyük siteler için olurdu ars technica Örneğin. Bu kadar büyük bir şey için bir çerçeve kullanmalısınız, ancak muhtemelen web sitesinin tam ihtiyaçlarını karşılamak için onu sıfırdan kendiniz geliştirmelisiniz.
Bootstrap ve Foundation gibi çerçeveler gerçekten parladığında, web uygulaması geliştirme ve uygulama odaklı web siteleridir. Bu projelerde, sizi yavaşlatmak yerine, nispeten sert kısıtlamaların işe yarayacağı açıktır.
Kendi araç setinizi oluşturmak, zaman, sabır ve deneyim sorunudur. Demek istediğim, gidip “web tasarım kaynakları” için arama yapabilirdiniz. Binlerce isabetle binlerce dolar elde edersiniz, ve birkaç saat içinde, muhtemelen kullanabileceğinizden daha fazla kod indirebilirsiniz.
Ama bu bir araç takımı değil. Bu, asla dokunmayacağınız bir kütüphanedir, çünkü onun içinden ayırmak çok uzun sürer. İnsanlarla meşgulüz, bu yüzden buna daha organik bir yaklaşım attım: Bir sorunla karşılaştığımda, ben Google.
Parçacıklar ezberlemek için genellikle çok uzun, bu yüzden kendimi aynı şeyi tekrar tekrar aramakta bulursam, onu araç takımıma eklerim. Aynısı yazılım için de geçerli: eğer bir şey kullanacağını biliyorsan, onu ekleyeceksin.
Bu, yeni bir “oyuncak” ile deney yapmak için asla zaman ayırmamanız gerektiğini söylemez. Daha iyisi için çalışma şeklinizi değiştirebilecek belirli bir kaynağı duyuyorsanız, hepsini kontrol edin. Ancak, araç takımlarının nispeten küçük tutulduğunu unutmayın. Düzenli olarak karşılaştığınız ihtiyaçları karşılamanız için gerekenleri tutmaya odaklanmalısınız.
Yine, bu araç takımlarının, kendi gereksinimlerinizi karşılamak için kendiniz yapmak zorunda olduğunuz bir şey olduğunu tekrarlayacağım. Yine de, kendi aracınızı oluştururken, neleri arayacağınıza dair daha iyi bir fikir vermek için araç takımımdaki şeyleri listeleyeceğim.
CSS ön işlemciler gibi AZ ve SUKDÖ'nün iki şey yap
Önceden bir işlemciyle CSS'yi kodlamayı denemediyseniz, şimdi bunu yapmanızı rica ediyorum. Şimdi. Bekleyeceğim.
Yerel sabit diskinizde kaydedemeyeceğiniz bir şeye ihtiyacınız olduğunda, iyi organize edilmiş bir yer imleri listesi çok yararlı olabilir. Ben gibi şeyler imi CSS3 jeneratörler , hareketli jeneratörler , renk düzeni yaratıcıları ve el ile yaptığınız zaman çok daha uzun süren görevleri hızlı bir şekilde yerine getirmeme yardımcı olan diğer araçlar.
Izgara sistemleri 2000'lerdir. Duyarlı web tasarımı gerçek bir şey haline geldiğinden beri, sayısız cihazların ihtiyaçlarını karşılamak için şebeke sistemleri giderek daha karmaşık hale gelmiştir.
Ve eğer özel bir ızgara sistemine ihtiyacınız varsa? Birçok çevrimiçi yanıt veren şebeke sistemi üreticilerinden birine çarpabilirdiniz, ancak bunlar sınırlıdır.
Çözüm şeklinde geliyor semantic.gs . Şimdi, kendi yazarı bir ızgara sistemi olarak adlandırılırken, bir düzen motoru olarak adlandırmayı seçiyorum, çünkü bu bir ızgara değil. CSS ön işlemine dayanan bir araçtır (bunu LESS, SASS ve Stylus ile kullanabilirsiniz) ve anında, sabit genişlikli veya duyarlı olan herhangi bir ızgarayı oluşturmanızı sağlar.
Tek yapmanız gereken bir sayıyı (SASS vb.) Bir dosyada değiştirmek ve gitmek.
Emmet HTML ve CSS'de kısaltmaların tamamını kod satırlarına dönüştüren eklentilerin bir koleksiyonudur.
Temel olarak, bu döner:
div>ul>li*3>aBunun içine:
- https://github.com/purplefish32/sublime-text-2-wordpress" class=external rel=nofollow> bu bir WordPress için . WordPress'in şablon işlevleri ve functions.php için seçenekleri hatırlamak zor olabilir, bu yüzden bu bir hayat kurtarıcıdır.
jQuery eklentileri
Daha önce de söylediğim gibi, gerçek bir programcı değilim. Dolayısıyla, herhangi bir gelişmiş animasyon veya UI işlevselliği gerektiğinde, ancak sorunlara değecek bir çerçeve yapmamak için tek tek eklentilere başvuruyorum.
Benim favorilerimden bazıları:
- Scrollto.js : pürüzsüz bir kaydırma komut dosyası.
- idTabs : Herhangi bir sekmeli UI'ye ihtiyacınız olduğunda.
- Supersized : Tam sayfa slayt gösterisine ihtiyacınız olduğunda.
- ResponsiveSlides.js : adı ne diyor. Bu duyarlı bir görüntü kaydırıcısı. Daha ne isteyebilirsin?
Kendi kişisel kitaplığınıza sahip olmak için asla çok erken değildir.
Araç takımınızda hangi araçları görmek istersiniz? Hangi kaynakları olmadan yaşayamadın? Yorumlarda bize bildirin.
Öne çıkan görsel / küçük resim, matematikçi araç kiti resmi Marc Kjerland üzerinden.