5 frameworks frontend miễn phí tốt nhất cho dự án web của bạn
Nói đến các frameworks frontend dành cho web thì chắc chắn các bạn sẽ nghĩ ngay đến bootstrap 3. Mình cũng thế, gần 2 năm trở lại đây hầu như tất cả các dự án web mình làm mình đều sử dụng bootstrap như 1 thư viện mặc định. Nhưng gần đây mình cảm thấy chán bootstrap và bắt đầu đi tìm hiểu một số thư viện khác xem thử các frameworks khác có "ngon " hơn bootstrap không.
Sau 1 thời gian tìm hiểu thì mình phát hiện ra một số thư viện ngon lành không kém bootstrap, vì thế hôm nay mình xin chia sẻ 5 frameworks frontend tốt nhất (theo mình) cho dự án web của các bạn.
1. Bootstrap 3 và Bootstrap 4
Tất nhiên rồi nói gì thì nói bootstrap vẫn giữ vị trí số 1 bởi tình phổ biến và dễ tiếp cận. Được phát hành vào tháng 8 năm 2011 bootstrap có được cộng đồng phát triển rất mạnh, cập nhật các phiên bản liên tục, tài liệu hướng dẫn thì nhiều vô đối. Vì thế nó luôn là lựa chọn hàng đầu của các Frontend Developers.
Hiện tại bootstrap đã phát hành phiên bản Bootstrap 4 với nhiều tính năng mới và hay ho, các bạn có thể tìm hiểu tại đây
2. Foundation
Foundation là một front-end framework đầu tiên và tiên tiến nhất thế giới, giúp chúng ta dễ dàng xây dựng các bản prototype, các sites và các ứng dụng hoạt động trên hầu hết các thiết bị với bộ thư viện mà cung cấp.
Cũng giống như bootstrap foundation được xây dựng và đóng gói với bộ HTML, CSS và Javascript, cung cấp cho người dùng các thành phần cơ bản nhất của ứng dụng Web.
Demo một số tính năng
Chia cột
Giao diện mobile cực đẹp
Bộ button phong phú
Các chức năng modal, tab đầy đủ giao diện phẳng đẹp mắt
3. Pure CSS
Pure CSS là tập hợp các mô đun Css nhẹ mà bạn có thể sử dụng trong mọi giao diện website. Nó được viết bằng CSS thuần.
- - Tác giả: Yahoo
- - Phát hành: 2013
- - Phiên bản hiện tại: 0.6.2
- - Độ nổi tiếng : 17,476 + sao trên GitHub
4. Semantic UI
Một front-end framework mới là Semantic-UI, nó khác biệt so với những framework còn lại và đã trở thành một trong những framework phổ biến nhất.
Sự đơn giản chính là điểm mạnh của framework này. Bởi vì nó sử dụng ngôn ngữ tự nhiên, code tự giải thích chính nó. Thậm chí nếu chưa có nhiều kinh nghiệm lập trình bạn sẽ vẫn cảm thấy khá quen thuộc khi làm việc với nó.
Một tính năng nổi bật khác của Semantic-UI là nó tích hợp một lượng lớn các thư viện của bên thứ ba. Bạn sẽ không cần sử dụng bất kỳ thư viện nào khác. Do đó, quá trình phát triển sẽ dễ dàng và hợp lý hơn.
Ưu điểm:
- Tên các class có ý nghĩa tạo ra ít rào cản khi bắt đầu, thậm chí những người mới bắt đầu có thể sử dụng ngay
- Kích thước các file nhỏ và tối thiểu hóa thời gian tải bởi vì bạn có thể chỉ tải các thành phần bạn cần, mỗi thành phần đều có các file JS và CSS của riêng mình
- Các phần tử đa năng giúp cho việc tùy chỉnh dễ dàng
Nhược điểm:
- Có quá nhiều gói khi so sánh với Foundation và Bootstrap
- Với những thiết kế phức tạp, bạn có thể tìm thấy những thiếu hụt của framework này
5. Materialize frameworks frontend
Materialize cũng tuân theo thiết kế material của Google, nó bao gồm các button, icon, card, form và các thành phần khác. Nó có một phiên bản chuẩn và một phiên bản sử dụng Sass.
Materialize bao gồm tính năng IZ column grid tiện lợi, có thể được sử dụng cho bố cục của website. Nó cũng có material design shadows, typography, colors và các tính năng khác.
Ngoài ra, nó còn có ripple-effect animation, drag-out mobile menus, Sass mixins và nhiều thứ khác.
Tóm lại:
Trên đây là những frameworks frontend mà mình thấy là oke nhất, đáp ưng hầu hết các yêu cầu của các bạn. Bạn có thể lựa chọn 1 cái trong số này để nghiên cứu. Đối với mình chắc phải dùng lại bootstrap thôi, tại quen rồi với không còn nhiều thời gian để tìm hiểu. Bạn thì sao đã dùng cái nào trong đám này chưa? hãy bình luật chia sẽ nhé. Chào thân ái và quyết thắng!
Võ Quang Huy (Huy Kira)
Đam mê hóa học, ưng thi vào trường kinh tế... Đậu vào trường Sư phạm, quyết tâm đi dạy... Ra trường đi làm designer, tự học frontend, chuyển qua làm PHP, được công ty đào tạo laravel... Và hiện tại đang code react native(2015) => Fullstack ... ?? tối về viết blog... (Còn tiếp...)