Genelde bu tür örnekler grid adı altında yayınlanır. Kimileri farklı olsun diye kelimenin başına yada sonuna kişisel imza gibi farklı sözcükler ekleyerek yayınlar. Ama bu seferki geliştirici biraz farklı yol izlemiş gibi görünüyor. Florian Ferbach tarafından geliştirilmiş olan Bricks yani tuğla (veya briket de diyebiliriz ) uygulaması web site içeriğini bütün tarayıcılara uygun bir şekilde adeta jilet gibi listeliyor.
Bu tür uygulamalar websayfasındaki dağınıklığı toplayıp bir düzene sokmak amacıyla kullanılır. Kimi çerçeceler büyük kimisi küçük olunca web sayfasında düzgün bir görünüm elde etmek pek kolay değildir. İşte bu noktada yardımımıza koşan grid uygulamalarıdır.
İlla bir css çerçeve olması gerekmiyor. Websayfanıza yerleştirmiş olduğunuz farklı ebatlardaki resimleri de düzene sokmak için kullanılabilirsiniz bu tür çalışmaları. Diğer eklentilere pek dikkat etmedim ama Bricks’de web sayfanızdaki nesneler tarayıcı boyutuna göre bir oran dahilinde sıralanıyorlar. Farklı farklı ebatlardaki resimlerinizi Bricks ile beraber web sayfanıza eklediğinizde resimler web sayfasında düzgün görüntülenecek şekilde sıralanır.
Demo sayfasında tarayıcıyı küçülttüğünüzde eklenti Bricks uygulaması içeriklerin boyutlarını ve sıralamalarını da dinamik olarak değiştirmiyor. Demo sayfasında tarayıcı boyutunu sürekli değiştirerek sayfayı yenilerseniz eğer Bricks’in tam olarak ne görev gördüğünü daha iyi anlayabilirsiniz. İşin güzel tarafı her tarayıcı için ayrı ayrı tema oluşturmanıza gerek kalmayacak. Tek bir tema ile bütün cihazlar üzerinden düzgün görüntü elde etmenize olanak sağlar.
Kullanım
- Head etiketleri arasına eklemeniz gereken bölümler.
Js dosya adresleri :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="jquery-bricks.min.js"></script>
JavaScript :
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#container').bricks();
});//]]>
</script>
Css :
body {
background-color:#AAA;
}
#container {
font-size:0px;
}
#container img {
margin:5px;
}
- Body etiketleri arasına eklemeniz gereken bölüm.
Html :
<div id="container">
<img src="http://placehold.it/225x300" />
<img src="http://placehold.it/400x300" />
<img src="http://placehold.it/317x400" />
<img src="http://placehold.it/275x300" />
<img src="http://placehold.it/127x300" />
<img src="http://placehold.it/275x300" />
<img src="http://placehold.it/127x300" />
<img src="http://placehold.it/600x300" />
<img src="http://placehold.it/317x300" />
<img src="http://placehold.it/275x300" />
<img src="http://placehold.it/95x300" />
<img src="http://placehold.it/300x300" />
<img src="http://placehold.it/275x300" />
<img src="http://placehold.it/127x300" />
<img src="http://placehold.it/375x300" />
<img src="http://placehold.it/200x300" />
</div>
