SP Grid V9.1 Tema

sp grid 9.1
SP grid 9.1

Tema İyileştirmeleri

Sitenin temasını Grid haline versiyon 9 ile geçirmiştik. Elbette iyileştirmeler hiç bitmiyor. CSS öyle bir şey. Ya yenilikler çıkıyor ya aynı şeyi daha iyi bir şekilde yapabilme örnekleri.
Temasını grid yapısı yapmak isteyenlere şöyle bir tavsiye verebilirim. Gerekli yerlerde flex yapısını kullanmaya devam etmelisiniz. Tamamen grid yapısı sorun çıkarabiliyor. Sorun derken sitenizin istediğiniz gibi görünmesi veya responsive özelliklerinde, gibi.
Grid’in kendine göre avantajları aynı şekilde de flex’in önemli avantajları var.
Bu sebeple tamamen grid yapıdan vazgeçtim. Postların ve alt bölümlerin çatı yapısı grid. Ancak header, logo kısmı, menüler ve sosyal medya ikon bölümlerini flex yapıya geri aldım.
Flex yapıda bulunan justify-content, row wrap gibi özelliklerin grid’de tam karşılığı yok. Varsa da ben yapamadım. Yaptıklarımda ise daha fazla CSS kodu oluşuyordu, vazgeçtim.
Aynı şekilde grid-gap özelliği de flex’de yok.
Bunlar gibi özellikleri biribiri içinde tanımlamaya çalışmak gereksiz, uzun CSS kodları yazmayı gerektiriyor. Bunun yerine grid ve flex’in tema için ihtiyaç duyulan elemanlarını kullanmak şimdilik daha verimli.
Zaten flex eleman içinde grid, grid içinde de flex rahatlıkla kullanılabiliyor. Css Tricks’in Does CSS Grid Replace Flexbox? yazısı konu için gayet açıklayıcı ve faydalı.

Grid V9.1

SuniPeyk Grid V9.1 tema ile birlikte yukarıda özet olarak belirttiğim grid, flex kullanımı yanı sıra masaüstü, tablet görünümü de biraz değişti. WordPress tema için biribirini takip eden postları :nth-child(n) kullanımı ile –hemen hemen– istediğimiz gibi şekillendirebiliyor ve yerleştirebiliyoruz. Grid yapıda buna oldukça kolaylık veriyor. Elbette bazı eksi ve eksik tarafları da olabiliyor.
İyileştirmeler kendi temama özel olduğu için çok açıklayıcı veya size faydalı görünmeyebilir. İsterseniz sitenin CSS kodlarını elbette rahatlıkla inceleyebilirsiniz.

PAYLAŞ

Bir cevap veya yorum yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir


This site uses Akismet to reduce spam. Learn how your comment data is processed.