Nedir Bu Grid (Izgara) Sistemi ?

 
 
 
 

Son zamanlarda responsive tasarımlar oldukça yaygınlaştı. Bence güzel de oldu.

Peki Nedir Bu Responsive Tasarım ?

Responsive kelimesi İngilizce de esnek, uyumlu, elastik gibi anlamlara geliyor. Responsive tasarım ise esnek, ekran boyutuna göre eğilip bükülebilen, kullanıcı dostu bir tasarım çeşidi.

Tamam, Hepimiz Ne Olduğunu Biliyoruz Az Çok Nasıl Yapılıyor Sen Onu Anlat ?

Başlıktan anlaşılacağı üzere, tamamen responsive tasarımla ilgili bir yazı olmayacak. Ama grid (Izgara) sistemini anlatırken, ister istemez bir çok noktasına da değineceğim.

Responsive tasarım için kullanılan grid sistemi adında temel bir yapı var. Bu yapı css‘in media kuralları üzerine kurulu bir sistem. Responsive Css framework’lerin bir çoğunda da bu sistem kullanılıyor. Oldukça popüler olan Bootstrap da bu framework’lerden birisi. Bu yazıda Bootstrap üzerinden gideceğiz ama diğerleri de üç aşağı beş yukarı benzer şekilde işliyor.

İşin en başından yani tasarımı çizerken grid sistemine uygun biçimde yani bölerek çizerseniz koda dökerken de fazla sıkıntı yaşamazsınız.

Tabi bazı temel sorular oluşuyor bu noktada. Dilerseniz cevaplamaya başlayalım.

Tasarımı Çizeceğimiz Belgenin Boyutu Ne Kadar Olmalı ?

Bu boyut tasarımı hangi cihaz için çizeceğinize göre değişmekle birlikte biraz da size kalmış bir durum. Cihazları ekran boyutlarına göre 5’e ayırıyoruz.

Not : Bootstrap 4’e kadar 4 ekran boyutu vardı. Bootstrap 4’den itibaren bu 5’e çıktı.

  1. Extra Small (xs) : Ekran genişliği 544 pikselden daha küçük olan cihazlar.
  2. Small (sm) : Ekran genişiliği 544 piksel ile 768 piksel arasında olan cihazlar.
  3. Medium (md) : Ekran genişliği 768 piksel ile 992 piksel arası olan cihazlar.
  4. Large (lg) : Ekran genişliği 992 piksel ile 1200 piksel arası olan cihazlar.
  5. Extra Large (xl) Ekran genişliği 1200 pikselden büyük olan cihazlar.

Cihazların hepsine ayrı ayrı tasarım çizebileceğiniz gibi eğer çok profesyonel bir iş değilse, benim gibi işin kolayına kaçarak; en küçük ve en büyük cihaz için birer çizim hazırladıktan sonra aradakileri de onlara göre uyarlayabilirsiniz. Belge boyutu hakkında kafanızda az çok bir fikir oluştuğunu tahmin ediyorum. Belge boyutundaki tek kural belge boyutunun konteyner boyutundan büyük olması. Konteyner boyutları da burada :

Extra small
<544px
Small
≥544px
Medium
≥768px
Large
≥992px
Extra large
≥1200px
None (auto) 576px 720px 940px 1140px

Yani extra large bir cihaz için çizim yaparken 1920 piksel genişliğinde bir belge açabilirsiniz. Bu aynı zamanda full hd monitörlerin de çözünürlüğü olduğu için tasarımın tarayıcı da nasıl görüneceği hakkında da fikir sahibi olabilirsiniz.

Belgeyi Açtık. Şimdi Her Şey Serbest mi ?

Aslında hem serbest hem de değil. Yani 100% genişlikte unsurlar ekleyebileceğiniz gibi tasarımın genelini konteyner içine oturtmanız da fayda var.

Photoshop içindeki cetvel ile ızgaraların boyutunu işaretlerseniz tasarımı ızgaralara oturtmanız daha kolay olacaktır. (Izgara dediğimde de grid anlayın lütfen 🙂 )

Örnek verecek olursak, extra large yani çok büyük cihazlar için bir tasarım çizdiğimizi düşünelim. 1920 piksel genişliğinde bir belgemiz olsun.

Hatırlarsanız 1200 pikselden daha geniş ekranlarda konteyner genişliğimiz de 1140 pikseldi. Bu durumda 1920’den 1140’ı çıkartıp sonucu ikiye bölüyoruz ki konteyner sayfanın ortasında olsun çizerken. (1920-1140)/2 = 390 sonucu çıkıyor. Bu durumda sayfanın sağ ve sol tarafında 390 piksel boşluk bırakıyoruz ve ortadaki kısım konteynerimiz oluyor.

photoshop-bootstrap-container-grid

Izgaraları Ne Zaman ve Nasıl Çiziyoruz ? 

Yazının başından beri “grid, ızgara, grid, ızgara” aynı şeyi tekrar edip duruyoruz ama fazla bahsedemedik şu meşhur ızgaralardan.

Izgara flan diyince biraz havalı geliyor kulağa ama aslında pek bir olayları da yok desek yanlış olmaz. Şöyle göstereyim :

Extra Small ızgaralarının kodlarından bir parça  :

Small ızgaralarının kodlarından bir parça  :

Medium Izgaralarının Kodlarından bir parça :

Gördüğünüz üzere hepsinin içi aynı. E ama nasıl olur ?

Nasıl oluyor bu iş derseniz, olay baştan da söylediğim gibi media sorgularında.

Yani basitçe anlatacak olursam :

Gördüğünüz üzere xs ler yani çok küçük cihazlar herhangi bir media sorgusunun içerisinde değil fakat bütün sorgularında üzerinde. Css kodları yukarıdan aşağı doğru yorumlanır. Burada ki en güzel olay ise şu :

Siz eğer extra large cihazlar için herhangi bir tanımlama yapmış olmasanız bile extra large bir cihazda sayfayı açtığınızda, @media (min-width: 992px) koşuluna uyduğunuz için size en yakın değer yani large cihazlar için tanımlanmış üzerinden işlem görürsünüz. Extra Large için bir değer tanımladığınızda ise extra large cihazların media kuralı, large cihazların media kuralından daha aşağıda olduğu için doğru kural çalışacaktır.

Yani demek istediğim :

yerine

yazdığınızda da aynı sonucu alırsınız. Deneyin ve görün 🙂

Eğer col-xl-5 col-lg-5 col-md-5 col-sm-5 col-xs-5  biçiminde bütün ekranlarda aynı değeri almasını isterseniz sadece  col-xs-5 sınıfını eklemeniz yeterli olacaktır.

Çizim konusuna yeniden dönecek olursak, az önce de gösterdiğim gibi her boyutta ızgaraların boyutu aynı : %8.333333

Bu durumda yapmamız gereken de konteynerimizi eşit 12 parçaya bölmek. Bu durumda da her ızgaranın boyutu konteyner boyutunun %8.333333 ‘ü olur.

Yine extra large cihazlar için düşünürsek ve konteyner genişliğinin 1140 piksel olduğunu hatırlarsak yapmamız gereken tek şey 1140’ı 12’ye bölmek olur.

1140/12 = 95 sonucunu buluruz. Yani her bir ızgara 95 piksel olmalı.

bootstrap-grid-large-lg-device-cihaz

 

Burada yanlış bir anlaşılma olmasın, ızgaralar aslında konteynerin %8.333333 genişliğinde olmuyor. Neyin içine koyarsanız onun %8.333333 genişliğinde oluyor. Yani ızgara içinde kullandığınızda da ızgarayı 12’ye bölüyor. örneğin biraz önceki 95 piksellik ızgaranın içine tekrar ızgara eklersek bu sefer bu 95 pikseli 12’ye bölecektir.

Izgaralar hakkında kafanızda bir şeyler oluşmaya başladıysa biraz da kapsayıcılar an bahsedelim.

Teorik adı nedir bilmiyorum ama ben kapsayıcılar diyorum onlara <3

Izgaraları 12’ye bölmek istediğimiz her yerde kullanabiliyoruz. Bu noktada bir sorunumuz yok.

Fakat ızgaraları içine yazmamız için hazırlanmış bazı sınıflar var.

Bunlar :

  1. row
  2. container
  3. container-fluid

row : Satır anlamına geliyor. Neyin içinde kullanırsanız onun genişliğini alıyor. Adının satır olmasından da anlayacağınız üzere, başka bir row ile yan yana gelmiyor. Diğerini aşağı atıyor.

container: Ekran boyutu için belirlenmiş değeri alıyor. Bu değerler şunlar :

Extra small
<544px
Small
≥544px
Medium
≥768px
Large
≥992px
Extra large
≥1200px
None (auto) 576px 720px 940px 1140px

container-fluid: Kenarlarda 0.9375rem padding bırakarak içinde bulunduğu yerin genişliğini alıyor. Bunu konteyner olarak kullandığımız için bu genelde ekran boyutu oluyor.

Offset, Pull, Push

Tabiri caizse ızgaraları iteklemek için kullandığımız sınıflar offset, pull ve push.

offset : Izgaralar arasında istediğimiz sayıda ızgara genişliğince boşluk bırakmamızı sağlar. Yani bir anlamda ızgarayı soldan itekliyor.

Kullanımı da şu şekilde : col-md-offset-N . Burada yerine kaç ızgara offset bırakacağımızı yazıyoruz. Örneğin : col-md-offset-3  gibi.

push : Izgarayı soldan istediğimiz sayıda ızgara genişliğince itekler. Fakat boşluk bırakmaz. Yani genel anlamda ızgaraların sıralamasını değiştirmek için kullanılır.

pull : Izgarayı sağdan istediğimiz sayıda ızgara genişliğince itekler. Fakat boşluk bırakmaz. Yani genel anlamda ızgaraların sıralamasını değiştirmek için kullanılır.

Dilerseniz, ufak bir örnek ile pekiştirelim.

bootstrap-grid-pull-push

Gördüğünüz üzere normalde solda olması gereken col-md-9 sütununu sağa, normalde sağda olması gereken col-md-3 sütununuda sağa kaydırmış olduk.

Şimdi bunları ufak bir örnekte uygulayalım ve hem çizim hem de kodlama olayını biraz daha aydınlatalım.

bootstrap-grid-example

Offset’ler xs yani çok küçük cihazlarda çalışmıyor, bilginize…

Izgaraları Nasıl Koda Dökeceğiz, Tam Olarak Anlatsan ?

Yazının başından beri sürekli andığımız ekran boyutları burada da karşımıza çıkıyor. Ekran boyutlarının kısaltmalarından oluşturulmuş sınıfları kullanarak elimizi css’e sürmeden sayfanın iskeletini oluşturmamız mümkün. Bu sınıfların belli bir şeyi var tahmin edeceğiniz üzere :
col-EkranBoyutuIzgaraSayısı

Biraz örnek ver derseniz :

  • col-xs-6 : Extra Small yani çok küçük cihazlarda 6 ızgara genişliğinde
  • col-sm-5 :Small yani küçük cihazlarda 5 ızgara genişliğinde
  • col-md-4 : Medium yani orta cihazlarda 4 ızgara genişliğinde
  • col-lg-3 : Large yani büyük cihazlarda 3 ızgara genişliğinde
  • col-xl-2 : Extra Large yani çok büyük cihazlarda 2 ızgara genişliğinde

Evet baylar ve de bayanlar…

Benim bu konu hakkında anlatabileceklerim şimdilik bu kadar.

Gerek anlatımdan gerekse konudan kaynaklı, aklınıza takılanları yorumdan bana iletebilirsiniz.

 
 
 
 
  • hayri daldal

    15 Aralık 2016 02:38

    güzel yazı yazmışsın. istifade ettik teşekkürler

    Cevapla

Yorum Gönder

Bilgi : E-posta Adresin Sadece İletişim için, kimsecikler görmeyecek.