Mười công cụ hướng dẫn phong cách sống cho các nhà thiết kế web - Tốt nhất trong số
Một hướng dẫn phong cách sống là một tài liệu về các yếu tố và mẫu UI được thu thập từ một trang web hoặc ứng dụng với mục đích cho phép các nhà phát triển sử dụng phong cách nhất quán trong toàn bộ dự án của họ. Trong quá khứ, các nhà phát triển đã tạo ra các hướng dẫn phong cách thủ công, đó là rất nhiều công việc. Sau một thời gian, họ bắt đầu tự động hóa quy trình làm việc và các công cụ hướng dẫn kiểu biến đổi mã mặt trước thành thư viện UI được tổ chức tốt đã bắt đầu xuất hiện.
Hướng dẫn phong cách sống khác với hướng dẫn phong cách mã, vì cái sau chứa các quy tắc về cách viết mã có thể đọc và duy trì được, trong khi hướng dẫn kiểu sống là bộ sưu tập các mẫu mặt trước, chẳng hạn như các lớp CSS cho các nút, widget và các thành phần chính tả. Hướng dẫn phong cách mã đảm bảo mã thống nhất, trong khi hướng dẫn phong cách sống đảm bảo thống nhất thị giác trên một trang web.
Trong bài đăng này, chúng tôi đã tập hợp 10 công cụ hữu ích có thể giúp bạn tạo hướng dẫn phong cách sống của riêng bạn.
1. Tạo dáng cho tôi
Công cụ này rất thú vị: chỉ cần dán liên kết của trang web bạn muốn phân tích và xem hướng dẫn về phong cách của nó được tạo ra chỉ bằng một cú nhấp chuột. Với Tạo dáng cho tôi, bạn có thể nhanh chóng có được cái nhìn tổng quan về các mẫu của trang web, bao gồm màu sắc, phông chữ, kích thước và khoảng cách. Khi quá trình hoàn tất, bạn có thể tải về hướng dẫn phong cách trong PDF.
2. Chế tạo
Chế tạo cho phép bạn xây dựng bộ công cụ UI của riêng bạn, tổ chức hệ thống thiết kế của bạn và tạo một hướng dẫn kiểu từ mã bộ công cụ của bạn. Nếu bạn làm việc trong một nhóm, bạn có thể viết tài liệu trong Markdown để giúp các nhà phát triển khác sử dụng dễ dàng hơn. Nó có thể giúp bạn tổ chức thói quen thiết kế / mã hóa của bạn theo cách bạn thích.
3. Chuẩn bị
Chuẩn bị bao gồm tất cả mọi thứ từ mockup kỹ thuật số đến khung lưới. Họ cũng có một công cụ hướng dẫn phong cách cung cấp một quy trình thiết kế tối giản sạch sẽ mà không gặp rắc rối. Bạn có thể đăng ký miễn phí và chèn tất cả các thông tin cần thiết theo cách thủ công. Quá trình nên bao gồm bảng màu, lựa chọn phông chữ, biểu tượng, logo, có thể là khẩu hiệu hoặc bản sao web ưa thích.
4. Aigis
Với Aigis, bạn có thể tạo hướng dẫn kiểu từ bất kỳ tệp văn bản nào (ví dụ:. .css, .scss, .phong cách, .md). Bạn cũng có thể viết tài liệu trong Markdown và tùy chỉnh chủ đề trang web của bạn.
5. Hình ba chiều
Hình ba chiều được tạo ra bởi Trulia và là một giải pháp tuyệt vời để tạo hướng dẫn phong cách. Nó là một viên ngọc Ruby phân tích ý kiến trong CSS của bạn để tạo hướng dẫn phong cách tuyệt vời. Hologram có một hệ thống tạo khuôn mẫu với một số kiểu và điều hướng cơ bản để làm cho hướng dẫn kiểu của bạn tạo dễ dàng hơn.
6. Tạo kiểu
Với Tạo kiểu, bạn có thể viết hướng dẫn kiểu CSS một cách dễ dàng, vì đó là một Trình tạo hướng dẫn kiểu dựa trên Markdown. Nó sẽ hoạt động với hầu hết các thiết lập phát triển web, vì nó trung lập với nền tảng. Nó đòi hỏi rất ít để có được nó và chạy. Ngoài ra, các ý kiến bạn cần thêm vào CSS của bạn là rất tối thiểu. Bạn có thể tạo tài liệu CSS của mình trong các nhận xét CSS nội tuyến hoặc dưới dạng tệp Markdown riêng.
7. KSS
KSS (Knyle Style Sheets) chủ yếu là một đặc điểm kỹ thuật tài liệu và một định dạng hướng dẫn phong cách có cú pháp bình luận riêng của nó. KSS cũng bao gồm một thư viện Ruby phân tích cú pháp .sass, .scss, và .css các tệp được ghi lại với các hướng dẫn KSS thành một hướng dẫn kiểu gọn gàng. KSS dành cho người dùng cao cấp hơn và các nhóm chuyên nghiệp, vì việc tạo một hướng dẫn phong cách với nó đòi hỏi kiến thức về mã hóa.
8. Trình tạo hướng dẫn kiểu SC5
Với Hướng dẫn tạo kiểu SC5 bạn có thể tạo và chỉnh sửa hướng dẫn kiểu trực tiếp trong trình duyệt của mình. Nó là dựa trên KSS với một số tính năng thú vị đi kèm, chẳng hạn như giao diện người dùng hỗ trợ AngularJS giúp bạn xem, tìm kiếm và kiểm tra phong cách của bạn. SC5 sử dụng ký hiệu tài liệu tương tự như KSS. Nó hỗ trợ SASS, LESS, PostCSS và các bảng định kiểu CSS thuần túy.
9. Kiểu dáng
StyleDocco là một ứng dụng Node.js tiện dụng mà tạo hướng dẫn kiểu từ bảng định kiểu của bạn. Bạn có thể cài đặt nó với npm. Trong styleguide được tạo, StyleDocco hiển thị bản xem trước với các kiểu bạn đã áp dụng và một ví dụ về mã HTML.
Trên trang chủ của StyleDocco, bạn có thể tìm thấy hai ví dụ về hướng dẫn kiểu, một ví dụ được tạo từ biểu định kiểu mặc định và một ví dụ khác được tạo từ trang Bootstrap. Các ví dụ cũng có thể giúp bạn chọn cú pháp tài liệu mà SyussyDocco sử dụng.
10. Phòng thí nghiệm mẫu
Phòng thí nghiệm mẫu là một bộ công cụ giúp bạn tạo ra một hệ thống thiết kế mô-đun. Pattern Lab là một trình tạo trang tĩnh tùy chỉnh, kết hợp tất cả các thành phần kiểu trên một trang và tạo các mẫu và trang từ chúng. Nó có thể phục vụ như dự án của bạn thư viện mẫu và hướng dẫn phong cách frontend. Pattern Lab cho phép bạn xem các thành phần kiểu của mình đồng thời trừu tượng và trong ngữ cảnh.
