CSS Kullanımı

Bu belge, Falcon’da stillerin nasıl organize edildiğini ve ne zaman hangi yöntemi kullanacağını anlatır.

İki sistem birlikte çalışır; biri diğerinin yerine geçmez:

Sistem	Ne için?	Nerede?
*Fix UI (`fix-`)**	Buton, kart, yazı rolleri — tek yerden kontrol	`src/styles/components/`, `src/components/ui/`
Tailwind CSS 4	Sayfa düzeni, grid, gap, responsive, tek seferlik utility	`.astro` / HTML `class="..."`
Sayfa başlığı / paragraf	`fix-type-*`	Detay: Yazı Stilleri

Temel Mantık

Stil akışı dört katmandan oluşur:

Token'lar          →  Bileşen CSS (fix-*)  →  Astro sarmalayıcı  →  Sayfa
(colors, spacing)     _fix-button.css         Button.astro          index.astro

Token — Renk, boşluk, radius, gölge (src/styles/tokens/). Tüm ekranların paleti buradan gelir.
Bileşen CSS — .fix-btn, .fix-card gibi sınıflar; token tüketir. Görünümü değiştirmek için önce buraya bak.
Astro sarmalayıcı — Button.astro, Card.astro; yalnızca doğru fix-* sınıflarını üretir, stil yazmaz.
Sayfa — Layout + bileşenler; layout için Tailwind, buton/kart için <Button> / <Card> veya bilinçli fix-* sınıfı.

Özet: Tema ve bileşen görünümü CSS dosyalarında; sayfa iskeleti Tailwind’de.

Dosya Yapısı

Katman	Dosya / klasör	Görevi
Tema + token	`src/styles/core.css`	`@theme`, `:root` / `.dark`, body; token import’ları
Token parçaları	`src/styles/tokens/_*.css`	`--primary`, `--space-m`, `--radius-l` …
Tipografi token	`src/styles/tokens/_typography.css`	`--text-h1`, `--text-h2`, `--leading-body` — boyut ölçeği
Fix bileşenleri	`src/styles/components/_fix-*.css`	`.fix-btn`, `.fix-card` stilleri
Layout (Fix)	`src/styles/layout/_fix-section.css`	`.fix-section`, `.fix-container`
Site yığını	`src/styles/site.css`	Import zinciri + Tailwind + `@source`
UI sarmalayıcı	`src/components/ui/*.astro`	`Button`, `Card`
Yükleme	`src/layouts/BaseLayout.astro`	`import '@/styles/site.css'` (tek kez)

globals.css kullanılmaz — layout doğrudan site.css yükler.

`site.css` İmport Sırası

Sıra önemlidir: önce tema ve Fix bileşenleri, en sonda Tailwind.

@import "./core.css";
@import "./components/_fix-button.css";
@import "./components/_fix-card.css";
@import "./layout/_fix-section.css";
@import "./components/_fix-type.css";
@import "./components/_fix-prose.css";
@import "tailwindcss";

@source "../components/**/*.{astro,...}";
@source "../layouts/**/*.{astro,...}";
@source "../pages/**/*.{astro,...}";

Performans: Tek CSS pipeline; ekstra runtime veya ikinci framework yok. Fix sınıfları statik CSS; Tailwind yalnızca kullanılan utility’leri üretir (@source ile tarama sınırlı).
@apply kullanılmaz — Fix bileşenleri düz CSS + var(--token) ile yazılır.

Fix UI İsimlendirme (`fix-*`)

Tüm tasarım sistemi sınıfları fix- ile başlar; projede grep ile takip edilir.

Tür	Örnek
Buton	`fix-btn`, `fix-btn--primary`, `fix-btn--outline`, `fix-btn--s`
Kart	`fix-card`, `fix-card--elevated`, `fix-card__header`, `fix-card__body`
Bölüm	`fix-section`, `fix-container`
Yazı rolü	`fix-type-h1`, `fix-type-body`, `fix-type-lead`
Blog gövdesi	`fix-prose`

CSS değişkenleri fix- almaz: --primary, --space-m, --radius-base.

Audit (kullanım kontrolü):

rg "fix-btn|fix-card" src

Buton/kart için uzun Tailwind zinciri (rounded-xl border bg-… px-4 py-2) yerine <Button> / <Card> veya fix-* kullan.

Ne Zaman Ne?

Durum	Kullan
Buton, kart, rozet (ileride)	`<Button>`, `<Card>` veya `fix-*`
Sayfa başlığı, lead, gövde metni	`fix-type-h1`, `fix-type-lead`, `fix-type-body` — Yazı Stilleri
Blog / uzun MDX gövdesi	`<article class="fix-prose">`
Grid, flex, gap, responsive, tek seferlik hizalama	Tailwind: `flex`, `gap-4`, `md:grid-cols-2`
Tüm sitede renk / boşluk değişimi	`src/styles/tokens/`
Bir butonun hover rengi	`_fix-button.css` (veya ilgili token)
Yeni sayfa	`BaseLayout` + bileşenler; sayfada CSS `import` etme

Kullanım Örnekleri

Sayfa İskeleti (Tailwind + Fix Layout)

---
import BaseLayout from '@/layouts/BaseLayout.astro';
import Button from '@/components/ui/Button.astro';
import Card from '@/components/ui/Card.astro';
---

<BaseLayout title="Örnek">
  <main class="fix-section">
    <div class="fix-container flex flex-col gap-8">
      <h1 class="fix-type-h1">Başlık</h1>
      <Button variant="primary">Kaydet</Button>
      <Card variant="elevated">
        <div class="fix-card__body">İçerik</div>
      </Card>
    </div>
  </main>
</BaseLayout>

fix-section / fix-container → bölüm genişliği ve dikey boşluk (Fix layout).
fix-type-h1 → sayfa başlığı; text-3xl gibi utility başlık için kullanılmaz.
flex, gap-8 → Tailwind (sayfa düzeni).
Buton/kart görünümü → Fix UI; stiller sayfada tanımlanmaz.

Bileşen Görünümünü Değiştirmek

Örneğin primary buton rengi:

src/styles/tokens/_colors.css → --primary
Gerekirse src/styles/components/_fix-button.css → .fix-btn--primary

Sayfa dosyasına dokunmana gerek yok.

Ayrıntılı palet ve açık/koyu tablolar: Renk Ve Tema.

Tema Rengini Tailwind’de Kullanmak

core.css içindeki @theme eşlemesi sayesinde (ör. --color-primary: var(--primary)) bazı utility’ler token ile uyumludur. Yine de kart/buton şekli için fix-* tercih edilir.

Akış Şeması

Sayfa (index.astro)
    ↓
BaseLayout.astro  →  import site.css (bir kez)
    ↓
site.css
    → core.css (tema + token import)
    → _fix-button.css, _fix-card.css, _fix-section.css, _fix-type.css, _fix-prose.css
    → tailwindcss
    → @source (components, layouts, pages taranır)

Sayfa içi:
    <Button>  →  fix-btn fix-btn--primary  (stil: _fix-button.css)
    class="flex gap-4"                     (stil: Tailwind)

Kurallar

Yap	Yapma
CSS’i yalnızca `BaseLayout` üzerinden yükle	Her sayfada `import "...css"`
Buton/kart için `<Button>` / `<Card>` veya `fix-*`	Kart/butonda uzun Tailwind utility zinciri
Token’ları `tokens/` veya `core.css`	`core.css` içine `@import "tailwindcss"`
Bileşen stilini `_fix-*.css`’te topla	`core.css` içinde `.fix-btn` tanımı
Layout/spacing için Tailwind	Fix dosyalarında `@apply`
Görünüm değişince token veya component CSS	Onlarca sayfada aynı `class="..."` kopyası

Tailwind Kurulumu (Özet)

Paketler: tailwindcss, @tailwindcss/vite
astro.config.mjs: Vite eklentisi
Kısayol: @/ → src/

tailwind.config.js zorunlu değil; @theme ve @source CSS içinde.

İleride: Docs Ayrı Bundle

Rehber bölümü gelince:

DocsLayout.astro  →  import "@/styles/docs.css"
docs.css          →  core + fix bileşenleri + tailwindcss + yalnızca docs @source

Site ve docs CSS’i ayrı kalır; gereksiz sınıf üretimi azalır.

Doğrulama

npm run build hatasız tamamlanmalı.
rg "fix-btn" src — Button.astro, _fix-button.css ve sayfa kullanımlarını göstermeli.
Buton/kart stilleri yalnızca src/styles/components/_fix-*.css ve token dosyalarında olmalı.

Özet Cümle

Token’lar ve fix-* bileşen stilleri CSS katmanında; sayfa düzeni Tailwind’de; yükleme BaseLayout’ta. Buton ve kart tek yerden yönetilir; sayfalar layout + sınıf + UI bileşeni kullanır.