3 Fantastik CSS Çerçeveleri Özlemek istemeyeceksiniz
Şahsen, herhangi bir projeyi sadece bir ızgarayla kodlamayı ve oradan inşa etmeyi tercih ederim. Bunun gibi bir seçim yapıyorum ve mümkün olduğunca çok sayıda değişkeni kontrol etmeyi seviyorum.
Ancak, bunun pratik olmadığı zamanlar vardır. Belki bir uygulama veya olağanüstü büyük ve karmaşık bir site oluşturuyorsunuzdur. Belki de her bir öğeyi sıfırdan şekillendirmek için zamanınız yok ve buna gerek yok. Bu tam bir çerçeve, ekstralar ile istediğiniz zaman.
“Büyük isim” çerçeveleri (Bootstrap, Foundation, Gumby) hakkında çok şey yazıldı, bu yüzden burada olanlar hakkında konuşmayacağız. Ben wi oynuyordum… Daha az bilinen seçeneklerden üçünü titizlikle test ediyorum. Bir bak, bunlardan biri tam olarak ihtiyacın olan şey olabilir.
Kube
Kube kesinlikle modern ön geliştirici için bir araçtır. Sadece modern tarayıcılar ve IE9 + - desteklenmektedir. Varsayılan stiller oldukça hoştur, ancak hemen hemen her markayla kullanım için uyarlanabilecek kadar yumuşaktır.
Kısacası, neredeyse evrensel görsel cazibeyle tasarlanmış ve ağır özelleştirme için tasarlanmış, güzel görünen, sade ve sade bir çerçevedir.
Özellikler
Tüm özellikleri derinlemesine açıklamak ya da basitçe hepsini listelemek, muhtemelen bu makalede çok fazla yer kaplayacaktır, bu yüzden size önemli noktaları sunacağım: Çerçevenin kendisi, LESS tabanlı ve modüler. Düğme stilleri dışındaki her şeyi isterseniz, örneğin, kendi "derlemek" için çok basit bir meseledir. Sadece ilgili @import kuralını kube.less'ten kaldırın ve gidin. Düşünebileceğiniz hemen hemen her HTML öğesi için stiller ve düğmeler, temel gezinme çubukları, yardımcı sınıflar ve oldukça sağlam bir ızgara düzeni sistemi gibi alışılmış ekstralar olduğunu söylemek güvenlidir.
Bir anlamda, Kube kısmen sahip olmadığı ile tanımlanır. Örneğin, bir UI öğeleri ve ekstra stiller bolluğu yoktur. UI işlevselliği için herhangi bir jQuery eklentisi yok. Ve kesinlikle herhangi biriyle "sıkışmış" olduğun izlenimi ile gelmiyor.
Sonuç
Kube sağlam bir tekliftir. İçerik oluşturucuları temelleri kaçırmadılar, ancak bu çerçeveyle birlikte gelen “yalnızca ihtiyacınız olan” kesin bir his var. Başlamak için iyi bir yer ve bu yüzden herhangi bir çerçevenin gerçek amacını somutlaştırıyor. Renk beni etkiledi.
Fildişi çerçeve
FİLDİŞİ, Kube gibi, kolayca anlaşılacak ve hızlı bir şekilde uygulanacak şekilde tasarlanmıştır. Tipografi iyi görünüyor, ancak hemen hemen her proje ile kullanmak için yeterince mülayim ve genel varsayılan stiller de.
Başlamanız için yeterli olan ve birkaç tane ekstraya sahip olmak için tasarlanmış bir çerçeve.
Özellikler
Normalde beklediğiniz özellikler şunlardır: katı ve esnek ızgara sistemi, tipografi ve tüm formlar için stiller, vb. Bununla birlikte, IVORY, birkaç ek UI öğesi verdiğiniz için Kube'den farklıdır: düğmeler, uyarı kutuları, sayfalama, geçiş anahtarları, araç ipuçları, kırıntı gezinme, sekmeler ve akordeonlar.
Bu UI bileşenlerini diğerlerinden ayıran şey, bunların tümü CSS3 ile uygulanmış olması ve JavaScript içermemesidir. JQuery UI'sinin tümüyle bağlantılı olmasının tek nedeni, tarih işleyicisi çalışmasını yapmaktır.
Sevmediğim sadece iki şey: UI bileşen stillerinden bazıları Bootstrap 2.0 stillerini hatırlatıyor. Yani evet, muhtemelen bunları değiştirmek isteyeceksiniz. Ek olarak, ızgara sistemi herhangi bir satırdaki son sütunda ekstra bir sınıf kullanımını gerektirir; Bundan nefret ediyorum .
Sonuç
Bu iki küçük uyarı bir yana, fildişi çerçeve herhangi bir sayıda proje için iyi bir seçenektir. Seçeneklerin en kolay şekilde özelleştirilebilmesi mümkün değildir, ancak iyi bir varsayılanlar seti ve bazı ekstra kullanıcı arayüzü bileşenleri ile çalışmaya başlamanız gerekiyorsa, bunu bir girdap verin.
baz
Baz, tarafından Matthew Hartman , CSS çerçevesine biraz daha moda (şu anda her durumda) yaklaşımı alır. Dayalı Normalize.css ince baş yazı tipleri ve düğmeler için düz kutular ile başlar. Varsayılan stillerin düpedüz güzel olduğunu reddetmek yok.
Bu, marka kaygılarına bağlı olarak herkesin beğenisine uygun olmayabilir, ancak değişecek kadar basittir. Sonuçta, baz tüm özelleştirme ile ilgilidir.
Özellikler
Taban, hem LESS hem de SASS sürümlerinde sağlanmıştır, böylece değişkenleri hızlı bir şekilde değiştirebilir ve ihtiyaçlarınıza göre “yeniden derleme” yapabilirsiniz. Yerleşik değişkenler, yazı tipi boyutları, kesme noktaları, her kırılma noktası için ana kapsayıcı genişlikleri ve daha fazlasını içerir.
Mobil cihazlara özgü düzenleri ayarlamanıza yardımcı olacak çok sayıda ekstra ders vardır ve yolunuza yardımcı olmak için ayrı bir dosyada “mixins” vardır.
Kube gibi, varsayılan olarak HTML ile gelenlerin ötesinde fazladan bir UI bileşeni yoktur, bu yüzden sekmeli arayüzleri, akordeonları ve benzerlerini isterseniz bunları kendiniz yapmanız gerekir. Baz, web uygulamalarının aksine güzel web siteleri oluşturmaya yönelik görünüyor .
Sonuç
Uygulamaya özel çok sayıda UI bileşenine ihtiyaç duymayan bir site oluşturuyorsanız, Base fantastik bir kaynaktır. Onunla oluşturulan sayfalar zaten güzel görünüyor; ancak varsayılan stilleri beğenmezseniz, bunları değiştirmek çok zor değildir.
