CSS Framework Kullanımı

İlk temamı ne zaman tasarladığım ve kodladığımı hatırlamıyorum, sadece 10 yıldan fazla zaman geçtiğinden eminim.

AA

Blog ve CMS yapılarının ilk adımlarına tanıklık etmiş netlarus1 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.

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 framework'ler 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 framework'ler 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 paketini kullandım2.

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 UI3 ü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 2.0.1 sürümü kullanımda olan framework Grav CMS temalarında da kullanılmakta4 5.

Spectre CSS

Grav tema geliştirme süreçlerinde sıklıkla yer bulan Spectre CSS6 Yan Zhu7 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.9 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