Sayfa Planını Izgara Sistemi ile Oluşturmak

Izgara ( Grid ) sistemleri sitemizin belli standarda uygun ve hızlı bir şekilde sayfa planını oluşturmamıza yarayan sistemlerdir. Bu sistemlerin uygulaması tasarımdan başlar. Tasarımcı bu sisteme uygun bir site çıkarır. Kod yazarken bizde bu yapıyı uygularız. Bu durum maalesef tasarımcı, arayüz geliştirici arasındaki koordinasyon eksikliğinden çok fazla projede uygulanamamasına neden oluyor. Daha sistemli ve standart çalışmak için güzel yapılar.

enter image description here

Biz arayüz geliştiriciler için bulunmaz bir nimet olan ızgara yapıları sayesinde, kodlama sürelerimiz ciddi ölçüde azalır. Genişlikler, ara boşluklar belli olduğu için sayfa planını oluşturmak çok basit bir hal alır. Daha önce ben PSD’den HTML’e - fanatikmarslar.com Sitesinin Kodlaması makalesinde anlattığım gibi tüm bu değerleri tek tek ölçüp tanımlamam gerekiyordu. Ancak ızgara sistemi ile oluşturulan sitelerde bu değerler belli ve atanmış olduğu için bu kısmı hızlıca geçeriz.

Burada tasarımcı ve arayüz geliştiricileri açısından şöyle bir avantajı var. Tasarımcılar yaptıkları tasarımın bire bir arayüze uyarlanmasını ister, tabi uygularken bazı sorunlar çıkar ve piksel hesabına dönen tartışmalar çıkar. Izgara sistemine uyan tasarımcı ve arayüz geliştirici arasında böyle sorunlar olmaz, çünkü değerler baştan bellidir.

Bu konuda geliştirilmiş bir çok anaçatı ( framework ) var.

  • 960 Grid System
  • Skeleton
  • Blueprint
  • Less Framework
  • vb.

Yukarıda listelenen ve daha fazlasını internette görebileceğimiz ızgara sistemleri mevcut. Bu hazır yapıların amacı bu işi daha kolay hale getirmek.

Daha önce yukarıdaki ızgara sitemlerinden birini kullanmış olanlar için konunun devamını anlamak daha basit olacaktır.

Bootstrap Izgara Sistemi

Bootstrap twitter geliştiricilerinin çıkardığı hızlı bir şekilde web sitesi geliştirmemizi sağlayan HTML, CSS ve Javascript anaçatısıdır. Bir çok modülü bulunan bu yapının biz sadece ızgara sisteminden bahsedeceğiz.

Normal ızgara sistemlerine benzer bir yapıya sahip bootstrap ızgara sistemi, şu sıralar kullanılan en yaygın ızgara sistemidir.

Bootstrap 2’ye göre bootstrap 3 daha fazla kesme noktasına (breakpoint) sahip. Bootstrap 2’de mobil ve masaüstü noktaları varken, bootstrap 3 mobil, tablet, masaüstü ve daha büyük ekranlar olmak üzere dört durma noktası mevcuttur. Ayrıca Öncelik Mobilde (Mobile First) akımı etkisine giren 3. sürüm bunun etkilerini grid sistemde göstermiştir.

enter image description here

Uyumlu web sitesi kodlarken bir ızgara sistemi kullanmak neredeyse zorunlu hale geliyor. Normal zamanlarda kullanmıyorsak bile uyumlu web siteleri yaparken olmazsa olmazımız oluyor.

Bootstrap ızgara sistemi 3 ana yapıdan oluşur.

  • Kapsayıcı (.container)
  • Satırlar (.row)
  • Kolonlar (col-*)

    .col-md-8
    .col-md-4

Basit bir kod örneği yukarıdaki gibi oluyor.

Kapsayıcı (.container)

Bootstrap ızgara sisteminde satırların tam yerleşmesi için bir kapsayıcı elemana ihtiyacı vardır. Kapsayıcı eleman siteye yapısına göre iki farklı sınıf alır.

  • .container : sabit genişlikteki sitelerde
  • .container-fluid : esnek yapılı sitelerde

Uyumlu web için değişen genişlikler de kapsayıcı genişliğide değişir. Satırlar ve kolonlar yüzde değerli olduğu için değişen genişliklerde değerleri değişmez.

  • 1200px veya daha büyük ekran çözünürlüğünde: 1170px
  • 992px - 1199px arasında: 970px
  • 768px - 991px arasında: 750px
  • 768px’ den daha düşük ekran çözünürlüğünde: auto

Satırlar (.row)

Her 12’li kolonu kapsayan bir kapsayıcıdır. Sağdan soldan eksi 15px ile ana kapsayıcının bıraktığı boşluğu doldurur, böylelikle kolonları aralarına konulan boşlukların sondaki kutuyu aşağı atması engellenmiş olur. kolonlar float:left ile yan yana dizildiği için satır aynı zamanda taşan kolonları satır başı yaptırmaya yarar.

Satırları ana kapsayıcısı (.container) dışında kullanmayın çalışmıyor. Bazen gözden kaçıyor, sorun oluyor :)

Kolonlar (.col-*)

Her kolon 15px’lik sağ ve sol paddingleri vardır. Bu paddingler satır ile olan mesafeleri ayırmak için eklenmiştir. Bu her kolon için aynı etkiyi yapacaktır ve yan yana kullanılan kolonlar arasındaki mesafe 30px olacaktır.

Farklı ekran çözünürlükleri için farklı kolon sınıfları tanımlanır.

  • .col-xs- 768px’den küçükse
  • .col-sm- 768px ile 991px arasında
  • .col-md- 992px ile 1199px arasında
  • .col-lg- 1200px eşit ve büyükse

Yukarıdaki örnekte iki tanım yapılmıştır. Bootstrap 3 ile birlikte mobil önceliği geldiğinden eğer küçük boyutlu ekran için bir tanım yapıldı ise ve başka tanım yoksa bu tanım yukarı doğru tüm ekran boyutlarını etkiler. Yukarıdaki örnekte mesela .col-xs tanımı hem mobili (768’den küçük) hemde tableti (768px - 991px) etkileyecektir. .col-md tanımı hem masa üstünü hemde daha büyük ekranları etkiyecektir.

Bu yazıyı burada bitirip bir sonraki yazıda bootstrap ızgara sistemini anlatmaya devam edeceğim.

Kalın sağlıcakla.

Kaynaklar

iPhone’da yazdığım bir kodun çalışmadığını gördüm. Aşağıdakine benzer bir selectbox‘ın ilgili option‘ununu seçmek için kullandığım bir kod parçası.

$('#mySelect')
    .find('option')
        .filter(function() {
            return this.text == $('#selectedRejectReason').val(); 
        }).attr('selected', true)

Sorunun çözümü her zaman ki gibi stackoverflow‘da

attr özelliği Safari’de çalışmıyor. Onun yerine jquery 1.6’dan sonra gelen prop özelliğini kullanmak gerekiyor.

$('#mySelect')
    .find('option')
        .filter(function() {
            return this.text == $('#selectedRejectReason').val(); 
        }).prop('selected', true)

Aklınızın bir köşesinde kalsın.

Kaynak

background-attachment özelliğinden çok öncelerden bahsetmiştim. Benim bahsettiğimde iki değer alıyordu; scroll ve fixed değerleri. Ancak bunlara CSS3 ile birlikte yeni bir değer daha eklenmiş; local değeri. Gerçi ekleneli bayağı olmuş. (2009)

Benim yazdığım ilk makalede şöyle tanımlamışım bu özelliği “background-attachment özelliği zemine eklenen resmin sayfa ile scroll etmesini veya sayfanın zeminin de çakılı kalmasını sağlar.”

Bu tanımda eksik kalan kısımları tamamlayalım. background-attachment özelliği iki farklı görünüme hitap eder: Birincisi ana kapsayıcı yani tarayıcı, ikincisi bizim oluşturduğumuz kapsayıcı diğer adı ile yerel (local).

background-attachment: local tanımı ana kapsayıcının kaydırma hareketinden etkilenmez, sadece bizim oluşturduğumuz elemanın kaydırma çubuğu hareketinden etkilenerek artalanı çakılı kalır.

Yukarıdaki örneği incelersek;

background-attachment: scroll ana kaydırma etki etmez, yerel kaydırmada artalan resmi kaydırılır.

background-attachment: fixed ana kaydırma ve yerel kaydırmada artalan resmi çakılı kalır.

background-attachment: local ana kaydırma etki etmez, yerel kaydırmada artalan resmi çakılı kalır.

Örneği inceleyerek tanımları daha iyi anlayabiliriz.

Tarayıcı Desteği

Chrome explorer Firefox
+ + +

Mobil Tarayıcılar

Android Mobil Safari Chrome
- 8+ +

Kalın sağlıcakla.

Kaynaklar

enter image description here

jquery’nin gelişmiş arayüz elemanları kütüphanesi jquery-ui yüksek boyutuna rağmen tercih edilen bir kütüphanedir. Ben yüksek boyutundan dolayı kullanmasam da bazen ihtiyacımı en iyi gören kütüphane olduğunda tercih ederim.

Kullanacağımız arayüz elemanına özel Jquery-ui’ı indirebiliyoruz. jQuery-ui indirme sayfasında gerekli elemanları seçip indir dediğimizde jquery-ui çekirdek kodu ve kullanılan elmanların javascriptlerini bize sunuyor. Buraya kadar her şey güzel.

Bu makaleyi yazmama sebep olan durum ise yeni arayüz geliştirme ortamlarında yoğun olarak kullanılan bower ile jquery-ui’ın kullanım kısmı. Tüm kütüphaneyi ekleyeceksek kolay.

<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/jquery-ui/jquery-ui.min.js"></script>
<script>
    $( "#projects" ).accordion();
</script>

adresini kodunuzun ilgili kısmına eklemeniz yeterli.

jquery-ui’ın tüm elemanlarını değilde sadece bir veya iki tanesini kullanmak istediğimizde ne yapmalıyız? Klasik yöntemde indirme sayfasında ilgili elemanları seçip indir dememiz yeterli.

Peki bower ile eklerken nasıl oluyor?

Mesela sadece sıralama işi için kullanacağımız dosyaları yüklemek istediğimizde ne yapmalıyız.

Aşağıdaki gibi bir yol izlemek gerekiyor çözüm için.

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/jquery-ui/ui/core.js"></script>
<script src="bower_components/jquery-ui/ui/mouse.js"></script>
<script src="bower_components/jquery-ui/ui/widget.js"></script>
<script src="bower_components/jquery-ui/ui/sortable.js"></script>
<script>
    $( "#projects" ).accordion();
</script>

İstediğiniz elemanı eklerken hangi çekirdek koda ihtiyacımız olduğunu nasıl anlayacağız.

bower_components/jquery-ui/ui/ klasörü içindeki eklemek istediğiniz elemanın ilgili dosyasını açın. Örneğin sıralama ( sorting ) için sortable.js

(function( factory ) {
if ( typeof define === "function" && define.amd ) {

	// AMD. Register as an anonymous module.
	define([
			"jquery",
			"./core",
			"./mouse",
			"./widget"
		], factory );
....

Yukarıdaki kod kısmında ihtiyacı olan çekirdek eleman listesi var. Bunu kullanacağız.

Aynı şekilde tüm elemanlara uygulanabilir.

Kaynak

Arayüz geliştiriciler neredeyse kod yazdığı editörleriyle geçirdiği zaman kadar veya daha fazla tarayıcı konsollarında zaman geçiriyor. Tabi bu gibi durumlarda konsolların yeteneklerini öğrenmek işimizi kolaylaştırıyor. Sizlere dün yaşadığın bir sorunu ve güzel bir çözümü anlatmaya çalışacağım.

Bir yerden sonra console.log ile konsola bastığım değerler arasından bazı değerleri ayırt etmek gerekiyor. Bunun için tarayıcıların CSS yardımı ile bir çözümü mevcut.

console log

console.log('%c Şampiyon Trabzonspor', 'background: #379DE8; color: #550329; font-size: 24px');

console.log içindeki ilk virgüle kadar olan yer içeriği, virgülden sonraki kısımda konsolda görünecek alana atadığımız css kodlarını gösteriyor. CSS ile yapıyor olmak süper. Şimdi süper oldu. Dikkat edilecek husus ilk bloka %c ile başlamalıyız.

console log renkli

Kaynaklar