Stil Örneklerine Giriş¶
Stil örneklerini oluşturan bileşenler; dökümantasyon sürecinde ihtiyacımız olan stil elemanlarının kendileridir.
Bütün bileşenler tepkiseldir ve esnek tasarım kaygısı göz önünde bulundurularak geliştirilmiştir. Stil Örnekleri, mevcut bileşenleri ve örnek kullanımları içeren geniş ve sade bir döküman bütünüdür. Mevcut bileşenler ve örnek kullanımlar için aşağıdaki bağlantılardaki dökümanlara göz atabilirsiniz.
Mevcut Bileşenler ve Örnek Kullanımlar¶
Tipografi¶
Başlık hiyerarşisi, metin stilleri ve yazım standartları. Tutarlı dokümantasyon için temel yapı taşları.
Yerleşim Izgaraları¶
Tepkisel (Responsive) yerleşim ızgaraları. Esnek ve ölçeklenebilir sayfa mimarisi.
Tema Değiştirme¶
Açık ve koyu tema desteği. CSS değişkenleri ile dinamik görünüm kontrolü.
Komut Örnekleri¶
Terminal komutları için yapılandırılmış gösterim.
Kod Blokları¶
Otomatik olarak oluşturulan estetik dil rozetleri ve şık bir tasarıma sahip kod blokları
Durum Kartları¶
Sistem durumları için modüler kart yapıları. Ölçüm ve durum bilgilerinin görsel temsili.
Özellik Listeleri¶
Simge destekli özellik sunumları. Izgara tabanlı, tepkisel (responsive) liste bileşenleri.
Uyarı Kutuları¶
Dört seviyeli bildirim sistemi. Başarı, hata, uyarı ve bilgi durumları için standart yapılar.
Yükleme Aşamaları ve Durumları¶
Özel bileşenlerde kullanılan yükleme animasyonları. İşlem durumlarının görsel geri bildirimi.
İlerleme Göstergeleri¶
Çok adımlı süreçler için ilerleme takibi. Tamamlanma durumlarının net gösterimi.
Görüntü Bileşenleri¶
Lazy loading ve lightbox desteği. Tepkisel (Responsive) görsel yönetimi için kapsamlı bileşen seti.
Oynatıcı Bileşenleri¶
YouTube ve Asciinema entegrasyonu. Video ve terminal kayıtları için yerleşik oynatıcı desteği.
Grafik Örnekleri¶
Chart.js ile veri görselleştirme. Tepkisel (Responsive) ve etkileşimli grafik bileşenleri.
Hareketli ASCII Art¶
Pulse efektli ASCII animasyonları. Özelleştirilebilir hız kontrolü ve hata yönetimi.
Font Awesome Simgeleri¶
Kategorize edilmiş simge referansı. Markdown ve HTML kullanımı için kapsamlı dokümantasyon.
Breadcrumb Navigasyon Demosu¶
Schema.org destekli navigasyon sistemi. SEO uyumlu, tepkisel (responsive) breadcrumb bileşeni.
Hızlı Başlangıç¶
Bu bileşenlerden herhangi birini kullanmak için:
- Yukarıda bağlantılı bileşen sayfalarına göz atın
- Örneklerden HTML yapısını kopyalayın
- İçeriği ve stili ihtiyacınıza göre özelleştirin