Ana içeriğe geç

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.

Schema.org destekli navigasyon sistemi. SEO uyumlu, tepkisel (responsive) breadcrumb bileşeni.

Hızlı Başlangıç

Bu bileşenlerden herhangi birini kullanmak için:

  1. Yukarıda bağlantılı bileşen sayfalarına göz atın
  2. Örneklerden HTML yapısını kopyalayın
  3. İçeriği ve stili ihtiyacınıza göre özelleştirin