Foundation 6, betadan çıkmaya neredeyse hazır, ve neredeyse her akla yatkın şekilde öncekinden daha iyi: daha akıcı, daha basit ve bir şekilde daha sofistike. Zurb kendilerini aştılar.

Nihayet yüklendikten sonra kendiniz için göreceğiniz gibi - OSX veya Linux'taki kadar basit, ancak Windows'da, Düğümler titiz olabilir - Temel 6 sadece bu günlerde paket yöneticisi aracılığıyla kurulabilir. Yaşlanıyormuş gibi hissediyorum, CSS çerçevelerinin .zip dosyalarında geldiği güzel eski günlerin hayalini ve bir terminal komutundan değil.

Yine de, 6 Vakfı'nın harika olduğunu söylediğimde yalan söylemiyordum. Eh, “Siteler için Vakıf” demeliyim, çünkü Vakıf artık sadece bir çerçeve değil. Vakfın uygulamaları için yanı sıra, Zurb ayrıca gelişimi hızlandırmak için birkaç araç yapmakla meşguldü.

Bu sürüm tamamen performansla ilgili oldu ... siteleri daha hızlı oluşturabilir, bu siteler daha hızlı yüklenir ve JavaScript daha hızlı çalışır.

İlk önce, Vakıf CLI Sizin için Vakfın herhangi bir sürümünü yükleyebilir, başlangıç ​​projeleri ile tamamlayabilirsiniz. Siteler Vakfı'ndaki önceden derlenmiş CSS, son sürümde ayrı olarak indirilebilecektir. Ancak şimdilik, CLI bunu elde etmenin bir yoludur ve son sürümden önce herhangi bir değişiklikten haberdar olunuz.

O zaman orada Panini Statik bir prototip ve / veya siteyi hızlı bir şekilde oluşturmanıza yardımcı olmak için Handlebars şablonlu statik bir sayfa derleyici ve çeşitli diğer özellikler. Sass'i derler, tüm JavaScript'i bir dosyaya koyar, tüm kodunuzu ve daha fazlasını sıkıştırabilir.

Temel 6 özellikleri

Şimdi, Vakfın bu versiyonunun daha az özellik dolu olduğu fikrine kapılmayın - hala ihtiyacınız olan her şeye ve daha fazlasına sahiptir - ancak uygulamalardan daha uygun olan bazı öğelerin sitelere göre kaldırıldığına dikkat edilmelidir. Bu elemanlar şimdi bir parçası Apps Vakfı .

Bu versiyondaki çalışmaların geri kalanı, gereksiz koddan kurtulmak ve kalan her şeyi düzene koymaktı.

Örneğin, üç farklı menü tasarımı için üç farklı menü bileşeni oluşturmak yerine, birkaç varyasyona sahip tek bir menü bileşeni vardır. HTML yazan kişi için küçük bir fark vardır: bir sınıf ekleyin ve bir menünüz var; Birkaç dersi değiştirin ve tamamen farklı görünen bir menünüz var.

Aslında, tüm farklılıklar için, sınıfların ve işaretlerin çoğu, aynı değilse bile, çok tanıdık görünecektir. Hepsi Sass üzerine kurulu, böylece her zamanki gibi özelleştirebilirsiniz.

Bu sürüm tamamen performansla ilgili. Nasıl öğrendiğinizi öğrendiğinizde, siteleri daha hızlı oluşturabilir, bu siteler daha hızlı yüklenir ve JavaScript daha hızlı çalışır. Vakıf şu anda dosya boyutunda yaklaşık olarak yarım kadar ağır oldu. Yarısı

Yeni özellikler

RTL dilleri için açık destek

Eski versiyonlar, Arapça gibi bir ölçüde RTL (sağdan sola) dilleri destekledi; ama biraz düzeltmeye ihtiyaçları vardı. Vakfın 6 yerleşik olarak destek sağladı.

Flex ızgarası

Flex ızgara, tam olarak düşündüğünüz şeydir: Flexbox ile yeniden yapılan Grid bileşeni. Bir yandan, bu, düzenli bir float tabanlı kılavuzun işleyemeyeceği bir dizi özellik ve seçenek sunar. Öte yandan, özellikle de IE tarafından desteklenmez. Bu bir ticaret.

Tipografi yardımcı sınıfları

Web sitesi tarzı tipografi için birkaç güzel geliştirici dahil edildi. Özellikle, tipografik düzenleri yapmak için tasarlanan yardımcı sınıflar vardır:

  • Metin hizalama sınıfları
  • Alt başlık sınıfları - .subheader sınıfıyla herhangi bir başlığa daha açık bir renk uygular.
  • Kurşun paragraf stilleri
  • Madde işaretli olmayan listeler
  • İstatistikler - önemli sayılara daha büyük yazı tipi boyutu uygular

Yukarıda belirtildiği gibi, önceki gezinme bileşenlerinin tümü bir-büyük esnek bileşen haline geldi. Bu, tüm navigasyon tiplerinin birbiriyle iyi oynayacağı anlamına gelir. Aynı zamanda farklı ekran boyutları için farklı navigasyon türleri seçebileceğiniz anlamına gelir.

Bir akıllı telefondaki taramayı ve masaüstünde yatay bir çubuk ister misiniz? Ekran boyutuna özgü sınıflarla kolayca yapılabilir. “Üst çubuk” unuzu geri ister misiniz? Sadece varsayılan menü bileşenlerinin etrafına bir sarıcı div ekleyin.

Ancak genel olarak kullanımı daha kolay olsa da, yine de özellikler yüklü. Belgeleri kontrol ettiğinizden emin olun menüler ve gezinme hakkında .

rozet

Bu küçük daireler ya da meydanlar (genellikle bir çeşit ikonların üzerine ya da yakınına yerleştirilmişlerdir) onların içinde minik sayılar mı biliyorsunuz? Facebook bildirimleriniz olduğunda olduğu gibi mi? Bu rozetler denir.

Her gün yeni bir şeyler öğreniyorsun. Ayrıca, Vakıf şimdi onlara sahip.

Yapışkan

Kullanıcı kaydırırken ekranda bir şey kalması gerekiyor mu? Belirli bir noktada durmasını mı istiyorsunuz? Yapışkan senin eklenti! Bu aynı zamanda Magellan menüyü, Foundation 5'de olduğu gibi çalışmasını sağlamak için kullanmanız gereken şeydir.

toggler

Düşüşler, akordeonlar, sondajlar, araç ipuçları ve modalar sizin için yeterli değilse, işlerin görünmesi veya kaybolması için genel bir yol. Temel olarak herhangi bir şeye uygulanabilecek basit bir JavaScript tabanlı geçiş olayıdır.

Sanırım, diğer bileşenlerin hiçbirinin amaçlara uymadığı veya aşırıya kaçacağı zamanlar. Motion UI kütüphanesini entegre eder, böylece yok olmanızı herhangi bir şekilde canlandırabilirsiniz.

Medya nesnesi

Eh, isim bir video veya Flash nesnesi (yuck) gömebileceğiniz bir öğe gibi geliyor ve bunu tahmin edebilirdiniz. Gerçekten amaçlanan şey, metin bilgisi yanında bir resim gibi herhangi bir medya nesnesinin görüntülenmesidir.

Örneğin, bir kullanıcının avatarını, kullanıcı adlarının yanında ve yorumlar bölümünde yorumlarını yazabilirsiniz. Ya da, bir filmin yayınlanma tarihi, ana aktörler ve diğer meta verileri filmin incelenmesinin yanında yerleştirmek için kullanabilirsiniz. Belgeleri kontrol edin Örneğin.

Temelde eskisi gibi olan özellikler

Her özellik güncellendi veya yeniden yazıldı. Bununla birlikte, çoğu işlevsel olarak değişmez. Doğru sınıflara sahip olduğunuzdan emin olmak için dokümanları iki kez kontrol edin, bazı yükseltmeleri gözden geçirin ve gidin. Alfabetik sıraya göre bu daha fazla veya daha az aynı özellikler şunlardır:

  • Abide - form doğrulama
  • Akordeonlar
  • Temel genel stilleri
  • Breadcrumb gezinti
  • Düğmeler
  • Ek bilgiler,
  • Renk karışımları
  • Açılır menüler
  • Ekolayzer - sütun hizalama
  • Flex Video
  • Formlar
  • Değişim duyarlı içerik
  • Etiket
  • Macellan - artık varsayılan olarak yapışkan değil
  • Medya sorguları (kırılma noktalarının değiştiğine dikkat edilmelidir)
  • Off-tuval
  • sayfalara numara koyma
  • İlerleme çubukları
  • Ortaya çıkartmak
  • kaydırıcılar
  • Anahtarlar
  • Tablolar
  • Sekmeler
  • Izgara
  • Minyatür
  • İpucu
  • Tipografi stilleri
  • Görünürlük ve yardımcı sınıflar

Yani gerçekten iyi mi?

Evet. İnşaat sitelerine yenilenen odaklanma (hem sitelerin hem de uygulamaların gereksinimlerini karşılamaya çalışan bir çerçevenin aksine) canlandırıcıdır ve azaltılmış boyut her zaman artıdır.

Çok yakında çok canlı yayına devam edin.