Bootstrap 5 ile Responsive Organism

AstroForge'da CSS framework olarak Bootstrap 5 seçilmesinin birkaç nedeni vardır: olgunluk, geniş bileşen seti, iyi dokümantasyon ve Türkiye'deki web geliştiricilerinin genel aşinalığı. Ama daha önemli bir neden var: tasarım token sistemi.

Tasarım Token'larıyla Marka Uyumu

Bootstrap 5.3, CSS custom property'leri tam anlamıyla destekler. src/styles/_tokens.css'te tanımlanan --bs-primary, --bs-body-font-family gibi token'lar Bootstrap'in tüm bileşenlerini etkiler. Bir müşterinin marka rengini değiştirmek için tek bir token değişikliği yeterlidir — tüm butonlar, linkler ve vurgular otomatik güncellenir.

Section Wrapper Pattern'ı

Her içerik organism'ı şu HTML yapısını üretir:

<section class="{organism} {organism}--{variant} app-section">
  <div class="container">
    ...
  </div>
</section>

.app-section global padding'i tanımlar (--section-padding-y token'ından). Slider ve FullBackground gibi tam ekran section'lar bu class'ı kullanmaz, kendi yüksekliklerini yönetirler.

CSS Per-Organism Mimarisi

Her organism variant'ının CSS'i src/styles/organisms/{Name}/{Variant}.css dosyasında yaşar. src/styles/app.css sadece @import listesidir. Vite bu dosyaları build sırasında tek bir hash'li bundle'a birleştirir.

Scaffold aracı, yeni organism oluşturduğunda CSS dosyasını otomatik oluşturur ve app.css'e @import satırı ekler. Geliştirici CSS altyapısıyla uğraşmak zorunda kalmaz.

Responsive Grid

Bootstrap 5 grid sistemi, AstroForge organism'larında standart kullanılır: col-md-4, d-none d-md-block, text-center text-md-start vb. Mobil-önce yaklaşım temeldir.