Bloki i sekcje interfejsu użytkownika — twórz szybciej
Bloki i sekcje interfejsu CSS Tailwind tylko dla CSS. Brak JavaScript, dostępny WCAG AA, niezależny od frameworka. Skopiuj i wklej bohaterów, nagłówki, sekcje cenowe i bloki funkcji. Współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Bloki to gotowe do produkcji sekcje strony złożone z komponentów Frutjam. Każdy blok jest samodzielnym kodem HTMX — upuść go w dowolnym szablonie Django, pliku Laravel Blade, stronie HTMX lub komponencie React, a zadziała natychmiast. Bloki automatycznie dziedziczą aktywny motyw Frutjam, więc przełączanie między jasnym, ciemnym lub niestandardowym motywem nie wymaga żadnych zmian w kodzie HTMX bloku. Wszystkie bloki są przeznaczone wyłącznie do CSS, dostępne w formacie WCAG AA i zbudowane dla Tailwind CSS v4 — bez JavaScript, bez potoku kompilacji poza samym Tailwindem.
Chodnikowiec
Bloki nagłówka CSS Tailwind tylko dla CSS z paskiem nawigacyjnym, brandingiem i mobilną szufladą. Przyklejone, przejrzyste i responsywne warianty układu. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Bohater
Bloki bohatera CSS Tailwind tylko w CSS — gotowe sekcje strony docelowej z układami wyśrodkowanymi, podzielonymi i obrazami. Nie wymaga JavaScript, dostępny WCAG AA. Współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Wycena
Bloki cenowe CSS Tailwind oparte wyłącznie na CSS zbudowane z komponentów kart i przycisków. Skopiuj i wklej tabele cenowe z poziomami, listami funkcji i wezwaniami do działania. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Co to są bloki?
Bloki to większe, gotowe sekcje strony, zbudowane poprzez połączenie komponentów Frutjam. Tam, gdzie komponent jest pojedynczym elementem interfejsu użytkownika (przyciskiem, kartą, plakietką), blok jest kompletną sekcją układu — bohaterem, tabelą cen, nagłówkiem witryny — gotową do skopiowania i wklejenia do projektu.
Tylko CSS
Każdy blok jest zbudowany z komponentów Frutjam i narzędzi CSS Tailwind — zero JavaScript, żadnych dodatkowych zależności.
Kopiuj-wklej gotowe
Każdy blok jest samodzielnym kodem HTMX. Wklej go do dowolnego szablonu Django, Laravel Blade, strony HTMX lub komponentu React.
Świadomy tematu
Bloki automatycznie dziedziczą Twój aktywny motyw Frutjam — przełączaj motywy, a wszystkie bloki aktualizują się bez konieczności wprowadzania zmian.
Jaka jest różnica między blokiem a komponentem?
Komponent to pojedynczy element interfejsu użytkownika wielokrotnego użytku — przycisk, karta, plakietka. Blok to kompletna sekcja strony, która składa się z wielu elementów tworzących układ — sekcję główną, tabelę cen, nagłówek witryny z paskiem nawigacyjnym i mobilną szufladą. Używaj komponentów do tworzenia niestandardowych układów; użyj bloków do szybkiego montażu strony.
Czy bloki działają z Django, HTMX i Laravel?
Tak — bloki są zwykłym kodem HTMX przy użyciu klas komponentów Frutjam. Działają w dowolnym systemie szablonów: Django, HTMX, Laravel Blade, Rails ERB, Jinja2, czy statyczny HTMX. Żadnego frameworka JavaScript, żadnego etapu kompilacji poza samym CSS Tailwind.
Czy dodawane są kolejne bloki?
Tak — regularnie dodawane są nowe bloki. Plany Pro i Team obejmują dostęp do bloków premium, w tym sekcji funkcji, referencji, wezwań do działania i szablonów całych stron.