Home / Tutorial / Css / 5 frontend framework phổ biến nhất cho lập trình web năm 2015

5 frontend framework phổ biến nhất cho lập trình web năm 2015

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.

Trong bài viết này chúng tôi sẽ cung cấp cho bạn thông tin của 5 framework được cho là tốt nhất hiện nay. Mỗi framework đều có những điểm mạnh, điểm yếu và đặc trưng riêng của mình, chính điều đó sẽ giúp bạn lựa chọn được framework phù hợp nhất với dự án của mình.

1. Bootstrap

bootstrap-screen

Bootstrap

Vâng, bootstrap đứng đầu danh sách là một điều không cần phải tranh cãi nhiều, bởi sự phổ biến của nó trên toàn thế giới cũng như tại Việt Nam. Bạn có thể chắc chắn rằng bootstrap sẽ không bao giờ làm bạn thất vọng, nó sẽ cùng bạn đi tới con đường thành công với dự án web của mình.

Các thông tin:

Người sáng tạo: Mark Otto và Jacob Thornton.
Phát hành: 2011
Phiên bản hiện tại: 3.3.5
Popularity: 75,000+ sao trên GitHub
Mô tả: “Bootstrap là HTML, CSS, và JavaScript framework phổ biến nhất, nó hoàn toàn đủ khả năng đáp ứng những nhu cầu cần thiết để phát triển các dự án web, phù hợp với cả những thiết bị di động.”
Khái niệm cốt lõi/nguyên tắc: Responsive web design (RWD) và Mobile first.
Kích thước: 145 KB
Preprocessors: Less và Sass.
Responsive: Có.
Modular: Có.
Sử dụng cho templates/Layout: Có.
Icon: Glyphicons Halflings.
Mở rộng: Không đi kèm, tuy nhiên có nhiều plug-ins của bên thứ ba phát triển.
Điểm đặc biệt: Jumbotron.
Tài liệu: Tốt.
Khả năng Customize: Bạn có thể tùy chỉnh thoải mái. Tuy nhiên, bạn cần phải nhập vào các giá trị màu bằng tay, vì không có sẵn bảng chọn màu.
Hỗ trợ trình duyệt: Firefox, Chrome, Safari, IE8 + (bạn cần Respond.js cho IE8)
Giấy phép: MIT.
Nhận xét: Sức mạnh chính của Bootstrap nằm ở sự phổ biến của nó. Về mặt kĩ thuật, nó không nhất thiết là tốt hơn hẳn so với các framework khác được liệt kê trong danh sách này, tuy nhiên nó được phát triển và hỗ trợ bởi nguồn lực rất dồi dào (các bài báo, các bài hướng dẫn, các plugins của bên thứ ba bên cạnh các extensions , template, theme được dựng sẵn dựa trên bootstrap). Trong khoảng vài năm gần đây, Bootstrap ở khắp mọi nơi và đây cũng là lí do vì sao mọi người sẽ tiếp tục sử dụng nó trong tương lai.

2. Foundation của ZURB

foundation-screen

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:

Người tạo: ZURB
Phát hành: 2011
Phiên bản hiện tại: 5.4.7
Popularity: 18,000+ sao trên GitHub
Mô tả: “Responsive framework front-end cao cấp nhất trên thế giới”
Khái niệm cốt lõi/nguyên tắc: RWD, Mobile first, ngữ nghĩa.
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.
Tài liệu: Tốt. Nhiều nguồn tài nguyên bổ sung có sẵn.
Khả năng Customize: Bạn có thể tùy chỉnh thoải mái, có chỉ dẫn sử dụng tuỳ biến.
Hỗ trợ trình duyệt: Chrome, Firefox, Safari, IE9 +; iOS, Android, Windows Phone 7 +
Giấy phép: MIT
Nhận xét: Foundation thực sự là một framework mạnh mẽ, chuyên nghiệp với việc hỗ trợ các lĩnh vực kinh doanh, đào tạo – giáo dục, tư vấn,… Nó cung cấp nhiều tài liệu để giúp bạn tìm hiểu và sử dụng framework dễ dàng hơn.

3. Semantic UI

semanticui-screen

Semantic

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:

Người tạo: Jack Lukic
Phát hành: 2013
Phiên bản hiện tại: 1.2.0
Popularity: 12,900+ sao trên GitHub
Mô tả: “Một khuôn component UI framework, dựa trên nguyên tắc hữu ích từ ngôn ngữ tự nhiên.”
Khái niệm cốt lõi/nguyên tắc: Semantic, tag ambivalence, responsive.
Kích thước khung: 552 KB
Preprocessors: Less
Responsive: Có.
Modular: Có.
Sử dụng cho templates/Layout: Không.
Icon: Font Awesome
Mở rộng/Add-ons: Không.
Điểm đặc biệt: Divider, Flag, Rail, Reveal, Step, Advertisement, Card, Feed, Item, Statistic, Dimmer, Rating, Shape.
Tài liệu: Thực sự tốt. Semantic cung cấp tài liệu rất tốt và có tổ chức, có hẳn một website riêng biệt để cung cấp hướng dẫn cho việc bắt đầu, tùy biến và tạo ra các chủ đề..
Khả năng Customize: Bạn có thể tùy chỉnh thoải mái, có chỉ dẫn sử dụng tuỳ biến.
Hỗ trợ trình duyệt: Firefox, Chrome, Safari, IE10 +, Android 4, Blackberry 10
Giấy phép: MIT
Nhận xét: Semantic là framework sáng tạo và đầy đủ tính năng nhất trong số những framework được thảo luận ở đây. Đặc biệt cấu trúc tổng thể của framework, các quy ước đặt tên, mặt logic rõ ràng và ngữ nghĩa của các class css của nó thực sự vượt trội hơn những framework khác.

4. Pure của Yahoo!

pure-screen

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:

Người sáng tạo: Yahoo.
Phát hành: 2013
Phiên bản hiện tại: 0.5.0
Popularity: 9,900+ sao trên GitHub
Mô tả: “Một set với dung lượng nhỏ, đáp ứng các module CSS mà bạn có thể sử dụng trong mọi dự án web.”
Khái niệm cốt lõi/nguyên tắc: SMACSS, tối giản.
Kích thước: 18 KB
Preprocessors: Không.
Responsive: Có.
Modular: Có.
Sử dụng cho templates/Layout: Có.
Icon: Không có. Bạn có thể sử dụng Font Awesome thay thế.
Mở rộng: không.
Điểm đặc biệt: Không.
Tài liệu: Tốt.
Khả năng Customize: Basic Builder GUI Skin.
Hỗ trợ trình duyệt: Firefox, Chrome, Safari; IE7 +; iOS 6.x, 7.x; Android 4.x
Giấy phép: Yahoo! Inc BSD
Nhận xét: Pure chỉ cung cấp khung xương cơ bản và sạch sẽ nhất cho sự khởi đầu của dự án. Nó là lý tưởng cho những người không cần một khuôn khổ đầy đủ tính năng tuy nhiên họ vẫn cần một số thành phần cụ thể để đưa vào website của mình.

5. UIKit của YOOtheme

uikit-screen

UIKit

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:

Người sáng tạo: YOOtheme.
Phát hành: 2013
Phiên bản hiện tại: 2.13.1
Popularity: 3,800+ sao trên GitHub
Mô tả: “Một module-framework với dung lượng nhỏ, đáp ứng cho việc phát triển giao diện website một cách nhanh chóng và mạnh mẽ.”
Khái niệm cốt lõi/nguyên tắc: RWD, Mobile first.
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.
Tài liệu: Tốt.
Khả năng Customize: Advanced GUI Customizer.
Hỗ trợ trình duyệt: Chrome, Firefox, Safari, IE9+
Giấy phép: MIT
Nhận xét: UIKit được sử dụng thành công trong nhiều theme WordPress. Nó cung cấp một cơ chế tùy biến linh hoạt và mạnh mẽ, cũng như thủ công thông qua giao diện tùy biến của mình.

Vậy framework nào phù hợp với bạn?

Cuối cùng, hãy để tôi cung cấp cho bạn một số hướng dẫn cho việc lựa chọn các UI framework. Dưới đây là một số tiêu chí quan trọng để đưa ra quyết định:

– Framework có đủ sự phổ biến? Phổ biến lớn hơn có nghĩa là nhiều người tham gia vào dự án, và do đó sẽ có thêm các hướng dẫn và các bài viết từ cộng đồng, ví dụ như các trang web hướng dẫn, các thành phần mở rộng của bên thứ ba,… Lớn, nổi tiếng cũng có nghĩa là framework đó có tương lai hơn – một framework với một cộng đồng lớn hơn xung quanh nó thì ít có khả năng bị bỏ rơi.

– Framework đó có phát triển theo hướng tích cực? Một framework tốt cần phải được cập nhật version liên tục với các công nghệ web mới nhất, đặc biệt là liên quan đến vấn đề mobile.

– Framework đã đủ khả năng để release? Nếu một framework cụ thể đã được sử dụng trong các dự án thử nghiệm hoặc thông qua các ví dụ, thì bạn hoàn toàn có thể tự do sử dụng cũng như khám phá thêm về nó, tuy nhiên phải sử dụng nó cho các dự án chuyên nghiệp thì có thể sẽ là không khôn ngoan.

– Framework có kênh cung cấp tài liệu đủ tốt? Tài liệu tốt luôn là mong muốn để tạo thuận lợi cho quá trình học tập của bạn.

Cụ thể về mô tả chi tiết của tài liệu như thế nào? Điểm chính ở đây là một framework có tài liệu mô tả chung chung thực sự khó làm việc hơn so với một framework được mô tả cụ thể. Trong hầu hết các trường hợp, sẽ là tốt hơn để chọn một framework đã được minimize bởi vì nó nhẹ nhàng hơn. Việc chúng ta thêm CSS mới thì sẽ thuận tiện và hiệu quả hơn so với việc ghi đè lên sửa những cái hiện có.

– Cuối cùng, trong trường hợp bạn vẫn không chắc chắn, bạn có thể áp dụng một cách tiếp cận mix-and-match. Nếu một framework cụ thể không đáp ứng nhu cầu của bạn, bạn có thể lựa chọn sử dụng các thành phần từ hai hoặc nhiều framework. Ví dụ, bạn có thể sử dụng bootstrap để tạo grid, tuy nhiên bạn thích sử dụng vài class của Pure, và cộng vào đó là khả năng tùy biến của UIKit.

Tóm lại quyết định sử dụng framework nào và sử dụng như thế nào nó hoàn toàn phụ thuộc vào tính chất dự án cũng như thói quen của bạn, tại đây chúng tôi đã cung cấp cho bạn những điểm mạnh và điểm yếu của những UI framework được cho là xuất sắc nhất hiện nay. Nếu bạn nghĩ chúng tôi còn bỏ sót điều gì, hãy cho chúng tôi biết ý kiến của bạn ở phần comment.

About Thiện Trần

Rất ham chơi - hơi ham học - luôn mong muốn được chia sẻ kiến thức của mình, hy vọng có thể giúp đỡ được mọi người. Bên cạnh đó cũng đang cố gắng xây dựng một cộng đồng xoay quanh việc giúp đỡ nhau trong học tập và công việc để góp phần đưa nền công nghệ thông tin đi lên.

Check Also

1409261660001

Trở thành một full-stack developer?

Bất kì ai trong ngành lập trình – phát triển web ngày nay đều có ...

Yii Framework Development Services

[Yii2] – Hướng dẫn lấy và xóa dữ liệu

Mình sẽ có một series videos để hướng dẫn các bạn về Yii framework version ...

2 comments

  1. Thanks for finally writing about >5 Css framework phổ biến nhất
    2015 | imdev.vn <Loved it!

Leave a Reply

Your email address will not be published. Required fields are marked *