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.

Nie ma skomplikowanej konfiguracji — wykorzystuje tę samą konfigurację co CSS Tailwind, więc możesz pozostać przy tym, co już wiesz. A jeśli znasz Bootstrap, nazwy komponentów będą intuicyjne i łatwe do zapamiętania.

Możesz używać przedrostków wariantów CSS Tailwind, takich jak dark:, sm:, lg:, xl:, rtl: i ltr: z dowolną z naszych klas narzędzi.

Nowoczesna inżynieria interfejsu użytkownika w oparciu o platformę Speed-First

Frutjam to biblioteka interfejsu użytkownika Tailwind CSS v4 o otwartym kodzie źródłowym — abstrakcja wysokiego poziomu zaprojektowana w celu ułatwienia szybkiego tworzenia stron internetowych. Pomyśl o tym jak o zestawie narzędzi, który przekształca surowe klasy narzędzi w semantyczne, gotowe do produkcji komponenty — umożliwiając budowanie nowoczesnych interfejsów ze znacznie mniejszą ilością kodu.

Jakie problemy rozwiązuje?

Większość programistów boryka się ze zmęczeniem użytecznością, spędzając godziny na pisaniu długich łańcuchów klas dla podstawowych elementów, takich jak przyciski i dane wejściowe. Frutjam eliminuje te tarcia, zapewniając ekosystem plug and play.

Nadmiarowy szablon: zamiast wymyślać koło na nowo dla każdego projektu, otrzymujesz gotowe komponenty, które obsługują stany skupienia, przejścia po najechaniu myszką i zachowania responsywne od razu po wyjęciu z pudełka
Wzrost wydajności: w przeciwieństwie do ciężkich frameworków JavaScript, Frutjam priorytetowo traktuje podejście „Czystego CSS”, dzięki czemu Twoja aplikacja pozostaje lekka i szybka
Przeszkody w przestrzeganiu zasad: tworzenie dostępnych i przyjaznych SEO interfejsów jest złożone. Biblioteka wykorzystuje znaczniki semantyczne i czysty kod HTML, aby zapewnić, że Twoja witryna jest z natury zgodna z W3C

Frutjam jest dla Ciebie, jeśli:

Masz dość ciągłego pisania tysięcy nazw klas narzędzi
Potrzebujesz dostarczać dostępne, przyjazne dla SEO strony docelowe i aplikacje SaaS w rekordowym czasie
Chcesz spójnego systemu projektowego, który będzie w pełni kompatybilny w każdym środowisku?
Preferuj lekkie, niezależne od platformy rozwiązanie z zerowymi obowiązkowymi zależnościami JavaScript

Podstawowe funkcje umożliwiające szybki rozwój

Zestaw narzędzi opiera się na filozofii kopiuj, wklej i buduj, oferując wszystko, co potrzebne do profesjonalnej inżynierii frontendu

Rozbudowana biblioteka komponentów: zawiera podstawowe elementy, takie jak paski nawigacyjne, moduły modalne, akordeony i ulepszone tabele danych
Wstępnie zmontowane bloki: oszczędzaj godziny dzięki blokom układu sekcji cenowych, nagłówków i obszarów głównych
Berry System motywów: przełączaj się między wbudowanymi motywami, takimi jak Snowberry (jasny) i Darkberry (ciemny), lub twórz własne, używając zmiennych CSS OKLCH
Projekt skupiający się przede wszystkim na dostępności: każdy komponent jest zgodny z najlepszymi praktykami dotyczącymi ról ARIA i nawigacji za pomocą klawiatury. Wszystkie pary kolorów to ręcznie dostrojone wartości OKLCH, zweryfikowane pod kątem zgodności z kontrastem WCAG AA — a nie automatycznie obliczone domysły.
Agnostyk frameworka: działa bezproblemowo niezależnie od tego, czy używasz React, Next.js, Vue, Django, HTMX, Laravel, czy prostego statycznego HTMX

Wydajność techniczna

Używając nazw klas semantycznych, możesz znacznie zmniejszyć rozmiar kodu HTML w porównaniu ze standardowymi przepływami pracy zorientowanymi na narzędzia. Dzięki temu powstają czystsze i łatwiejsze w utrzymaniu bazy kodu, którymi zespoły mogą łatwiej zarządzać w dłuższej perspektywie. Biblioteka jest zbudowana wyłącznie w oparciu o CSS Tailwind, zapewniając zachowanie całej możliwości dostosowywania silnika narzędziowego, jednocześnie zyskując prędkość systemu opartego na komponentach.

Gotowy do rozpoczęcia? Rozpocznij instalację →