hệ thống thiết kế rastrillo

Tổng quan mọi thứ hệ thống thiết kế cung cấp. Chủ đề: day. Ngôn ngữ: Tiếng Việt.

Ứng dụng rastrillo nhận hết những thứ này ngay ngày đầu, nhưng ai cũng dùng được hệ thống thiết kế. Được tăng cường dần bằng JavaScript, nhưng không bắt buộc JavaScript.

Các tệp stylesheet

tokens.css là phần cấu trúc: các lớp component, bố cục, và các thang cho chữ, khoảng cách và bo góc. Các giá trị trong đó là tham chiếu, được đặt ở nơi khác. themes/<name>.css là màu sắc, họ chữ và hình khối: một khối :root duy nhất, nơi mỗi màu được khai báo một lần dưới dạng cặp light-dark().

Các tệp script

rastrillo.js là lớp cải tiến tăng dần: hỏi vòng các fragment, trạng thái bận, đóng nhẹ. select.js và datetime.js là các phần cải tiến — mỗi phần nằm im cho tới khi một control tự đăng ký, và mỗi phần đều xoá riêng được.

Mỗi tệp nặng bao nhiêu

Kích thước tệp của từng thành phần.

• tokens.cssCấu trúc: mọi lớp component, mọi thang đo, và không một giá trị màu nào. Cùng một tệp dưới mọi chủ đề.122033 byte
• theme-day.cssMàu sắc, họ chữ và hình khối cho chủ đề day: một khối :root duy nhất, mỗi màu khai báo một lần dưới dạng cặp light-dark().10828 byte
• theme-plain.cssMàu sắc, họ chữ và hình khối cho chủ đề plain: một khối :root duy nhất, mỗi màu khai báo một lần dưới dạng cặp light-dark().10286 byte
• theme-signal.cssMàu sắc, họ chữ và hình khối cho chủ đề signal: một khối :root duy nhất, mỗi màu khai báo một lần dưới dạng cặp light-dark().11083 byte
• rastrillo.jsLớp cải tiến tăng dần: hỏi vòng fragment, trạng thái bận và đóng nhẹ. Mọi ứng dụng được tạo khung đều nhận nó.16364 byte
• select.jsCombobox có tìm kiếm của field-select. Nằm im cho tới khi một select đăng ký bằng data-rst-select, và xoá riêng được.11919 byte
• datetime.jsNhập ngày bằng ngôn ngữ tự nhiên. Nằm im cho tới khi một trường đăng ký bằng data-rst-date hoặc data-rst-time, và xoá riêng được.76584 byte
• calendar.jsLưới tháng mà nút lịch của trường đó mở ra. Nằm im cho tới khi datetime.js hỏi xin một bảng, và xoá riêng được: thiếu nó, nút quay về bộ chọn của chính trình duyệt.22725 byte

Một ứng dụng mới nhận tổng cộng 260453 byte CSS và JavaScript: tokens.css, một chủ đề, và các script.

Trong một ứng dụng rastrillo mới

rastrillo new ghi những tệp này vào thư mục static của ứng dụng và liên kết chúng từ layout, tokens.css trước. Từ đó chúng là của bạn: sửa chúng, hoặc xoá thứ bạn không dùng.

rastrillo new --theme=day myapp

Chủ đề được ghim hai lần. --theme quyết định chủ đề có sẵn nào được chép sang static/theme.css, và điều đó được ghi lại lúc sinh ứng dụng.

const vendoredTheme = "day"

Dùng mà không cần framework

Các tên ở trên chính là liên kết. Lấy tokens.css và một chủ đề là bạn có trọn hệ thống hình ảnh: lớp mộc, HTML thường, không cần bước build.

Nâng cấp

Cái bẫy nên biết trước khi nó lấy mất của bạn một buổi chiều: tokens.css được chép vào thư mục static của ứng dụng lúc tạo khung rồi đóng băng ở đó, trong khi các partial mà nó tạo kiểu vẫn tiếp tục nâng cấp cùng module. Một ứng dụng có thể lặng lẽ chạy mã đánh dấu mới trên CSS cũ. Hãy chép lại tokens.css khi nâng cấp, cùng với chủ đề và các script.

rastrillo doctor sẽ so các tệp đã đóng băng của ứng dụng với các tệp trong module và đề nghị chép lại.