Kullanıcı Arayüzü Blokları ve Bölümleri - Daha Hızlı Oluşturun
Yalnızca CSS'ye özgü Tailwind CSS kullanıcı arayüzü blokları ve bölümleri. JavaScript yok, WCAG AA erişilebilir, çerçeveden bağımsız. Kahramanları, başlıkları, fiyatlandırma bölümlerini ve özellik bloklarını kopyalayıp yapıştırın. Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
Bloklar, Frutjam bileşenlerinden bir araya getirilmiş, üretime hazır sayfa bölümleridir. Her blok bağımsız bir HTML'dir; onu herhangi bir Django şablonuna, Laravel Blade dosyasına, HTMX sayfasına veya React bileşenine bırakın ve hemen çalışır. Bloklar, etkin Frutjam temanızı otomatik olarak devralır; dolayısıyla açık, koyu veya özel bir tema arasında geçiş yapmak, blok HTML'sinde herhangi bir değişiklik yapılmasını gerektirmez. Tüm bloklar yalnızca CSS'dir, WCAG AA'ya erişilebilirdir ve Tailwind CSS v4 için oluşturulmuştur; JavaScript yoktur, Tailwind'in ötesinde derleme hattı yoktur.
Başlık
Gezinme çubuğu, markalama ve mobil çekmece içeren, yalnızca CSS'ye özel Tailwind CSS başlık blokları. Yapışkan, şeffaf ve duyarlı düzen çeşitleri. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
Kahraman
Yalnızca CSS'ye özgü Tailwind CSS kahraman blokları — ortalanmış, bölünmüş ve resim düzenlerine sahip hazır açılış sayfası bölümleri. JavaScript gerekmez, WCAG AA'ya erişilebilir. Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
Fiyatlandırma
Kart ve düğme bileşenleriyle oluşturulmuş yalnızca CSS Tailwind CSS fiyatlandırma blokları. Katmanları, özellik listelerini ve CTA'ları içeren fiyatlandırma tablolarını kopyalayıp yapıştırın. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
Bloklar nedir?
Bloklar, Frutjam bileşenlerinin bir araya getirilmesiyle oluşturulan daha büyük, hazır sayfa bölümleridir. Bir bileşenin tek bir kullanıcı arayüzü öğesi (bir düğme, bir kart, bir rozet) olduğu durumda, bir blok, projenize kopyalayıp yapıştırmaya hazır, eksiksiz bir düzen bölümüdür (bir kahraman, bir fiyatlandırma tablosu, bir site başlığı).
Yalnızca CSS
Her blok Frutjam bileşenleri ve Tailwind CSS yardımcı programları ile oluşturulmuştur; sıfır JavaScript, ekstra bağımlılık yoktur.
Kopyala-yapıştır hazır
Her blok bağımsız bir HTML'dir. Bunu herhangi bir Django şablonuna, Laravel Blade'e, HTMX sayfasına veya React bileşenine yapıştırın.
Temaya duyarlı
Bloklar, aktif Frutjam temanızı otomatik olarak devralır; temaları değiştirin ve tüm bloklar hiçbir değişikliğe gerek kalmadan güncellenir.
Bir blok ile bir bileşen arasındaki fark nedir?
Bileşen, yeniden kullanılabilen tek bir kullanıcı arayüzü öğesidir (bir düğme, bir kart, bir rozet). Blok, birden fazla bileşeni bir düzende birleştiren tam bir sayfa bölümüdür (bir kahraman bölümü, bir fiyatlandırma tablosu, gezinme çubuğuna sahip bir site başlığı ve mobil çekmece). Özel düzenler oluşturmak için bileşenleri kullanın; hızlı sayfa montajı için blokları kullanın.
Bloklar Django, HTMX ve Laravel ile çalışır mı?
Evet — bloklar Frutjam bileşen sınıflarını kullanan düz HTML'dir. Herhangi bir şablonlama sisteminde çalışırlar: Django, HTMX, Laravel Blade, Rails ERB, Jinja2 veya statik HTML. JavaScript çerçevesi yok, Tailwind CSS'nin ötesinde bir derleme adımı yok.
Daha fazla blok ekleniyor mu?
Evet — düzenli olarak yeni bloklar eklenmektedir. Pro ve Team planları, özellik bölümleri, referanslar, CTA'lar ve tam sayfa şablonları dahil olmak üzere premium bloklara erişimi içerir.