Automatic.css – CSS Framework for WordPress

Automatic.css

Automatic.css (ACSS)là một CSS Utility Framework toán học thông minh dành riêng cho WordPress, hoạt động dưới dạng plugin để tự động hóa toàn bộ hệ thống thiết kế (Design System) của website.

Thay vì tạo kiểu thủ công cho từng phần tử bằng ID, ACSS sử dụng hệ thống các biến toàn cục (Global Tokens). Hệ thống này tự động tính toán kích thước font chữ, khoảng cách, và bố cục chuẩn xác theo tỷ lệ vàng toán học, giúp website đồng bộ 100%.

Các tính năng cốt lõi

  • Tự động hóa phản hồi (Fluid Typography & Spacing): Sử dụng hàm clamp()calc() của CSS để tự động co giãn font chữ và khoảng cách mượt mà theo mọi kích thước màn hình mà không cần cấu hình breakpoint thủ công.
  • Hệ thống màu sắc OKLCH mới: Cung cấp khả năng hiển thị màu sắc chính xác theo cảm nhận thị giác của con người, tự động tạo ra các sắc độ (shades) hoàn hảo cho chế độ Sáng/Tối (Light/Dark Mode) thông qua hàm light-dark().
  • Thiết kế dạng lưới thông minh (Auto Grids): Tạo bố cục Grid nhanh chóng chỉ với một class duy nhất (ví dụ: ?flex-grid), tự động xuống dòng và co giãn linh hoạt trên thiết bị di động.
  • Tối ưu hóa khả năng tiếp cận (Accessibility): Tích hợp sẵn các tính năng như tự động mở rộng vùng nhấp chuột cho thẻ bao ngoài (Clickable Parent) và tạo kiểu Focus đường viền chuẩn WCAG.
  • Chuyển đổi REM tự động (Automatic REM Conversion): Lập trình viên chỉ cần gõ giá trị Pixel kèm hậu tố mong muốn, hệ thống sẽ tự động chuyển sang đơn vị REM để tối ưu SEO và hiển thị.

Các Page Builder hỗ trợ tốt nhất

Kể từ thế hệ 4.x, ACSS định hướng trở thành một framework tập trung vào biến (Variable-first) và BEM-first, đồng thời tối ưu hóa sâu cho các công cụ xây dựng trang hiện đại:

  • Etch: Môi trường phát triển trực quan flagship do chính đội ngũ phát triển ACSS xây dựng.
  • Bricks Builder: Trình dựng trang tối ưu mã nguồn tốt nhất cho WordPress hiện nay.
  • Gutenberg: Trình soạn thảo block mặc định của WordPress.
    (Lưu ý: Các phiên bản cũ từng hỗ trợ Oxygen, Breakdance, GenerateBlocks nhưng đã bị ngừng tích hợp từ bản 4.x để tối ưu hiệu suất và tinh gọn framework).

We will be happy to hear your thoughts

Leave a reply


Nhanblog
Logo