Show HN: CSS tối giản cho các phù thủy, 'magick.css'

 (css.winterveil.net)
7 điểm bởi GN⁺ 2024-03-24 | 1 bình luận | Chia sẻ qua WhatsApp

Những điều cơ bản về MAGICK.CSS

  • magick.css là một framework CSS tối giản, dễ dùng và dễ hiểu, (hầu như) không cần class.
  • Nó gồm một tệp duy nhất, và mọi tuỳ chọn đều được chú thích sẵn.
  • Mục tiêu là đạt được diện mạo thanh lịch, vui nhộn như phép thuật, đồng thời tối đa hoá khả năng đọc và truyền tải thông tin.

Cách sử dụng MAGICK.CSS

  • Nên dùng magick.css cùng với normalize.css.
  • Có thể áp dụng vào dự án bằng cách thêm hai dòng vào HTML <head> thông qua CDN.
  • Hoặc có thể tải tệp magick.css xuống và nhúng vào HTML <head>.
  • Với các dự án JS, có thể cài bằng npm install và dùng bằng cách import trong mã.
  • Khi dùng cùng tài liệu HTML5, 99% trường hợp không cần class và vẫn có thể sử dụng một số tính năng thú vị.

Bố cục

  • Để cấu trúc trang thành các cột responsive và dễ đọc, có thể bọc toàn bộ nội dung trong thẻ <main>, và dùng thẻ <section> để chia nội dung dài thành các phần.
  • Có thể dùng thẻ <aside> để thêm thông tin bên lề; qua side note, bạn có thể mở rộng luận điểm hoặc cung cấp thêm ngữ cảnh.

Typography

  • Trình bày ví dụ về typography mà magick.css cung cấp.
  • Các tiêu đề từ <h4> trở xuống không được style sẵn; nếu cần, người dùng có thể tự áp dụng style.

Nội dung có cấu trúc

  • Danh sách và bảng được giữ đơn giản để không làm phân tán sự chú ý khỏi nội dung.

Biểu mẫu và đầu vào

  • Các phần tử tương tác có thể được dùng độc lập hoặc như một phần của biểu mẫu.
  • Các ví dụ gồm nút bấm, ô nhập văn bản, checkbox, radio button, fieldset, v.v.

Media và figure

  • Các phần tử media như hình ảnh và video có thể được dùng độc lập hoặc trình bày dưới dạng figure để tăng cấu trúc và sự thanh lịch cho nội dung, đồng thời thêm ngữ cảnh bằng caption.

Mã, trích dẫn và định dạng sẵn

  • Mã có thể được hiển thị inline hoặc trong block riêng; trích dẫn được thêm bằng thẻ <blockquote>.

Tính năng bổ sung

  • Có thể dùng các tính năng bổ sung như side note và đánh số tự động; các tính năng này yêu cầu class đặc biệt nên không nằm trong các tính năng chính của magick.css.

Ý kiến của GN⁺

  • magick.css mang đến cho người dùng một cách giảm bớt độ phức tạp của CSS và đơn giản hoá việc thiết kế trang web.
  • Framework này có thể đặc biệt phù hợp với các website thiên về văn bản như tài liệu hoặc blog, đồng thời giúp người dùng tập trung vào nội dung.
  • Tuy nhiên, nó có thể bị hạn chế với các nhà phát triển muốn xây dựng những tính năng tương tác phức tạp hoặc ứng dụng web động.
  • Các framework CSS khác cung cấp tính năng tương tự gồm có Bootstrap, Foundation, Bulma, v.v.; mỗi framework có thể được chọn tuỳ theo trường hợp sử dụng và sở thích cụ thể.
  • Khi áp dụng magick.css, cần cân nhắc yêu cầu thiết kế của dự án và các ràng buộc của framework, đồng thời cân bằng tốt giữa sự đơn giản và tính dễ sử dụng.

Bài viết liên quan

1 bình luận

 
GN⁺ 2024-03-24
Ý kiến trên Hacker News

  • Một ý kiến cho rằng đây là ví dụ điển hình về việc phông chữ hòa hợp rất tốt với phong cách tổng thể, đến mức gần như không gây chú ý.

    "Đây là một ví dụ tuyệt vời về việc phông chữ bổ trợ cho phong cách, nó hợp đến mức gần như không ai để ý."

  • Đánh giá hệ thống thiết kế và cách nó được trình bày là đẹp mắt, đồng thời thích cả sự chú ý đến các chi tiết như chiều cao dòng và độ đậm nhạt. Có kèm liên kết dành cho những người quan tâm đến mã nguồn. Họ cũng bày tỏ chút tiếc nuối vì không có checkbox và radio button tùy biến nên làm giảm cảm giác nhập vai, nhưng nói rằng nó đã truyền cảm hứng để họ tạo một blog.

    "Khen ngợi một hệ thống thiết kế đẹp và phần trình bày nổi bật nhờ sự chăm chút đến chi tiết. Tiếc là không có checkbox và radio button tùy biến. Nó đã truyền cảm hứng cho tôi làm một blog."

  • Chỉ ra một lỗi gõ nhỏ trong ví dụ đơn giản, nói rằng cần đóng main chứ không phải header.

    "Chỉ ra lỗi gõ trong mã ví dụ: cần đóng main thay vì header."

  • Nhắc đến sức hấp dẫn của các trang cá nhân mang cảm giác tài liệu LaTeX, đồng thời đánh giá cao phong cách website siêu tối giản của các giáo sư đại học thời xưa. Họ cũng bày tỏ mong muốn blog cá nhân được ưa chuộng hơn.

    "Nhắc đến sức hấp dẫn của phong cách tài liệu LaTeX và các website siêu tối giản. Mong blog cá nhân trở nên phổ biến hơn."

  • Đề xuất rằng có lẽ bạn sẽ thích Tufte CSS, kèm theo một liên kết liên quan.

    "Một ý kiến đề xuất Tufte CSS và cung cấp liên kết liên quan."

  • Cho rằng phông chữ script viết hoa gây hại nghiêm trọng đến khả năng đọc, đồng thời khuyên nên tránh dùng chữ in hoa và thay vào đó dùng kích thước, độ đậm và chữ nghiêng để nhấn mạnh.

    "Chỉ ra vấn đề về khả năng đọc của phông chữ script viết hoa. Khuyến nghị dùng kích thước, độ đậm và chữ nghiêng như các cách nhấn mạnh thay thế."

  • Một phản hồi tích cực nói rằng phông chữ rất dễ đọc, đáng yêu nhưng không quá đà nên rất cuốn hút.

    "Đánh giá tích cực về tính dễ đọc và sức hút của phông chữ."

  • Có ý kiến cho rằng khi phông chữ từ xa bị chặn, văn bản bị render bằng Comic Sans và tạo ấn tượng không tốt.

    "Ý kiến tiêu cực về việc bị render bằng Comic Sans khi phông chữ từ xa bị chặn."

  • Bày tỏ mong muốn có nhiều framework CSS tối giản hơn, đặc biệt là vì rất khó tìm được những phong cách có cá tính riêng.

    "Thể hiện nhu cầu về các framework CSS tối giản có cá tính riêng."

  • Nói rằng họ thích thiết kế này và sau khi xem bản dịch tiếng Trung thì tò mò muốn biết ý kiến của người đọc được tiếng Trung. Họ cũng nhắc rằng các lựa chọn phông chữ bị hạn chế hơn so với tiếng Anh, đồng thời chỉ ra rằng ảnh cũng được dùng khác đi.

    "Thể hiện thiện cảm với thiết kế và sự tò mò về độ dễ đọc của bản dịch tiếng Trung. Đề cập đến sự hạn chế của lựa chọn phông chữ và việc sử dụng ảnh khác đi."