Kategori arşivi: Css

En Popüler 5 Front end

En Popüler 5 Front – End Frameworks Karışlaştırması

Günümüzde mevcut olan bir CSS front end framework  var. Fakat gerçekten iyi olanların sayısı sadece birkaçı daralabilir. Bu makalede, bugün mevcut olan en iyi beş framework olduğunu düşündüğüm şeyi karşılaştıracağım.

Her frameworkun kendine özgü güçlü ve zayıf yönleri ve belirli bir projenin ihtiyaçlarına göre seçim yapmanıza izin veren belirli uygulama alanları vardır. Örneğin, projeniz basitse, karmaşık bir framework kullanmaya gerek yoktur. Ayrıca, seçeneklerin birçoğu modüler olup, yalnızca ihtiyacınız olan bileşenleri kullanmanıza ve hatta farklı framework bileşenleri karıştırmanıza izin verir.

Keşfeteceğim front end framework , en popüler olan Bootstrap olan GitHub popülerliğine göre sunuluyor.

Aşağıdaki bilgilerin bir kısmının, yayın tarihinden itibaren (GitHub yıldızları ve sürüm numaraları gibi) güncel olmayacağını unutmayın; bu nedenle, yayın tarihinden çok sonra bu makaleyi okuyorsanız, bunun farkında olun. Ayrıca, framework boyutlarının gerekli CSS ve JavaScript dosyalarının küçültülmüş boyutları olduğunu unutmayın.

1. Bootstrap

Bootstrap , günümüzde mevcut ön frameworkler arasında tartışmasız liderdir. Hergün büyümekte olan büyük popülaritesi göz önüne alındığında, bu harika araç setinin sizi başarısızlığa uğratmayacağından veya başarılı web siteleri oluşturmak için sizi yalnız bırakmayacağından emin olabilirsiniz.

  • Yaratıcılar: Mark Otto ve Jacob Thornton .
  • Çıkış Tarşhş: 2011
  • Geçerli sürüm: 4. *. *
  • Popülerlik: 126.202 GitHub da yıldızlı
  • Slogan: “Daha hızlı ve daha kolay web geliştirme için şık, sezgisel ve güçlü Framework .”
  • Temel kavramlar / ilkeler: Önce RWD ve mobil.
  • Dosya boyutu: 592 KB (önceden derlenmiş zip klasörü)
  • Önişlemci: Sass
  • Duyarlı: evet
  • Modüler: evet
  • Başlangıç ​​şablonları / düzenleri: Evet
  • Simge seti: Dahil değil
  • Ekstralar / Eklentiler: Yok paketlenmiş, ancak pek çok üçüncü taraf eklenti var.
  • Benzersiz bileşenler: Jumbotron, Kart
  • Dökümantasyon: Mükemmel
  • Özelleştirme: Izgara sistemi ve Yeniden Başlatma için ayrı dosyalar için seçenek, Sass ile kolay özelleştirme; çevrimiçi özelleştirici yok
  • Tarayıcı desteği: En son Firefox, Chrome, Safari, IE810-11-Microsoft Edge sürümleri.
  • Lisans: MİT

Bootstrap Notlar

Bootstrap’ın ana gücü büyük popülerliğidir. Teknik olarak, listedeki diğerlerinden daha iyi olması gerekmez, ancak diğer dört framework çok daha fazla kaynak (makaleler ve öğreticiler, üçüncü taraf eklentileri ve uzantıları, tema oluşturucuları vb.) Sunar. Kısacası, Bootstrap her yerde . Bu da insanların seçmeye devam etmelerinin ana nedeni.

Not: “Benzersiz bileşenler” derken, yalnızca bu listede belirtilen framework karşılaştırıldığında benzersiz olduklarını kastediyorum.

 

2. Foundation by ZURB

Foundation bu  framework karşılaştırmasında ikinci büyük oyuncudur. Bunu destekleyen ZURB gibi sağlam bir şirketle , bu framework gerçekten güçlü bir … iyi … temeli var. Sonuçta, Foundation Facebook, Mozilla, Ebay, Yahoo! ve National Geographic, destekliyor.

Foundation by ZURB Nedir

  • Yaratıcılar: ZURB
  • Çıkış Tarihi: 2011
  • Geçerli sürüm: 6
  • Popülarite göstergesi: # 27, 497 git GitHub bölgesinde
  • Açıklama: “Dünyanın en gelişmiş ön front end Framework ü ”
  • Temel kavramlar / ilkeler: RWD, ilk önce mobil, anlamsal
  • Dosya boyutu: 233 KB
  • Önişlemciler: Sass
  • Duyarlı: evet
  • Modüler: evet
  • Başlangıç ​​şablonları / düzenleri: Evet
  • Simge seti: Temel Simge Yazı Tipleri
  • Ekstralar / Eklentiler: Evet
  • Benzersiz bileşenler: Simge Çubuğu, Işık Kutusunu Temizleme, Flex Video, Tuş vuruşları, Joyride, Fiyat Tabloları
  • Belgelendirme: İyi, birçok ek kaynak mevcut.
  • Özelleştirme: Temel GUI özelleştirici
  • Tarayıcı desteği: Chrome, Firefox, Safari, IE9 +; iOS, Android, Windows Phone 7+
  • Lisans: MİT

Foundation by ZURB Üzerine Notlar

Foundation, sunulan iş desteği, eğitim ve danışmanlık ile gerçekten profesyonel bir frameworkdur. Ayrıca, Framework ü daha hızlı ve daha kolay öğrenmenize ve kullanmanıza yardımcı olacak birçok kaynak sağlar.

 

3. Semantic UI

Semantic UI , web sitelerini daha fazla anlamsal hale getirmek için devam eden bir çabadır. Doğal dil ilkelerini kullanır, böylece kodu daha okunaklı ve anlaşılır hale getirir.

Semantic UI nedir

  • Oluşturan: Jack Lukic
  • Çıkış Tarihi: 2013
  • Mevcut sürüm: 2.3
  • Popülerlik: 42.162 GitHub
  • Açıklama: “Doğal dilden faydalı ilkelere dayanan bir UI bileşen Framework ”
  • Temel kavramlar / ilkeler: Anlamsal, etiket belirsizliği, duyarlı
  • Dosya boyutu: 1.8 MB
  • Önişlemciler: Daha Az
  • Duyarlı: evet
  • Modüler: evet
  • Başlangıç ​​şablonları / düzenleri: Evet, bazı temel başlangıç ​​şablonları sunulur
  • Simge seti: Yazı tipi Başar
  • Ekstralar / Eklentiler: Hayır
  • Eşsiz bileşenler: Bölücü, Bayrak, Demiryolu, Göster, Basamak, Reklam, Kart, Yem, Öğe, İstatistik, Dimmer, Derecelendirme, Şekil
  • Dokümantasyon: Çok iyi, çok iyi organize edilmiş belgeler sunmanın yanı sıra, başlama, özelleştirme ve tema oluşturma için kılavuzlar sunan ayrı bir web sitesi
  • Özelleştirme: GUI özelleştiricisi yok, yalnızca manuel kişiselleştirme
  • Tarayıcı desteği: Firefox, Chrome, Safari, IE10 + (yalnızca tarayıcı öneki IE9), Android 4, Blackberry 10
  • Lisans: MİT

Semantic UI Üzerine Notlar

Semantik, burada tartışılanlar arasında en yenilikçi ve tam özellikli frameworkdur. Framework genel yapısı ve adlandırma kuralları, sınıflarının açık mantığı ve anlambilimi açısından, diğerlerini aştı.

 

4. Pure, by Yahoo!

Pure , gereksinimlerinize bağlı olarak birlikte veya ayrı ayrı kullanılabilecek bileşenleri içeren, saf CSS ile yazılmış hafif, modüler bir frameworkdur.

purecss nedir dersleri kullanımı

  • Oluşturan: Yahoo
  • Çıkış Tarihi: 2013
  • Mevcut sürüm: 1.0.0
  • Popülarite göstergesi: # 18.825 git GitHub
  • Açıklama: “Her web projesinde kullanabileceğiniz küçük, duyarlı CSS modülleri kümesi”
  • Temel kavramlar / ilkeler: SMACSS , minimalizm
  • Dosya boyutu: 3,8 KB küçültülmüş ve sıkıştırılmış
  • Önişlemciler: Yok
  • Duyarlı: evet
  • Modüler: evet
  • Başlangıç ​​şablonları / düzenleri: Evet
  • Simge seti: Yok; bunun yerine Font Awesome’i kullanabilirsiniz.
  • Ekstralar / Eklentiler: Yok
  • Eşsiz bileşenler: Yok
  • Belgeleme: İyi
  • Özelleştirme: Temel GUI Cilt Oluşturucu
  • Tarayıcı desteği: Firefox, Chrome, Safari’nin son sürümleri; IE7 +; iOS 6.x, 7.x; Android 4.x
  • Lisans: Yahoo! Inc. BSD

Pure.css üzerine notlar

Pure, projenize temiz bir başlangıç ​​yapmak için yalnızca çıplak kemik stilleri sunar. Tam özellikli bir Framework ihtiyaç duymayan, ancak çalışmalarına dahil etmek için yalnızca belirli bileşenlere ihtiyaç duyan insanlar için idealdir.

 

5. UIkit by YOOtheme

UIkit kullanımı kolay ve bileşenleri kişiselleştirmek için kullanılan özlü bir koleksiyondur. Rakipleri kadar popüler olmasa da, aynı işlevselliği ve kaliteyi sunuyor.

YOOtheme nedir kullanımı

  • Oluşturan: YOOtheme
  • Çıkış Tarihi: 2013
  • Mevcut sürüm: 3.0.0
  • Popülarite göstergesi: # 12.821 git GitHub
  • Açıklama: “Hızlı ve güçlü web arayüzleri geliştirmek için hafif ve modüler bir Framework ”
  • Temel kavramlar / ilkeler: RWD, önce mobil
  • Dosya boyutu: 374 KB (sıkıştırılmış klasör)
  • Önişlemciler: Daha Az, Sass
  • Duyarlı: evet
  • Modüler: evet
  • Başlangıç ​​şablonları / düzenleri: Evet
  • Simge seti: UIkit, artan sayıda anahat simgeleriyle birlikte kendi SVG simge sistemi ve kütüphanesi ile birlikte geliyor
  • Ekstralar / Eklentiler: Evet
  • Benzersiz bileşenler: Makale, Flex, Kapak, HTML Editör
  • Belgeleme: İyi
  • Özelleştirme: Gelişmiş GUI Özelleştiricisi yalnızca sürüm 2’de kullanılabilir (önceki sürüm)
  • Tarayıcı desteği: Chrome, Firefox, Safari, IE9 +
  • Lisans: MİT

UIkit Üzerine Notlar

UIkit birçok WordPress temalarında başarıyla kullanılmıştır . Esnek ve güçlü bir manuel özelleştirme mekanizması sunar. (Frameworkun önceki sürümü ayrıca gelişmiş bir GUI özelleştiricisi de sunuyordu.)

 

Sizin İçin Doğru Front-end Framework Nedir?

Sonunda, size doğru Framework seçmek için bazı yönergeler vereyim. Dikkat etmeniz gereken daha önemli şeylerden bazıları:

  • Frameworkün popülerliği yeterli mi? Daha büyük popülerlik, projeye katılan daha fazla insan ve dolayısıyla topluluktan daha fazla öğretici ve makale, daha gerçek dünyadan örnekler / web siteleri, daha fazla üçüncü taraf uzantısı ve göreceli web geliştirme ürünleriyle daha iyi entegrasyon anlamına gelir. Büyük popülerlik aynı zamanda Frameworkün geleceğe daha uygun olduğunu gösterir: Etrafında daha büyük bir topluluğa sahip bir Frameworkün terk edilme olasılığı daha düşüktür.
  • Framework aktif gelişme altında mı? İyi bir Frameworkün, özellikle mobilde, en son web teknolojileriyle sürekli olarak seviye atlaması gerekir.
  • Framework vadeye ulaştı mı? Belirli bir Framework henüz gerçek dünyadaki projelerde kullanılmamış ve test edilmemişse, serbestçe oynayabilirsiniz, ancak profesyonel projeleriniz için buna güvenmek muhtemelen akıllıca olmaz.
  • Framework iyi belgeler sunuyor mu? Öğrenme sürecini kolaylaştırmak için iyi belgeler her zaman arzu edilir.
  • Frameworkün özgüllük seviyesi nedir? Buradaki ana nokta, daha genel bir Frameworkün, üst düzey özgüllüklü bir Framework ile kıyasla, çalışmaktan çok daha kolay olmasıdır. Çoğu durumda, minimal stil uygulanmış bir Framework seçmek daha iyidir, çünkü özelleştirilmesi çok daha kolaydır. Yeni CSS kuralları eklemek, mevcut olanların üzerine yazmak veya geçersiz kılmakla karşılaştırıldığında çok daha kolay ve verimli bir işlemdir. Ayrıca, mevcut kuralların üstüne yeni kurallar eklerseniz, gereksiz yere CSS’nin boyutunu artıracak, kullanılmayan kurallara sahip olursunuz.

Hala emin değilseniz, karışık bir eşleştirme yaklaşımı benimseyebilirsiniz. Belirli bir Framework ihtiyaçlarınızı karşılamıyorsa, iki veya daha fazla projeden bileşenleri karıştırabilirsiniz. Örneğin, bir Frameworkden daha küçük CSS temel stili, diğerinden tercih edilen bir ızgara sistemi ve üçte birinden daha karmaşık bileşenler alabilirsiniz. Viva modülerliği! 🙂

Son olarak, günümüzde, büyük tarayıcıların en son sürümlerinde iyi bir desteğe sahip olan Flexbox ve Grid Layout ile karmaşık düzenler oluşturmak her zamankinden daha kolay. Bu gerçek tek başına daha fazla geliştiriciyi Frameworklerin koltuk değneklerini bırakmaya ve mizanpajlarını sıfırdan kodlamaya teşvik edebilir.

Düşüncelerin nelerdir? Bu Frameworklerden herhangi birinin burada belirtilmeyen güçlü ve zayıf yönleri var mı? Listelenmesi gereken başkaları olduğunu düşünüyor musunuz? Aşağıdaki tartışmada bize bildirin.