5 Front-end Frameworks phổ biến nhất năm 2014

5 Front-end Frameworks phổ biến nhất năm 2014
      Accelerated Mobile Pages

Ngày nay, có rất nhiều Front-end Frameworks CSS được phát triển và đưa vào sử dụng. Nhưng số lượng những framework thực sự tốt chỉ đếm được trên đầu ngón...

Ngày nay, có rất nhiều Front-end Frameworks [CSS] được phát triển và đưa vào sử dụng. Nhưng số lượng những framework thực sự tốt chỉ đếm được trên đầu ngón tay. Hôm nay, công cụ thiết kế web xin chia sẻ 5 framework mà chúng tôi nghĩ rằng nó là tốt nhất hiện nay.


Mỗi framework có những thế mạnh và điểm yếu riêng của mình, và phù hợp với từng khu vực riêng biệt của ứng dụng, cho phép bạn lựa chọn dựa trên các nhu cầu của một dự án web cụ thể. Chẳng hạn như nếu dự án web của bạn là đơn giản, thì không có nhu cầu sử dụng một framework phức tạp. Ngoài ra, rất nhiều các tùy chọn là mô-đun, cho phép bạn chỉ sử dụng các thành phần bạn cần, hoặc thậm chí trộn các thành phần từ các framework khác nhau.


Xem thêm: 7 PHP framework hay và thông dụng trong thiết kế web


Các khuôn khổ mà chúng ta sẽ khám phá được giới thiệu dựa trên mức độ nổi tiếng GitHub của nó, bắt đầu với framework phổ biến nhất tất nhiên là Bootstrap.


1) Bootstrap


Bootstrap là các framework tiên phong không thể tranh cãi hiện nay. Không chỉ có tính phổ biến rất lớn, mà còn đang phát triển mỗi ngày, bạn có thể chắc chắn rằng bộ công cụ thiết kế framework tuyệt vời này sẽ không làm bạn thất vọng, hoặc để hướng bạn trên một con đường xây dựng trang thiết kế web thành công.


cong cu framework Boostrap

Công cụ framework Bootstrap


- Tác giả: Mark Otto và Jacob Thornton .

- Phát hành: 2011

- Phiên bản hiện tại: 3.3.1

- Độ nổi tiếng : 75,000+ sao trên GitHub

- Mô tả: "Bootstrap là  framework HTML, CSS, và JavaScript phổ biến nhất dành cho các dự án thiết kế web và phát triển tính đáp ứng, các dự án thiết kế web mobile đầu tiên."

- Khái niệm cốt lõi / nguyên tắc: Thiết kế web thích ứng và điện thoại di động đầu tiên.

- Kích thước framework: 145 KB

- Bộ xử lý: Less và Sass

- Tính thích ứng:  Có

- Modular: Có

- Bắt đầu từ templates / layouts: Có

- Biểu tượng thiết lập: bộ Glyphicons Halflings

- Extras / Add-ons: Không có sẵn, nhưng nhiều plug-ins của bên thứ ba có sẵn.

- Thành phần độc đáo: Jumbotron

- Tài liệu hướng dẫn: Tốt

- Tính tuỳ chỉnh: GUI Customizer cơ bản. Thật không may, 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.

- Hỗ trợ trình duyệt: Firefox, Chrome, Safari, IE8 + (bạn cần Respond.js cho IE8)

- Giấy phép: MIT


Ghi chú về Bootstrap


Sức mạnh chính của Bootstrap là độ phổ biến rộng lớn của nó. Về mặt kỹ thuật, nó không thực sự tốt hơn so với những công cụ khác trong danh sách, nhưng nó cung cấp nhiều hơn các nguồn lực (các bài báo và hướng dẫn, các plug-in của bên thứ ba và các phần mở rộng, xây dựng theme, vv) so với bốn framework khác cộng lại. Trong ngắn hạn, Bootstrap là ở khắp mọi nơi . Và đây là lý do các nhà thiết kế web tiếp tục lựa chọn công cụ này.


Xem thêm: Hướng dẫn thiết kế web thích ứng với Bootstrap CSS


2. Foundation của ZURB


Foundation là công cụ lớn thứ hai trong danh sách này. Với một công ty vững chắc như ZURB đứng đằng sau, framework này có thực sự mạnh mẽ như chính cái tên của mình. Thời gian đã chứng minh tất cả, Foundation được sử dụng trên nhiều trang thiết kế web lớn như Facebook, Mozilla, Ebay, Yahoo !, và National Geographic ...


cong cu framework Foundation

Công cụ framework Foundation


- Tác giả: ZURB

- Phát hành: 2011

- Phiên bản hiện tại: 5.4.7

- Độ nổi tiếng : 18,000+ sao trên GitHub

- Mô tả: "Framework front-end thích ứng cao cấp nhất thế giới"

- Khái niệm cốt lõi / nguyên tắc: Thiết kế web thích ứng và điện thoại di động đầu tiên, ngữ nghĩa

- Kích thước framework: 326 KB

- Bộ xử lý:  Sass

- Tính thích ứng:  Có

- Modular: Có

- Bắt đầu từ templates / layouts: Có

- Biểu tượng thiết lập: Foundation Icon Fonts

- Extras / Add-ons: Có

- Thành phần độc đáo: Thanh icon, Clearing Lightbox, Flex Video, Tổ hợp phím, Joyride, bảng giá.

- Tài liệu hướng dẫn: Tốt. Nhiều nguồn bổ sung có sẵn.

- Tính tuỳ chỉnh: Không GUI Customizer, 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


Ghi chú về Foundation


Foundation là một  framework thực sự chuyên nghiệp với sự hỗ trợ kinh doanh, đào tạo, tư vấn và cung cấp. Nó cũng cung cấp nhiều nguồn lực để giúp bạn tìm hiểu và sử dụng framework nhanh hơn và dễ dàng hơn.


3) Semantic UI


Semantic UI là một nỗ lực không ngừng để xây dựng các thiết kế web có nhiều ngữ nghĩa. 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.


cong cu framework Semantic UI

Công cụ framework Semantic UI


- Tác giả: Jack Lukic

- Phát hành: 2013

- Phiên bản hiện tại: 1.2.0

- Độ nổi tiếng : 12,900+ sao trên GitHub

- Mô tả: "Một Framework thành phần UI 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, tính thích ứng

- Kích thước framework: 552 KB

- Bộ xử lý:  Less

- Tính thích ứng:  Có

- Modular: Có

- Bắt đầu từ templates / layouts: Không có

- Biểu tượng thiết lập:  Font Awesome

- Extras / Add-ons: Không

- Thành phần độc đáo: Divider, Flag, Reveal, Rail, Step, Quảng cáo, Card, Feed, Item, Thống kê, Dimmer, Rating, Shape.

- Tài liệu hướng dẫn: Rất tốt. Semantic cung cấp một tài liệu được tổ chức tổ chức  rất tốt, cộng với một trang web 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ủ đề.

- Tính tuỳ chỉnh: Không GUI Customizer, chỉ dẫn sử dụng tuỳ biến.

- Hỗ trợ trình duyệt: Firefox, Chrome, Safari, IE10 + (với trình duyệt IE9 tiền tố chỉ), Android 4, Blackberry 10

- Giấy phép: MIT


Ghi chú về UI Semantic


Semantic là một framework sáng tạo và có đầy đủ tính năng nhất  trong số những framework được thảo luận ở đây. Cấu trúc tổng thể của framework và các quy ước đặt tên, về mặt logic rõ ràng và ngữ nghĩa của các lớp của nó cũng vượt qua những công cụ khác.


4) Pure của Yahoo!


Pure là một hệ thống modular nhẹ - được viết bằng tinh khiết bằng 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.


cong cu framework Pure

Công cụ framework Pure


- Tác giả: Yahoo

- Phát hành: 2013

- Phiên bản hiện tại: 0.5.0

- Độ nổi tiếng : 9,900+ sao trên GitHub

- Mô tả: "Một bộ các module CSS thích ứng nhỏ mà bạn có thể sử dụng trong bất kỳ một dự án thiết kế web nào"

- Khái niệm cốt lõi / nguyên tắc:  SMACSS , tối giản

- Kích thước framework: 18 KB

- Bộ xử lý:  Không

- Tính thích ứng:  Có

- Modular: Có

- Bắt đầu từ templates / layouts: Không có

- Biểu tượng thiết lập:  Không. Bạn có thể sử dụng Font Awesome thay thế.

- Extras / Add-ons: Không

- Thành phần độc đáo: Không

- Tài liệu hướng dẫn: Tốt

- Tính tuỳ chỉnh: GUI Builder Skin cơ bản

- Hỗ trợ trình duyệt:  phiên bản mới nhất của Firefox, Chrome, Safari; IE7 +; iOS 6.x, 7.x; Android 4.x

- Giấy phép: Yahoo! BSD Inc.


Ghi chú về Pure


Pure cung cấp các style bare-bones cho một khởi đầu sạch sẽ của dự án web. Đó là một công cụ lý tưởng cho những nhà thiết kế we không cần một framework đầy đủ tính năng mà chỉ bao gồm các thành phần cụ thể để đưa vào tác phẩm của họ.


5) UIKit của YOOtheme


UIKit là một bộ sưu tập ngắn gọn, dễ dàng để sử dụng và dễ dàng để tùy chỉnh các thành phần. Mặc dù công cụ này chưa phổ biến như các công cụ khác trong danh sách, nhưng nó cung cấp các chức năng tương tự và chất lượng.


cong cu framework UIKIT

Công cụ framework UIKIT


- Tác giả: YOOtheme

- Phát hành: 2013

- Phiên bản hiện tại:  2.13.1

- Độ nổi tiếng : 3,800+ sao trên GitHub

- Mô tả: "Một framework front-ent nhẹ và modular để phát triển giao diện web nhanh và mạnh mẽ"

- Khái niệm cốt lõi / nguyên tắc: RWD, điện thoại di động đầu tiên

- Kích thước framework: 118 KB

- Bộ xử lý:  Less, Sass

- Tính thích ứng:  Có

- Modular: Có

- Bắt đầu từ templates / layouts: Có

- Biểu tượng thiết lập: Font Awesome

- Extras / Add-ons: Có

- Thành phần độc đáo: Article, Flex, Cover, HTML Editor

- Tài liệu hướng dẫn: Tốt

- Tính tuỳ chỉnh: GUI Customizer nâng cao

- Hỗ trợ trình duyệt:  Chrome, Firefox, Safari, IE9 +

- Giấy phép: MIT


Ghi chú về UIKit


UIKit được sử dụng thành công trong nhiều chủ đề WordPress . Nó cung cấp một cơ chế tùy biến linh hoạt và mạnh mẽ, hoặc bằng tay hoặc thông qua giao diện tùy biến của nó.


Framework nào phù hợp với bạn?


Cuối cùng, hãy để chúng tôi cung cấp cho bạn một số hướng dẫn về việc lựa chọn một framework chính xác, phù hợp. Dưới đây là một số những điều quan trọng:


- Một framework nổi tiếng? Một framework có độ phổ biến lớn hơn có nghĩa là nhiều người tham gia vào dự án, và do đó, có thêm các hướng dẫn và các bài viết từ cộng đồng, thực tế hơn. Ví dụ, có nhiều các thiết kế web, các phần mở rộng của bên thứ ba hơn, và tích hợp tốt hơn với các sản phẩm phát triển web tương đối. Mức độ nổi tiếng cũng có nghĩa là framework sẽ phát triển hơn trong tương lai - một framework với một cộng đồng lớn xung quanh thì ít có khả năng bị bỏ rơi.


- Một framework có sự phát triển tích cực? Một framework tốt cần phải nâng cấp liên tục với các công nghệ web mới nhất, đặc biệt là liên quan đến điện thoại di động.


- Tính cẩn thận của Framework? Nếu một framework cụ thể vẫn chưa được sử dụng và thử nghiệm trong các dự án thực tế, thì bạn có thể tự do thử nghiệm với nó, nhưng sử dụng nó trong các dự án web chuyên nghiệp của bạn có thể là một lựa chọn không khôn ngoan.


- Framework có tài liệu hướng dẫn 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ấp độ đặc trưng của Framework? Điểm chính ở đây là một framework chung chung hơn là dễ dàng để làm việc hơn so với một framework có cấp độ đặc trưng cao. Trong hầu hết các trường hợp, sẽ tốt hơn để chọn một framework có thể áp dụng style  tối thiểu bởi vì nó dễ dàng hơn để tùy chỉnh.


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 thỏa mãn nhu cầu của bạn, bạn có thể kết hợp các thành phần từ hai hoặc nhiều cho dự án. Ví dụ, bạn có thể nhận được nhỏ hơn cơ sở  phong cách CSS từ một khuôn khổ, một hệ thống lưới điện từ ưa thích khác, và các thành phần phức tạp hơn từ một phần ba.


Bạn nghĩ gì về những framework trên đây? Để lại ý kiến dưới đây nhé :)