x

Flexible Grid System: Türkiye’de geliştirilen ve GitHub üzerinde popüler olan ‘grid’ çatısı

Dilerseniz GitHub’ta yer alan başarılı ve popüler yerli repo’ları incelediğimiz yazı dizimizin (Yerli GitHub) tamamına göz atabilirsiniz.

flexible-logo

Arayüz tasarımcılarına ve ‘front-end’ yani ön yüz geliştiricilerine fazlasıyla tanıdık gelecek olan ‘grid’ sistemler, günümüzde web ve mobil projelerde sıklıkla kullanılıyor. Özetle; ‘grid’ sistemi kullanılan projelerde ekran 6, 9 ya da 12 gibi sayılarda olmak üzere eşit parçalara bölünüyor ve hem tasarımı hem de kodlamayı bu eşit parçalara göre yapılıyor.

Bu yazımızın konusu olan Flexible Grid System da ülkemizde geliştirilen ve GitHub‘ta popüler olan bir ‘Responsive CSS Framework’ yani duyarlı CSS çatısı.

Doğukan Güven Nomak tarafından geliştirilen proje, bugüne kadar GitHub’ta 900’e yakın ‘star’ toplamayı başarırken 90 kez de ‘fork’ edilmiş. İş hayatında çalıştığı bir projeyle beraber Flexible Grid System’i kodlamaya başladığını anlatan Nomak, platformda yazılım geliştiricilerin görüşlerine çok önem verdiğini ve gelen ‘pull request’lerle tek tek ilgilendiğini söylüyor.

Duyarlı tasarım, hızlı kodlama, düşük dosya boyutu

Flexible Grid System kullanıcıları ekranlarını 1’den 12’ye kadar olmak üzere istediği kadar eşit parçaya ayırıp ‘grid yapısı kurabiliyor. Ki bu durum Nomak’a göre projeyi muadillerinden ayıran en önemli özelliklerden birisi konumunda. Dilediğiniz şekilde özelleştirebildiğiniz Flexible Grid System’de örneğin 5 farklı boyut (masaüstü, mobil, tablet, mobil yatay, tablet yatay gibi) için çalışarak projenizin tüm cihazlarda ‘responsive’ yani duyarlı şekilde çalışmasını sağlayabiliyorsunuz.

Bunun haricinde genel olarak daha az boyutlu, kolay yönetilebilir ve hızlı yazılabilen bir CSS koduna sahip olmanıza yarayan FGS, Bootstrap ya da Foundation gibi popüler araçlarla da uyum içinde çalışabiliyor. Ülkemizde geliştirilen ve GitHub’ta popüler olan projeleri sizlere aktarmaya devam edeceğiz.

Yorumlar (3)

  1. Foundation’un kendi grid layout’undan veya flexbox tan herhangi bir farkı varmıdır?

    Cevapla
    • evet var flexible.gs float: left yerine display: inline-block ile kolonları konumlandırır. bootstrap, foundation ve bir çok framework’ün grid systemleri sadece 12 gridi destekler isteğe göre farklı grid setleri generate edilebilir bu aşamada flexible.gs’nin avantajı yüksektir flexiblegs-css kullanırsanız 1’den 12’ye kadar tüm grid setler 5 ekran boyutunda farklı olacak şekilde kullanılabilir. Daha açık anlatmak gerekirse 5, 7, 9 ve 11’e bölünmesi mümkündür. Sass, Less veya Stylus Plus kullanılırsa durum çok daha fazla esnekleşiyor. Flexbox kullanımında ise kolonların davranışları (top, middle, bottom, between, around, baseline, center, left, right, first, last, reverse bu özelliklerden bazıları flexbox özelliği olmadan da çalışabilir) şeklinde olabilir. İstenirse flexbox özelliği eklenir flexbox desteklenmeyen tarayıcılarda ise görünümde bir sıkıntı bulunmaz sadece flexbox özelliğiniz yitirir bununla iligli https://github.com/flexiblegs/flexiblegs-docs/tree/master/tr/#tarayıcı-desteği adresine de göz atabilirsiniz. Ayrıca dökümantasyonu yazmaya devam ediyorum.

      Cevapla
  2. Web sayfası ve dökümantasyon yenilenmiştir. http://flexible.gs/tr/

    Cevapla

Bir Cevap Yazın