Basit, responsive ve minicik bir CSS grid: Phill

Daha önceki yazılarımızda bahsettiğimiz Bootstrap alternatifi CSS kütüphanesi Cutestrap’ın da bir alternatifi var: Phill.

Cutestrap 8k gibi minicik bir boyuta sahipken Phill ondan da ufak! Sadece 4k.

Fakat Phill sadece grid yapısı kurmak için kullanılabiliyor. Popülaritesi artarsa belki ilerde birkaç başka özellik de eklenebilir.

Tek bir css dosyasından ibaret olan Phill’i projenize manuel ekleyebileceğiniz gibi popüler web paket yönetim platformuolan “bower” ile de kurulabilir.

Grid yapısı nedir?

Web sayfalarındaki sütunlar eskiden görünmez bir tablo içerisine yerleştiriliyordu. Mesela üç sütunlu bir sayfa yapılacaksa tek satırlı, üç tane hücresi olan bir tablo (table) oluşturulup öğeler bu sütunlara yerleştirilirdi.

Bu yöntem zararsız ve işe yarar gibi görünse de amacının dışında tablo kullanılması gibi mantık hatası yapmanın dışında “responsive” şeklinde tabir edilen, farklı çözünürlükteki ekranlarda uygun biçimde görüntülenmeyi sağlayan yapıya da ters düşüyordu. Çünkü üç sütunlu bir tablo her ekranda üç sütun görünmeye mecburdu. Halbuki responsive yapıda o üç sütun küçük ekranlarda yanyana değil altalta görünmeliydi.

İşte bunun gibi sorunları ortadan kaldırmak için HTML’deki “table” yerine “div” elemanları kullanılmaktadır. Fakat sadece “div” bu sorunu çözmediği için CSS teknikleri ile esnek bir yapı ortaya kondu. Buna grid yapısı deniyor.

Grid yapısında sayfa temel olarak 12 eşit birime bölünebiliyor. Bu 12 eşit birim kendi aralarında 1-11, 2-10, 4-8, 4-4-4, 3-6-3 gibi istenilen varyasyanlarda kullanılabiliyor.