Ikon CSS Şablonları

Kartlar ve Tıklanabilir Kontroller İçin Biçimlendirilmiş İşlevsel İkon CSS Şablonları

Her simge beraberinde birkaç küçük karar getirir: ne kadar büyük olacağı, arkasında hangi şeklin yer alacağı ve imleç üzerine geldiğinde ne olacağı. İkon CSS şablonları bu kararlar önceden verilmiş olarak gelir. Bloklar; hizmet kartlarından iletişim satırlarına ve simgeli butonlara kadar uzanır. Paylaşılan sınıflar, bir gruptaki her ögeyi tutarlı bir şekilde biçimlendirir; böylece yeni bir kart otomatik olarak aynı boyut ve rengi alır.

Tipik Kartlarda Yerleşik Kurallar

Bu kategorideki bloklar genellikle şu kurallarla birlikte gelir:

1. gruptaki her simge için tek bir genişlik ve yükseklik; böylece hiçbiri yanlışlıkla daha büyük görünmez;
2. sembolün arkasında dolgulu veya kenarlıklı bir daire ya da köşeleri yuvarlatılmış bir kare;
3. başlıklar alt satıra geçtiğinde satırların hizalı kalmasını sağlayan, simge ile başlığı arasındaki sabit boşluk;
4. tema paletine bağlı bir vurgu rengi, böylece tüm set birlikte değişir.

Bu kurallar hem SVG simgeleri hem de simge yazı tipi glifleri için aynı şekilde geçerlidir. Bir iletişim satırında tüm kanal simgeleri aynı boyutu paylaşır. Ana kanalınız buysa, e-posta satırı yine de daha parlak bir vurgu alabilir. Çizgi kalınlığı da önemlidir; çünkü ince çizgili simgeler telefon ekranlarında dolgulu olanlara göre çok daha önce belirsizleşir.

Yinelenen Hücreler ve Tıklanabilir Durumlar

Nicepage içinde Grid Repeater Element, hücrelerinin düzenini ve stilini yineler. Her sütun yine de kendi simgesini ve metnini korur. Bir hücredeki daire rengini değiştirdiğinizde diğerleri onu takip eder. Statik bir hizmet ızgarası nadiren bundan fazlasına ihtiyaç duyar. Arama, paylaşma veya bir paneli kapatma gibi tıklanabilir simgeler farklıdır ve şablon şu durumları tanımlamalıdır:

1. çevresindeki metnin yanında sakin kalan varsayılan bir görünüm;
2. imleç geldiğinde rengi veya arka planı değiştiren bir hover durumu;
3. tıklamanın kendisi ve klavye kullanıcıları için bir aktif veya odak (focus) durumu;
4. seçilmiş bir filtre gibi geçerli tercihi belirten vurgulanmış bir durum.

Tüm Grupları Tek Seferde Yeniden Renklendirme

Nicepage Site Ayarları içindeki Tema Renkleri sayesinde bir vurguyu değiştirmek, projenin sayfalarında bu rengi kullanan her simgeyi günceller. Uyarı ve onay sembollerini boyut olarak komşularıyla eşleştirip kendi renklerini kullanarak bu vurgunun dışında tutmak daha iyidir. Boyutlar Duyarlı Moda göre de değişebilir; böylece büyük bir dekoratif sembol telefonlarda küçülür. Görsel kontroller yetersiz kaldığında Custom CSS Code; tek bir ögeye, tek bir sayfaya veya tüm siteye bir kural ekler.

Bir hizmet ızgarası şablonu tek bir statik simge stiliyle işini görebilir. Düğmeler ve açma-kapatma anahtarları için paletten önce durumları kontrol edin; çünkü tıklandığında hiçbir değişiklik göstermeyen bir kontrol bozuk hissettirir.