10 CSS framework tốt nhất 2016 cho lập trình web

Nếu ví 1 website như một bức tranh thì html như khung tranh và những nét phác chính thì css đóng vai trò như màu vẽ, làm bức tranh ấy thêm sinh động hơn. Các bạn có thể dễ dàng nhận thấy ngày nay có quá nhiều framework css để giúp các bạn hoàn thiện website, tuy nhiên chỉ có một số lượng không nhiều thực sự xuất sắc và được ưa chuộng trên toàn thế giới.

Css framework là một bộ sưu tập các thành phần HTML, CSS, JS đã theo chuẩn có thể đem ra sử dụng mà không phải code lại từ đầu nhưng vẫn có thể tùy chỉnh lại theo ý mình. Mỗi css framework thì có những đặc trưng riêng mà tùy mục đích sử dụng chúng ta sẽ lựa chọn một framework cho phù hợp. Sau đây là danh sách 10 css framework bạn nên sử dụng:

1.Bootstrap

FrameWork cho smartphone phổ biến nhất. Bootstrap được sinh ra tại Twitter hồi đầu có tên là Twitter Bootstrap hiện nay là FrameWork số 01, dễ dùng phổ biến và đầy đủ. Đây là FrameWork bạn nên chọn vì được khá nhiều đơn đặt hàng từ các trang FreeLancer trên thế giới.

Các thông tin:

• Phát hành: 2011
• Popularity: 75,000+ sao trên GitHub
• Kích thước: 145 KB
• Preprocessors: Less và Sass.
• Responsive: Có.
• Modular: Có.
• Sử dụng cho templates/Layout: Có.
• Icon: Glyphicons Halflings.
• Điểm đặc biệt: Jumbotron.
• Hỗ trợ trình duyệt: Firefox, Chrome, Safari, IE8 + (bạn cần Respond.js cho IE8)
• Trang chủ: http://getbootstrap.com/

2.Foundation

Foundation là ứng viên thứ 2 ở trong danh sách này. Được hậu thuẫn bởi một công ty lớn như ZURB, framework này thực sự mạnh mẽ mà cũng thực sự giống với cái tên foundation (căn bản, nền tảng). Và như một điều tất yếu Foundation được sử dụng trên nhiều website lớn như Facebook, Mozilla, Ebay, Amazon, Yahoo! và National Geographic,…

Các thông tin:

• Phát hành: 2011
• Popularity: 18,000+ sao trên GitHub
• Kích thước khung: 326 KB
• Preprocessors: Sass
• Responsive: Có.
• Modular: Có.
• Sử dụng cho templates/Layout: Có.
• Icon: Foundation Icon Fonts
• Mở rộng/Add-ons: Có.
• Điểm đặc biệt: Icon Bar, Clearing Lightbox, Flex Video, Keystrokes, Joyride, Pricing Tables.
• Hỗ trợ trình duyệt: Chrome, Firefox, Safari, IE9 +; iOS, Android, Windows Phone 7 +
• Trang chủ: http://foundation.zurb.com/

3.HTML5 Boilerplate

HTML5 Boilerplate giúp bạn xây dựng App hoặc web nhanh, mạnh mẽ và đáp ứng hết các trình duyệt đây là theo giới thiệu tại trang chủ.

Các thông tin:

• Alexa: 26,297
• Pagerank: 7
• Social Media: 41 634
• Trang chủ: https://html5boilerplate.com/

4.Pure

Pure là một framework khung có tính nhẹ nhàng – 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.

Các thông tin:

• Phát hành: 2013
• Popularity: 9,900+ sao trên GitHub
• Kích thước: 18 KB
• Preprocessors: Không.
• Responsive: Có.
• Modular: Có.
• Sử dụng cho templates/Layout: Có.
• Hỗ trợ trình duyệt: Firefox, Chrome, Safari; IE7 +; iOS 6.x, 7.x; Android 4.x
• Trang chủ: http://purecss.io/

5.UI Kit

UIKit 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 bên trong. Mặc dù nó không được là phổ biến như đối thủ cạnh tranh phía trên, tuy nhiên nó cung cấp các chức năng tương tự và thực sự chất lượng.

Các thông tin:

• Phát hành: 2013
• Popularity: 3,800+ sao trên GitHub
• Kích thước: 118 KB
• Preprocessors: Less, Sass.
• Responsive: Có.
• Modular: Có.
• Sử dụng cho templates/Layout: Có.
• Icon: Font Awesome.
• Mở rộng: Có.
• Điểm đặc biệt:Article, Flex, Cover, HTML Editor.
• Hỗ trợ trình duyệt: Chrome, Firefox, Safari, IE9+
• Trang chủ: http://getuikit.com/

6.Skeleton

Skeleton là một css framework nhẹ, sử dụng hệ thống 12 cột, đó là điều mà Framework này có thể đánh bại các đối thủ khác, với đầy đủ các tính năng tượng tự như nhau.

Các thông tin:

• Alexa: 45,638
• Pagerank: 6/10
• Social Media: 12 437
• Trang chủ: http://getskeleton.com/

7.Base

Base là một css framework đơn giản với cách tiếp cận trên di động trước. Nó là một giải pháp tốt để phát triển giao diện web trên di động hay máy ính bảng.

Các thông tin:

• Trang chủ: http://getbase.org/

8.Materialize

Được xây dụng bởi các đặc trưng của Google’s Material Design, Materialize là một framework responsive cho phát triển front-end vô cùng mạnh mẽ. Framework này rất thích hợp cho những ai muốn thi hành giao diện kiểu Material Design trên web của mình.

Các thông tin:

• Trang chủ: http://materializecss.com/

9.Material UI

Material UI là một framework khác thi hành các đặc trưng Material Design. Material UI được xây dựng trên thư viện React Javascript từ Facebook.

Các thông tin:

• Trang chủ: http://www.material-ui.com/#/

10.Semantic UI

Semantic Ui là một sự nỗ lực không ngừng nghỉ để giúp cho việc xây dựng một website theo hướng semantic (ngữ nghĩa – tức tiện dụng cho người xây dựng khi sử dụng những thành phần của nó). Nó sử dụng các nguyên tắc ngôn ngữ tự nhiên từ đó giúp code dễ đọc và dễ hiểu hơn.

Các thông tin:

• Phát hành: 2013
• Kích thước khung: 552 KB
• Preprocessors: Less
• Responsive: Có.
• Modular: Có.
• Icon: Font Awesome
• Điểm đặc biệt: Divider, Flag, Rail, Reveal, Step, Advertisement, Card, Feed, Item, Statistic, Dimmer, Rating, Shape.
• Hỗ trợ trình duyệt: Firefox, Chrome, Safari, IE10 +, Android 4, Blackberry 10
• Trang chủ: http://semantic-ui.com/

Tổng kết:

Như vậy có rất nhiều css framework có thể hỗ trợ chúng ta, quan trọng là phù hợp với nhu cầu của mình mà các bạn sẽ lựa chọn cho mình một css framework thích hợp.

Tham khảo:

http://imdev.vn/5-frontend-framework-pho-bien-nhat-cho-lap-trinh-web-nam-2015/

https://trogiup.net/5-css-framework-thiet-ke-web-mobile/