Góc Nhìn Mới — bản thiết kế mobile
Bản dựng giao diện 16 màn hình của mạng xã hội Góc Nhìn Mới, viết bằng
HTML + Tailwind. Không build step, không phụ thuộc — mở file là chạy, deploy
tĩnh là xong.
Chạy thử
python3 serve.py 3000 .
Mở http://localhost:3000 — xem ở khung 375–390px cho đúng thiết kế.
Cấu trúc
| |
|---|
*.html | 16 màn hình, dùng utility Tailwind |
assets/css/tailwind.css | CSS tĩnh đã biên dịch, chạy không cần Node |
tailwind.config.js | cấu hình khớp site thật, dán thẳng vào Next.js được |
tw/ | bộ công cụ sinh CSS từ bản đồ class |
design-css-goc/ | bản CSS viết tay trước khi chuyển — giữ để đối chiếu |
16 màn hình
Tab chính — Trang chủ · Nghe & Xem · Khám phá · Cá nhân
Trang nội dung — Chi tiết bài viết · Chi tiết địa điểm · Khám phá địa điểm ·
Photo · Bảng xếp hạng
Chuyên mục — Mới nhất · Hot hôm nay · Trà đàm · Góc mở · Quan điểm ·
Spotlight · Luận cổ suy kim
Ba cỡ màn
| bề ngang | bố cục |
|---|
| < 768px | điện thoại: khung 480px, header + thanh tab dưới |
| 768–1023px | máy tính bảng: khung 813px, nội dung xếp như bản web (thẻ hai cột), bộ khung vẫn của điện thoại — header có hamburger, thanh tab dưới |
| 1024–1179px | web hai cột: cột điều hướng trái 220px + nội dung |
| ≥ 1180px | web ba cột: thêm cột phụ phải 280px, khung tối đa 1280px |
Bố cục web khoá trong lớp .v-web trên <body> — 14/16 trang mang lớp này.
bai-viet.html và ca-nhan.html chưa chuyển, ở màn rộng vẫn là khung 480px.
Hệ thiết kế
Token lấy từ site production cdn.gocnhinmoi.com, không đặt lại:
| |
|---|
| Màu thương hiệu | primary-800 = #B80001 |
| Thang màu | primary-50 … primary-950 |
| Font | Noto Sans (var(--font-notosans)) |
| Khung nội dung | max-w-shell = 480px |
Bo góc — cố ý ghi đè mặc định Tailwind
Nếu để mặc định thì mọi thẻ lệch 2–4px so với thiết kế:
| lớp | Tailwind mặc định | ở đây |
|---|
rounded-card | — | 4px |
rounded-md | 6px | 8px |
rounded-lg | 8px | 12px |
rounded-full | 9999px | 999px |
Khi port sang Next.js
- Bỏ
assets/css/tailwind.css đi, dùng Tailwind thật.
- Copy
tailwind.config.js vào dự án.
- Markup giữ nguyên — không phải sửa.
Riêng phần @layer components trong tailwind.css (189 khối) thì mang theo:
đó là những thứ utility không diễn đạt được — ::before có content,
@keyframes, selector ngữ cảnh như .card--video .card__body,
env(safe-area-inset-*), scroll-snap-type, ::-webkit-scrollbar.
Lưu ý khi sửa markup
Markup giữ lại một số tên class cũ bên cạnh utility. Đừng xoá:
- 48 class JavaScript bám vào —
card, chip, ptab, post-row,
drawer__link, is-open, is-active…
- 187 class được CSS tầng components dùng làm ngữ cảnh
Xoá đi thì hoặc tương tác chết, hoặc bố cục vỡ mà không rõ nguyên nhân.
Sinh lại CSS sau khi sửa
Sửa thiết kế ở design-css-goc/, rồi:
cd tw && python3 apply.py map.json ../design-css-goc ..
Công cụ sẽ dịch lại class sang utility và sinh lại assets/css/tailwind.css.
Gặp class không dịch được thì nó dừng và báo, không ghi file nửa vời.
Đối chiếu với bản CSS gốc
So từng thuộc tính computed style trên 7.477 phần tử / 16 trang:
| |
|---|
| Tổng điểm lệch | 859 |
Do đổi font (bề rộng chữ, vị trí căn giữa, đơn vị ch) | 807 |
| Còn lại | 52 |
52 điểm còn lại đều là quy ước Tailwind, không phải sai thiết kế:
- 44 — preflight bỏ đệm mặc định của
button/input
- 3 —
repeat(2, 1fr) viết thành repeat(2, minmax(0,1fr))
- 2 —
aspect-ratio: 400/400 viết thành 1/1
- 2 —
align-items: end viết thành flex-end
- 1 —
max-w-[30ch] co lại vì ch phụ thuộc font
CSS: 97.808 → 47.147 ký tự.
