Dokümanlar
Frutjam belgeleri — kurulum, yapılandırma, tema, renkler ve tipografi. Yalnızca CSS'ye özgü Tailwind CSS v4, sıfır JavaScript, WCAG AA'ya erişilebilir. Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
Bu belgeler, yeni bir Tailwind CSS v4 projesinden tam temalı, erişilebilir bir kullanıcı arayüzüne kadar ihtiyacınız olan her şeyi kapsar. İki satırlık CSS olan Kurulum ile başlayın, ardından CSS değişkenlerini ve tek bir data-theme özelliğini kullanarak tema sisteminin nasıl çalıştığını keşfedin. Renk sistemi, manuel renk kontrolü gerektirmeden WCAG AA kontrast oranlarını otomatik olarak karşılayan anlamsal OKLCH belirteçlerini kullanır. Yapılandırma seçenekleri, belirteçlerin kapsamını belirlemenize, çakışmaları önlemek için bir önek eklemenize veya yalnızca CSS çıktınızı yalın tutmak için ihtiyacınız olan bileşenleri seçmenize olanak tanır.
Renkler
Frutjam'ın renk sistemi, WCAG AA kontrast oranlarını kutudan çıkar çıkmaz karşılamak üzere tasarlanmış anlamsal CSS belirteçlerini kullanır. JavaScript yok, karanlık mod uyumlu, Tailwind CSS v4 ile uyumlu. Django, HTMX, Laravel ve yalnızca CSS yığınlarıyla çalışır.
Genel Bakış
Frutjam, yalnızca CSS'ye özel ücretsiz bir Tailwind CSS v4 kullanıcı arayüzü kitaplığıdır. Sıfır JavaScript, WCAG AA/AAA erişilebilir, çerçeveden bağımsız. Django, HTMX, Laravel, React ve herhangi bir yığınla çalışan anlamsal bileşenlerle modern arayüzler oluşturun.
Temalar
Frutjam'ın yalnızca CSS tema sistemi, CSS değişkenlerini ve tek bir veri özelliğini kullanır. Açık, koyu ve özel temaları JavaScript olmadan değiştirin. Yerleşik WCAG AA renk belirteçleri, Django, HTMX, Laravel ve herhangi bir Tailwind CSS v4 projesiyle çalışır.
Kurulum
Yalnızca CSS'ye özel Tailwind CSS kullanıcı arayüzü kitaplığı olan Frutjam'ı birkaç dakika içinde yükleyin. İki içe aktarma, sıfır JavaScript, kutudan çıktığı gibi WCAG ile erişilebilen bileşenler. Django, HTMX, Laravel, React ve herhangi bir Tailwind CSS v4 projesiyle çalışır.
Yapılandırma
Yalnızca Frutjam CSS'ye özel Tailwind CSS eklentisini yapılandırın. Varsayılan temaları ayarlayın, özel renk belirteçleri tanımlayın, önek sistemini değiştirin; sıfır JavaScript gereklidir. WCAG'ye erişilebilir varsayılanlar, Django, HTMX, Laravel ve herhangi bir çerçeveyle çalışır.
Tipografi
Frutjam'ın yalnızca CSS tipografi sistemi. Tailwind CSS v4 ile anlamsal HTML metni ölçeklendirme, WCAG'ye erişilebilir, JavaScript gerekmez. Django, HTMX, Laravel, React ve herhangi bir çerçeveyle çalışır.
Nereden başlamalı
Frutjam'da yeni misiniz? Sıfırdan tam temalı, erişilebilir bir Tailwind CSS v4 projesine geçmek için bu yolu izleyin.
- 1Kurulum
Npm paketini yükleyin ve CSS'nize iki satır ekleyin. JavaScript yapılandırması yok, PostCSS eklentisi yok.
- 2Genel Bakış
Frutjam'ın Tailwind CSS yardımcı programları, anlamsal bileşen sınıfları ve WCAG AA renk belirteçleriyle birlikte nasıl çalıştığını anlayın.
- 3Temalar
Yerleşik bir tema uygulayın veya CSS değişkenleri ve tek bir
data-themeözelliğiyle kendi temanızı oluşturun. - 4Renkler
Anlamsal renk belirteçlerinin nasıl çalıştığını ve her
{color}çiftinin WCAG AA kontrastını otomatik olarak nasıl garanti ettiğini öğrenin. - 5Yapılandırma
Bir önek belirleyin, kapsam belirteçlerini bir kök öğeye ayarlayın, bileşenleri seçin veya başka bir CSS çerçevesiyle bütünleştirin.
Sık sorulan sorular
Frutjam Tailwind CSS v4 gerektiriyor mu?
Evet — Frutjam, Tailwind CSS v4 için oluşturulmuştur ve v4'te sunulan @plugin yönergesini kullanır. Tailwind CSS v3 ile uyumlu değildir. Hala v3 kullanıyorsanız resmi Tailwind geçiş kılavuzunu kullanarak önce v4'e yükseltin.
Frutjam ücretsiz ve açık kaynak mı?
Evet — temel Frutjam bileşen kitaplığı ücretsiz ve açık kaynaktır (MIT lisanslıdır). Pro ve Team planları, yapay zeka düzenleyici entegrasyonu için premium kullanıcı arayüzü blokları, şablonlar ve sınırsız Cherry MCP istekleri ekler.