HTH DIGI luôn chú trọng vào việc cập nhật các công nghệ mới và liên tục cải thiện chất lượng sản phẩm để mang đến cho khách hàng những tác phẩm website tốt nhất. Trong đó, việc lựa chọn CSS Frameworks/Front End phù hợp là một phần quan trọng không thể bỏ qua. HTH DIGI hiện đang cung cấp dịch vụ cắt HTML/CSS front end, và trong thời đại công nghệ này, có hàng chục frameworks khác nhau để bạn lựa chọn. Tuy nhiên, số lượng các frameworks chất lượng thực sự thì không nhiều. Vì thế, bài viết này sẽ đề cập đến 5 Frameworks Front End tốt nhất hiện nay mà HTH DIGI sử dụng thành thạo trong các dự án.

HTH DIGI sẽ so sánh điểm mạnh và yếu của cả 5 frameworks này, đồng thời cung cấp ứng dụng thực tế của chúng trong các trường hợp đặc biệt. Với vị trí một Front End Developer, bạn cần phải nắm chắc các kiến thức này để lựa chọn Frameworks Front End phù hợp cho từng dự án. Nếu bạn chỉ đang thực hiện một dự án phổ thông, không quá phức tạp, việc sử dụng một framework mạnh mẽ và cồng kềnh có thể không cần thiết và làm tăng thời gian coding không đáng có.

Framework đầu tiên chúng tôi muốn giới thiệu chính là CSS Frameworks nổi tiếng nhất hiện nay – Bootstrap.

(Lưu ý: một số thông tin như số liệu thống kê, đánh giá, hoặc phiên bản có thể đã bị cập nhật từ thời điểm bài viết được viết ra.)

1. Bootstrap

Bootstrap hiện đang dẫn đầu thị trường với mức độ phổ biến cao và ứng dụng rộng rãi. Phiên bản mới của Bootstrap được cập nhật liên tục, giúp bạn dễ dàng sử dụng trong bất kỳ dự án Front End nào.

• Tác giả: Mark Otto và Jacob Thornton
• Phát hành: 2011
• Version hiện tại: 3.3.7
• Mức độ nổi tiếng: 111.000 lượt bình chọn trên GitHub
• Nền tảng dựa trên: RWD và mobile first (ưu tiên hiển thị di động trước)
• Kích thước files: 154 KB
• Pre-processors: Less và Sass
• Responsive: hỗ trợ
• Cơ chế modular: hỗ trợ
• Template/Layout khởi đầu: hỗ trợ
• Bộ icon sử dụng: Glyphicons Halflings set
• Add-on: không chính thống nhưng có nhiều plugins bên thứ 3 hỗ trợ
• Cơ chế độc quyền: Jumbotron
• Tài liệu mô tả: rất chi tiết
• Khả năng tùy biến: thiếu mỗi Color Picker (JS chọn màu)
• Trình duyệt hỗ trợ: Firefox, Chrome, Safari, IE8 (cần thêm Respond.js nếu muốn chạy trên IE8)
• Bản quyền: MIT

Lưu ý về Bootstrap:
Thế mạnh lớn nhất của Bootstrap không nằm ở mặt kỹ thuật mà ở mức độ phổ biến của nó. Đây là lợi thế cực lớn vì:

• Dễ dàng tìm kiếm các plugins từ nhiều nguồn bên thứ 3
• Dễ dàng tìm kiếm nhân sự biết sử dụng Bootstrap
• Hỗ trợ cộng đồng mạnh mẽ

2. Foundation

Foundation là frameworks nổi tiếng thứ hai trên thế giới, được phát triển bởi ZURB và được nhiều tập đoàn lớn như Facebook, Mozilla, Ebay, Yahoo! tin dùng.

• Tác giả: ZURB
• Phát hành: 2011
• Version hiện tại: 6.3.1
• Mức độ nổi tiếng: 25,400 lượt bình chọn trên GitHub
• Nền tảng: RWD, mobile first, semantic
• Kích thước files: 197.5 KB
• Pre-processors: Sass
• Responsive: hỗ trợ
• Cơ chế modular: hỗ trợ
• Template/Layout khởi đầu: hỗ trợ
• Bộ icon: Foundation Icon Fonts
• Add-on: hỗ trợ
• Tài liệu: chi tiết
• Trình duyệt hỗ trợ: Chrome, Firefox, Safari, IE9; iOS, Android
• Bản quyền: MIT

3. Semantic UI

Semantic UI là một dự án với mục tiêu làm cho việc xây dựng website trở nên dễ hiểu hơn nhờ sử dụng ngôn ngữ đời thực cho code dễ đọc.

• Tác giả: Jack Lukic
• Phát hành: 2013
• Version hiện tại: 2.2
• Mức độ nổi tiếng: 34,762 lượt bình chọn trên GitHub
• Nền tảng: semantic, tag ambivalence, responsive
• Kích thước files: 806 KB
• Pre-processors: Less
• Responsive: hỗ trợ
• Cơ chế modular: hỗ trợ
• Bộ icon: Font Awesome
• Add-on: không hỗ trợ
• Tài liệu: rất tốt
• Trình duyệt hỗ trợ: Firefox, Chrome, Safari, IE10, Android 4, Blackberry 10
• Bản quyền: MIT

4. Pure

Pure là frameworks nhẹ nhất trong danh sách này, được phát triển bởi Yahoo, và rất phù hợp cho các dự án từ nhỏ đến lớn.

• Tác giả: Yahoo
• Kích thước files: nhỏ gọn
• Pre-processors: hỗ trợ
• Cơ chế modular: hỗ trợ
• Template/Layout khởi đầu: không có

5. UIkit

UIkit là bộ công cụ tinh gọn, dễ sử dụng cho lập trình viên, đặc biệt phổ biến trong phát triển WordPress themes.

• Bộ công cụ: mạnh mẽ, linh hoạt
• Ứng dụng: WordPress themes
• Bộ công cụ UI: rất dễ tuỳ chỉnh

Tổng kết

HTH DIGI khuyến nghị bạn nên chọn frameworks dựa trên nhu cầu thực tế của dự án, chú trọng các yếu tố như mức độ phổ biến, tài liệu hỗ trợ, và khả năng tùy biến.