Ekran Alanının Optimal Kullanımı İçin JQuery Eklentisi
Ekranda alanın nasıl kullanıldığını optimize etmek, iyi web tasarımının ve özellikle duyarlı tasarımın önemli bir bileşenidir.
Bu tür bir zorluğa yaklaşmanın birçok yolu vardır ve en popüler olanlardan biri, ana konteyner içindeki öğelerin otomatik olarak düzenlenmesidir. Verimli ve iyi yürütüldüğünde, hem görsel olarak çekici hem de işlevsel açıdan optimal olan bir düzen oluşturur.
Duyarlı bir site tasarlıyorsanız, neredeyse tamamen kullanıcının cihazının ekran boyutuna bağlı olarak, içeriği dinamik bir şekilde yeniden düzenleme ihtiyacını bulacaksınız. Her sayfa ve her öğe için kesme noktalarını özelleştirmek için harcanan süreyi en aza indirdiği için, içeriği otomatik olarak düzenlemek anlamlıdır.
Sürekli değişen içeriğe sahip siteler (bloglar veya çevrimiçi mağazalar gibi) özellikle otomatik düzenlemeden yararlanabilir. Sonuçta, müşterinizin sitesine ait kodun içine girmek ve aniden daha uzun veya daha kısa blog gönderileri yazmaya başlamaya karar verirse kesme noktalarını ve yerleşimi ayarlamak zorunda kalmayı gerçekten istiyor musunuz?
Tüm bunları sıfırdan yapmak zaman alıcıdır ve geliştiriciler olmayan çoğu tasarımcının yeteneklerinin ötesindedir. Bunun yerine önceden varolan bir eklentiyi veya çerçeveyi kullanmak mantıklıdır.
JavaScript (jQuery ve diğer kütüphaneler dahil), büyük ölçüde çapraz uyumluluğundan dolayı, bu tür bir düzen oluşturmanın en yaygın yoludur. VGrid, Wookmark ve Masonry gibi mevcut çabalar bu şekilde çalışır.
Freetile.js Bu tür dinamik, organize ve duyarlı bir düzen sağlayan yeni bir jQuery eklentisidir. Yaklaşık iki yıl boyunca Assemblage ve Assemblage Plus'ın arkasında bir motor olarak kullanılmış ve şu anda bağımsız bir açık kaynak projesi olarak kullanılabiliyor.
Bu alandaki mevcut çabalardan birkaç nedenden dolayı farklıdır. Sabit boyutlu bir sütun ızgarasına ihtiyaç duymadan her boyut elemanının kullanılmasına izin verir. Bu, öğelerinize uygun bir sütun genişliği belirtmenizden kurtulmanızı sağlar. Ayrıca, her öğe için olası ekleme konumlarını değerlendiren algoritmayı özelleştirerek, hizalama ve yakınlık gibi tercihlerinizi ifade etmenizi sağlar.
Hangi öğelerin animasyonlu olması gerektiğini ve ayırt edilmemesi gerekenleri ayırt etmeyi kolaylaştıran bir akıllı animasyon rutinine sahiptir. Kod içindeki animasyonu belirtmek de kolaydır.
Freetile.js kullanımı basittir. JavaScript'te yetkin olmasanız bile, kullanımını çok hızlı bir şekilde anlayabilmeniz gerekir.
Freetile.js, BSD Lisansı kapsamında lisanslıdır ve GitHub aracılığıyla kullanılabilir.
Freetile.js kullandınız mı? Ne inşa ettin? Tecrübelerinizi yorumlarda paylaşın.