Arayüz Geliştirmede Frameworkler

CSS FrameworksArayüz kodlarken yaptığımız şeyler aslında her projede birbirine benzerdir. W3C uyumlu kodlama yapar ve kurallarına uyarız. reset.css gibi bir dosya ile varsayılan tarayıcı stillerini temizleriz ki baştan beri yazdığımız css kodları tüm tarayıcılarda benzer sonuçlar versin.

Css sıfırlama gibi birçok aracı da kullanırız, bunları kendimiz de kodlamış olabiliriz, farklı bir kişinin kodlaması da olabilir. Mesela tipografi ile ilgili meseleler, css3 ile kullanılan saydamlık ve köşe yuvarlatma stilleri. Bunlar henüz tüm tarayıcılarda desteklenmiyor, tarayıcının kendi belirlediği kodlar yazıyoruz. “moz-border-radius” gibi. Firefox için bunu da eklememiz gerekiyor.

Form elementleri ve görünüşleri de tarayıcıdan tarayıcıya değişebiliyor hatta değişiyor desek daha doğru olur. Tüm tarayıcılarda aynı görüntüyü yakalamak için form elementlerini de biçimlendirmemiz, hatta bazı elementleri kendi interaktif çözümümüzle yeniden tasarlıyoruz.

Eğer css3 ve HTML5 kullanıyorsak media query ile de haşır neşir oluyoruz. Bunun sebebi de responsive, yani farklı ekran boyutlarına göre değişen sayfalar yaratmak için kullanıyoruz. Media query desteklemeyen sayfalar için farklı stil dosyaları yükletiyoruz.

Bunların çoğu için her geliştirici neredeyse benzer şeyleri ufak farklarla yapıyor. Ama kodun tekrar kullanılabilirliği veya gelişen standartlara uygun davranması için güncellenmesi gerekebiliyor. Bir de geliştirici başka bir geliştiricinin stilini anlamak için kodu okumak zorunda kalıyor.

Bu ve bunun gibi sorunlara çözüm üreten css frameworkler geliştirildi. Mesela en popüler olanları Bootstrap, Foundation, Gumby, Skeleton gibi. Bunlar istediğimiz çoğu imkanı bize sunuyor ve kendi içinde tutarlı kodlar içeriyor, sürekli bir geliştirme halindeler.

ArayüzSayfa inşasında genellikle grid based yani iskelet diyebileceğimiz bir sistem kullanıyorlar. örneğin sayfanız sol bölüm ve içerik bölümünen oluşuyorsa, bu elemanların (div)  ikisine 9 ve 3 gibi kaplayacakları alana göre css atıyorsunuz. Daha sonra içerik kısmındaki gösterimler için de benzer atamalar yapıyorsunuz. Bu iskelet classlarını atarken farklı ekran çözünürlüklerine göre farklı classlar da atabiliyorsunuz. Yani responsive yaklaşımına çok az kod yazarak, daha başarılı bir şekilde ulaşıyorsunuz.

Bu tip framworklerin kendi sınıflarına verdiği varsayılan stiller olabiliyor. Ama bu stillere müdahale ederseniz, framework güncellendiğinde güncellemeyi hemen uygulayamayabilirsiniz. Çünkü sizdeki dosya düzenlenmiş ve biçimler verilmiş halde. Yeni dosyayı yüklerseniz kendi stilleriniz kaybolacaktır. Bu nedenle bu sınıfları farklı bir css dosyasında override(üzerine yazma) ederseniz, güncellemeleri çok daha rahatlıkla sisteminize uygulayabilirsiniz.

Bu frameworklerin çoğu grid sistemini desteklemekte, bazıları da (mesela Bootsrap) size kütüphaneler sunarak daha fazlasını vermektedir. Örneğin bir slide, ya da tooltip gösterim scriptleri gibi. Frameworleri inceledikçe sizin tarzınıza uygun olanı seçeceksinizdir.

Fazlasını Oku