Tasarım & UX Skill
Accessibility Compliance
Ekran okuyucu desteği, klavye navigasyonu ve mobil erişilebilirlik içeren WCAG 2.2 AA uyumlu arayüzler oluşturmak için bir uygulama araç seti.
₺369
Responsive Design
2026 tarayıcılarının gerçekten çalıştığı şekliyle uygulanan modern duyarlı tasarım: konteyner sorguları, clamp() ile akışkan tipografi, içsel CSS Grid ve gerçek bir mobil öncelikli kırılım stratejisi.
Kırılgan cihaz-piksel kırılımları ve 100vh mobil hataları yerine, içeriğine ve konteynerine uyum sağlayan, sıfır yerleşim kayması sunan, her ekranda okunabilir ve dokunulabilir kalan düzenler kurar. Tek kod tabanı, her cihaz, ayrı mobil sürüm yok.
₺369 tek seferlik
Bir kit içine ekle → Fiyatlara KDV (%20) dahildir. · Gerçek ajans işinden çıkarıldı · tek seferlik, kilit yok
- Tür Skill
- Kategori Tasarım & UX
- Teslimat E-posta · anında
- Lisans Tek seferlik
Çalışmanın içinden · kara kutu yok
Satın almadan önce işin kendisini gör.
Skill bir layout'u her ekran boyutuna uyarlarken fiilen şu döngüyü çalıştırır, kara kutu yok:
- 320px'den mobile-first başlar ve sadece min-width sorgularıyla çalışır; masaüstü için tasarlayıp küçültmek yerine sm/md/lg/xl breakpoint'lerinde kademeli zenginleştirme yapar.
- Breakpoint'leri cihaz boyutuna değil içeriğin gerçekten kırıldığı yere koyar: kart grid'i kartlar genişlik bulamadığında sarar, menü öğeler üst üste binmeye başladığında hamburger'e çöker.
- Bileşenleri container query ile kendi kendine uyarlanır yapar: aynı kart dar sidebar'da üst üste dizilir, ana kolonda yan yana açılır; viewport'tan bağımsız olarak parent genişliğine tepki verir.
- Breakpoint'te zıplayan font yerine akışkan clamp() ölçekleri kurar; tipografi ve spacing onlarca elle ayarlanmış değer yerine tek formülle 320px ile 1440px arasında pürüzsüz geçiş yapar.
- CLS'yi 0.1 altında tutmak için her şey yüklenmeden alan rezerve eder: açık görsel width/height, reklam alanına min-height, aspect-ratio placeholder ve font fallback metrikleri; layout asla zıplamaz.
- Responsive medya ve kalıpları teslim eder: art-direction'lı picture kaynaklarıyla srcset/sizes, erişilebilir hamburger navigasyonu ve mobilde yatay kaydırılan ya da karta dönüşen veri tabloları.
Tek güç kaynağı. 6 hat dışarı.
responsive-design · çekirdek
çekirdek aktif · 6 hat
- ✓ viewport hilesi değil, k…
Viewport hilesi değil, konteyner sorgularıyla bileşen düzeyinde duyarlılık kurma
- ✓ kırılım sıçramalarını cl…
Kırılım sıçramalarını clamp() ile akışkan tipografi ve boşluğa çevirme
- ✓ i̇çeriğe göre saran auto…
İçeriğe göre saran auto-fit ve minmax() ile içsel ızgaralar oluşturma
- ✓ 100vh mobil tarayıcı hat…
100vh mobil tarayıcı hatasını dinamik viewport birimleriyle (dvh) çözme
- ✓ düzenin gerçekten kırıld…
Düzenin gerçekten kırıldığı yere göre içerik öncelikli kırılımlar belirleme
- ✓ ayrılmış alan ve en-boy
Ayrılmış alan ve en-boy oranı disipliniyle yerleşim kaymasını önleme
Aldıkların sende kalır.
Zamanı ileri sar. Ne kaldığını izle.
Sonsuza dek
Sahip olmak tam olarak bu.
Kiralık yığın
yapay zekâ yazım aracı: abonelik
süresi doldu · erişim gittianaliz paketi: abonelik
süresi doldu · erişim gittitasarım platformu: abonelik
süresi doldu · erişim gitti(geriye bir şey kalmadı)
Senin ocağın
-
Ayrı bir mobil site veya uygulama yerine tek bir duyarlı kod tabanı sürdürür
lisans: kalıcı -
Yerleşim kaymasını ve yavaş mobil yüklemeleri ortadan kaldırarak performansı korur
lisans: kalıcı -
Küçük ekranlarda içeriği okunabilir, dokunma hedeflerini erişilebilir (asgari 44px) tutar
lisans: kalıcı -
Bileşeni kenar çubuğu, hero ve ana alanda yeniden kullanılsa bile doğru uyarlar
lisans: kalıcı
abonelikler biter · tapular bitmez
Kutudaki her şey.
Bir parçayı eline al. Çalışırken izle.
Tailwind karşılıklarıyla mobil öncelikli kırılım ölçeği
6 parça · tek çalışan sistem · e-postayla anında teslim
Bu herkes için dövülmedi.
- Araç kiralamayı sahip olmaya tercih ediyorsan, sana göre değil.
- Yığınını senin yerine başkası yönetsin istiyorsan, sana göre değil.
- Tahmin etmekten memnunsan, sana göre değil.
Tek bir kod tabanından her ekranda doğru görünen ve performans değerlerini koruyan uyarlanabilir arayüzler isteyen ön uç geliştiriciler ve ekipler için.
o zaman bu senin için dövüldü.Hangi AI ile çalışır
Tasarımı gereği evrensel: her yapay zekada çalışır. Açık Agent Skills + MCP biçiminde gelir (Claude’da yerleşik); ChatGPT, Gemini, Cursor ve Copilot aynı dosyaları kendine uyarlar.
- Claude Yerleşik biçim
- ChatGPT Açık standartla uyarlanır
- Gemini Açık standartla uyarlanır
- Cursor Açık standartla uyarlanır
- Copilot Açık standartla uyarlanır
Aklındakini yakala.
hava temizlendi. seninle ocak arasında hiçbir şey kalmadı.
bir kıvılcım yakala: ocak cevaplar
-
Kod tabanım Tailwind; bire bir uyar mı?
Evet, mobil öncelikli kırılım ölçeği Tailwind karşılıklarıyla geliyor ve konteyner sorgu kalıpları React/Tailwind örnekleri içeriyor. Aynı kalıplar saf CSS olarak da verildiğinden Tailwind dışı projelerde olduğu gibi kullanılır.
-
Konteyner sorguları media query'nin vermediği neyi veriyor?
Bileşen viewport'a değil kendi konteynerine göre tepki verir; aynı kart kenar çubuğunda, hero'da ve ana sütunda üç ayrı kırılım dalı olmadan doğru görünür. Üstüne cqi birimleri ve düzenin gerçekten kırıldığı yere konan içerik öncelikli kırılımlar gelince cihaz genişliği kovalamak biter.
-
Mevcut sitemi otomatik olarak duyarlı hale getirir mi?
Hayır. Uygulayacağınız kalıplar ve bir strateji verir: clamp() yardımcısı, içsel ızgara tarifleri, dvh düzeltmeleri ve yerleşim kayması kuralları. Mevcut CSS'inizi tarayıp yeniden yazan bir şey yok.
-
Nasıl teslim edilir?
Satın alımdan hemen sonra e-posta ile iletilir, kuruluma hazır, anında indirilir; bekleme yok.
-
Tek seferlik mi, abonelik mi?
Tek seferlik alımdır; abonelik veya gizli ücret yoktur. Fiyata KDV (%20) dahildir.
-
İade alabilir miyim?
Dijital ürün olduğu için indirildikten sonra iade yapılmaz. Bu yüzden ne içerdiğini ve kime uygun olduğunu burada açıkça paylaşıyoruz.