Bắt đầu

Ứ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, đóng nhẹ, kéo công tắc. busy.js là quy tắc bận. anchor.js giữ menu thả xuống trong màn hình ở nơi CSS không làm được. 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ính bằng KiB. Khách truy cập tải về bản đã nén gzip.

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ủ đề.281 như khi viết · 73 khi nén gzip · 21 khi nén gzip và bỏ chú thích
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().27 như khi viết · 7,3 khi nén gzip · 1,7 khi nén gzip và bỏ chú thích
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().18 như khi viết · 4,2 khi nén gzip · 1,1 khi nén gzip và bỏ chú thích
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().18 như khi viết · 4,6 khi nén gzip · 1,2 khi nén gzip và bỏ chú thích
shell.cssHiệu ứng trượt giữa các trang trên điện thoại, cho shell sidebar và console. Xoá được cùng với shell.js.4,2 như khi viết · 1,1 khi nén gzip · 0,5 khi nén gzip và bỏ chú thích
rastrillo.jsLớp cải tiến tăng dần: hỏi vòng fragment, đóng nhẹ và kéo công tắc. Mọi ứng dụng được tạo khung đều nhận nó.19 như khi viết · 7,2 khi nén gzip · 2,6 khi nén gzip và bỏ chú thích
busy.jsQuy tắc bận: khi biểu mẫu đang gửi, nút của nó hiện vòng quay ít nhất 650ms và từ chối lần gửi thứ hai; quay lại thì nút trở về như cũ. Mọi ứng dụng được tạo khung đều nhận nó.15 như khi viết · 5,3 khi nén gzip · 1,3 khi nén gzip và bỏ chú thích
live.jsTrang trực tiếp: các phần tự cập nhật khi máy chủ báo dữ liệu của chúng đã đổi, và các biểu mẫu lưu ngay tại chỗ. Không làm gì cho đến khi trang có thẻ meta rastrillo-live, và có thể xoá riêng.29 như khi viết · 10,0 khi nén gzip · 5,0 khi nén gzip và bỏ chú thích
light.jsÁnh sáng mà các kiểu chiều sâu đọc: bóng đổ theo giờ, và một lớp ánh trên nút dưới con trỏ. Xoá nó để có thiết kế tĩnh.11 như khi viết · 4,1 khi nén gzip · 2,1 khi nén gzip và bỏ chú thích
anchor.jsGiữ menu của danh sách thả xuống trong màn hình trên các trình duyệt không có định vị neo CSS. Không làm gì ở nơi đã có: hãy xoá nó khi mọi trình duyệt bạn hỗ trợ đều có.3,2 như khi viết · 1,4 khi nén gzip · 0,6 khi nén gzip và bỏ chú thích
shell.jsĐiều hướng trên điện thoại cho shell sidebar và console: hiệu ứng trượt giữa các trang, nút Quay lại dùng lại lịch sử, và tiêu điểm trở về đúng mục bạn vừa rời. Xoá riêng được.8,0 như khi viết · 3,2 khi nén gzip · 1,4 khi nén gzip và bỏ chú thích
transition.jsNgăn ghi lỗi khi hiệu ứng chuyển trang bị bỏ qua trên các trang column, stage và topbar. Các trang sidebar và console không cần tệp này.0,9 như khi viết · 0,4 khi nén gzip · 0,4 khi nén gzip và bỏ chú thích
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.55 như khi viết · 18 khi nén gzip · 8,0 khi nén gzip và bỏ chú thích
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.76 như khi viết · 24 khi nén gzip · 11 khi nén gzip và bỏ chú thích
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.22 như khi viết · 7,1 khi nén gzip · 3,1 khi nén gzip và bỏ chú thích

Một ứng dụng mới nhận 543 KiB CSS và JavaScript như khi viết, 160 KiB khi nén gzip: 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=signal 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 = "signal"

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: thuộc tính trên HTML thường, không cần bước build.

Liên kết theo thứ tự này, tokens.css trước:

<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="theme-signal.css">

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.