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. Dưới đây cùng tìm hiểu bài viết CSS Framework là gì và cách sử dụng CSS Framework của mindovermetal.
Mục lục nội dung
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. Đây 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 CSS Framework?
Grid System
Khi bạn muốn tự mình viết CSS cho những thành phần bên trong website. 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. 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à hầu hết 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. com cũng sử dụng Bootstrap.
Bootstrap là bộ UI Framework khá chi tiết 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 quy trình tiến độ mobile-first để làm giao diện.
- 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 bằng tay. 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à.
- 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 vừa đủ. 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.
- Thể loại: Grid System
- Cấp độ: Dễ
- Responsive: Có
Cũng giống như 960G rid. Golden Grid System là một mạng lưới hệ thống grid system tương hỗ bạn chia cột thuận tiện và có tương hỗ Responsive.
- Thể loại: CSS UI Framework
- Cấp độ: Trung bình
- Responsive: Có
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ẻ.
- 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.
Với thông tin trên của mindovermetal 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 khởi đầu 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.
