Instruction file imported from oekinci-sa/sacrifice_website (
.cursor/rules/responsive-design.mdc). Copyright stays with the author.
Responsive Design (Mobil - Tablet - Desktop) — KIRMIZI ÇİZGİ
⛔ KIRMIZI ÇİZGİ — ZORUNLU
Tüm sayfalar ve UI bileşenleri mobil responsive olmalıdır. Bu kural ihlal edilemez. Yeni eklenen her sayfa, form, tablo veya UI elementi mutlaka mobil (320px–639px), tablet (640px–1023px) ve desktop (1024px+) boyutlarında test edilmelidir.
- Yeni UI elementi eklerken önce mobil düşün;
flex-col md:flex-rowgibi breakpoint geçişleri kullan. - Side-by-side layout'lar mobilde stack (dikey) olmalı.
- Input, buton, tablo hücreleri mobilde dokunulabilir boyutta (min 44px touch target) olmalı.
Breakpoint'ler (Tailwind)
- sm: 640px
- md: 768px
- lg: 1024px
- xl: 1280px
- 2xl: 1536px
Uygulama Örnekleri
- Grid/Flex:
flex flex-col md:flex-row,grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 - Padding/Spacing:
p-3 md:p-4 lg:p-6,gap-2 md:gap-4 - Font:
text-sm md:text-base,text-lg md:text-xl - Gizle/Göster:
hidden md:block,block md:hidden - Genişlik:
w-full md:w-auto,max-w-full md:max-w-md
Kontrol Listesi (Yeni UI eklerken zorunlu)
- Mobil (320px–639px): İçerik okunabilir, butonlar dokunulabilir boyutta (min 44px touch target)
- Tablet (640px–1023px): Layout geçişleri düzgün
- Desktop (1024px+): Geniş ekranda boşluklar mantıklı
- Side-by-side alanlar mobilde
flex-col md:flex-rowile stack edilmeli - Grid'ler mobilde
grid-cols-1 md:grid-cols-2kullanmalı