Top 5 Frontend Frameworks sử dụng phổ biến nhất hiện nay

by Unknown 11:19:00 AM 0 nhận xét

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