Semantik kelimesinin gücünü Google’ın semantic web allogritmaları ile daha da çok benimsemiş olsa da, bir semantic webdir aldı başını gidiyor kuramından sonra geliştirilen çok sayıda anlamsal (semantic) ek düzenlemeler ile muhteşem sonuçlar elde edebiliyoruz… Öyle ki, özellikle responsive arayüzler için tercih edilen css3 media query’ler ile farklılaşan ön yüz yerleşkeleri, The semantic grid system adı verilen less, scss veya stylus ile kodlanabilirliği ile oldukça başarılı kesinlikel hesapsız kitapsız CSS yazma tekniklerini ortaya koyuyor.

İşte bu makalede, Semantic Grid System Üzerinde ufak bir inceleme yapıp kullanımının ne kadar yaratıcı ve kolay olduğunu, aynı zamanda az kod ile, daha az yorularak nasıl çok olumlu sonuçlar aldığımızı inceleyeceğiz.

Semantik (Semantic) Grid Sistem Nedir ?
Semantik kelime manası olarak Anlamsal ifadesi taşıyor. Dolayısı ile anlamlandırılmış grid sistem olarak yorumlanabilecek olan bu yapı, grid sistemlerde olan paketlenmiş seçiciler gibi, ( .grid_x ) sınıf isimleri olmadan gayet stabil ve daha anlaşılır bir dille web arayüzünü oluşturmanızı sağlıyor.Alttaki bağlantıya tıklayarak, Semantic Grid System in github üzerinden proje kaynak dosyalarını indirerek incelemelerinizi yapabileceğiniz zemini hazırlayabilirsiniz. Şimdi gelin bir takım örnekler ile durumu daha açıklayıcı hale getirelim.

İndirmek için tıklayınız.

Basitçe örnekleyecek olursak gelişi güzel bir html yapısı (html 5) alttaki gibi olduğunu varsayalım.

<header>...</header>
<article>...</article>
<aside>...</aside>
Semantik Grid Sistem ile yazacağımız CSS yapısı ise, (ben proje örneklerinde less CSS kullanacağım) alttaki gibi, değişken ve mixinlerden oluşacak.

@column-width: 60;
@gutter-width: 20;
@columns: 12;
 
header { .column(12); }
article { .column(9); }
aside { .column(3); }
 
@media (max-device-width: 960px) {
   article { .column(12); }
   aside { .column(12); }
}
Aslında indirdiğiniz kaynak dosyaları incelediğinizde, sütun genişlik / reponsive değerlerini şu matematiksel işlem halletmiş olduğunu farkedeeksiniz.

width: @total-width*((((@gutter-width+@column-width)*@x)-@gutter-width) / [MENTION=58267]Gri[/MENTION]dsystem-width);
Gelin şimdi resmi sitesinde verilen örnekler yerine, kendimiz Semantic Grid System ‘i kullanarak basit iki sütunlu bir HTML şablonu oluşturalım.

Semantic Grid System Kullanımı
Öncelikle Semantic Grid System’in dosyalarını ve less doğrulayıcımızı sayfa üst kısmına çağırıyoruz.

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Semantic Grid System Demostration ~ Fatihtoprak.com</title>
 
	<link rel="stylesheet" href="reset.css">
	<link rel="stylesheet/less" href="style.less">
	<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.6.1/less.min.js"></script>
</head>
<body>
 
</body>
</html>
Üstteki örneğe binayen, style.less dosyası içeriğinde de semantic grid system’e ait grid lokalizosyonunun style.less dosyası içine import ettim. Stil dosyası da şu kalıpta.

@import 'grid/grid.less';
 
[MENTION=8781]siyah[/MENTION] : #000;
[MENTION=58267]Gri[/MENTION] : #f2f2f2;
[MENTION=46331]Beyaz[/MENTION] : #fff;

body {
	margin:0;
	padding:0;
	background:[MENTION=58267]Gri[/MENTION];
 
}
Üç farklı da renk tanımladım ki (değişken olarak) oluşturacağımız çalışmanın kısmi yerlerinde less faydasını görelim diye. Üstteki örnek kod parçalarında, matematiksel işlemlerin yapıldığını izah etmiştim. İşte bu değişkenleri yeniden tanımlamaya ihtiyaç var. Sebebi kaça bölünen bir sayfa yapısının olması ile alakalı. Altta stil dosyama eklediğim yeni değerler ile durumu stabilize etmiş oluyoruz.

/*Responsive Değerleri*/
@columns: 12; // Sütun sayısı
@column-width: 60; // Sütun genişliği
@gutter-width: 20; // Düzensiz Aralıklar
 
@total-width: 100%; // Toplam genişlik
Tamamen responsive bir arayüz oluşturmak açısından, alışılagelmiş yapının ötesinde bir kuram olduğundan total-width değerini % cinsinden belirtmek durumundayız. Diğer türlü her ekran çözünürğü için tek tek media query yazmamız gerekecek. Dolayısı ile en dışta olan seçicicye 100% ‘lik değer vermemiz halinde sayfa tamamen bu yapının içine sığdırılacaktır. Bunu zaten geçmiş yazılarda yazmıştık.

Şimdi sırada header ve footer elementlerimiz ve sayfanın diğer içerik kısımlarının konumlandırılacağı html yapısını yazalım.

<body>
	<header>
		Responsive Semantic Grid System Demo
	</header>
 
	<section>
		Content
	</section>
 
	<aside>
		Aside Column
	</aside>
 
	<div class="clearfix"></div>
	<article>
		Article
	</article>
 
</body>
Akabinde oluşturduğumuz CSS dosyamız içine responsive yapı ile kurgulanmış Gridlerimizin kullamını ve belli değerleri vermemizi sağlayalım.

@import 'grid/grid.less';
 
[MENTION=8781]siyah[/MENTION] : #000;
[MENTION=58267]Gri[/MENTION] : #f2f2f2;
[MENTION=46331]Beyaz[/MENTION] : #fff;

body {
	margin:0;
	padding:0;
	background:[MENTION=58267]Gri[/MENTION];
	font-family:Tahoma;
}
.clearfix {clear:both;}
/*Responsive Değerleri*/
@columns: 12;
@column-width: 60;
@gutter-width: 20;
 
@total-width: 100%;
 
header {
	background:[MENTION=8781]siyah[/MENTION];
	height:100px;
	margin-bottom:20px;
	color:[MENTION=46331]Beyaz[/MENTION];
	line-height:100px;
	text-align:center;
}
article {
	background:[MENTION=8781]siyah[/MENTION];
	height:100px;
	margin-top:20px;
	color:[MENTION=46331]Beyaz[/MENTION];
	line-height:100px;
	text-align:center;
}
section {
	.column(9);
	background:[MENTION=46331]Beyaz[/MENTION];
	height:350px;
}
aside {
	.column(3);
	background:[MENTION=46331]Beyaz[/MENTION];
	height:350px;
}
 
@media screen and (max-width: 720px) {
	section,
	aside,
	article {
		.column(12);
		margin-bottom: 1em;
	}
}
Görmüş olduğunuz gibi, tarayıcının boyutları ile oynadığınız anda, basitçe ve zekice kurgulanmış mixinler yardımı ile çok kısa zaman süresi içinde, responsive arayüzünü oluşturmuş oluyorsunuz. Resmi site üzerinden de çokça örnek görebilirsiniz. (bkz .semantic.gs)

Aynı zamanda mixin kullanımları .push() .pull() gibi harika özelliklerininde dökümanları var. Zaten açıkça herşey anlatılmış sitede.

Uygulamanın demosuna bu adresten bakabilir, buradan da kaynak dosyaları indirebilirsiniz.

Less ile alakalı çok şık bir makale ile de yakın zamanda neden LESS ‘e terfi etmeniz gerektiğini kendimce ifade etmeye çalışacağım. Umarım faydalı bir makale olmuştur.

Mutlu kodlamalar.

Kaynak : http://www.fatihtoprak.com/semantic-...kullanimi.html