Flex ile Kolay Site Yapmanızı Sağlayacak 12 Uygulama

1 415

Blogumun en çok okunan yazılardan biri flex nedir sorusuna kapsamlı cevap verdiğim CSS flexbox hakkındaki yazımdır.O yazıda display:flex özelliğini detaylı bir şekilde açıkladığımı düşünüyorum.Fakat gerek forumlarda gerek diğer interaktif soru cevap sitelerinde gördüğüm kadarı ile halen CSS flex kolay kolay anlaşılamıyor.Ben de bu sebeple konun rahat anlaşılması için CSS flex ile geliştirilmiş araçları, interaktif eğitim uygulamalarını ve lgili siteleri listelemeyi düşündüm.

Bu yazınınn amacı nedir, ne işe yarar, nasıl kullanılır gibi bir şey olmayacak.O yüzden eğer CSS flex hakkında bilgi sahibi değilseniz bu amaçla yazılmış yazıma, ilk paragrafta verdiğim linkten ulaşabilirsiniz.Yoluma giriş bilgisine sahip okuyucularla devam ediyoruz.

Yazının içeriği uygulamaları ve araçları tanıtmak olduğundan giriş cümlesini fazla uzatmak istemiyorum.Listede bulunan uygulamaların hepsi ingilizce kaynaklı olduğu için, isiamlerini verip kısa kısa tanıtmak daha uygun olacaktır.

Framework ve Grid Sistemi

Frameworklerin ne işe yaradığını az çok biliyorsunuzdur.Türkçe de hazır geliştirme çatısı olarak ifade ediliyor.Genelde bir websitesi yaparken, her defasında yazdığınız kodları veya şablonu,her defasında sıfırdan yazmak yerine, bir defa oluşturup, her yer de kullanabilmenize olanak sağlıyor.Grid sistemini de frameworklerin sadece sitenin alt yapısına odaklanmış basit frameworkler olarak düşünebiliriz.

Bulma : Flexbox tabanlı bir CSS frameworküdür.Bootstrap veya foundation gibi ileri düzey bir framework olmasa da giriş-orta düzey frameworkler arasına alabiliriz.Sitenin altyapısını kolay oluşturabileceğiniz flex girid yapısı, özellikle elementleri yatay veya dikey de ortalama konusunda sorunu olanlar için faydalı olacaktır.Ayrıca  buton,menü, form elemanları gibi hazır arayüz (UI elements) elemanlarını bulabilirsiniz.

Gridlex : Site yerleşim düzenin oluşturmaya yarayan flex tabanlı bir grid sistemidir.Gridlex bir framework olarak düşünemeyiz.Sadece site altyapısını oluşturmaya yarıyor.Özellikle sütün ve kolanlardan oluşan bir site geliştiriyorsanız, float kullanmanıza gerek kalmadan bunu oluşturabilirsiniz.

İleri düzey CSS frameworklerine buradan, temel düzeyde genelde altyapı için kullanılan frameworklere buradan ve bütün CSS frameworklere buradan bakabilirsiniz.

Flexbox Grid : Adından  da anlaşıldığı gibi bu da üsteki gibi flex tabalı  bir grid sistemidir.Yanlış bilmiyorsam internette yayınlanan flex tabanlı ilk girid sistemidir.Her şeyde olduğu gibi alternatifler güzeldir.Hangisi daha kolayınıza gelir ise onu kullanabilirsiniz.

Gridly : Gridly de diğer iki seçenek gibi flex altyapısına sahip bir grid sistemdir.Kullanımı oldukça basit ve yer kaplamayan bir uygulamadır.

İnteraktif Eğitici Uygulamalar

Flexboxfroggy : Codecademy gibi interaktif bir şekilde kod öğretmeye yarayan, oyun oynarken öğrenmenizi sağlayan bir uygulamadır.Tek farkı sadece CSS flex özelliğini öğretmek için geliştirilmiştir.Oyun uygulamasının Türkçe desteği de vardır.Ekranın aşağısından Türkçeyi seçerek hem oyun oynayıp hem de flex yapısını öğrenebilirsiniz.

Flexy Boxes : Mevcut display:flex özelliklerinin ne işe yaradığını interaktif bir şekilde öğrenmenizi amaçlayan güzel bir uygulamadır.Ekranın sağ tarafında bulunan komutları işaretleyerek, ekran pencerisinde elementlerinin nasıl değişikliğe uğradığını canlı olarak görebilir ve komutların ne gibi etkileri olduğunu anlayabilirsiniz.

Display:flex : Yine aynı şekilde display:flex kurallarını kavramanız için geliştirlmiştir.Kavrayamadığınız komutları işaretleyerek ne gibi değişikler olduğunu gözlemleyebilirsiniz.

Flexplorer : Aynı şekilde komutların ne gibi değişiklikler yaptığını izleyebilir, oluşan kodları kopyalayabilirsiniz.

Diğer Eğitici İçerikler

Flexbox Cheatsheet : CSS flex komutlarını algoritma mantığı ile anlatan kısa ve öz bilgilendirici bir sayfadır.

What the Flexbox : Yazılı ifadelerden çok izlemeyle öğrenmeyi daha çok seviyorsanız, bu websitesini de flex ile ilgili video anlatımları bulabilirsiniz.

Geliştirilmiş Uygulamalar

Flexbox Patterns : Flex ile oluşturulmuş hazır arayüz desenlerini (UI Patterns) kullanmak isterseniz göz atabilirsiniz.

Real World Flexbox : Flex ile geliştirilmiş bir login (giriş) sayfasının kodlarına bakmak isterseniz ziyaret edebilirsiniz.

Sonsöz

Yazı da bana göre CSS’in en iyi özelliklerinden biri olan display:flex özelliğini kavrayabilemeniz için faydalı olacağını düşündüğüm uygulamaları ve siteleri tanıtmaya çalıştım.Eğer listede olmasını düşündüğünüz uygulamalar varsa yorum kısmında belirtirseniz inceleyip ekleme yapabilirim.

Bunun dışında her türlü konuda iletişim kısmında mesaj atabilir, konu ile ilgili sorularınızı ise yazının altına yorum olarak atabilirsiniz.

 

BİZE KATILIN - KOLAY ERİŞİM
BİZE KATILIN - KOLAY ERİŞİM
İçeriklere ve web tasarım dünyasındaki gelişmelere kolay erişmek için bültene abone olmayı unutmayın
İstediğiniz zaman abonelikten çıkabilirsiniz.
Bunları da beğenebilirsin