CSS Framework Kullanarak Hızlı ve Hatasız Kodlama Yapın

CSS Framework Kullanarak Hızlı ve Hatasız Kodlama Yapın

CSS framework kullanımı artık sıradan bir hal almaya başladı. CSS frameworkler sayesinde web sitesi tasarlamak artık daha kolay ve hızlı.

Frameworkler sanırım hem ön yüz hem de arka plan sistem geliştiricileri için artık olmazsa olmaz bir yapı oldular. Öyle ki hem iş ilanlarında framework kelimesi iyice geçmeye başladı, hem de artık tasarım marketlerinde frameworklere özgü kategorilere ait içerikler artış gösteriyor.

Ayrıca WordPress, Joomla gibi hazır içeri yönetim sistemleri için tasarım geliştirirken de kolaylık sağlamaktadırlar.

Aslına bakılırsa frameworkler sayesinde bir çok iş oldukça kısa sürede neticelendiriliyor. Bir kaç saat içerisinde ilk taslak tasarımlar ortaya çıkıyor ve tarayıcılarda ve cihazlarda tam uyumlu sonuçlar elde ediliyor.

CSS frameworkler içerisinde benim en çok kullandığım Twitter Bootstrap, oldukça büyük bir kullanıcı kitlesine sahiptir. Diğer frameworklerinde kendilerine hayran kullanıcıları ile ortaya oldukça güzel çalışmalar çıkmaktadır.

CSS Framework Kullanımı

Artan cihaz ve tarayıcı sayısı ve bunların kullanım oranları yükseldikçe yapmış olduğumuz tasarımların hepsinde düzgün bir şekilde konumlanmasını gerektirmekte. Eğer ham olarak css yazdıysanız diğer tarayıcı ve cihazlarda uyum sorunu yaşamamak için kodlarınızda çeşitli eklemeler yapmanız gerekmekte.

Ancak iş bununla bitmiyor. Birde tabloların, butonlar, listeler … vb. çeşitli alanlar içinde farklı kodlar yazmanız gerekmekte. Tüm bu işlemler için farklı kod yazımı yerine tüm bunları bize bir arada sunan framework kullanmak hem zamandan kazandırmakta, hem de kodlarımızın belli bir düzen içerisinde oluşmasını sağlamaktadır.

Popüler CSS Frameworkler

Twitter Bootstrap: Şuan 3.x sürümü kullanımda olan ve dünyanın en popüler CSS frameworküdür. Bower, npm gibi çeşitli paket yapıları ile indirilebildiği gibi direk sitesinden de indirilebilir. Javascript kodlarının çalışması için jQuery kütüphanesine ihtiyaç duyar. Kendi web sitesi üzerinden ve Google’da yapacağınız aramalar ile bir çok eğitici dokümana erişebilirsiniz.

Ayrıca trbootstrap.com adresinde de Türkçe kaynağa erişebilirsiniz.

Foundation: Bir diğer popüler css frameworktür. Zurp firması bünyesinde geliştirilir ve kullanıcıları sayesinde oldukça farklı kullanımları vardır. Şuan 6, sürümü yayındadır. Ya ben bulamadım, ya da gerçekten hakkında oldukça kısıtlı Türkçe kaynak vardır.

Web sitesi üzerinden eğitim dokümanlarına ve diğer içeriklere ulaşabilirsiniz.

Semantic UI: Oldukça gelişmiş ve başarılı bir css frameworkdür. Ancak öğrenimi diğer frameworklere göre biraz daha zaman alır. Şuan 2.2 versiyonu yayındadır.

Biraz kullanmaya başlarsanız hemen her işlem için bir sınıf tanımlandığını görürsünüz. Bu ilk başlarda biraz kafa karışıklığına neden olsa da alıştığınız zaman oldukça rahat bir kullanım sunmaktadır.

Web sitesi üzerinden detaylı bilgi alabilir ve örnekleri inceleyebilirsiniz.

Pure: Yahoo bünyesinde geliştirilen, ham ile ile başlayıp, ihtiyaç duyacağınız bölümleri sonradan ekleyebileceğiniz modüler bir frameworktür.

Pure’un bu yapısı hem güzel hem kötü. İyi tarafı kullanmadığınız alanlara ait kodlarınız css dosyasında olmuyor. Bu da küçük boyutlu css dosyanızın olmasını sağlıyor. Kötü tarafı ise hemen her işlem için farklı bir dosya indirmek zorunda kalıyorsunuz. Bu işlem biraz can sıkıcı olabilir.

Web sitesi üzerinden detaylı bilgi alabilir ve örnekleri inceleyebilirsiniz.

Bulma: Son dönemdeki favori frameworküm. Flex yapısı üzerine kurulu en popüler frameworklerden biridir. Flex kullanımı çok yaygın olmasa da önümüzde ki 1-2 yıl içerisinde hakimiyetini tamamen kabul ettirecektir. Flex yapısı ile tasarımlar daha esnek bir şekilde geliştirilmektedir.

Eğer flex yapısını şimdiden kullanmak isterseniz ilk bakmanız gereken framework Bulma’dır. Web sitesi üzerinden örnekleri ve Bulma ile oluşturulmuş modülleri incelemenizi öneririm.

CSS Grid Sistemler

CSS framework oluşturmanın ilk şartı iyi bir grid (ızgara) sistemine sahip olmaktır. Grid sistemleri sitenizi dikey olarak eşit aralıkta ve genişlikte bölümlemeye yarar. Bu sayede belli standarda uygun ve hızlı sayfa planını oluştururuz.

Genel olarak 12 ve 16 sütunlu grid sistemler kullanıldığı gibi, 2li, 3lü, 6lı vb. şeklinde ihtiyaç duyacağınız şekilde kendi grid yapınızı oluşturabilirsiniz.

Her ekran boyutuna göre tekrar konumlandırma ve sütunlar arası genişlik ve sütun genişlikleri, farklı tarayıcılar için uyum, border-box / box-sizing kullanım seçimi gibi bir kaç ihtiyacı göze alarak kendi grid yapınızı oluşturabilirsiniz.

Kendi grid yapınızı oluşturmanız için çeşitli hazır sistemlerde bulunmaktadır. Responsive Grid System en popüler araçlardan biridir.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

BENZER YAZILAR