Getting Started with Frutjam

Frutjam is a free CSS-only Tailwind CSS v4 UI library. Zero JavaScript, WCAG AA/AAA accessible, framework-agnostic. Build modern interfaces with semantic components that work with Django, HTMX, Laravel, React, and any stack.

Karmaşık bir kurulum yoktur; Tailwind CSS ile aynı yapılandırmayı kullanır, böylece zaten bildiklerinize sadık kalabilirsiniz. Bootstrap'e aşina iseniz, bileşen adları sezgisel ve hatırlanması kolay olacaktır.

dark:, sm:, lg:, xl:, rtl: ve ltr: gibi Tailwind CSS varyant öneklerini yardımcı program sınıflarımızdan herhangi biriyle kullanabilirsiniz.

Hız Öncelikli Çerçeveye Sahip Modern Kullanıcı Arayüzü Mühendisliği

Frutjam, açık kaynaklı bir Tailwind CSS v4 kullanıcı arayüzü kitaplığıdır; hızlı web geliştirmeyi kolaylaştırmak için tasarlanmış üst düzey bir soyutlamadır. Bunu, ham yardımcı program sınıflarını anlamsal, üretime hazır bileşenlere dönüştüren ve önemli ölçüde daha az kodla modern arayüzler oluşturmanıza olanak tanıyan bir araç seti olarak düşünün.

Hangi sorunları çözüyor?

Çoğu geliştirici, düğmeler ve girişler gibi temel öğeler için uzun sınıf zincirleri yazmak için saatler harcayarak yardımcı program yorgunluğuyla karşı karşıya kalır. Frutjam, tak ve çalıştır ekosistemi sağlayarak bu sürtünmeyi ortadan kaldırıyor.

Yedek Genel Plaka: Her proje için tekerleği yeniden icat etmek yerine, odak durumlarını, fareyle üzerine gelme geçişlerini ve duyarlı davranışları kutudan çıktığı gibi yöneten önceden oluşturulmuş bileşenler elde edersiniz
Performans Şişmesi: Ağır JavaScript çerçevelerinin aksine, Frutjam "Saf CSS" yaklaşımına öncelik vererek uygulamanızın hafif ve hızlı kalmasını sağlar
Uyum Engelleri: Erişilebilir ve SEO dostu arayüzler oluşturmak karmaşıktır. Kitaplık, sitenizin doğası gereği W3C uyumlu olmasını sağlamak için anlamsal işaretleme ve temiz HTML kullanır

Aşağıdaki durumlarda Frutjam tam size göre:

Binlerce yardımcı sınıf adını tekrar tekrar yazmaktan yoruldunuz
Erişilebilir, SEO dostu açılış sayfalarını ve SaaS uygulamalarını rekor sürede göndermeniz gerekiyor
Her ortamla tamamen uyumlu, tutarlı bir tasarım sistemi mi istiyorsunuz?
Sıfır zorunlu JavaScript bağımlılığına sahip, hafif, çerçeveden bağımsız bir çözümü tercih edin

Hızlı Gelişim için Temel Özellikler

Araç seti, kopyala, yapıştır ve oluştur felsefesini takip ederek profesyonel düzeyde ön uç mühendisliği için gereken her şeyi sunar

Kapsamlı Bileşen Kitaplığı: Gezinme Çubukları, Modallar, Akordeonlar ve iyileştirilmiş Veri Tabloları gibi temel öğeleri içerir
Önceden Birleştirilmiş Bloklar: Fiyatlandırma bölümleri, Başlıklar ve Kahraman alanları için düzen bloklarıyla zamandan tasarruf edin
Berry Tema Sistemi: Snowberry (açık) ve Darkberry (koyu) gibi yerleşik temalar arasında geçiş yapın veya OKLCH CSS değişkenlerini kullanarak kendinizinkini oluşturun
Erişilebilirlik Öncelikli Tasarım: Her bileşen, ARIA rolleri ve klavyeyle gezinmeye yönelik en iyi uygulamaları takip eder. Tüm renk çiftleri, otomatik olarak hesaplanan tahminler değil, WCAG AA kontrastını geçtiği doğrulanan elle ayarlanmış OKLCH değerleridir.
Framework Agnostik: React, Next.js, Vue, Django, HTMX, Laravel veya basit statik HTML kullanıyor olsanız da sorunsuz bir şekilde çalışır

Teknik Verimlilik

Anlamsal sınıf adlarını kullanarak, standart yardımcı program öncelikli iş akışlarına kıyasla HTML boyutunuzu önemli ölçüde azaltabilirsiniz. Bu, ekiplerin uzun vadede yönetmesi daha kolay olan, daha temiz, daha sürdürülebilir kod tabanları ile sonuçlanır. Kitaplık kesinlikle Tailwind CSS üzerine inşa edilmiştir ve bileşen tabanlı bir sistemin hızını kazanırken yardımcı motorun tüm özelleştirme gücünü korumanızı sağlar.

Başlamaya hazır mısınız? Kuruluma başlayın →