Stilleri Özelleştirme

Giriş

Slidde.co, her bileşen içinde doğrudan CSS kullanarak stilleri özelleştirmenize olanak tanıyan benzersiz bir web tasarım yaklaşımı sunar. Webflow gibi geleneksel web sitesi oluşturucularından farklı olarak, Slidde.co şu özelliklerle öne çıkar:

• Standart CSS Kullanımı:
  • Herhangi bir web sitesi stilini elde edin.
  • Kod tabanlı geliştirmeye geçerseniz, stilleri başka bir web sitesi oluşturucuya aktararak yeniden kullanılabilir hale getirin.
• Ön Tanımlı Değerler:
  • Tailwind gibi kütüphanelerden ilham alarak, Slidde.co stiller için ön tanımlı değerler sunar ve seçenekleri yazmak yerine fare tıklamasıyla seçmenize olanak tanır.
• Net Yapı:
  • Karmaşık stiller için bile ayarlar net kalır ve DOM yapısını bozmaz.

Örnek Bileşen: Yatay Navigasyon Çubuğu

Karmaşık bir bileşen olan yatay navigasyon çubuğunu ele alalım ve beş özelleştirme alanını inceleyelim:

1. Özel Stiller: Tüm navigasyon çubuğu için CSS.
2. Konteyner Özel Stilleri: Genellikle bir logo veya başlık barındıran sol konteyner için stiller.
3. Buton Özel Stilleri: Masaüstü butonları için stiller.
4. Buton Aktif Stilleri: Aktif masaüstü butonları için stiller.
5. Geçiş Butonu Özel Stilleri: Mobil hamburger menü butonu için stiller.

Tam bir navigasyon çubuğu örneğini burada görebilirsiniz şablon.

İleri Düzey CSS Sözdizimi

Slidde.co, daha hassas stil vermek için ileri düzey CSS sözdizimini destekler:

• Nokta Ayırıcı: Özellikleri modifikasyonlardan ayırmak için . kullanın.
• CamelCase: CSS özellik adları için camelCase kullanın.

Örnekler:

• &:hover.color: Üzerine gelindiğinde yazı rengi.
• &:hover.borderColor: Üzerine gelindiğinde kenar rengi.
• padding: Tüm ekran boyutları için dolgu.
• md.padding: Orta boyuttan büyük ekranlar (masaüstü) için dolgu.

Mobil ve masaüstü için farklı dolgular ayarlamak için: padding: .5rem & md.padding:2rem

Standart CSS Seçicileri:

• & > img.height: Mevcut eleman içinde birinci seviyedeki img elemanlarının yüksekliği.
• &:first-child.color: İlk çocuk eleman için ::first-child pseudo-sınıfı.
• &::after.content: Ekstra elemanlar eklemek için ::after pseudo-sınıfı.

Bu yönergeleri izleyerek, Slidde.co'yu kullanarak web bileşenlerinizi hassasiyet ve kolaylıkla tasarlayıp özelleştirebilirsiniz.