TOP 10 FRAMEWORK CSS NHỎ GỌN VÀ HIỆU QUẢ NHẤT HIỆN NAY

29-10-2018 16:07

Trong những năm gần đây, với sự phát triển không ngừng của mạng xã hội, xây dựng và phát triển web dần trở nên phổ biến hơn. Mỗi năm lại có rất nhiều framework front-end ra đời, trong đó Bootstrap là một trong những framework nổi tiếng nhất hiện nay.

Tuy nhiên, ngoài Bootstrap, cũng có một số cái tên khác tuy khá xa lạ nhưng rất xứng đáng để thử qua. Trong bài viết này, ITPlus Academy sẽ giới thiệu cho bạn 10 framework nhỏ gọn và hiệu quả nhất hiện nay mà lập trình viên nào cũng cần biết đến.

Spectre

https://images.viblo.asia/41c8e37b-59f7-43d3-b25f-f0dfc2a87b67.png

Là một framework CSS mới, miễn phí và có tính phản hồi cao, Spectre cung cấp các elegant element, flexbox-based, hệ thống responsive layout và các component CSS, các tiện ích, có thể sửa đổi bằng trình biên dịch Sass và Scss. Điểm mạnh nữa của Spectre là nó rất nhẹ, khi nén lại chỉ nặng khoảng 10KB và hỗ trợ hầu hết với các trình duyệt.

Mustad UI

https://images.viblo.asia/a1dac107-cc49-4c40-8656-eefe0d46ee3a.png

Mustard UI là một framework CSS mã nguồn mở, được chia thành các module, nhờ đó, bạn có thể lựa chọn sử dụng toàn bộ framework hoặc chỉ một phần của nó. Cũng là một framework rất nhẹ, nhưng Mustard UI vẫn bao gồm tất cả các thành phần cần thiết cho thiết kế như flexbox grid, button, table, form, card, và nhiều thứ khác nữa. Các thành phần này đều có thể được tuỳ chỉnh thông qua scss variable.

Bulma

https://images.viblo.asia/e0507ebb-aa78-417c-9595-058fd6695cd2.png

Bulma là một framework mã nguồn mở, miễn phí và hiện đại, được xây dựng dựa vào mô hình Flexbox layout. Bulma cung cấp 1 hệ thống grid đơn giản, responsive nav bars và các media linh hoạt. Mỗi element trong Bulma đều rất linh hoạt và được tối ưu cho kích thước màn hình nhỏ, có thể được tuỳ chỉnh dễ dàng bằng cách sử dụng các class và variable bổ trợ.

UI Kit

https://images.viblo.asia/188cbcf7-4ddc-4f69-89e5-80b1021f0bc7.jpg

UI Kit là một framework dành cho CSS và JavaScript rất tuyệt vời, nó bao gồm một bộ SVG icon font và một lượng lớn các components. UI Kit được thiết kế rất tốt, cả về giao diện lẫn cách sử dụng, với style thống nhất, các API dễ nhớ, nhiều tuỳ chọn chỉnh sửa và các class bổ trợ hữu ích

TentCSS

https://images.viblo.asia/3c22cbcd-63c1-402f-8823-38b033655c1b.jpg

TentCSS là một framework đơn giản và rất dễ sử dụng, nó cung cấp các thành phần cơ bản và thiết yếu nhất để xây dựng lên một trang responsive nó cực kỳ nhẹ (khi nén lại chỉ nặng 5kb), theo chuẩn BEM và là một grid flexbox hiện đại để bố cục layout

MaterializeCSS

https://images.viblo.asia/1a1aa577-0fca-4531-9e96-05b707a9b201.png

MaterializeCSS là một framework responsive dựa trên thiết kế Material Design. MaterializeCSS rất dễ sử dụng, đặc biệt đối với những người đã từng làm qua các framework tương tự như Bootstrap. MaterializeCSS có sẵn các mẫu template để các bạn lựa chọn, giúp chúng ta design đơn giản hơn và đỡ tốn thời gian hơn.

Foundation

https://images.viblo.asia/ad915eca-50b8-440c-b194-f13c5b7c453e.png

Zurb Foundation là một framework rất phổ biến để chúng ta xây dựng lên các trang web và ứng dụng responsive. Zurb Foundation bao gồm các module và các component rất linh hoạt, có thể tuỳ chỉnh được toàn bộ. Các bạn có thể sử dụng để thiết kế các trang web responsive tuyệt vời trên mọi thiết bị

Semantic UI

https://images.viblo.asia/eb100149-51cf-4ea2-9f26-b4920c4a53ed.png

Semantic là một framework front-end giúp tạo các layout responsive đẹp, sử dụng HTML thân thiện với con người. Semantic có khả năng tuỳ biến cao, với hơn 3000 CSS variable mà các bạn có thể tuỳ chỉnh.

Semantic là framework responsive cao vì nó được xây dựng hoàn toàn với ‘em’

Base

https://images.viblo.asia/3db935ab-6a6b-4ff0-b244-63bcb8344df2.png

Base là một responsive framework css nhẹ và rất nhỏ. Base được xây dựng dựa trên Normalize.css, được chia ra thành các module riêng biệt vì thế các bạn có thể sử dụng chỉ các module mà bạn cần. Nó rất linh hoạt và hoạt động tốt trên tất cả các trình duyệt hiện đại, bao gồm cả IE 10+

MUI

https://images.viblo.asia/57a9e73b-bf5a-45a5-9a38-39cc8334fd5f.png

MUI là một framework responsive nhỏ, theo nguyên tắc thiết kế Material Design của Google. Nó không có các phụ thuộc bên ngoài và cực kỳ nhẹ, khi nén lại chỉ 5.4kb. MUI hỗ trợ React, tuỳ biến thông qua file SASS, và có phiên bản riêng để style email

Trên đây là top 10 Framework CSS nhỏ gọn, tiện lợi và hiệu quả nhất hiện nay mà lập trình viên nào cũng nên biết đến. Hãy tự mình thử trải nghiệm hiệu quả của chúng trong những dự án sắp tới của bạn nhé!

Ban Truyền thông ITPlus Academy

Bài viết cùng chủ đề

1