Kurulum

Yalnızca CSS Frutjam UI kitaplığını Tailwind CSS v4, UnoCSS ile yükleyin veya hiçbir derleme adımı olmadan yükleyin. 65'ten fazla erişilebilir bileşen, sıfır JavaScript, WCAG AA. Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.

Düzenlemek

npm i -D frutjam

Daha sonra aşağıdan kurulumunuza uygun satırı seçin. Her biri size aynı bileşenleri verir.

Arka rüzgar CSS v4

Çalışmaya ihtiyacın var Arka rüzgar CSS proje artı Düğüm ve npm. Frutjam, Tailwind 4'ü gerektirir.

Frutjam'ı ekleyin input.css ile @plugin direktif:

1
2

@import "tailwindcss";
@plugin "frutjam";

Bütün kurulum budur. 65'ten fazla bileşenin tamamı anında mevcuttur ve Tailwind yalnızca işaretlemenizin kullandığı bileşenleri gönderir.

UnoCSS

Frutjam bir ön ayar gönderir; böylece UnoCSS, Tailwind eklentisinin yaptığı gibi yalnızca kullandığınız bileşenleri oluşturur.

1
2
3
4
5
6
7

// uno.config.js
import { defineConfig, presetWind4 } from 'unocss';
import { presetFrutjam } from 'frutjam/unocss';

export default defineConfig({
  presets: [presetWind4(), presetFrutjam()],
});

Her sınıf ve çeşitleri Tailwind altında olduğu gibi çalışır:

1
2
3

<button class="btn btn-error btn-xl">Delete</button>
<button class="md:btn-error">Red from the medium breakpoint up</button>
<div class="hover:card-primary">Fills on hover</div>

Eklemek presetAttributify() ve bileşen adı bir öznitelik haline gelir ve her değer onun bir çeşidi olarak değerlendirilir:

1
2

<button btn="error xl">Delete</button>
<button btn="md:(error xl)">Red and large from the medium breakpoint up</button>

İkinci satıra ihtiyaç var transformerVariantGroup() braket sözdizimi için. Gibi bir özelliğin olduğunu unutmayın btn geçerli bir HTML değil, bu nedenle işaretlemenizi doğrulayacaksanız sınıf formunu veya UnoCSS'yi kullanın. un- önek.

Seçenekler

Bağlantı bileşeninin bir yapılandırma satırına ihtiyacı var

UnoCSS işlemleri link CSS için bir varyant olarak :link sözde sınıf ve onun varsayılan ayırıcıları şunları içerir: -. Bu yüzden link-2xl " şeklinde okunur2xl", ziyaret edilmediğinde" bir sınıf adı olarak değil, hiçbir şey üretilmez. Yalnızca bu bileşeni etkiler ve yalnızca link-* değiştiriciler

UnoCSS'ye yalnızca iki nokta üst üste bölünmesini söyleyin:

1
2
3
4

export default defineConfig({
  separators: [':'],
  presets: [presetWind4(), presetFrutjam()],
});

Veya şunun dışında bir şey koyan bir önek kullanın: link ismin önünde:

presets: [presetWind4(), presetFrutjam({ prefix: 'fj' })],   // fj-link-2xl

Diğer hiçbir bileşen etkilenmez. link 57 kişiden adı sahte sınıfla çatışan tek kişidir.

Yardımcı motor yok

Frutjam, Tailwind ile oluşturulmuştur ancak bileşenler, özel özellikleri okuyan sıradan CSS'ye derlenir. Projeniz hiçbir yardımcı motor kullanmıyorsa eklenti yerine stil sayfasını içe aktarın:

import 'frutjam/css';

Bütün kurulum budur. Her bileşen sınıfı çalışır, temalar değişir data-theme her zamanki gibi ve başka hiçbir şeye gerek yok. 30 KB gzip'lidir ve temel stilleri, hem temaları hem de 65'ten fazla bileşeni taşır.

Bunun yerine yalnızca ihtiyacınız olanı çekin:

1
2
3
4

import 'frutjam/css/base';              // tokens and reset, always needed
import 'frutjam/css/components/button';
import 'frutjam/css/components/card';
import 'frutjam/css/themes/darkberry';  // optional

Veya hiçbir derleme adımı olmadan:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frutjam@2/dist/frutjam.components.css">

Oluşturma adımı yok

Bir etiket bırakın ve işaretleme yazmaya başlayın. Bunu, her bileşeni gönderdiğinden üretim için değil, oluşturmadığınız bir prototip veya sayfa için kullanın.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frutjam@2/dist/frutjam.components.css">

Aynı sayfada Tailwind'in yardımcı programlarını denemek için Tailwind'in tarayıcı yapısını da yanına ekleyin:

1
2

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frutjam@2/dist/frutjam.min.css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

JavaScript ve React: isteğe bağlı, gerekli değil

Frutjam yerel öncelikli ve CSS önceliklidir. Bileşenlerin büyük çoğunluğu: düğmeler, rozetler, kartlar, formlar, uyarılar ve daha fazlası: saf HTML ve CSS ile çalışır, sıfır JavaScript gerektirir. Yerel HTML öğeleri gibi <dialog>, <details>, Ve <input type="checkbox"> Tarayıcıların zaten desteklediği etkileşimi yönetin. Tüm bileşenlere WCAG AA kullanıma hazırdır ve Django, HTMX, Laravel, React, Next.js ve herhangi bir yığınla çalışır.

Az sayıda bileşenin yerel HTML eşdeğeri yoktur (kısmen bildirimler, birleşik giriş kutusu filtreleme, atlıkarınca kontrolleri). Frutjam yalnızca bu durumlar için hafif, isteğe bağlı yardımcılar gönderir.

Vanilya JS: frutjam/js

İhtiyaç duyan bileşenler için çerçeveden bağımsız ES modülü yardımcıları. Herhangi bir DOM öğesine ekleyin; çerçeve gerekmez.

1
2
3
4
5
6

import { createModal } from 'frutjam/js'

const modal = createModal(document.getElementById('myModal'))
modal.open()   // calls showModal()
modal.close()  // calls close()
modal.toggle()

Tepki Kancaları: frutjam/react

Aynı yerel DOM çağrılarının etrafındaki ince React sarmalayıcıları. Her kanca bir değer döndürür ref öğeye ve onu kontrol etmek için yöntemlere bağlanırsınız, React'ın kendisi dışında ekstra bir bağımlılık yoktur.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

import { useModal } from 'frutjam/react'

export default function App() {
  const modal = useModal()
  return (
    <>
      <button onClick={modal.open}>Open</button>
      <dialog ref={modal.ref} className="modal">...</dialog>
    </>
  )
}

Şunlar için kullanılabilir: useModal, useDrawer, useCollapsible, useTooltip, useTabs, useToast, useCarousel, useCombobox.

Sonraki Adımlar

Kurulduktan sonra şunu deneyin: düğme bileşeni Frutjam'ı çalışırken görmek veya tamamını keşfetmek için bileşen kütüphanesi.

Frutjam'ın CSS öncelikli yaklaşımının ardındaki düşünceyi anlamak ister misiniz? Neden bu şekilde inşa ettiğimizi okuyun →