CSS & Arayüz Kitleri — Kullanışlı Siteler

Animista

2026-09-18T00:00:00Z

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.

https://animista.net

Autoprefixer

2026-09-18T00:00:00Z

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

https://autoprefixer.github.io/

Awesome Ant Design

2026-09-18T00:00:00Z

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.

https://github.com/websemantics/awesome-ant-design

Awesome CSS

2026-09-18T00:00:00Z

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ı.

https://github.com/awesome-css-group/awesome-css

Awesome CSS Learning

2026-09-18T00:00:00Z

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.

https://github.com/micromata/awesome-css-learning

Awesome PostCSS

2026-09-18T00:00:00Z

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.

https://github.com/jdrgomes/awesome-postcss

Awesome Tailwind CSS

2026-09-18T00:00:00Z

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ı.

https://github.com/aniftyco/awesome-tailwindcss

BuildBootstrap

2026-09-18T00:00:00Z

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.

https://buildbootstrap.com/

Bulma

2026-09-18T00:00:00Z

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.

https://bulma.io/

Buttons Generator

2026-09-18T00:00:00Z

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.

https://markodenic.com/tools/buttons-generator/

Cruip

2026-09-18T00:00:00Z

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.

https://cruip.com/

CSS Battle

2026-09-18T00:00:00Z

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

https://cssbattle.dev/

CSS Formatter

2026-09-18T00:00:00Z

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.

https://www.cleancss.com/css-beautify/

CSS Layout

2026-09-18T00:00:00Z

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.

https://csslayout.io/

CSS Media Query Generator

2026-09-18T00:00:00Z

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.

https://simplecss.eu

CSS Minifier

2026-09-18T00:00:00Z

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.

https://cssminifier.com/

CSS Reference

2026-09-18T00:00:00Z

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

https://cssreference.io/

cubic-bezier.com

2026-09-18T00:00:00Z

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.

https://cubic-bezier.com

Easings.net

2026-09-18T00:00:00Z

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.

https://easings.net

Fancy Border-Radius

2026-09-18T00:00:00Z

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.

https://9elements.github.io/fancy-border-radius/

FreeFrontEnd

2026-09-18T00:00:00Z

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ı.

https://freefrontend.com/

Layoutit Grid

2026-09-18T00:00:00Z

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ı.

https://grid.layoutit.com/

Material UI

2026-09-18T00:00:00Z

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.

https://mui.com/

NES.css

2026-09-18T00:00:00Z

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.

https://nostalgic-css.github.io/NES.css/

Neumorphism.io

2026-09-18T00:00:00Z

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.

https://neumorphism.io/

Normalize.css

2026-09-18T00:00:00Z

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.

https://necolas.github.io/normalize.css/

Pure.css

2026-09-18T00:00:00Z

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ı.

https://purecss.io/

uiGradients

2026-09-18T00:00:00Z

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

https://uigradients.com/

W3C CSS Validator

2026-09-18T00:00:00Z

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.

https://jigsaw.w3.org/css-validator/

CSS-Tricks Snippets

2026-08-21T20:53:20Z

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.

https://css-tricks.com/snippets/

Easing Wizard

2026-08-21T20:53:20Z

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.

https://easingwizard.com/

Uiverse

2026-08-21T20:53:20Z

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.

https://uiverse.io/

CSS-Tricks

2026-08-19T23:34:04Z

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.

https://css-tricks.com/

Flexbox Froggy

2026-08-19T23:34:03Z

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.

https://flexboxfroggy.com/

Grid Garden

2026-08-19T23:34:00Z

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.

https://cssgridgarden.com/

Foundation for Sites

2026-08-17T20:53:20Z

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.

https://get.foundation/sites.html

Bootstrap

2026-04-20T13:01:01Z

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ı.

https://getbootstrap.com/

Tailwind CSS

2026-04-20T13:01:00Z

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.

https://tailwindcss.com/

Rare UI

2026-04-17T19:03:38Z

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.

https://www.rareui.com/

Beautiful UI

2026-04-17T19:01:52Z

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.

https://www.beautifului.dev/