Drupal için ZURB Vakfı Temasını Kullanma

Bir Drupal Teması'nda ZURB Vakfı Çerçevesinin Gücünü Alın

Twitter Bootstrap olmadan önce, birkaç tane iyi yerleştirilmiş CSS sınıfı ile güzel düğmeler, blok ızgaraları, ilerleme çubukları, fiyatlandırma tabloları ve çok daha fazlasını eklemenizi sağlayan bir çerçeve (ve) ZURB Vakfı vardı. Drupal için ZURB Vakfı temasıyla, Drupal sitenizdeki tüm bu tıkanıklıkları ölümcül kolaylıkla ortaya çıkarabilirsiniz.

ZURB Vakfı Çerçevesi Nedir?

ZURB Vakfı çerçevesi, muhtemelen web sitenizde isteyebileceğiniz bir dizi şey için CSS ve Javascript kodlarından oluşan bir koleksiyondur. Bu, yalnızca yukarıda bahsedilen düğmeler gibi tıklanabilir göz şekerini değil, aynı zamanda gerçekten şaşırtıcı tepki gücünü de içerir.

Bu özelliklerin çoğunu özel CSS sınıfları ekleyerek kullanırsınız. Örneğin:

İşte bir düğmesi >.

Ve burada bir minik düğme . .

ZURB Vakfı çerçevesi Drupal'dan tamamen ayrıdır. İnsanlar bunu WordPress, Joomla ve hatta statik HTML sitelerinde kullanır.

ZURB Vakfı Drupal Tema Nedir?

Drupal ZURB Foundation teması , tüm bu ZURBish gücünü bir temayı indirerek ve etkinleştirerek (ve belgeleri okuyarak ve birkaç ekstra adım atmadan) serbest bırakmanıza izin verir.

Örneğin, ZURB Vakfı jQuery Javascript kütüphanesine güvenir, bu yüzden muhtemelen jQuery Güncellemesini yüklemeniz gerekecektir. JQuery'ye güvenen başka bir modül kullanıp kullanmadığınızı kontrol edin. Eğer jQuery'nin yeni bir sürümünü kullanırsanız, bu modüller çalışmayı durdurabilir.

Ayrıca, muhtemelen bu temayı kendi özel temanız için temel tema olarak kullanmak isteyeceksiniz. Özelleştirme, ZURB Vakfı'nın gerçekten parladığı yerdir.

Drupal'da ZURB Vakfı'nı Kullanmak İçin Bu Temasa mı Gerek Var?

ZURB Vakfı çerçevesini kullanmak için bu temasa ihtiyacınız yok. En basit haliyle, bu tema sadece ZURB Vakfı CSS ve Javascript'i sitenize ekler ve bunu manuel olarak yapabilirsiniz.

Ancak bu tema bunu daha kolay hale getiriyor ve Drupal ile daha da fazla entegrasyon içeriyor.

Ayrıca, daha fazla entegrasyon için daha küçük ek modüller ekleyebilirsiniz. Örneğin, ZURB Orbit modülü görüntü alanları ile bir Orbit slayt gösterisi oluşturmanıza izin verir. ZURB Takas modülü, Medya görüntüleri ile duyarlı ışık kutuları oluşturmanızı sağlar.

Not: Bu minik modülleri henüz kendim kullanmadım, bu yüzden tehlike ile dolu olabilirler. Bu yazının sonucunda, ZURB Clearing, Media 1.x kullanıyorsanız, tehlikeli bir yükseltme olabilecek Media-2.x-dev gerektirir. Ve bir modülün geliştirme sürümü için bir gereksinim her zaman bir duraklama vermelidir. Yine de, bu ve diğer ZURB modülleri araştırmaya değer.

Kullanılacak ZURB Vakfı'nın Hangi Sürümünü Seçiniz

ZURB Vakfı temasını indirmeden önce, hangi sürümü kullanacağınızı kontrol edin. ZURB Vakfı çerçevesinin farklı büyük sürümleri vardır ve temanın ana sürüm numarası , çalıştığı çerçeveye karşılık gelir. Dolayısıyla, temanın 7.x- 3 .x sürümleri Foundation 3 ile çalışır, 7.x- 4 .x sürümleri Foundation 4 ile çalışır ve 7.x- 5 .x sürümleri Foundation 5 ile çalışır.

Bu yazının sonunda, temanın en son durağan sürümü 7.x-4.x'tir. Bu, Foundation 4 ile birlikte çalışır. 7.x-5.x sürümü hala geliştirilme aşamasındadır. Dolayısıyla, Foundation framework web sitesi Foundation 5'i kullanacağınızı varsayarsa da, şimdilik Foundation 4 ile uğraşmak isteyebilirsiniz.

Ayrıca, Foundation 5'in ekstra gereksinimlere, özellikle de jQuery 1.10'a sahip olduğunu unutmayın. Temel 4 sadece jQuery 1.7+ 'ye ihtiyaç duyar.

Çevrimiçi belgeleri okurken kullandığınız Foundation sürümünün farkında olun. Bu, çerçevenin en son sürümünü kullanmıyorsanız özellikle doğrudur. Diyelim ki, Foundation 5 için dokümanlar okumaya kaymak çok kolay, daha sonra Foundation 4 sitesinde yeni bir özellik çalışmadığında hayal kırıklığına uğrayacaksınız.

Örneğin, Foundation 5, orta ölçekli ekranlar için bir dizi orta sınıf içerir. Vakıf 4'te, fazladan adımlar alamazsanız bunlar gizemli bir şekilde başarısız olacaktır.

SASS, Pusula ve & # 34; _variables.scss & # 34 ;! kullanın

Bu tema için CSS'yi değiştirecekseniz, emin olun:

• ZURB Vakfı temasını kendi özel altınız için temel tema olarak kullanın
• Bu alttheme teması tarafından sağlanan drush komutunu kullanarak oluşturun. Bunun gibi: drush fst your_theme_name
• Mükemmel _variables.scss dosyasını rahatlıkla okur

_variables.scss dosyası, acele fst tarafından otomatik olarak oluşturulur. Bu tek dosya, temanızın CSS'sinde ince ayar yapmak isteyebileceğiniz hemen hemen her şey için değişkenler içeriyor. Bu harika! Tek bir yerde, varsayılan yazı tipinden ekran genişliğine, kırıntılardaki sınırlara kadar her şeyi ayarlayabilirsiniz.

Tabii ki, her zaman ek dosyalar da oluşturabilirsiniz. Ama _variables.scss başlamak için muhteşem bir yerdir.

Dosya uzantısına dikkat edin: scss, css değil. _variables.scss öğesini kullanmak için SASS (bir CSS uzantısı dili) ve Compass (SASS ile oluşturulmuş bir çerçeve) oluşturmanız gerekir. Pusula derlemeyi çalıştırdığınızda, scss dosyalarınız ayrı dosyalarda güzel CSS'ye dönüşür. (Pusula saatini tercih ederim - bu, scss dosyalarını değiştirirken CSS'yi çalıştırmaya ve güncellemeye devam eder.)

Gerçekten, gerçekten SASS ile uğraşmak istemiyorsanız, CSS dosyalarını her zamanki gibi yazabilir ve bunları tema .info dosyanızda listeleyebilirsiniz. Ama bana güvenin - _variables.scss derlemek için yeterli öğrenmek için küçük zaman yatırım neredeyse anında geri ödenecek.

ZURB Vakfı'nı Kullanmadan Önce

ZURB Vakfı en iyisidir, ancak Drupal ile entegre edilmiş olan tek ön uç çerçevesi değildir. Drupal temasına sahip olan benzer bir çerçeve olan Bootstrap'ı da düşünebilirsiniz. Şimdilik, ZURB Vakfı'nı kendim kullanıyorum, ama bu benim araştırmamın Bootstrap'ten daha kolay özelleştirilebileceğini gösterdi.

Ayrıca, Joyride bileşeni oldukça tatlıdır.

Ve ZURB Foundation, Bootstrap veya başka bir çerçeve kullanıp kullanmadığınızı, bu ipuçlarını Drupal ile bir çerçeve kullanma konusunda aldığınızdan emin olun.