Automatic.css Cheat Sheet – Dành cho BricksBuilder
Tra cứu nhanh các class & biến thường dùng của AutomaticCSS (ACSS). Tổng hợp và tóm lược từ tài liệu chính thức.
1. SPACING – Khoảng cách
| Nhóm | Cú pháp / Ví dụ | Chức năng | Ghi chú |
|---|---|---|---|
| Spacing Variables | --space-xs → --space-xxl | Biến khoảng cách dùng cho margin, padding, gap, line-height… | Fluid scale, đồng bộ toàn site |
| Margin Classes | .margin--top--m, .margin--bottom--l | Thêm khoảng cách ngoài phần tử | x = trái+phải, y = trên+dưới |
| Padding Classes | .padding--l, .padding--x--m | Thêm khoảng cách trong phần tử | Dựa theo hệ T-shirt size |
| Section Padding | .section--padding--m | Giữ gutter & rhythm ngang nhất quán | Dùng cho section lớn |
| Gap Classes | .gap--s, .gap--l | Khoảng cách giữa child (grid/flex) | Override dễ dàng trong grid |
2. LAYOUT & GRID – Bố cục và lưới
| Nhóm | Cú pháp / Ví dụ | Chức năng | Ghi chú |
|---|---|---|---|
| Grid chuẩn | .grid--2, .grid--3 | Chia đều cột con trong grid | Dựa trên display:grid |
| Auto Grids | .grid--auto-3 → .grid--auto-12 | Tự động chia cột | Auto-fit, responsive |
| Ratio Grids | .grid--auto-2-3, .grid--auto-3-2 | Lưới tỉ lệ hình/text | Phù hợp layout media |
| Variable Grid | .variable-grid | Tùy biến cột bằng custom props | Dùng recipe riêng |
| Flex Grid | .flex-grid, .flex--center | Layout linh hoạt, số lượng item không cố định | Dùng cho card list |
| Auto Alternating | .auto-alt-grid | Tự đảo vị trí (hình trái/phải) | Landing pages |
| Content Grid | .content-grid | Bố cục chia vùng dọc (zones) | Đa dụng cho section dài |
3. TYPOGRAPHY – Kiểu chữ
| Nhóm | Cú pháp / Ví dụ | Chức năng | Ghi chú |
|---|---|---|---|
| Kích thước chữ | .text--xs → .text--xxl | Điều chỉnh cỡ chữ | Fluid typography, theo scale |
| Độ đậm (weight) | .text--400, .text--700 | Font-weight | |
| Kiểu chữ | .text--italic | Font-style | |
| Gạch chân / Trang trí | .text--underline, .text--line-through | Text-decoration | Có biến thể wavy, dotted |
| Chuyển đổi chữ | .text--uppercase, .text--capitalize | Text-transform | |
| Căn chỉnh | .text--center, .text--justify | Text-align | |
| Fluid Text | (Auto) | Tự co giãn theo viewport | Config trong Dashboard |
| Line Length | (Dashboard) | Giới hạn chiều rộng dòng | Cải thiện khả năng đọc |
4. COLORS – Màu sắc
| Nhóm | Cú pháp / Ví dụ | Chức năng | Ghi chú |
|---|---|---|---|
| Màu nền | .bg--base, .bg--primary | Đặt màu nền theo palette | Shade: ultra-light → ultra-dark |
| Màu chữ | .text--light, .text--dark | Đặt màu chữ | Tự đổi foreground khi nền thay đổi |
| Màu ngữ nghĩa | .bg--success, .text--warning | Màu trạng thái | Semantic colors |
| Tự động phối màu | (Auto Color Relationships) | Tự đảo màu chữ theo nền | Giữ contrast chuẩn |
| Biến màu | --base, --primary-dark | Dùng trong custom CSS | Override dễ |
5. BORDERS, RADIUS & SHADOWS
| Nhóm | Cú pháp / Ví dụ | Chức năng | Ghi chú |
|---|---|---|---|
| Bo góc (Radius) | .radius--s, .radius--circle | Tạo bo tròn | Theo scale |
| Viền (Border) | .border--base, .border--light | Áp dụng màu viền | |
| Bóng đổ | .shadow--s, .shadow--xl | Thêm độ sâu |
6. COMPONENTS – Thành phần UI
| Nhóm | Cú pháp / Ví dụ | Chức năng | Ghi chú |
|---|---|---|---|
| Buttons | .btn--primary, .btn--outline | Nút theo hệ màu | Có hover/focus mặc định |
| Cards | .card, .card--shadow | Khung nội dung chuẩn | Mix radius/shadow dễ |
| Forms | (Auto styled) | Style form đồng nhất | Bật trong Dashboard |
7. HELPERS – Tiện ích hỗ trợ
| Nhóm | Cú pháp / Ví dụ | Chức năng | Ghi chú |
|---|---|---|---|
| Breakout | .breakout--full, .breakout--wide | Phần tử tràn container | Dùng cho banner/media |
| List Reset | .list--none | Xóa style mặc định list | Có recipe @list-none; |
| Display / Position | .d--flex, .pos--relative | Điều khiển hiển thị | Dễ phối hợp layout |
| Focus | .focus--primary, .focus-parent | Hiệu ứng focus | Hỗ trợ accessibility |
| Clickables | .clickable-parent | Cho phép click toàn khối | Thường dùng cho card/box |
8. RESPONSIVE SYSTEM
| Nhóm | Cú pháp / Ví dụ | Chức năng | Ghi chú |
|---|---|---|---|
| Breakpoint Prefixes | @xs, @m, @l, @xl | Áp dụng class theo kích thước | Ví dụ .pad--l@m |
| Fluid Values | (Auto) | Tự co giãn giữa breakpoint | Tính toán sẵn theo scale |
| Container Width | (Dashboard) | Max width section | Ảnh hưởng grid/gutter |
9. VARIABLES – Biến toàn hệ thống
| Nhóm | Ví dụ | Mô tả |
|---|---|---|
| Spacing | --space-xs → --space-xxl | Khoảng cách toàn hệ thống |
| Colors | --base, --primary, --accent | Màu và sắc độ |
| Typography | --text-m, --h1, --h2 | Cỡ chữ cơ bản |
| Radius / Shadow | --radius-s, --shadow-xl | Bo góc & bóng đổ |
| Container Width | --container-max, --content-max | Giới hạn chiều rộng nội dung |
10. NGUỒN THAM KHẢO
- Trang chủ tài liệu chính thức
- Spacing Variables · Grid Classes · Text Classes · Color System · Buttons · Helpers
