Khối và phần giao diện người dùng - Xây dựng nhanh hơn
Các khối và phần giao diện người dùng CSS Tailwind chỉ có CSS. Không có JavaScript, WCAG AA có thể truy cập được, không phụ thuộc vào khung. Sao chép-dán các phần chính, tiêu đề, phần định giá và khối tính năng. Hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
Các khối là các phần trang sẵn sàng sản xuất được tập hợp từ các thành phần Frutjam. Mỗi khối là HTML độc lập — hãy thả nó vào bất kỳ mẫu Django, tệp Laravel Blade, trang HTMX hoặc thành phần React nào và nó sẽ hoạt động ngay lập tức. Các khối tự động kế thừa chủ đề Frutjam đang hoạt động của bạn, do đó, việc chuyển đổi giữa chủ đề sáng, tối hoặc chủ đề tùy chỉnh không yêu cầu thay đổi đối với HTML khối. Tất cả các khối đều chỉ dành cho CSS, WCAG AA có thể truy cập được và được xây dựng cho Tailwind CSS v4 — không có JavaScript, không có quy trình xây dựng ngoài chính Tailwind.
tiêu đề
Khối tiêu đề CSS Tailwind chỉ có CSS với thanh điều hướng, nhãn hiệu và ngăn kéo di động. Các biến thể bố cục cố định, minh bạch và đáp ứng. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
anh hùng
Khối CSS CSS Tailwind chỉ dành cho CSS — các phần trang đích được tạo sẵn với bố cục căn giữa, phân chia và hình ảnh. Không cần JavaScript, WCAG AA có thể truy cập được. Hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
Định giá
Các khối định giá CSS Tailwind chỉ dành cho CSS được xây dựng bằng các thành phần thẻ và nút. Sao chép và dán bảng giá với các bậc, danh sách tính năng và CTA. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
Khối là gì?
Các khối là các phần trang lớn hơn, được tạo sẵn, được xây dựng bằng cách kết hợp các thành phần Frutjam lại với nhau. Trong đó một thành phần là một thành phần giao diện người dùng duy nhất (nút, thẻ, huy hiệu), khối là một phần bố cục hoàn chỉnh — phần chính, bảng giá, tiêu đề trang web — sẵn sàng sao chép và dán vào dự án của bạn.
Chỉ CSS
Mọi khối đều được xây dựng bằng các thành phần Frutjam và tiện ích CSS Tailwind — không có JavaScript, không có phụ thuộc bổ sung.
Sao chép-dán sẵn sàng
Mỗi khối là HTML độc lập. Dán nó vào bất kỳ mẫu Django, Laravel Blade, trang HTML hoặc thành phần React nào.
Nhận biết chủ đề
Các khối kế thừa chủ đề Frutjam đang hoạt động của bạn một cách tự động — chuyển đổi chủ đề và tất cả các khối cập nhật mà không cần thay đổi.
Sự khác biệt giữa một khối và một thành phần là gì?
Thành phần là một thành phần giao diện người dùng có thể tái sử dụng duy nhất — nút, thẻ, huy hiệu. Khối là một phần trang hoàn chỉnh bao gồm nhiều thành phần thành một bố cục — phần chính, bảng giá, tiêu đề trang web với thanh điều hướng và ngăn kéo di động. Sử dụng các thành phần để xây dựng bố cục tùy chỉnh; sử dụng các khối để lắp ráp trang nhanh.
Các khối có hoạt động với Django, HTMX và Laravel không?
Có - các khối là HTML đơn giản sử dụng các lớp thành phần Frutjam. Chúng hoạt động trong mọi hệ thống tạo khuôn mẫu: Django, HTMX, Laravel Blade, Rails ERB, Jinja2 hoặc HTML tĩnh. Không có khung JavaScript, không có bước xây dựng nào ngoài chính Tailwind CSS.
Có nhiều khối được thêm vào không?
Có - các khối mới được bổ sung thường xuyên. Các gói Pro và Team bao gồm quyền truy cập vào các khối cao cấp bao gồm các phần tính năng, lời chứng thực, CTA và mẫu trang đầy đủ.