Tài liệu các hệ thống thiết kế của bạn với Fractal

Sep 16, 2025

Cách

Bạn có thích tìm hiểu thêm về các hệ thống thiết kế? Sau đó, đừng bỏ lỡ kỹ sư UI cao cấp Mina Markham. ở ngoài Tạo New York Vào ngày 28 tháng 4, nơi cô ấy sẽ thảo luận về cách cô ấy tạo ra quần, hệ thống thiết kế đã cung cấp cho nhiều ứng dụng được lưu trữ trên Hillaryclinton.com. Và trên bờ biển phía tây, tại Tạo ra San Francisco. Vào ngày 9 tháng 6, Stephanie Rewis. sẽ chia sẻ một số bài học mà cô học được trong khi xây dựng hệ thống thiết kế Salesforce.

Đến bây giờ, nhiều người trong chúng ta quen thuộc với Hướng dẫn phong cách . Nhưng có một giống mới của tài liệu hệ thống thiết kế đạt được hơi nước: thư viện mẫu. Sự khác biệt chính giữa hai là nguồn chính của tài liệu của công cụ.

Tài liệu của hướng dẫn kiểu dáng có xu hướng bắt nguồn từ tệp Markdown, vì vậy để hiển thị đánh dấu, tác giả thường bị buộc phải sao chép và dán nó vào Markdown. Điều này gần như không thể duy trì khi lắp nhiều thành phần với nhau.

Mặt khác, một thư viện mẫu, đối xử với các tệp HTML thành phần của chúng tôi với tư cách là công dân hạng nhất. Mỗi thành phần có trang riêng, nơi nó hiển thị đánh dấu và kết xuất HTML trực tiếp từ tệp HTML. Điều này đảm bảo các tệp và tài liệu HTML không bao giờ thoát khỏi Sync.

Các thư viện mẫu thường được xây dựng bằng ngôn ngữ Templating thay vì HTML đơn giản. Các mẫu có thể bao gồm các biến và logic khác, sau đó chúng ta có thể chuyển nhiều bộ dữ liệu khác nhau, cho phép các biến thể của một thành phần được hiển thị.

Có thể kết hợp một số mẫu để tạo các màn hình phức tạp hơn hoặc thậm chí cả trang đầy đủ. Những tập tin này rất linh hoạt, chúng thậm chí có thể được sử dụng trong sản xuất! Mọi thay đổi được thực hiện đối với thư viện mẫu của chúng tôi được trang web của chúng tôi tự động chọn, như tất cả các đánh dấu - cho thư viện hoặc để sản xuất - bắt nguồn từ một tập hợp các mẫu chính tắc.

Design systems will be covered at both Generate New York and San Francisco this year — Các hệ thống thiết kế sẽ được bảo hiểm tại cả hai tạo ra New York và San Francisco trong năm nay

Nhập fractal.

Được tạo bởi Clearleft, Fractal. Giúp bạn xây dựng và tài liệu các thư viện thành phần web và tích hợp chúng vào các dự án của bạn. Trong hướng dẫn này, chúng ta sẽ xem xét kỹ hơn về cách thức hoạt động của nó (tải xuống phiên bản hoàn thành của bản demo tại đây ).

Fractal là mô-đun Node.js được cài đặt qua NPM. Đầu tiên bạn muốn cài đặt mô-đun trên toàn cầu để bạn có thể tạo một dự án mới:

npm install --global @frctl/fractal

Với gói này được cài đặt, tạo một dự án mới:

fractal new project-name

Lệnh này sẽ kích hoạt một hướng dẫn cài đặt hướng dẫn bạn qua quy trình thiết lập. Nó sẽ hỏi bạn về tiêu đề của dự án; tên của các thành phần, tài liệu và thư mục công cộng; Và nếu bạn đang sử dụng Git để kiểm soát phiên bản. Khi những câu hỏi đó hoàn tất, Fractal sẽ cài đặt tất cả các mô-đun cần thiết và thiết lập cấu trúc thư mục giống như được chỉ định.

Nếu bạn muốn bỏ qua cài đặt toàn cầu và tạo dự án theo cách thủ công, các hướng dẫn cài đặt thủ công có thể được tìm thấy tại đây .

Quay nó lên

Bây giờ bạn có một dự án fractal được cài đặt đầy đủ, xoay nó bằng cách bước vào thư mục dự án Tên dự án CD và chạy lệnh đồng bộ fractal. Điều này bắt đầu một máy chủ cục bộ, xem các tệp để thay đổi và tự động bắt đầu duyệtSync:

fractal start --sync

Và giống như vậy, bạn đã có một ví dụ làm việc của Fractal. Mở trình duyệt của bạn lựa chọn và điều hướng đến http: // localhost: 3000 để thấy sự khởi đầu của dự án Fractal mới của bạn. Để tránh yêu cầu mọi người cài đặt Fractal trên toàn cầu, hãy tạo một kịch bản trong bạn Gói.json. mà gọi nhị phân fractal.

 "scripts": {
    "Fractal": "./node_modules/.bin/fractal start --sync"
}

Bây giờ bạn có thể sử dụng NPM chạy fractal. mà không cần phải cài đặt bất cứ thứ gì trên toàn cầu.

Thêm một thành phần.

Bây giờ bạn đã bắt đầu một dự án fractal, đã đến lúc thêm một số thành phần. Các tệp khởi động đi kèm với một thành phần được gọi là 'ví dụ', nhưng chúng ta sẽ thoát khỏi điều đó và tạo một cái mới từ đầu.

Một trong những điều tốt nhất về Fractal là bạn có thể sắp xếp các thành phần của mình theo cách bạn thích bên trong thư mục Thành phần và nó sẽ tự động bắt chước tổ chức đó trong điều hướng thư viện mẫu.

Đối với thành phần đầu tiên, chúng ta sẽ tạo một nút chính mới bên trong một nút thư mục . Để làm điều đó, hãy tạo với một tệp mẫu tại Các thành phần / nút / nút chính / nút chính.HBS . Fractal hỗ trợ các mẫu Tay cầm ra khỏi hộp, vì vậy hãy sử dụng .hbs. Mở rộng tệp:

  & lt; nút class = "nút chính" & gt; {{text}} & lt; / nút & gt;

Các {{bản văn}} chuỗi bên trong thẻ nút là một trình giữ chỗ thay đổi và điều này cho phép bạn sử dụng lại mẫu, truyền trong các giá trị khác nhau cho bản văn từ tập tin dữ liệu.

Để tạo tệp dữ liệu, hãy sử dụng cùng tên đế dưới dạng tệp Tay cầm, nhưng với một tên khác yml. sự mở rộng. Bây giờ Nút chính.config.yml. ngồi bên trong Thành phần / nút / nút chính Thư mục sẽ trông như thế này:

 Tiêu đề: Nút chính
bối cảnh:
    Văn bản: Nhấp vào tôi

Tất cả điều này cùng nhau tạo thành phần mới đầu tiên của bạn, nút chính, thành viên của danh mục nút, với văn bản: 'Nhấp vào tôi'.

Biến thể thành phần.

Fractal hỗ trợ các biến thể của cùng một thành phần, cho phép chúng tôi hiển thị cùng một thành phần với các lớp hoặc thuộc tính sửa đổi khác nhau. Vì vậy, hãy nói rằng chúng tôi muốn có tùy chọn sử dụng nút theo chủ đề tối. Chúng ta có thể tạo một tệp mẫu mới được gọi là Nút chính - Dark.hbs Bên cạnh mẫu gốc của chúng tôi (dấu gạch ngang kép biểu thị các biến thể thành phần này). Trong mẫu này, chúng ta sẽ áp dụng một công cụ sửa đổi mà chúng ta có thể móc vào để đính kèm các kiểu mới.

 & lt; nút lớp = "nút chính" chủ đề dữ liệu = "tối" & gt; {{text}} & lt; / nút & gt;

Bây giờ khi chúng ta viết CSS của mình, chúng ta có thể bao gồm bộ chọn sau để thay đổi mẫu này với các kiểu sửa đổi.

 .primary-not-note [Data-Theme = "Dark"] {}

Biến thể dữ liệu

Giống như chúng ta có thể xác định các biến thể bằng cách tạo nhiều tệp mẫu, chúng ta cũng có thể tạo các biến thể trong dữ liệu của chúng tôi. Chúng ta có thể làm điều này bên trong Nút chính.config.yml. tập tin bằng cách thêm một mảng biến thể.

 Tiêu đề: Nút chính
bối cảnh:
    Văn bản: Nhấp vào tôi
Các biến thể:
- Tên: Tải xuống
    bối cảnh:
Văn bản: Tải xuống ngay
- Tên: Cài đặt
    bối cảnh:
Văn bản: Cài đặt ngay

Điều này sẽ tạo ra các biến thể mới có tên 'Tải xuống' và 'cài đặt', với văn bản khác nhau được truyền vào nút. Một ví dụ thực tế hơn có thể là nếu bạn đang sử dụng điều này tương tự Nút chính.HBS. Mẫu trong fractal cũng như sản xuất. Trong trường hợp này, thay vì tạo một mẫu hoàn toàn mới cho chủ đề tối của bạn, bạn có thể truyền giá trị chủ đề dưới dạng một biến và sử dụng các biến thể dữ liệu để hiển thị tất cả các chủ đề nút khác nhau.

 & lt; nút class = "nút chính" chủ đề dữ liệu = "{{theme}}" & gt; {{text}} & lt; / nút & gt;

Tiêu đề: Nút chính
bối cảnh:
    Văn bản: Nhấp vào tôi
    Chủ đề: Ánh sáng
Các biến thể:
- Tên: Chủ đề tối
    bối cảnh:
Văn bản: Nhấp vào tôi
Chủ đề: Dark

Xử lý các tài sản khác

Fractal cũng sẽ xử lý các tệp khác ngoài đánh dấu và dữ liệu. Bất kỳ CSS, JavaScript, hình ảnh hoặc tài sản khác mà bạn thêm vào thư mục thành phần sẽ được hiển thị trong tab 'Tài sản'. Bạn có thể chỉ định một Readme.md. Tệp cho thành phần để bạn có thể viết ghi chú về cách sử dụng thành phần hoặc liên kết đến các phần khác của tài liệu.

Bước tiếp theo

Lặp lại ví dụ trước cho tất cả các thành phần cốt lõi của bạn tạo ra một danh mục hữu ích của các khối xây dựng chính của trang web của bạn. Nhưng sức mạnh thực sự của một thư viện mẫu đến từ khả năng kết hợp các mảnh này với nhau. Hãy chắc chắn để kiểm tra Tài liệu fractal. Để tìm hiểu cách bạn có thể bắt đầu tạo các thành phần phức tạp hơn bằng cách kết hợp các yếu tố nguyên tử nhỏ hơn để tạo các thành phần lớn hơn.

Thư mục Docs là một nơi tuyệt vời để đưa thông tin hướng dẫn kiểu truyền thống và ghi chú bổ sung. Điều này có thể bao gồm những thứ như tài liệu trên tàu, hướng dẫn về giọng nói và giọng điệu của thương hiệu, danh sách các màu sắc và biến, v.v. Nó theo cùng một điều hướng dựa trên thư mục như các thành phần làm và nếu bạn sắp xếp các tệp của mình trong các thư mục chủ đề, bạn sẽ tìm thấy điều hướng Doc fractal. một làn gió.

Fractal cũng hỗ trợ nhiều nguồn dữ liệu phức tạp hơn. Nếu bạn cần tạo một bộ dữ liệu lớn cho một mẫu hoặc muốn kéo nó từ một số API của bên thứ ba, bạn có thể sử dụng thành phần-name.config.js. Để trả về một đối tượng JavaScript thay cho dữ liệu tệp YML.

Cuối cùng, Fractal cho phép bạn sử dụng một số ngôn ngữ Mẫu khác nhau.Hãy chắc chắn kiểm tra danh sách đầy đủ trong tài liệu của nó.Và hầu hết tất cả, vui chơi!

Đặt vé của bạn để Tạo ra. hôm nay!Trong Newyork Bạn có thể học hỏi từ Mina Markham, người đã xây dựng hệ thống thiết kế cho chiến dịch tổng thống của Hillary Clinton và trong San Francisco. Stephanie Rewis sẽ giải thích cách bạn có thể kiến trúc sư và xây dựng một khung CSS hiện đại cho một 'hệ thống thiết kế sống' ở quy mô doanh nghiệp.

Bài viết này ban đầu được xuất bản trên Net Tạp chí 285, Mua nó ở đây

Tài liệu các hệ thống thiết kế của bạn với Fractal

Nhập fractal.

Quay nó lên

Thêm một thành phần.

Biến thể thành phần.

Biến thể dữ liệu

Xử lý các tài sản khác

Bước tiếp theo

Cách - Các bài báo phổ biến nhất

21 bước để JavaScript siêu tốc độ

Cách xây dựng một trang blog với Gatsby

Thiết kế Avatar có thể chơi được cho một trò chơi video

Anatomy MasterClass: Hoàn thiện số liệu của bạn

Bộ nhớ cache trong booster hiệu suất của BBC

Bố cục linh hoạt thời trang với lưới CSS

Cách chụp ánh sáng bằng dầu

Nguyên mẫu một nút hành động nổi trong Pixate

Thể loại