Nền tảng
Layout, lớp, nét
Đã đặc tảBa nhóm nhỏ nhưng hay bị vi phạm nhất. Ba breakpoint và không có cái thứ tư. Năm chiều rộng layout là tối đa, không phải cố định. Bảy bậc layer cách nhau mười. Bốn độ dày nét, trong đó focus là 3px và không thương lượng.
Render
Breakpoint — ba, và chỉ ba
Biến breakpoint là giá trị tài liệu: CSS không giải var() bên trong @media, nên media query phải viết bằng con số. Thước dưới đây đọc chiều rộng viewport thật của trình duyệt bạn lúc chạy, cạnh ba ngưỡng đọc lại từ token.
Viewport hiện tại
Unknownsmall / medium / wide
Unknown / Unknown / UnknownToken
Chiều rộng layout — tối đa, không cố định
sidebarUnknowndetail-panelUnknowndialogUnknownreadingUnknowncontent-maxUnknownreading 45rem là một ràng buộc trợ năng, không phải thẩm mỹ — ở cỡ body cho khoảng 70–80 ký tự, đúng vùng dễ đọc. Đừng nới nó ra vì màn hình còn chỗ.
Token
Layer — bảy bậc, cách nhau mười
| Layer | z-index |
|---|---|
base | 0 |
sticky | 10 |
dropdown | 20 |
overlay | 30 |
dialog | 40 |
toast | 50 |
tooltip | 60 |
Thứ tự này là một mệnh đề về hành vi, không phải về hình: toast trên dialogvì một thông báo phải đọc được cả khi một dialog đang mở. Khoảng cách mười là chỗ cho tương lai — đừng dùng khoảng trống đó bằng cách gõ z-index: 25 trong một component.
Token
Stroke — bốn độ dày
| Token | Giá trị |
|---|---|
--nf-foundation-stroke-hairline | Unknown |
--nf-foundation-stroke-emphasis | Unknown |
--nf-foundation-stroke-focus | Unknown |
--nf-foundation-stroke-icon | Unknown |
Ring dày 3px cách phần tử 2px — cả hai con số cùng làm một việc: làm ring đọc ra là ring, không phải là một viền dày hơn. stroke.icon 1.5px không nằm trong thang 1/2/3 vì nó không phải viền, nó là nét vẽ bên trong một glyph.
Quy tắc
Do / Don't
| Do | Don't | Vì sao |
|---|---|---|
| Compile media query ở 640, 960, 1280 | Thêm một ngưỡng vì layout "vỡ ở 1100" | Layout vỡ ở 1100 là vấn đề của layout; A7 |
| Xem chiều rộng là tối đa | Đặt chiều rộng cố định | Cố định thì tràn ở viewport hẹp |
| Dùng --nf-foundation-layer-* | Gõ z-index trần | Một 9999 thắng tới khi có cái thứ hai |
| Giữ ring 3px và offset 2px | Làm ring mảnh cho "gọn" | A16 đã được đo; làm mảnh là phá một nghĩa vụ đã xác minh |
| Giữ reading ở 45rem | Nới cột văn xuôi vì còn chỗ | Dòng dài làm mắt mất dòng |
Chưa quyết
Open questions
| Question | Owner | Resolves when |
|---|---|---|
| Hai ngưỡng 1200px và 1600px của kit ánh xạ về đâu? | nexoboxvn@gmail.com | N03.3. Ánh xạ về 1280, hoặc một ADR thêm breakpoint thứ tư |
| Có cần token lưới — cột, gutter — không? | nexoboxvn@gmail.com | Một bề mặt cần lưới thật |
| --nf-foundation-layout-* có nên có bản min bên cạnh bản max không? | nexoboxvn@gmail.com | Một panel cần sàn chiều rộng để nội dung không vỡ |