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 các thành phần bên trong website và chỉ muốn có sẵn một framework hỗ trợ 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ụ hỗ trợ làm giao diện website từ A đến Z bao gồm có sẵn các CSS cho nút bấm, menu, form, chữ,….để bạn tập trung thời gian vào thiết kế layout tổng thể. Tuy nhiên các 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à danh sách các CSS Framework từ đơn giả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 gian 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à hầu như bạn có thể dễ dàng gặp một website sử dụng các thành phần của Bootstrap trên mạng Internet, ví dụ như giao diện của cddos.net cũng sử dụng Bootstrap.
Bootstrap là bộ UI Framework khá chi tiết và hỗ trợ gần như toàn bộ các 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 hoạt khi nó sử dụng quy 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.
960 Grid
- 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 thủ công thì hãy sử dụng 960 Grid mà chia cột. Đây là một grid system đơn giản, dễ sử dụng và dĩ nhiên là không có Responsive vì nó phù hợp 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 đảm bảo nó có sẵn các thành phần chủ đạo 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 hỗ trợ Responsive đầy đủ nhưng cách sử dụng khá đơn giản, cấu trúc các class có sẵn cũng không nhiều như Bootstrap.
Golden Grid System
- 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
- 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 chỉnh có hỗ trợ Responsive theo quy trình mobile-first, đặc biệt là có hỗ trợ các kiểu menu dành cho di động khá đẹp và dễ sử dụng, nó cũng có hỗ trợ nhiều hiệu ứng Javascript. Vả lại phong cách UI của Foundation là theo dạng thiết kế phẳng chủ đạo nên bạn có thể sử dụng nó cho các 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ất cả các CSS Framework là tiến hành xem qua documentation (tài liệu hướng dẫn) của họ và thêm các class tương ứng với chức năng cần sử dụng vào phần tử cần thêm style. Thông thường các bước sử dụng CSS Framework như sau:
- 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.
- 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ẻ
<link>. - 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 chi tiết cách sử dụng từng Framework thì khó mà mình có thể viết hết được vì mỗi framework cần thời gian để tìm hiểu và sử dụng, cũng như rất nhiều vấn đề để hướng dẫn nên sẽ khó có thể mà hướng dẫn hết. Do vậy hy vọng là với một vài thông tin phía trên, bạn sẽ hiểu được bản 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 bắt đầu với 960Grid bằng cách tải nó về máy và tập chia cột với các 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.