CSS & Arayüz Kitleri

Hazır CSS animasyonlarını oynatıp ayarlayarak kodunu kopyalatan kütüphane. animate.css gibi bütün bir kütüphaneyi eklemekten farkı yalnız ihtiyaç duyduğun animasyonun kodunu alman.

CSS’e tarayıcı ön eklerini (‑webkit‑, ‑moz‑) otomatik ekleyen araç. Elle eklemekten farkı hangi ekin gerektiğini güncel tarayıcı verisinden bilmesi.

Kurumsal arayüz tasarım dili Ant Design için kaynak listesi. Material UI’dan farkı veri yoğun kurumsal arayüzlere yönelik bileşenleri; liste topluluk bileşenlerini ve şablonlarını topluyor.

CSS dili, araçları ve kaynaklarını konuya göre toplayan liste. Öğrenme odaklı CSS listelerinden farkı çatıları, araçları ve BEM gibi metodolojileri de kapsaması.

CSS dilini ve modüllerini (Flexbox, Grid, seçiciler) öğrenmeye odaklı kaynak listesi. Genel CSS listelerinden farkı çatı ve araç değil, dilin kendisini öğreten kaynakları seçmesi.

CSS’i eklentilerle dönüştüren PostCSS aracı için kaynak listesi. Sass gibi ön işlemcilerden farkı her dönüşümün ayrı bir eklenti olması; liste bu eklentileri işlevine göre topluyor.

Tailwind CSS için eklenti, bileşen, şablon ve araç listesi. Tailwind’in resmî belgelerinden farkı topluluğun yaptığı hazır bileşen kitlerini ve yardımcı araçları toplaması.

Tailwind CSS ve React projelerine doğrudan kopyalanabilen modern arayüz bileşenleri ve mikro etkileşim koleksiyonu; ağır bileşen kütüphaneleri kurmak yerine kaynak kodu projeye dahil etme yaklaşımını izler.

Hazır bileşenler ve ızgara sistemi; tasarım kararı vermeden çalışan bir arayüz çıkarıyorsun. Tailwind’den farkı yapı taşı değil bitmiş bileşen vermesi; bedeli, Bootstrap kullandığının uzaktan belli olması.

Bootstrap düzenini sürükle-bırak ile görsel olarak kurup kodunu üreten araç. Kodu elle yazmaktan farkı ızgarayı ekranda görerek kurabilmen; karşılığında sonraki özelleştirme yine elle yapılıyor.

Flexbox tabanlı, yalnız CSS’ten oluşan (JavaScript yok) modern framework. Bootstrap’tan farkı JS bileşeni getirmemesi — sınıfları alıp kendi etkileşimini yazıyorsun.

Projelerde kullanılabilecek hazır CSS buton stilleri ve kodları. Bileşen kütüphanelerinden farkı bağımlılık getirmemesi: tıklayıp düz CSS’i kopyalıyorsun.

Modern açılış sayfası ve arayüz şablonları (Tailwind ağırlıklı). Sıfırdan kurmaktan farkı hazır, tutarlı bir sayfa vermesi; bir kısmı ücretsiz, kapsamlı şablonlar ücretli.

Verilen hedef görseli en az kodla, CSS ile yeniden üretmeye çalıştığın oyun. Öğreticilerden farkı beceriyi yarışma ve puanla keskinleştirmesi.

Küçültülmüş (minified) CSS’i okunur biçime getiren ve düzenleyen araç. Küçültücülerin tersine sıkıştırılmış dosyayı açıyor: başkasının stil dosyasını incelemen gerektiğinde işe yarıyor.

Sık kullanılan düzen ve bileşenlerin (kart, ortalama, sabit başlık) hazır CSS tarifleri. Aramaktan farkı her deseni kopyalanabilir, bağımsız bir örnek olarak vermesi.

Belirli cihaz boyutları için CSS medya sorgusu üreten basit araç. Elle yazmaktan farkı yaygın cihaz kırılım noktalarını hazır listeden seçebilmen.

CSS kodunu boşluk ve yorumları atarak küçülten (minify) basit bir araç; API’si de var. cssnano ya da esbuild gibi derleme hattı araçlarından farkı kurulum istemeden tek seferlik iş görmesi.

Her CSS özelliğini görsel örnekle gösteren başvuru. Spesifikasyondan farkı “bu özellik ne yapar”ı metin yerine canlı bir demoyla anlatması.

Yirmi yıllık CSS tekniği arşivi; Flexbox ve Grid rehberleri yaygın başvuru kaynağı hâline geldi. Belirli bir düzen problemi ararken spesifikasyondan hızlı sonuç veriyor.

CSS, HTML, JavaScript ve .htaccess için yıllar içinde biriktirilmiş parçacık arşivi. Rastgele blog yazılarından farkı her parçacığın kendi sayfası ve tartışması olması — yorumlarda genelde daha iyi bir sürüm bulunuyor.

Lea Verou’nun CSS yumuşatma eğrilerini elle kurup hazır ayarlarla canlı karşılaştıran aracı. easings.net’ten farkı hazır eğri seçmek yerine tutamaçları sürükleyerek kendi eğrini kurman.

CSS yumuşatma (easing) eğrilerini görsel olarak kuran araç; cubic-bezier’in yanında linear() ile yay ve sıçrama eğrilerini de üretiyor. cubic-bezier.com’dan farkı bu modern linear() desteği — CSS’te yay animasyonu artık kütüphane gerektirmiyor.

Yaygın yumuşatma (easing) eğrilerini görselleştiriyor; her biri için cubic-bezier değerini kopyalatıyor. cubic-bezier.com’dan farkı eğri kurmak yerine adı konmuş hazır eğriler arasından seçmen.

Organik şekiller için CSS border-radius üreten görsel araç. Elle yazmaktan farkı, sekiz değerli (eğik çizgili) sözdizimini tutamaçları sürükleyerek ayarlaman.

Kurbağaları hizalayarak Flexbox öğreten oyun; Grid Garden’ın kardeşi. Belgeleri okumaktan farkı her özelliği anında görsel sonuçla denemen: justify-content ile align-items karışıklığını yirmi dakikada bitiriyor.

Bootstrap’ın uzun süreli rakibi olan duyarlı arayüz çatısı; XY ızgarası, erişilebilirlik odaklı bileşenler ve e-posta şablonları için ayrı bir sürümü var. Bootstrap’tan farkı daha az görsel kanaat dayatması — bileşenler biçimlendirilmemiş gelir, tasarımı sen kurarsın. Uyarı: son sürüm Eylül 2024, depoya son itme Ocak 2025; proje arşivlenmedi ama o tarihten beri durgun ve tanıtım sitesi hâlâ 2017 tarihli bir web semineri duyuruyor.

HTML, CSS ve JavaScript kod örnekleri ve öğreticilerini toplayan geniş dizin. CodePen’de aramaktan farkı örnekleri türüne göre — buton, menü, kart, animasyon — sınıflandırması.

Havuç sulayarak CSS Grid öğreten 28 bölümlük oyun. grid-column ve grid-area gibi özellikler yazarak öğrenildiğinde akılda kalıyor.

CSS Grid düzenini sürükle-bırak çizip kodunu üreten araç. Elle grid yazmaktan farkı satır/sütun yapısını görsel kurup çıktı alması.

React için Google Material tasarımını uygulayan bileşen kütüphanesi. Ant Design’dan farkı Material Design yönergelerine sıkı bağlılığı; tema sistemiyle bu görünümden uzaklaşmak mümkün ama emek istiyor.

8-bit NES estetiğinde retro görünümlü CSS çerçevesi. Bootstrap gibi çatılardan farkı işlev değil üslup sunması: yalnız CSS, JavaScript gerektirmiyor.

Yumuşak gölgeli “neumorphism” kutuları için CSS üreten araç. Elle gölge yazmaktan farkı iki yönlü gölgeyi görsel olarak ayarlayıp kodu vermesi.

Tarayıcılar arası varsayılan stil farklarını eşitleyen küçük CSS temeli. CSS reset’lerden farkı varsayılanları silmek yerine işe yarayanları koruyup yalnız tutarsızlıkları düzeltmesi.

Yalnızca birkaç KB olan, küçük ve modüler bir CSS framework’ü (Yahoo). Büyük framework’lerden farkı sadece ihtiyacın olan modülü alıp sayfayı hafif tutması.

Web uygulamaları için özenli animasyonlara ve sıra dışı görsel detaylara sahip hazır arayüz bileşenleri seçkisi; standart kurumsal tasarım sistemlerinin aksine görsel farklılaşmaya odaklanır.

Yardımcı sınıflarla stil yazıyorsun; derleme adımı kullanılmayan sınıfları atıyor, CSS dosyası büyümüyor. Bootstrap’tan farkı hazır bileşen değil yapı taşı vermesi: görünüm tamamen senin.

Hazır CSS gradyanlarını gösterip kodunu veren araç. Elle renk denemekten farkı güzel geçişleri seçip doğrudan kopyalayabilmen.

Topluluğun katkı verdiği açık kaynak arayüz bileşeni galerisi: buton, kart, yükleyici, anahtar. CodePen’den farkı her parçanın MIT lisanslı, kopyala-yapıştır hazır ve saf CSS/Tailwind olarak sunulması — çatı bağımlılığı yok.

CSS’i resmî W3C kurallarına göre doğrulayan araç; URL, dosya ya da doğrudan metin kabul ediyor. Stylelint gibi linter’lardan farkı üslubu değil yalnız standarda uygunluğu denetlemesi.