CSS Framework là gì và cách sử dụng CSS Framework

Posted on by adminChuyên mục:Kiến thức Internet

Qua các bài hướng dẫn CSS của mình, chắc bạn cũng đã biết việc viết CSS từ đầu tới cuối cho các thành phần trong website rất gian nan và khá tốn công sức để có được một giao diện như ý muốn. Trong đó, có rất nhiều bước mà bạn phải làm đi làm lại đến chán nản. Vậy thì có cách nào để hỗ trợ chúng ta làm được một giao diện website như ý muốn mà vẫn muốn kiểm soát CSS của giao diện không? Có đấy, đó là sử dụng các CSS Framework.


CSS Framework là gì?

CSS Framework ra đời như một công cụ hỗ trợ các designer thiết kế giao diện website nhanh chóng và đẹp mắt với thời gian ngắn nhất nhưng ít lỗi nhất. CSS Framework là một bộ mã nguồn CSS đã được viết một số chức năng nhất định và khai báo mỗi chức năng đó vào một class riêng, để người sử dụng sẽ dễ dàng áp dụng nó vào dự án của họ bằng cách thêm class của thành phần muốn sử dụng vào phần tử họ cần áp dụng lên, ví dụ như thêm style cho một nút bấm chẳng hạn.

Hiện nay CSS thì có 2 loại chính đó là :

  • Grid System: Framework này chỉ có một chức năng chính là hỗ trợ bạn chia cột trong website nhanh chóng mà không cần phải viết đi viết lại đoạn CSS float qua bên này bên kia và clear float tùm lum. Thông thường mỗi Grid System sẽ có từ 12 hoặc 24 cột trong một hàng, bạn có thể chỉ định một hàng sử dụng bao nhiêu cột, ví dụ như bạn có một hàng 12 cột và chia mỗi cột sử dụng 3 cột trong grid system.
  • CSS UI Framework: Loại framework này sẽ là một bộ các thành phần UI (User Interface) hoàn chỉnh như có sẵn CSS cho các nút bấm, menu, form,…nói chung là tất tần tật những thành phần trong website, thậm chí là các hiệu ứng Javascript để người sử dụng có thể xây dựng một giao diện website thông qua UI của framework đó nếu designer muốn tiết kiệm tối đa thời gian.

Khi nào nên sử dụng?

Grid System

Khi bạn muốn tự mình viết CSS cho những thành phần bên trong website và chỉ muốn có sẵn một framework tương hỗ chia cột nhanh gọn. Ưu điểm là nhẹ vì không có nhiều CSS .

CSS UI System

Khi bạn muốn sử dụng framework như một công cụ tương hỗ làm giao diện website từ A đến Z gồm có có sẵn những CSS cho nút bấm, menu, form, chữ, …. để bạn tập trung chuyên sâu thời hạn vào phong cách thiết kế layout tổng thể và toàn diện. Tuy nhiên những bộ UI này sẽ nặng hơn nhiều so với Grid System .

Một số CSS Framework tiêu biểu và thông dụng

Dưới đây là list những CSS Framework từ đơn thuần đến phức tạp mà đang rất được nhiều người sử dụng, bạn nên dành thời hạn xem qua từng framework để “ biết mặt ” nó để sau này có việc thì nhớ tới mà dùng .

  • Thể loại: CSS UI Framework
  • Cấp độ: Khó
  • Responsive: Có

Đây là bộ CSS Framework nổi tiếng nhất hiện tại mà phần nhiều bạn hoàn toàn có thể thuận tiện gặp một website sử dụng những thành phần của Bootstrap trên mạng Internet, ví dụ như giao diện của Thachpham. com cũng sử dụng Bootstrap .
Bootstrap là bộ UI Framework khá cụ thể và tương hỗ gần như hàng loạt những thành phần bên trong website. Chỉ tính riêng grid system của nó thôi cũng đã rất “ khủng ” và linh động khi nó sử dụng quá trình mobile-first để làm giao diện .

Ngoài ra, có hai lý do nữa để nhiều người thích dùng Bootstrap đó là các style có sẵn cho các thành phần rất đẹp nếu như bạn có xem qua Bootstrap components của nó. Và lý do nữa đó là nó cũng hỗ trợ sẵn nhiều hiệu ứng Javascript với jQuery rất độc đáo và đầy đủ mà bạn có thể xem qua tại đây.

Xem thêm: Các starter theme tích hợp Bootstrap cho WordPress.

960grid

  • Thể loại: Grid System
  • Cấp độ: Dễ
  • Responsive: Không

Nếu bạn là người mới học CSS, không thích tự chia cột bằng tay thủ công thì hãy sử dụng 960 Grid mà chia cột. Đây là một grid system đơn thuần, dễ sử dụng và đương nhiên là không có Responsive vì nó tương thích với người mới mà .

purecss

  • Thể loại: CSS UI Framework
  • Cấp độ: Dễ
  • Responsive: Có

Có thể bạn không cần một UI Framework nặng nề như Bootstrap mà vẫn bảo vệ nó có sẵn những thành phần chủ yếu trên website như nút bấm, form, menu và grid thì PureCSS là lựa chọn thích hợp cho bạn. Mặc dù vẫn tương hỗ Responsive khá đầy đủ nhưng cách sử dụng khá đơn thuần, cấu trúc những class có sẵn cũng không nhiều như Bootstrap .

golden-grid

  • Thể loại: Grid System
  • Cấp độ: Dễ
  • Responsive: Có

Cũng giống như 960Grid, Golden Grid System là một hệ thống grid system hỗ trợ bạn chia cột dễ dàng và có hỗ trợ Responsive.

foundation-css

  • Thể loại: CSS UI Framework
  • Cấp độ: Trung bình
  • Responsive: Có

Cũng giống như Bootstrap, Foundation là một bộ UI Framework khá hoàn hảo có tương hỗ Responsive theo quy trình tiến độ mobile-first, đặc biệt quan trọng là có tương hỗ những kiểu menu dành cho di động khá đẹp và dễ sử dụng, nó cũng có tương hỗ nhiều hiệu ứng Javascript. Vả lại phong thái UI của Foundation là theo dạng phong cách thiết kế phẳng chủ yếu nên bạn hoàn toàn có thể sử dụng nó cho những giao diện phẳng .

Xem thêm: Các starter theme tích hợp Foundation cho WordPress.

Cách sử dụng CSS Framework

Cách sử dụng của tổng thể những CSS Framework là thực thi xem qua documentation ( tài liệu hướng dẫn ) của họ và thêm những class tương ứng với công dụng cần sử dụng vào thành phần cần thêm style. Thông thường những bước sử dụng CSS Framework như sau :

  1. Tải bộ framework về máy, nó sẽ bao gồm các file CSS và Javascript (nếu có) và một tài liệu HTML mẫu.
  2. Sau đó bạn tiến hành nhúng các file CSS của framework đó vào tài liệu bạn cần thiết kế với thẻ .
  3. Cuối cùng là thêm class của framework vào các phần tử bạn muốn sử dụng.

Dưới đây là ví dụ sử dụng Bootstrap 3 để chia cột và thêm nút bấm .

Lời kết

Nếu như bạn cần hướng dẫn cụ thể cách sử dụng từng Framework thì khó mà mình hoàn toàn có thể viết hết được vì mỗi framework cần thời hạn để khám phá và sử dụng, cũng như rất nhiều yếu tố để hướng dẫn nên sẽ khó hoàn toàn có thể mà hướng dẫn hết. Do vậy kỳ vọng là với một vài thông tin phía trên, bạn sẽ hiểu được thực chất của CSS Framework là gì và cách sử dụng nó, nếu bạn chưa biết sử dụng thì hãy mở màn với 960G rid bằng cách tải nó về máy và tập chia cột với những class như nó hướng dẫn, nếu bạn chưa biết class của nó thì mở tài liệu HTML lên sẽ thấy .

5/5 – ( 1 bầu chọn )

admin