Bricks.js

0
128
views

Bricks

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 : 

 JavaScript : 

 Css : 

  •  Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

 

1 oy (No Ratings Yet)
Loading...
Önceki İçerikBeatiful horizontal with ease in out
Sonraki İçerikTagger.js

1983 doğumlu, olmayan bir çocuk babası, espirili ve kendini cana yakın zanneden biri işte. Daha ne olsun ?

Paylaş

CEVAP VER

Please enter your comment!
Please enter your name here