Cài đặt

Cài đặt thư viện Frutjam UI chỉ dành cho CSS với Tailwind CSS v4, UnoCSS hoặc không có bước xây dựng nào cả. Hơn 65 thành phần có thể truy cập, không có JavaScript, WCAG AA. Hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

Cài đặt

npm i -D frutjam

Sau đó chọn dòng bên dưới phù hợp với thiết lập của bạn. Mỗi người cung cấp cho bạn các thành phần giống nhau.

Tailwind CSS v4

Bạn cần một công việc CSS theo gió dự án, cộng thêm nút và npm. Frutjam yêu cầu Tailwind 4.

Thêm Frutjam vào input.css với @plugin chỉ thị:

1
2

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

Đó là toàn bộ thiết lập. Tất cả hơn 65 thành phần đều có sẵn ngay lập tức và Tailwind chỉ cung cấp những thành phần mà đánh dấu của bạn sử dụng.

UnoCSS

Frutjam gửi một cài đặt trước nên UnoCSS chỉ tạo ra các thành phần bạn sử dụng, giống như cách plugin Tailwind thực hiện.

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

Mọi lớp đều hoạt động như trong Tailwind và các biến thể cũng vậy:

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>

Thêm vào presetAttributify() và tên thành phần trở thành một thuộc tính, với mỗi giá trị được coi là một biến thể của nó:

1
2

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

Dòng thứ hai cần transformerVariantGroup() cho cú pháp khung. Lưu ý rằng một thuộc tính như btn không phải là HTML hợp lệ, vì vậy nếu bạn xác thực đánh dấu của mình, hãy sử dụng biểu mẫu lớp hoặc UnoCSS un- tiền tố.

Tùy chọn

Thành phần liên kết cần một dòng cấu hình

xử lý UnoCSS link như một biến thể của CSS :link lớp giả và các dấu phân cách mặc định của nó bao gồm -. Vì thế link-2xl được đọc là "2xl, khi chưa được truy cập" thay vì dưới dạng tên lớp và không có gì được tạo ra. Nó chỉ ảnh hưởng đến thành phần này và chỉ link-* sửa đổi.

Hoặc yêu cầu UnoCSS chỉ phân tách bằng dấu hai chấm:

1
2
3
4

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

Hoặc sử dụng một tiền tố để đặt một cái gì đó khác ngoài link ở phía trước tên:

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

Mọi thành phần khác đều không bị ảnh hưởng. link là người duy nhất trong số 57 người có tên xung đột với một lớp giả.

Không có động cơ tiện ích

Frutjam được xây dựng bằng Tailwind, nhưng các thành phần biên dịch thành CSS thông thường đọc các thuộc tính tùy chỉnh. Nếu dự án của bạn hoàn toàn không sử dụng công cụ tiện ích, hãy nhập biểu định kiểu thay vì plugin:

import 'frutjam/css';

Đó là toàn bộ thiết lập. Mọi lớp thành phần đều hoạt động, chủ đề chuyển đổi với data-theme như thường lệ và không yêu cầu gì khác. Nó được nén bằng 30 KB và mang các kiểu cơ bản, cả chủ đề và tất cả hơn 65 thành phần.

Thay vào đó chỉ lấy những gì bạn cần:

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

Hoặc không có bước xây dựng nào cả:

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

Không có bước xây dựng

Thả thẻ vào và bắt đầu viết đánh dấu. Sử dụng tính năng này cho nguyên mẫu hoặc trang mà bạn không xây dựng, không phải cho sản xuất vì nó vận chuyển mọi thành phần.

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

Để thử nghiệm các tiện ích của Tailwind trên cùng một trang, hãy thêm bản dựng trình duyệt của Tailwind cùng với nó:

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 và React: tùy chọn, không bắt buộc

Frutjam là bản địa đầu tiên và CSS đầu tiên. Phần lớn các thành phần: nút, huy hiệu, thẻ, biểu mẫu, cảnh báo, v.v.: hoạt động với HTML và CSS thuần túy, không cần JavaScript. Các phần tử HTML gốc như <dialog>, <details>, Và <input type="checkbox"> xử lý tính tương tác ở những nơi trình duyệt đã hỗ trợ nó. Tất cả các thành phần đều có thể truy cập WCAG AA ngay lập tức và hoạt động với Django, HTMX, Laravel, React, Next.js và bất kỳ ngăn xếp nào.

Một số ít thành phần không có HTML gốc tương đương (thông báo bánh mì nướng, lọc hộp tổ hợp, điều khiển băng chuyền). Chỉ dành cho những trường hợp đó, Frutjam cung cấp các trợ giúp tùy chọn nhẹ.

Vani JS: frutjam/js

Trình trợ giúp mô-đun ES không xác định khung cho các thành phần cần chúng. Đính kèm với bất kỳ phần tử DOM nào, không cần khung.

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

Móc phản ứng: frutjam/react

Trình bao bọc React mỏng xung quanh các lệnh gọi DOM gốc giống nhau. Mỗi hook trả về một ref bạn gắn vào phần tử và các phương thức để kiểm soát nó, không có sự phụ thuộc bổ sung nào ngoài chính React.

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

Có sẵn cho: useModal, useDrawer, useCollapsible, useTooltip, useTabs, useToast, useCarousel, useCombobox.

Các bước tiếp theo

Sau khi cài đặt, hãy thử thành phần nút để xem Frutjam hoạt động hoặc khám phá toàn bộ thư viện thành phần.

Bạn muốn hiểu suy nghĩ đằng sau cách tiếp cận CSS-first của Frutjam? Đọc lý do tại sao chúng tôi xây dựng nó theo cách này →