Sau đây là 5 HTML, CSS, JS framework ( Frontend Frameworks) được sử dụng phổ biến nhất hiện nay. Mỗi Framework đều có những đặc điểm riêng phù hợp với từng mục đích sử dụng của người phát triển web. Nếu bạn chưa từng dùng qua thì có thể tham khảo để tìm ra một frameworks phù hợp với dự án của mình.
1 Bootstrap:
Là HTML, CSS, JS framework phổ biến nhất hiện nay với lượng người dùng khá lớn. Framework này hỗ trợ hầu hết các thành phần có trong một website cũng như tính năng responsive + mobile nên nó có thể sử dụng cho nhiều dự án khác nhau từ lớn đến nhỏ.
Một số thông tin chi tiết:
Tác giả: Mark Otto và Jacob Thornton.
Phát hành: 2011
Phiên bản hiện tại: 3.3.5 ( + 4.0 Alpha)
Mức độ phổ biến: 75,000 + GitHub
Khái niệm/ Nguyên tắc cốt lõi: RWD ( Responsive web design ) & mobile first
Preprocessors: Less and Sass
Responsive: Có
Modular: Có
Icon set: Glyphicons Halflings set
Add-ons: Không kèm theo, nhưng có rất nhiều plugin từ bên thứ 3.
Thành phần độc đáo: Jumbotron
Tài liệu: Hỗ trợ đầy đủ
Customization: Basic GUI Customizer , bạn cần phải nhập vào các giá trị màu bằng tay, vì không có bảng chọn màu có sẵn.
Trình duyệt hỗ trợ: Firefox, Chrome, Safari, IE8+ (Bạn cần thêm Respond.js để hỗ trợ IE8)
Giấy phép: MIT
Download
2 Foundation by ZURB:
Foundation là tên tuổi thứ 2 mà ta nhắc tới. Được sự bảo bọc của công ty ZURB đây là một nền tảng vô cùng mạnh mẽ. Foundation được sử dụng cho các website lơn nhứ Facebook, Mozilla, Ebay, Yahoo!...
Một số thông tin chi tiết:
Tác giả: ZURB
Phát hành: 2011
Phiên bản hiện tại: 5.5.2
Mức độ phổ biến: 18,000 + GitHub
Khái niệm/ Nguyên tắc cốt lõi: RWD ( Responsive web design ), mobile first, semantic
Kích thước: 326 KB
Preprocessors: Sass
Responsive: Có
Modular: Có
Icon set: Foundation Icon Fonts
Add-ons: Có.
Thành phần độc đáo: Icon Bar, Clearing Lightbox, Flex Video, Keystrokes, Joyride, Pricing Tables
Tài liệu: Hỗ trợ đầy đủ
Customization: No GUI customizer, chỉ có hướng dẫn tùy biến
Trình duyệt hỗ trợ: Chrome, Firefox, Safari, IE9+; iOS, Android, Windows Phone 7+
Giấy phép: MIT
Download
3 Semantic UI:
Semantic UI nỗ lực không ngừng để làm cho các trang web xây dựng nhiều ngữ nghĩa (Semantic - Phần này nếu không hiểu bạn nên tìm hiểu riêng). Nó sử dụng các nguyên tắc ngôn ngữ tự nhiên, do đó làm cho mã dễ đọc và dễ hiểu.
Một số thông tin chi tiết:
Tác giả: Jack Lukic
Phát hành: 2013
Phiên bản hiện tại: 2.1.4
Mức độ phổ biến: 12,900 + GitHub
Khái niệm/ Nguyên tắc cốt lõi: Semantic, tag ambivalence, responsive.
Kích thước: 552 KB
Preprocessors: Less
Responsive: Có
Modular: Có
Icon set: Font Awesome
Add-ons: Không.
Thành phần độc đáo: Divider, Flag, Rail, Reveal, Step, Advertisement, Card, Feed, Item, Statistic, Dimmer, Rating, Shape.
Tài liệu: Hỗ trợ rất tốt
Customization: No GUI customizer, chỉ có hướng dẫn tùy biến
Trình duyệt hỗ trợ: Firefox, Chrome, Safari, IE10+ (IE9 with browser prefix only), Android 4, Blackberry 10
Giấy phép: MIT
Download
4 Pure by Yahoo!:
Có trọng lượng nhẹ, hỗ trợ modul,viết thuần CSS, bao gồm các thành phần có thể được sử dụng cùng nhau hoặc riêng tùy thuộc vào nhu cầu của bạn.
Một số thông tin chi tiết:
Tác giả: Yahoo
Phát hành: 2013
Phiên bản hiện tại: 0.6.0
Mức độ phổ biến: 9,900 + GitHub
Khái niệm/ Nguyên tắc cốt lõi: SMACSS, minimalism
Kích thước: 18 KB
Preprocessors: Không có
Responsive: Có
Modular: Có
Icon set: Không có, nhưng bạn có thể sử dụng Font Awesome
Add-ons: Không.
Thành phần độc đáo: Không
Tài liệu: Hỗ trợ tốt
Customization: Basic GUI Skin Builder
Trình duyệt hỗ trợ: Latest versions of Firefox, Chrome, Safari; IE7+; iOS 6.x, 7.x; Android 4.x
Giấy phép: Yahoo! Inc. BSD
Download
5 UIkit by YOOtheme:
là một bộ sưu tập ngắn gọn dễ sử dụng và dễ dàng tùy chỉnh các thành phần. Mặc dù nó không phải là phổ biến như các đối thủ khác,nhưng nó cung cấp các chức năng tương tự và chất lượng.
Một số thông tin chi tiết:
Tác giả: YOOtheme
Phát hành: 2013
Phiên bản hiện tại: 2.22.0
Mức độ phổ biến: 3,800 + GitHub
Khái niệm/ Nguyên tắc cốt lõi: RWD, mobile first
Kích thước: 118 KB
Preprocessors: Less, Sass
Responsive: Có
Modular: Có
Icon set: Font Awesome
Add-ons: Có.
Thành phần độc đáo: Article, Flex, Cover, HTML Editor
Tài liệu: Hỗ trợ tốt
Customization: Advanced GUI Customizer
Trình duyệt hỗ trợ: Chrome, Firefox, Safari, IE9+
Giấy phép: MIT
Download
Với một số thông tin trên, chúc các bạn tìm được framework ưng ý nhất.
Xem thêm:
- Hướng dẫn sử dụng Grid System trong Bootstrap để phân chia cột ( Column)
- BlueTrip - Css Framework phong cách đơn giản dễ sử dụng
- 6 slider miễn phí mà sử dụng thư viện jQuery
- Tạo menu dropdowns nhanh trong Bootstrap
- Hướng dẫn làm slider Bootstrap với hiệu ứng Fade in - Fade out
- Các ví dụ về cách dùng Bootstrap Pagination
- Tạo popup dễ dàng trong Bootstap với Bootstrap Modal Plugin
- Các kiểu styles button trong Bootstrap
- Tạo một slider trong Bootstrap bằng Bootstrap Carousel Plugin
1 Bootstrap:
Là HTML, CSS, JS framework phổ biến nhất hiện nay với lượng người dùng khá lớn. Framework này hỗ trợ hầu hết các thành phần có trong một website cũng như tính năng responsive + mobile nên nó có thể sử dụng cho nhiều dự án khác nhau từ lớn đến nhỏ.
Tác giả: Mark Otto và Jacob Thornton.
Phát hành: 2011
Phiên bản hiện tại: 3.3.5 ( + 4.0 Alpha)
Mức độ phổ biến: 75,000 + GitHub
Khái niệm/ Nguyên tắc cốt lõi: RWD ( Responsive web design ) & mobile first
Preprocessors: Less and Sass
Responsive: Có
Modular: Có
Icon set: Glyphicons Halflings set
Add-ons: Không kèm theo, nhưng có rất nhiều plugin từ bên thứ 3.
Thành phần độc đáo: Jumbotron
Tài liệu: Hỗ trợ đầy đủ
Customization: Basic GUI Customizer , bạn cần phải nhập vào các giá trị màu bằng tay, vì không có bảng chọn màu có sẵn.
Trình duyệt hỗ trợ: Firefox, Chrome, Safari, IE8+ (Bạn cần thêm Respond.js để hỗ trợ IE8)
Giấy phép: MIT
Download
2 Foundation by ZURB:
Foundation là tên tuổi thứ 2 mà ta nhắc tới. Được sự bảo bọc của công ty ZURB đây là một nền tảng vô cùng mạnh mẽ. Foundation được sử dụng cho các website lơn nhứ Facebook, Mozilla, Ebay, Yahoo!...
Một số thông tin chi tiết:
Tác giả: ZURB
Phát hành: 2011
Phiên bản hiện tại: 5.5.2
Mức độ phổ biến: 18,000 + GitHub
Khái niệm/ Nguyên tắc cốt lõi: RWD ( Responsive web design ), mobile first, semantic
Kích thước: 326 KB
Preprocessors: Sass
Responsive: Có
Modular: Có
Icon set: Foundation Icon Fonts
Add-ons: Có.
Thành phần độc đáo: Icon Bar, Clearing Lightbox, Flex Video, Keystrokes, Joyride, Pricing Tables
Tài liệu: Hỗ trợ đầy đủ
Customization: No GUI customizer, chỉ có hướng dẫn tùy biến
Trình duyệt hỗ trợ: Chrome, Firefox, Safari, IE9+; iOS, Android, Windows Phone 7+
Giấy phép: MIT
Download
3 Semantic UI:
Semantic UI nỗ lực không ngừng để làm cho các trang web xây dựng nhiều ngữ nghĩa (Semantic - Phần này nếu không hiểu bạn nên tìm hiểu riêng). Nó sử dụng các nguyên tắc ngôn ngữ tự nhiên, do đó làm cho mã dễ đọc và dễ hiểu.
Một số thông tin chi tiết:
Tác giả: Jack Lukic
Phát hành: 2013
Phiên bản hiện tại: 2.1.4
Mức độ phổ biến: 12,900 + GitHub
Khái niệm/ Nguyên tắc cốt lõi: Semantic, tag ambivalence, responsive.
Kích thước: 552 KB
Preprocessors: Less
Responsive: Có
Modular: Có
Icon set: Font Awesome
Add-ons: Không.
Thành phần độc đáo: Divider, Flag, Rail, Reveal, Step, Advertisement, Card, Feed, Item, Statistic, Dimmer, Rating, Shape.
Tài liệu: Hỗ trợ rất tốt
Customization: No GUI customizer, chỉ có hướng dẫn tùy biến
Trình duyệt hỗ trợ: Firefox, Chrome, Safari, IE10+ (IE9 with browser prefix only), Android 4, Blackberry 10
Giấy phép: MIT
Download
4 Pure by Yahoo!:
Có trọng lượng nhẹ, hỗ trợ modul,viết thuần CSS, bao gồm các thành phần có thể được sử dụng cùng nhau hoặc riêng tùy thuộc vào nhu cầu của bạn.
Một số thông tin chi tiết:
Tác giả: Yahoo
Phát hành: 2013
Phiên bản hiện tại: 0.6.0
Mức độ phổ biến: 9,900 + GitHub
Khái niệm/ Nguyên tắc cốt lõi: SMACSS, minimalism
Kích thước: 18 KB
Preprocessors: Không có
Responsive: Có
Modular: Có
Icon set: Không có, nhưng bạn có thể sử dụng Font Awesome
Add-ons: Không.
Thành phần độc đáo: Không
Tài liệu: Hỗ trợ tốt
Customization: Basic GUI Skin Builder
Trình duyệt hỗ trợ: Latest versions of Firefox, Chrome, Safari; IE7+; iOS 6.x, 7.x; Android 4.x
Giấy phép: Yahoo! Inc. BSD
Download
5 UIkit by YOOtheme:
là một bộ sưu tập ngắn gọn dễ sử dụng và dễ dàng tùy chỉnh các thành phần. Mặc dù nó không phải là phổ biến như các đối thủ khác,nhưng nó cung cấp các chức năng tương tự và chất lượng.
Một số thông tin chi tiết:
Tác giả: YOOtheme
Phát hành: 2013
Phiên bản hiện tại: 2.22.0
Mức độ phổ biến: 3,800 + GitHub
Khái niệm/ Nguyên tắc cốt lõi: RWD, mobile first
Kích thước: 118 KB
Preprocessors: Less, Sass
Responsive: Có
Modular: Có
Icon set: Font Awesome
Add-ons: Có.
Thành phần độc đáo: Article, Flex, Cover, HTML Editor
Tài liệu: Hỗ trợ tốt
Customization: Advanced GUI Customizer
Trình duyệt hỗ trợ: Chrome, Firefox, Safari, IE9+
Giấy phép: MIT
Download
Với một số thông tin trên, chúc các bạn tìm được framework ưng ý nhất.
Xem thêm:
- Hướng dẫn sử dụng Grid System trong Bootstrap để phân chia cột ( Column)
- BlueTrip - Css Framework phong cách đơn giản dễ sử dụng
- 6 slider miễn phí mà sử dụng thư viện jQuery
- Tạo menu dropdowns nhanh trong Bootstrap
- Hướng dẫn làm slider Bootstrap với hiệu ứng Fade in - Fade out
- Các ví dụ về cách dùng Bootstrap Pagination
- Tạo popup dễ dàng trong Bootstap với Bootstrap Modal Plugin
- Các kiểu styles button trong Bootstrap
- Tạo một slider trong Bootstrap bằng Bootstrap Carousel Plugin
