Instalacja

Zainstaluj bibliotekę Frutjam UI obsługującą tylko CSS z Tailwind CSS v4, UnoCSS lub bez żadnego etapu kompilacji. Ponad 65 dostępnych komponentów, zero JavaScript, WCAG AA. Współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

Zainstalować

npm i -D frutjam

Następnie wybierz linię poniżej odpowiadającą Twojej konfiguracji. Każdy daje te same komponenty.

Tailwind CSS v4

Potrzebujesz pracy CSS wiatru tylnego projekt, plus Węzeł i np. Frutjam wymaga Tailwinda 4.

Dodaj Frutjam do swojego input.css z @plugin dyrektywa:

1
2

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

To jest cała konfiguracja. Wszystkie ponad 65 komponentów jest dostępnych natychmiast, a Tailwind dostarcza tylko te, których używa Twój znacznik.

UnoCSS

Frutjam dostarcza gotowe ustawienia, więc UnoCSS generuje tylko te komponenty, których używasz, w taki sam sposób, jak robi to wtyczka Tailwind.

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()],
});

Każda klasa działa tak samo jak w Tailwind, podobnie jak warianty:

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>

Dodać presetAttributify() a nazwa komponentu staje się atrybutem, a każda wartość jest traktowana jako jej wariant:

1
2

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

Druga linia potrzebuje transformerVariantGroup() dla składni nawiasów. Należy pamiętać, że atrybut taki jak btn nie jest prawidłowym kodem HTML, więc jeśli sprawdzisz poprawność znaczników, użyj formularza klasy lub UnoCSS un- prefiks.

Opcje

Komponent łącza wymaga jednej linii konfiguracji

UnoCSS traktuje link jako wariant dla CSS :link pseudoklasa, a jej domyślne separatory obejmują -. Więc link-2xl czyta się jako „2xl, gdy nieodwiedzany” zamiast jako nazwa klasy i nic nie jest generowane. Ma to wpływ tylko na ten komponent i tylko na link-* modyfikatory.

Albo powiedz UnoCSS, aby podzielił się na same dwukropki:

1
2
3
4

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

Lub użyj przedrostka, który umieszcza coś innego niż link z przodu imienia:

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

Każdy inny element pozostaje nienaruszony. link jest jedyną z 57, której nazwa koliduje z pseudoklasą.

Brak silnika użytkowego

Frutjam jest zbudowany przy użyciu Tailwinda, ale komponenty kompilują się do zwykłego CSS, który odczytuje niestandardowe właściwości. Jeśli Twój projekt w ogóle nie korzysta z silnika narzędziowego, zaimportuj arkusz stylów zamiast wtyczki:

import 'frutjam/css';

To jest cała konfiguracja. Każda klasa komponentów działa, motywy przełączają się za pomocą data-theme jak zwykle i nic więcej nie trzeba. Ma 30 KB spakowanego w formacie gzip i zawiera podstawowe style, zarówno motywy, jak i wszystkie ponad 65 komponentów.

Zamiast tego wciągnij tylko to, czego potrzebujesz:

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

Lub bez etapu kompilacji:

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

Brak etapu kompilacji

Upuść tag i zacznij pisać znaczniki. Użyj tego do prototypu lub strony, której nie budujesz, a nie do produkcji, ponieważ zawiera każdy komponent.

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

Aby poeksperymentować z narzędziami Tailwind na tej samej stronie, dodaj obok niego wersję przeglądarki Tailwind:

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 i React: opcjonalne, niewymagane

Frutjam jest najpierw natywny i CSS. Zdecydowana większość komponentów: przyciski, plakietki, karty, formularze, alerty i inne: działa z czystym HTML i CSS, nie wymaga JavaScriptu. Natywne elementy HTML, takie jak <dialog>, <details>, I <input type="checkbox"> obsługiwać interaktywność tam, gdzie przeglądarki już ją obsługują. Wszystkie komponenty są dostępne w formacie WCAG AA od razu po wyjęciu z pudełka i współpracują z Django, HTMX, Laravel, React, Next.js i dowolnym stosem.

Niewielka liczba komponentów nie ma natywnego odpowiednika HTML (powiadomienia tostowe, filtrowanie comboboxów, kontrolki karuzeli). Tylko w takich przypadkach Frutjam dostarcza lekkich opcjonalnych pomocników.

Wanilia JS: frutjam/js

Pomocnicy modułów ES niezależny od platformy dla komponentów, które ich potrzebują. Dołącz do dowolnego elementu DOM, nie wymaga frameworka.

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()

Haki reagujące: frutjam/react

Thin React otacza te same natywne wywołania DOM. Każdy hak zwraca a ref dołączasz do elementu i metod jego kontrolowania, żadnych dodatkowych zależności poza samym Reactem.

 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>
    </>
  )
}

Dostępne dla: useModal, useDrawer, useCollapsible, useTooltip, useTabs, useToast, useCarousel, useCombobox.

Następne kroki

Po zainstalowaniu wypróbuj element przycisku aby zobaczyć Frutjama w akcji lub poznać całość biblioteka komponentów.

Chcesz zrozumieć tok myślenia stojący za podejściem Frutjam opartym na CSS? Przeczytaj, dlaczego zbudowaliśmy to w ten sposób →