- magick.css là một CSS framework gần như không dùng class, được cung cấp dưới dạng một tệp duy nhất, hướng tới phong cách tài liệu web giống “sổ tay của phù thủy”: dễ đọc và truyền tải thông tin tốt
- Hoạt động trên mọi kích thước màn hình và có thể dùng không cần JavaScript, nên dễ áp dụng ngay cho tài liệu tĩnh hoặc các trang HTML nhẹ
- Có thể cài đặt qua CDN, nhúng tệp trực tiếp hoặc import bằng npm; tài liệu cũng hướng dẫn cấu hình dùng cùng
normalize.css
- Cấu trúc cơ bản là các cột dễ đọc xoay quanh
và, đồng thời có thể gắn phần giải thích bổ sung bên cạnh nội dung bằng `` và sidenote
- Framework style hóa hầu hết các phần tử HTML cơ bản, nhưng những tính năng cần cấu trúc như sidenote và số dòng mã được cung cấp bằng các class riêng
Mục tiêu và tính chất của magick.css
- magick.css là một CSS framework tối giản và phần lớn không dùng class
- Được gói trong một tệp duy nhất, với các chú thích trong CSS để bạn có thể theo dõi lý do đằng sau từng lựa chọn
- Về mặt thị giác, nó tạo ra bầu không khí ma thuật vừa thanh nhã vừa tinh nghịch, đồng thời ưu tiên khả năng đọc và truyền đạt thông tin
- Duy trì giao diện và chức năng trên mọi thiết bị, mọi kích thước màn hình, và hoạt động không cần JavaScript
- Lấy cảm hứng từ LaTeX, các sách luật TTRPG cũ, concrete.css, Tufte CSS, và tinh thần “usability as design” của chủ nghĩa brutalism
Cài đặt và cách sử dụng
- Cách nhanh nhất để thử là thêm 2 stylesheet CDN vào HTML ``
- Bạn cũng có thể tải tệp
magick.css từ repository và nhúng như CSS thông thường
- Trong dự án JavaScript, cài bằng npm rồi import
npm install normalize.css magick.css
import 'normalize.css'
import 'magick.css'
- Cấu hình 99% không dùng class nên được thiết kế để dễ áp dụng cho cả các tài liệu HTML5 hiện có
Layout tập trung vào việc đọc
- Để tạo cột responsive, nên bọc toàn bộ nội dung bằng
và chia các bài viết dài bằng
- Cấu trúc tài liệu thông thường là đặt
, nhiều và bên trong
- Ngay cả khi không theo cấu trúc này, bạn vẫn có thể dùng magick.css chỉ cho typography và các component đã được style
- Thông tin phụ được biểu diễn bằng thẻ ``
- Khi muốn thêm ngữ cảnh bổ sung giữa phần nội dung chính, hãy dùng sidenote; số thứ tự sẽ được đánh tự động
Style cho các phần tử HTML cơ bản
- Typography bao gồm tiêu đề, đoạn văn, liên kết, nhấn mạnh, gạch chân, chữ nhỏ, inline code, v.v.
- magick.css không style các heading thấp hơn ``
- Các heading cấp thấp thường được xem là dùng cho mục đích đặc thù hơn là cấu trúc phân cấp
- Người dùng có thể tự style nếu cần
- Danh sách được giữ đơn giản để không làm gián đoạn nội dung
- Danh sách không thứ tự
- Danh sách có thứ tự
- Danh sách mô tả
- Bảng dùng phong cách rõ ràng, ngắn gọn để tập trung vào dữ liệu
- Form và các phần tử nhập liệu có thể dùng riêng lẻ hoặc bên trong form
- Vì ô nhập văn bản có nhiều mục đích sử dụng, framework không áp đặt mạnh về kích thước hay bố cục
- Label của checkbox và radio button được kỳ vọng đặt sau input
- Form được style để thu hút sự chú ý của người dùng, giống một tờ ghi chú viết tay
Media, mã nguồn và trích dẫn
- Hình ảnh và video có thể được đặt riêng hoặc đưa vào `` để hiển thị cùng caption
- `` đứng riêng sẽ hiển thị ở kích thước tự nhiên khi có đủ không gian, không bị kéo giãn hay méo
- Dùng
và có thể làm media nổi bật hơn và bổ sung ngữ cảnh
- Với mã nguồn inline, dùng
; với khối mã lớn, dùng cấu trúc bao quanh ``
- Các đoạn mã cũng có thể hiển thị dưới dạng figure
- Trích dẫn dùng ``
- Ghi nguồn được thêm bằng `` bên trong blockquote
- Văn bản cần giữ định dạng quan trọng, như thơ, có thể được bọc bằng ``
Các tính năng dùng class riêng
- Một số tính năng cần class đặc biệt nên được tách khỏi cơ chế classless cốt lõi của magick.css
- Để đưa sidenote vào phần nội dung, hãy thêm cả vị trí tham chiếu và nội dung sidenote
Sidenote Content.
- Trên thiết bị di động, sidenote sẽ di chuyển vào trong cột chính
- Để hiển thị số dòng trong code hoặc khối pre, cần chèn `` chứa từng số dòng
- Việc chèn số dòng có thể thực hiện thủ công, bằng JavaScript hoặc xử lý phía server tùy ý
Liên kết dự án
- Nếu thích, bạn có thể star trên GitHub
- Nếu quan tâm đến các công việc khác, bạn có thể tham gia Discord
1 bình luận
Ý kiến trên Hacker News
Tôi thích cách kiểu chữ viết tay ở vùng nhập liệu hòa hợp với serif hữu cơ, cùng với việc chăm chút tỉ mỉ cả chiều cao dòng và độ đậm cân bằng
Mã dành cho ai quan tâm: https://github.com/wintermute-cell/magick.css/blob/master/ma...
Ước gì có cả checkbox và radio button tùy biến. Hiện tại chỉ hai thứ đó làm phá vỡ cảm giác nhập vai, còn phần còn lại thì thật sự tuyệt. Có khi nó sẽ khiến tôi cuối cùng cũng tạo được blog mà mình đã nghĩ đến từ lâu
Nó hợp đến nỗi gần như không nhận ra sự hiện diện của nó
Cần lưu ý rằng thẻ đóng là header chứ không phải main
Tôi muốn xem nhanh nó trông thế nào, nhưng để xem mã nguồn gốc lại phải qua thêm vài bước. Ít nhất cũng nên có một liên kết có thể bấm để đi thẳng tới dạng chưa xử lý
Lạ là kiểu đó thật sự rất cuốn hút
Thêm vào đó, vẻ cực kỳ tối giản gần như chỉ có HTML như website của các giáo sư đại học ngày xưa cũng trông rất hay
Ước gì blog cá nhân phổ biến hơn
Ít nhất trong bài viết của tôi, dù là bài kỹ thuật hay không, hình ảnh và văn bản tạo thành một mạch tự sự liên tục. Việc sắp xếp lại hình ảnh và chuyển chúng sang chỗ khác cũng vô lý chẳng kém làm như vậy với các đoạn văn
Thật ra tốt nhất là đừng viết toàn bộ bất cứ thứ gì bằng chữ hoa. Nó là một cách nhấn mạnh từ thời máy đánh chữ, giống như gạch chân, vì khi đó chỉ có thể dùng một font duy nhất
Hình dạng chữ hoa quá giống nhau. Không có biến đổi về chiều cao chữ nên mắt đọc khó hơn. Khi trộn chữ hoa và chữ thường, có các chữ hạ xuống như y, p, j và các chữ vươn lên như b, d, t, tạo ra sự biến thiên và giúp nhận diện dễ hơn
Để nhấn mạnh thì nên dùng kích thước, độ đậm hoặc chữ nghiêng
Nhưng nhờ vậy nó cũng tạo ra một phong cách độc đáo
Dù vậy, tôi nghĩ mình vẫn thích
Rất dễ tìm được những framework đa dụng khá ổn, nhưng nếu muốn thứ gì đó có “hương vị” rõ rệt thì khó hơn nhiều
https://www.mcsweeneys.net/articles/im-comic-sans-asshole
Đặc biệt khi độ đậm thấp kết hợp với theme tối, văn bản trở nên khá khó đọc
Thay vì xử lý theo lẽ thường, cuối cùng Google đã phải khảo sát người dùng với 800 người để đi đến kết luận rằng “ô nhập văn bản nên trông giống ô nhập văn bản”: https://medium.com/google-design/the-evolution-of-material-d...
Trước đây tôi từng làm một cái, nhưng chắc không hay bằng cái này: https://elementcss.neocities.org