Açık Kaynak · MIT Lisanslı · Sonsuza Kadar Ücretsiz
Hızlı Geliştirme için Erişilebilir, Yalnızca CSS'ye Özel Tailwind CSS Bileşen Kitaplığı
Frutjam erişilebilirliğe, standartlara ve Tailwind CSS ile kusursuz entegrasyona önem veren geliştiriciler için oluşturulmuş, son derece hızlı, açık kaynaklı bir kullanıcı arayüzü kitaplığıdır.
W3C uyumlu, SEO dostu ve kullanımı kolaydır.
Son derece özelleştirilebilir
Tailwind CSS yardımcı program sınıfları tarafından desteklenmektedir
Frutjam size kutudan çıktığı gibi temiz bileşen sınıfları sunarken, her Tailwind yardımcı programını özelleştirme için kullanılabilir durumda bırakır. Frutjam bileşenlerinin üzerindeki yardımcı program sınıflarıyla aralığı, renkleri, düzeni ve etkileşimleri kolayca değiştirin.
Özelleştirilebilir bileşenler
Her Frutjam bileşeni Tailwind yardımcı programlarını kabul edecek şekilde tasarlanmıştır, böylece özel CSS yazmadan stillerde ince ayar yapabilirsiniz.
Yardımcı program öncelikli kontrol
Bileşenleri dakikalar içinde uyarlamak için text-lg, px-6 ve bg-base-200 gibi Tailwind sınıflarını kullanın.
Saniyeler içinde başlayın
İki ithalat ve inşa etmeye hazırsınız. Derleme aracı yok, yapılandırma yok, çalışma zamanı yok.
1. Adım
Npm aracılığıyla yükle
Frutjam'ı tek komutla projenize ekleyin.
npm install frutjam |
2. Adım
CSS'nize içe aktarın
Stil sayfanıza hem Tailwind'i hem de Frutjam'ı ekleyin.
1 2 | @import "tailwindcss"; @import "frutjam"; |
3. Adım
Temiz bileşenler kullanın
Uzun fayda zincirleri yerine anlamsal sınıflar yazın.
1 2 3 | <button class="btn btn-primary"> Get Started </button> |
Uygulama halinde görün
Gerçek bileşenler, gerçek kod; kopyalayın ve gönderin.
Düğmeler
1 2 3 4 5 6 | <div class="flex flex-wrap gap-2"> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-outline">Outline</button> <button type="button" class="btn btn-soft btn-success">Success</button> <button type="button" class="btn btn-soft btn-error">Danger</button> </div> |
Rozetler ve Etiketler
1 2 3 4 5 6 7 | <div class="flex flex-wrap gap-2"> <span class="badge badge-primary">Primary</span> <span class="badge badge-success">Active</span> <span class="badge badge-warning">Pending</span> <span class="badge badge-error">Error</span> <span class="badge">Default</span> </div> |
Düğme Boyutları
1 2 3 4 5 6 | <div class="flex flex-wrap items-center gap-2"> <button type="button" class="btn btn-primary btn-xs">XSmall</button> <button type="button" class="btn btn-primary btn-sm">Small</button> <button type="button" class="btn btn-primary">Base</button> <button type="button" class="btn btn-primary btn-lg">Large</button> </div> |
Kart
Card Title
A clean, accessible card component ready to use in any project.
1 2 3 4 5 6 7 8 9 10 | <div class="card card-sm card-outline"> <div class="card-content"> <h4 class="card-title">Card Title</h4> <p>A clean, accessible card component ready to use in any project.</p> <div class="flex gap-2 mt-3"> <button type="button" class="btn btn-primary btn-sm">Action</button> <button type="button" class="btn btn-outline btn-sm">Cancel</button> </div> </div> </div> |
Frutjam UI kütüphanesini neden kullanmalıyım?
Frutjam, erişilebilirliğe ve daha hızlı geliştirmeye odaklanan, Tailwind CSS v4 ile oluşturulmuş ücretsiz, açık kaynaklı, yalnızca CSS'ye yönelik bir kullanıcı arayüzü kitaplığıdır. Karmaşık JavaScript yapılandırması veya büyük JS paketleri gerektirmez; bu da onu, sıfır JavaScript ek yükü ile WCAG uyumlu bileşenlere ihtiyaç duyan ekipler için hafif bir DaisyUI alternatifi haline getirir.
Başlamak için stil sayfanıza @import "frutjam"'ı eklemeniz yeterli. Frutjam, HTML'nizde uzun Tailwind CSS sınıf listelerine olan ihtiyacı ortadan kaldırır; bileşenleri kolayca oluşturmak için temiz, anlamsal sınıfları kullanın. Basit CSS değişkenlerini kullanarak temaları kolayca özelleştirin ve tüm bileşenler anında güncellensin.
W3C Standartları
Modern web uygulamaları için temiz, geçerli HTML.
Önce Erişilebilirlik
Her bileşen a11y düşünülerek üretilmiştir.
Renk Kontrastı
Bileşenler kutudan çıktığı gibi WCAG AA/AAA renk kontrastı kontrollerini geçer.
SEO Dostu
Daha iyi arama motoru görünürlüğü için anlamsal işaretleme.
Geliştirici Dostu
Basit, sezgisel API ve kolay entegrasyon.
Önce CSS ve HTML
JavaScript'e bağlı kalmanıza gerek yok; stil ve yapı önce gelir.
Arka Rüzgar CSS Desteği
Mevcut Tailwind iş akışınızla mükemmel şekilde çalışır.
RTL Desteği
Sağdan sola yazılan dillerle tam uyumludur.
duyarlı
Her cihazda, her ekran boyutunda harika görünür.
Aktif Olarak Bakım Yapılıyor
Yeni bileşenler, güncellemeler ve topluluk desteği.
Profesyonel Temalar
Açık ve koyu modlar arasında geçiş yapın veya kendinizinkini oluşturun.
Önceden Oluşturulmuş Düzenler ve Bileşenler
Her türlü proje için kullanıma hazır yapı taşları.
Açık Kaynak
MIT lisanslı ve topluluk odaklı.
Eklenti Desteği
Frutjam'ı Markdown Metin Düzenleyici gibi kullanışlı eklentilerle genişletin.
DOM Boyutunu Azaltın
Çok sayıda iç içe geçmiş veya gereksiz öğe, oluşturmanın yavaşlamasına neden olabilir. Bileşen yapınızı basitleştirin ve performansı ve sürdürülebilirliği artırın.
Google PageSpeed Insights'ta 100/100
Frutjam UI kitaplığını kullanarak Performans, Erişilebilirlik, En İyi Uygulamalar ve SEO alanlarında mükemmel 100'e ulaşın. Bu web sitesi tamamen Frutjam kullanıcı arayüzü ile oluşturulmuştur ve Google PageSpeed Insights'ta genel olarak 100/100 puan almıştır.
Web siteleri daha hızlı çalışır, daha iyi bir kullanıcı deneyimi sağlar ve daha yüksek arama sıralamalarına sahiptir. Günümüzün yapay zeka destekli web ortamında daha hızlı sitelere öncelik veriliyor; yapay zeka araçları web sitelerini sıklıkla gerçek zamanlı olarak tarıyor ve bilgi işlem kaynaklarını boşa harcamayan hızlı, verimli sayfaları tercih ediyor. Geleceğe hazır bir kullanıcı arayüzü kitaplığıyla daha akıllı bir şekilde oluşturun.
Saf CSS, JavaScript gerekmez. Çerçeveden bağımsız ve her yerde tam uyumlu.
Frutjam UI kitaplığı, saf CSS ile yazıldığı için büyük JavaScript paketleri gerektirmez. Bu, projenizi hafif hale getirir ve daha hızlı yükleme süreleri ve daha sorunsuz performans için optimize edilir. React, Vue, Angular, Next.js, Django, HTMX, Laravel veya yalnızca düz HTML kullanıyor olsanız da, herhangi bir web çerçevesi veya arka uçla mükemmel şekilde çalışır.
Modern Çerçeveler İçin
Çerçeveniz hızlı. Bu şekilde kal.
Next.js, Svelte ve Vue, olağanüstü performans ve SEO (sunucu oluşturma, minimum JS, anında nemlendirme) için tasarlandı. Ancak modal kadar basit bir şey için şişirilmiş JavaScript'lerle dolu ağır bir bileşen kitaplığı eklediğinizde, bu çerçevelerin vaat ettiği her şeyi takas etmiş olursunuz.
Frutjam, tasarım açısından CSS öncelikli ve yerel önceliklidir. JavaScript paketi yok. Çalışma zamanı ek yükü yok. Düzen değişikliği yok. Çerçevenizin performans tavanı, yalnızca teorik değil, gerçek performansınız haline gelir.
Sıfır Düzen Kayması
Saf CSS bileşenleri sayfayla birlikte anında oluşturulur; kullanıcı arayüzünü boyamak için JavaScript gerekmez. Kümülatif Düzen Kaydırma (CLS) değeriniz 0'da kalarak mükemmel PageSpeed puanını korur.
JS Ek Yükü Yok
Çerçevenizin paket bölme işleminden kaydettiği her KB JavaScript'i, Frutjam asla geri eklemez. Düğmeler, kartlar, modeller, rozetler — hepsi CSS'de. Etkileşime Geçiş Süreniz hızlı kalır.
Sağlayan SEO
Anlamsal HTML, W3C geçerli işaretleme ve WCAG renk kontrastı kullanıma hazır. Arama motorları temiz yapıyı okur. Modern bir çerçeveyi Frutjam ile eşleştirdiğinizde sayfalarınız sıralanır ve performans gösterir.
Artık çirkin HTML yok, daha az sınıf adı, bakımı kolay ve daha hızlı geliştirme.
Artık Dağınık Sınıflar Yok: Her Şeyi Tek Sınıf Yapıyor. Her öğe, her sayfa ve her proje için her seferinde bir yığın sınıf yazmak yerine, karmaşık sınıfların baş ağrısı olmadan kolay bakım ve ölçeklendirme ve daha hızlı geliştirme için Frutjam bileşen sınıfı adlarını kullanın.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | // Styling a simple button in Tailwind css clutter of utility class <button class="bg-gray-100 text-gray-900 text-sm px-3.5 border font-semibold duration-200 py-2 transition-all hover:border-gray-300 hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 inline-flex gap-2 rounded-sm active:border-gray-300 active:bg-gray-200 active:shadow-none text-center align-middle cursor-pointer border-gray-200 dark:border-gray-700 dark:bg-neutral-700 dark:text-gray-300 dark:hover:border-gray-950 dark:hover:bg-gray-950 dark:focus-visible:outline-gray-200 dark:active:border-gray-950 dark:active:bg-gray-900"> Button </button> // Styling a simple button in frutjam component class <button class="btn"> Button </button> |
<button type="button" class="btn">Button</button> |
Temalar ve Özelleştirme
Frutjam, temalama için basit CSS değişkenlerini kullanıyor. Bir değişkeni değiştirdiğinizde her bileşen anında güncellenir; yeniden oluşturma yok, sınıf değişikliği yok.
1 2 3 4 5 6 7 8 9 10 11 12 13 | /* Override the default theme in your CSS */ :root { --color-primary: oklch(55% 0.2 250); --color-primary-content: #fff; --radius-base: 0.5rem; --font-base: "Inter", sans-serif; } /* Dark mode overrides */ [data-theme="dark"] { --color-base-100: oklch(15% 0.01 250); --color-base-content: oklch(90% 0.01 250); } |
Neleri özelleştirebilirsiniz?
Renkler
Birincil, ikincil, vurgu, hata, başarı, uyarı ve tüm temel renk tonları; hepsi tek bir CSS değişkeni aracılığıyla.
Sınır Yarıçapı
--radius-base tüm bileşenleri aynı anda ölçeklendirir; bir değişkeni değiştirin, her öğe güncellenir.
Tipografi
Yazı tipi ailesi, boyut ölçeği ve satır yüksekliği; yazı sisteminizi bir kez ayarladığınızda tüm bileşenler onu devralır.
Aralık ve Boyutlandırma
Bileşen dolgusu ve boyut çeşitleri — yerleşik boyut değiştiricileri kullanın veya aralık belirteçlerini genel olarak geçersiz kılın.
Bileşen Kitaplığı
Her kullanım durumu için önceden oluşturulmuş, erişilebilir bileşenlerden oluşan büyüyen bir koleksiyon.
Düğmeler ve Formlar
Düğme çeşitleri, girişler, onay kutuları, seçimler ve tam form düzenleri.
Modallar ve Diyaloglar
Erişilebilir kalıcı iletişim kutuları, çekmeceler ve onay istemleri.
Navigasyon
Gezinme çubukları, kenar çubukları, içerik kırıntıları ve sekmede gezinme.
Kartlar ve Düzenler
Kart çeşitleri, ızgara sistemleri ve sayfa düzeni iskeletleri.
Uyarılar ve Tostlar
Durum uyarıları, bildirim bannerları ve satır içi geri bildirim mesajları.
Rozetler ve Etiketler
Durum rozetleri, kategori etiketleri ve etiket bileşenleri.
Listeler ve Tablolar
Veri tabloları, sıralı/sırasız listeler ve tanım listeleri.
Eklentiler
Markdown düzenleyici, sözdizimi vurgulayıcı ve daha kullanışlı uzantılar.
Topluluk Eklentisi
Arka uç geliştiricileri tarafından sevilir. Yerel ilk Markdown editörü.
Çoğu editör standart web iş akışını bozar. MarkdownEditor bunu benimsiyor; doğrudan bir <textarea>'ın üzerinde yer alıyor, böylece arka ucunuz hiçbir şeyin değiştiğini asla bilemez. Yalnızca form method="POST", standart DOM erişimi ve kullanıma hazır tüm sunucu çerçeveleriyle çalışır.
Düz bir <textarea> satırını bir JS satırıyla değiştirin; kullanıcılarınız 10 kat daha iyi bir deneyim yaşarken Django, Laravel veya PHP denetleyiciniz tam olarak olduğu gibi kalır.
-
Veri bağlamaya gerek yok — kutudan çıktığı haliyle
form method="POST"ile çalışır -
Standart erişim — herhangi bir giriş gibi
element.valueile okuma ve yazma - Arka uçtan bağımsız — PHP, Django, Node.js, Laravel, Rails — hepsi yalnızca düz bir dize okur
- ~116 KB — hibrit WYSIWYG + düz mod, RTL, resim yükleme, canlı önizleme, sıfır CSS çakışması
Canlı demo — deneyin:
Anında değiştirme — bir sınıf, bir satır JS. Arka uç değişmedi.
Yerel Form Entegrasyonu
Standart bir <textarea>'ı geliştirir. Normal bir <form> ile gönderin ve içeriğe request.POST['name'] aracılığıyla erişin. preventDefault() yok, FormData yapısı yok.
Gelişmiş Resim Yükleme
Sunucu yüklemelerini API aracılığıyla yapılandırın. Görüntüler doğrudan CDN'nize gider; veritabanınızda Base64 şişmesi olmaz, SEO cezası olmaz, bellek açısından ağır yükler olmaz.
Yüksek Performans
Geri dönen önizleme güncellemeleri, önbelleğe alınmış stil hesaplamaları ve çakışmayan klavye kullanımı. Binlerce satırı giriş gecikmesi olmadan yönetir ve tüm düzenleyici stilleri tam kapsamlı olduğundan herhangi bir CSS çerçevesiyle birlikte güvenli bir şekilde çalışır.
Frutjam nasıl karşılaştırılır?
Frutjam'ın ücretsiz ve erişilebilir bir alternatif olarak sade Tailwind CSS, Bootstrap ve DaisyUI'ye karşı nasıl bir performans sergilediğini görün.
| Özellik | Frutjam | DaisyUI | Düz Arka Rüzgar | Önyükleme |
|---|---|---|---|---|
| Yalnızca CSS (JavaScript gerekmez) | ✓ | ✓ | ✓ | Kısmi |
| Anlamsal bileşen sınıfları | ✓ | ✓ | ✗ | ✓ |
| Her bileşende WCAG AA kontrastı garanti edilir | ✓ | Manuel | Manuel | Kısmi |
| Tailwind yardımcı programlarıyla birlikte çalışır | ✓ | ✓ | ✓ | ✗ |
| CSS değişkenleri teması | ✓ | ✓ | ✓ | Sınırlı |
| 100/100 Sayfa Hızına ulaşılabilir | ✓ | ✓ | Değişir | Değişir |
| Sağdan sola destek | ✓ | Kısmi | Kısmi | ✓ |
| Çerçeveden bağımsız (Django, HTMX, Laravel) | ✓ | ✓ | ✓ | ✓ |
| Düz CSS değişkenleri aracılığıyla tema, yapılandırma dosyası yok | ✓ | Kısmi | Manuel | ✗ |
| AI düzenleyici entegrasyonu (MCP / bağlam) | ✓ Ücretsiz | Paralı | ✗ | ✗ |
AI Düzenleyici Entegrasyonu
Claude Kodu, İmleç veya Yardımcı Pilot mu kullanıyorsunuz?
Cherry MCP, Frutjam'ı doğrudan AI editörünüze bağlar. Tarayıcıdan kopyalayıp yapıştırmaya gerek kalmadan doğru bileşen kodunu, doğru sınıf adlarını ve güncel belgeleri edinin.
Cherry MCP'yi deneyinSık sorulan sorular
Frutjam hakkında bilmeniz gereken her şey.
Frutjam'ın kullanımı ücretsiz mi?
Evet — Frutjam MIT lisanslıdır ve tamamen ücretsizdir. Kişisel projelerde, müşteri çalışmalarında ve ticari ürünlerde hiçbir kısıtlama veya atıf gerekmeden kullanın.
Frutjam ticari projelere uygun mu?
Evet. Frutjam, hem kişisel hem de ticari ürünlerde herhangi bir telif ücreti veya kısıtlama olmaksızın ücretsiz kullanıma izin veren MIT lisansı kapsamında açık kaynaktır.
Frutjam Tailwind CSS'nin yerini mi alıyor?
Hayır — Frutjam, Tailwind'in üzerine kuruludur. Bunu anlamsal bileşen sınıfları (.btn, .card, .badge) ekleyen ve aynı zamanda tüm Tailwind yardımcı program sınıflarını yanında bulunduran bir katman olarak düşünün.
Frutjam'ı kullanmak için JavaScript'e ihtiyacım var mı?
JavaScript gerekmez. Frutjam saf CSS'dir; düğmeler, kartlar, rozetler ve formlar gibi bileşenler tamamen JS çalışma zamanı olmadan çalışır. Modal'lar veya açılır listeler gibi etkileşimli modeller için Alpine.js veya HTMX gibi hafif kitaplıklarla iyi bir şekilde eşleşir.
Frutjam'ı React, Vue veya Angular ile kullanabilir miyim?
Evet - Frutjam tamamen çerçeveden bağımsızdır. React, Vue, Angular, Svelte, Next.js, Nuxt, Laravel, Django ve düz HTML dahil olmak üzere herhangi bir şablonlama sistemi veya JS çerçevesiyle çalışır. Sadece CSS'yi içe aktarın ve sınıfları kullanın.
Frutjam'a ekran okuyucular erişebilir mi?
Evet. Frutjam, uygun roller, klavye gezinme desteği ve kutudan çıktığı gibi WCAG AA/AAA renk kontrastıyla WAI-ARIA yönergelerini takip ediyor; bu da onu ekstra yapılandırmaya gerek kalmadan tüm kullanıcılar için erişilebilir hale getiriyor.
Frutjam kullanıldığında Sayfa Hızı artıyor mu?
Evet. Frutjam'ın CSS öncelikli yaklaşımı, JavaScript'in oluşturulmasını tamamen engeller. W3C için geçerli işaretleme, uygun renk kontrastı ve yerel HTML semantiği ile birleştirildiğinde, daha iyi Temel Web Verileri'ne ve 100/100 Sayfa Hızı puanına doğrudan katkıda bulunur.
Renkleri, yazı tiplerini ve yarıçapı nasıl özelleştiririm?
Stil sayfanızdaki CSS değişkenlerini geçersiz kılın; --color-primary, --font-base, --radius-base ve daha fazlasını ayarlayın. Her bileşen, HTML'nizde yeniden oluşturma veya herhangi bir sınıf değişikliği olmadan değişikliği anında alır.
Blogdan
Frutjam'ı oluşturma ve kullanıcı arayüzüne CSS öncelikli yaklaşım üzerine düşünceler.
Açık Kaynak ve Sonsuza Kadar Ücretsiz
Topluluğa Katılın
Frutjam açık kaynaklıdır ve topluluk odaklıdır. Topluluktaki her bileşen, düzeltme ve fikir onu herkes için daha iyi hale getiriyor.
Bir hata mı buldunuz? Bir özellik isteğiniz mi var? Bir bileşene katkıda bulunmak veya dokümanları geliştirmek mi istiyorsunuz? Seni aramızda görmek isteriz.