Kitaplık CSS Şablonları

Düzenini Koruyan Kitap Koleksiyonları İçin Kitaplık CSS Şablonları

Kapaklarla dolu bir raf, yalnızca stil kuralları her şeyi bir arada tuttuğunda derli toplu görünür. Ciltli kitap taramaları, ciltsiz kitap fotoğrafları ve eski basımlar asla aynı boyutta olmaz; bu nedenle bir kitaplık şablonu, altlarındaki başlıkların ve yazar adlarının okunaklılığını korurken hepsini tek bir çerçevede tutmalıdır.

Kapak Görselleri Farklı Oranlara Sahiptir

Kitap görselleri nadiren aynı en-boy oranına sahiptir. Yeni bir basım basık, bir sanat kitabı neredeyse kare, taranmış bir klasik ise üstten kırpılmış olabilir. Kart boyutlarının eşit olması kapakların da eşit boyutta olmasını sağlamaz ve rafın düzensiz görünmesine yol açan şey de bu farktır. Kapak alanı için belirlenen sabit bir "en-boy oranı" (aspect-ratio) ile görselin bu alanı doldurmasını sağlayan bir "nesne sığdırma" (object-fit) kuralı, her kartı aynı yükseklikte tutar ve görseli esnetmek yerine kenarlardan kırpar.

Uzun başlıklar ise bir diğer hizalama sorununu doğurur. Bir kapağın altında iki satır metin varken yanındakinde dört satır olması, yazar adlarını satır boyunca farklı yüksekliklere iter.

Bir kitap koleksiyonunda görsel düzenin büyük kısmını birkaç temel stil tercihi taşır:

• basık bir basım ile uzun bir sanat kitabının aynı alanı kaplamasını sağlayan, kapak alanı için sabit bir oran;
• her kartta yazar satırını tek bir yükseklikte tutan, başlıklara yönelik satır sınırı;
• yeni çıkanlar ile çalışanların önerilerinin ayrı raflar gibi algılanmasını sağlayan, gruplar arasındaki geniş boşluklar;
• bir puanı veya tek satırlık bir özeti gösteren fare üzerine gelme (hover) durumu.

Nicepage bu ayarların çoğunu görsel denetimlerinde yönetir ve Izgara ögesi sütunları ile boşlukları belirler.

Izgara Sütunları Dar Ekranlarda Küçülür

Geniş bir ekran, uzun bir kapak sırasını rahatça barındırır. Aynı sıra bir telefonda genellikle bir veya iki sütuna iner ve bu iki uç nokta arasında nelerin gerçekleştiği her Duyarlı Modda kontrol edilmelidir.

Kapağın, başlığın ve yazarın her genişlikte okunabilir kalmasını sağlayın. Telefonda bir rafa göz atan okuyucu ilk olarak görsele baktığından, tür etiketleri ve basım notları küçük ekranlarda küçülebilir. Kişisel bir kütüphane, her kapağın aynı zamanda bir ürün olduğu bir kitapçı seçkisine göre daha yüksek bir yoğunluğu kaldırabilir.

Tek Bir Raf İçin Özel Kurallar

Bazen bir grup, ödül kazananlar için altın rengi bir dış hat gibi standart kontrollerin sunmadığı bir biçimlendirmeye ihtiyaç duyar. Nicepage; tek bir öge, tek bir sayfa veya tüm site için bu tür istisnaları karşılayan Özel CSS kontrollerini destekler.

Bir şablonu en dolu rafına göre değerlendirmek, demo ana ekranına bakmaktan çok daha fazlasını anlatır. Şablonu en uzun başlığınızla, en kötü kapak taramanızla ve yayınladığınız en büyük grupla doldurun; ardından satırların hâlâ aynı hizada kalıp kalmadığını görün.