CSS

CSS Framework Kullanımı

Yayın:
Bilinen başlangıcı ile 2005 yılından günümüze CSS Framework kullanımı, alternatifler, eklenen özellikler, gelişim ve çeşitlenme süreci.
GÖRSEL
İlk temamı ne zaman tasarladığım ve kodladığımı hatırlamıyorum, sadece 10 yıldan fazla zaman geçtiğinden eminim. Blog ve CMS yapılarının ilk adımlarına tanıklık etmiş (netlarus gibi dönemin yerli girişimleri ve deviantart journal skins de dahil) olmanın verdiği şans sayesinde bir çok sistemi deneme, gözlemleme ve kullanma imkanım oldu. O zamandan bu zamana gelindiğinde gördüğüm şu ki, çalışma biçimlerinden sistemlerin etkileşim kapasitelerine kadar artık çok boyutlu bir ortam var karşımızda. CSS Frameworks Elbette geçen zaman içerisinde işleri kolaylaştıran, farklı süreçlerin ortak bir tabanda kolaylıkla ilerleyebilmesini mümkün kılan CSS framework gibi yapılar da doğmaya başladı. Kişisel olarak hazırladığımız Reset‘lerden, CSS Hack‘lerden sonra 2005 yılında karşımıza ilk çıkan CSS framework yaml oldu (hatırladığım kadarıyla). 2003 yılından başlayarak gittikçe artan kullanıcı hacmiyle WordPress ve ardı ardına yayına başlayan blogların oluşturduğu hareketlilikle birlikte YAML oldukça etkili bir oyun alanı sunuyordu. CSS Framework Kullanımı Temelde kullanım ihtiyacı grid yapıları, ekran çözünürlükleri, box model, başlıklar ve reset’ler üzerinden ortaya çıkmış olsa da zamanla formlar, tipografi düzenlemeleri ve JavaScript etkileşimleriyle CSS frameworkler ardı ardına yayınlanan geliştirmelerle birlikte yeni sürümler ve alternatif yol haritaları oluşturdular. Artık JS events’ler de oyun alanın birer parçası haline gelmişken CSS+JS tarafında ilk büyük ölçekli destek 2006 yılında Yahoo tarafından sunuldu. The Yahoo! User Interface Library yani YUI Library etkinlik yönetimi ve DOM manüplasyonu ile süreci bir sonraki aşamaya taşımış oldu. Bu süreçte yine yayınlanan Blueprint ve 960.gs (2007) gibi CSS frameworkler olsa da YUI’nin ardından Twitter tarafından sunulan Bootstrap yayınlanana kadar çok yapısal bir değişiklikten bahsetmek güç. CSS frameworks 2011 yılında yayınlanan Bootstrap ile birlikte özellikle device uyumu ve JS etkileşimlerinde oldukça aktif bir sürece girmiş olduk. Yine bu dönem içerisinde Zurb tarafından yayınlanan Foundation yapısal olarak Bootstrap’e benzese de arayüz olarak daha flat ve kontrol edilebilir nitelikteydi. Tarihler ve frameworklerle ilgili notlarda yanılmamışsam (yorum olarak ekleme yapabilirsiniz) süreç aşağı yukarı şu şekilde tarihsel olarak sıralandırılabilir.
CSS framework history
Timeline için R timevis pakedi kullandım.
Günümüzde basitlik, işlevsellik ve boyut bazında tercih edebileceğimiz onlarca farklı alternatifin yanı sıra kendimiz de amaca yönelik özelleştirmelerle kendi framework’lerimizi hazırlayabilmekteyiz. Github bünyesinde sunulan 5.000 üzerinde CSS framework repository olduğunu hesaba katarsak temel ihtiyaçlara göre seçim yapmak oldukça kolay hale gelmekte. Bu alternatiflerin sundukları farklı grid/layout yapıları, kapladıkları boyut, özelleştirme imkanları ve modüller hesaba katıldığında, Bootstrap ve Foundation ile yürüttüğümüz çalışmaların ardından Semantic UI benim için ayrı bir yere sahip oldu. Ancak, Semantic UI Nedir? başlıklı yazıda da not olarak düştüğüm üzere, proje sürdürülemediği için geliştirmeler bir Semantic UI fork‘u olan Fomantic UI üzerinden devam etmekte. Diğer yandan, Bulma CSS ve Tailwind CSS alternatif olarak varlıklarını devam ettirmekteler. Grav tema geliştirme sürecinde bahsi geçecek diğer iki alternatife de kısaca bir göz atalım.

Pure CSS

2014 yılından bu yana Yahoo tarafından geliştirilen Pure CSS oldukça küçültülmüş ve mobil cihazlar göz önünde bulundurularak geliştirilmiş başarılı alternatiflerden biri. Pure 1.0.1 sürümü kullanımda olan framework Grav CMS temalarında da kullanılmakta.

Spectre CSS

Grav tema geliştirme süreçlerinde sıklıkla yer bulan Spectre CSS Yan Zhu tarafından duyurulan bir framework. Tipografi ve elemanlar için temel stiller, flexbox temelli responsive layout sistemi, pure CSS bileşenleri gibi niteliklere sahip framework oldukça küçük bir dosya boyutuna sahip ve 0.5.8 sürümü ile kullanımda. Spectre CSS ile ilgili konulara Grav tema geliştirme sürecinde de ayrıca değineceğim.
Önerilen Yazılar
Ceyhun Enki Aksan

Kullanıcı Davranışları Analizi (User Behavior Analysis) ve Kullanıcı Deneyim Tasarımı (UX Design) üzerine çalışmalar yürütmekte, bu süreçte edindiğim teknik ve pratik bilgileri fayda sağlamak motivasyonuyla (afaik / as far as i know) paylaşmaktayım.

HABERDAR OL

Yeni eklenen projeler, eğitimler, içerikler ve yayınlanan videolar e-posta adresine gelsin.