[Học CSS] CSS Framework là gì và cách sử dụng [NEW]

Thông qua các bài hướng dẫn CSS của tôi, có thể bạn đã biết rằng việc viết CSS từ đầu đến cuối cho các phần tử của trang web là rất khó và khá tốn công sức để có được giao diện như ý muốn. Trong đó, có nhiều công đoạn bạn phải làm đi làm lại nhiều lần đến mức nhàm chán. Vậy 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 kiểm soát được CSS của giao diện không? Có, đó là sử dụng Khung CSS.



CSS Framework là gì?

CSS Framework được sinh ra như một Công cụ giúp nhà thiết kế thiết kế giao diện website nhanh chóng, đẹp mắt với thời gian ngắn nhất mà ít sai sót nhất. CSS Framework là một bộ mã CSS đã được viết sẵn với một số chức năng nhất định và khai báo mỗi chức năng trong một lớp riêng biệt, do đó người dùng sẽ dễ dàng áp dụng vào dự án của mình bằng cách thêm lớp của thành viên. phần mà họ muốn sử dụng trên phần tử mà họ cần áp dụng nó, ví dụ như thêm kiểu vào nút.

Hiện tại, có hai loại CSS chính:

  • Hệ thống lưới điện: Framework này chỉ có một chức năng chính, đó là giúp bạn chia các cột trong trang web của mình một cách nhanh chóng mà không cần phải viết đi viết lại CSS float và xóa các float lộn xộn. Thông thường mỗi Hệ thống lưới sẽ có 12 hoặc 24 cột liên tiếp, bạn có thể chỉ định một hàng sử dụng bao nhiêu cột, ví dụ bạn có một hàng 12 cột và chia mỗi cột bằng cách sử dụng 3 cột trong hệ thống lưới.
  • Khung giao diện người dùng CSS: Loại framework này sẽ là một tập hợp đầy đủ các thành phần UI (Giao diện người dùng) như CSS có sẵn cho các nút, menu, biểu mẫu,… nói chung là tất cả các thành phần trong trang web, thậm chí cả các hiệu ứng. Javascript để người dùng có thể xây dựng giao diện website thông qua UI của framework đó nếu người thiết kế muốn tiết kiệm thời gian tối đa.

Nó nên được sử dụng lúc nào?

Hệ thống lưới điện

Khi bạn muốn tự mình viết CSS cho các phần tử bên trong trang web của mình và chỉ muốn có một framework hỗ trợ chia cột nhanh chóng. Ưu điểm là nó nhẹ vì không có nhiều CSS.

Hệ thống giao diện người dùng CSS

Khi bạn muốn sử dụng framework làm công cụ hỗ trợ làm giao diện website từ A đến Z bao gồm CSS có sẵn cho các nút, menu, biểu mẫu, văn bản,… để bạn có thể tập trung thời gian thiết kế bố cục tổng thể. Tuy nhiên, các bộ giao diện người dùng này sẽ nặng hơn nhiều so với Hệ thống lưới.

Một số CSS Framework tiêu biểu và phổ biến

Dưới đây là danh sách các CSS Framework từ đơn giản đến phức tạp đang được rất nhiều người sử dụng, bạn nên dành thời gian lướt qua từng framework để “biết” về nó để sau này nhớ lại sử dụng nhé.

Bootstrap[Học CSS] CSS Framework là gì và cách sử dụng [NEW]

  • Danh mục: Khung giao diện người dùng CSS
  • Mức độ: Khó
  • Đáp ứng: Có

Đây là CSS Framework nổi tiếng nhất hiện nay mà bạn có thể dễ dàng tìm thấy một website sử dụng thành phần Bootstrap trên Internet, ví dụ như giao diện của Thachpham.com cũng sử dụng Bootstrap.

Bootstrap là một UI Framework khá chi tiết và hỗ trợ hầu hết tất cả các thành phần bên trong website. Chỉ riêng hệ thống lưới của nó đã rất lớn và linh hoạt vì nó sử dụng quy trình ưu tiên thiết bị di động để tạo giao diện.

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

Xem thêm: Các chủ đề khởi động tích hợp Bootstrap cho WordPress.

960 lưới

960grid

  • Thể loại: Hệ thống lưới
  • Mức độ: Dễ dàng
  • Đáp ứng: Không

Nếu bạn mới làm quen với CSS, không thích chia cột theo cách thủ công thì hãy sử dụng 960 Grid chia cột. Đây là một hệ thống lưới đơn giản, dễ sử dụng và tất nhiên không phải là Responsive vì nó phù hợp với những người mới bắt đầu.

PureCSS

tinh khiết

  • Danh mục: Khung giao diện người dùng CSS
  • Mức độ: Dễ dàng
  • Đáp ứng: 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ính trên website như nút, biểu mẫu, menu và lưới, thì PureCSS là lựa chọn phù hợp cho bạn. Tuy vẫn hỗ trợ đầy đủ Responsive nhưng cách sử dụng khá đơn giản, cấu trúc các lớp có sẵn không nhiều như Bootstrap.

Hệ thống lưới vàng

lưới vàng

  • Thể loại: Hệ thống lưới
  • Mức độ: Dễ dàng
  • Đáp ứng: Có

Cũng giống như 960Grid, Golden Grid System là một hệ thống lưới giúp bạn phân chia các cột một cách dễ dàng và có hỗ trợ Responsive.

Sự thành lập

nền tảng-css

  • Danh mục: Khung giao diện người dùng CSS
  • Mức độ: Trung bình
  • Đáp ứng: Có

Giống như Bootstrap, Foundation là một UI Framework khá hoàn chỉnh hỗ trợ Responsive trong quy trình ưu tiên trên thiết bị di động, đặc biệt là hỗ trợ các kiểu menu di động đẹp và dễ sử dụng, nó cũng hỗ trợ nhiều hiệu ứng Javascript. Bên cạnh đó, phong cách UI của Foundation chủ yếu là thiết kế phẳng nên bạn có thể sử dụng nó cho các giao diện phẳng.

xem thêm: Nền tảng các chủ đề khởi động tích hợp sẵn cho WordPress.

Cách sử dụng CSS Framework

Cách sử dụng của tất cả các Khung công tác CSS là xem qua tài liệu của chúng và thêm các lớp tương ứng với chức năng được sử dụng cho phần tử được tạo kiểu. Thông thường các bước để sử dụng CSS Framework như sau:

  1. Tải xuống framework, nó sẽ bao gồm các tệp 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 tệp CSS của framework đó vào tài liệu mà bạn cần thiết kế với. nhãn <link>.
  3. Cuối cùng, thêm lớp của khuôn khổ vào các phần tử bạn muốn sử dụng.

Đây là một ví dụ sử dụng Bootstrap 3 để chia cột và thêm các nút.

Phần kết

Nếu bạn cần hướng dẫn chi tiết cách sử dụng từng framework thì mình khó viết hết 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ẽ hơi khó. hướng dẫn đầy đủ. Như vậy hy vọng với một số thông tin trên bạn sẽ hiểu bản chất của CSS Framework là gì và cách sử dụng nó, nếu chưa biết cách sử dụng thì hãy bắt đầu với 960Grid bằng cách tải về máy tính và sử dụng. chia cột với các lớp như nó hướng dẫn, nếu bạn không biết lớp của nó, hãy mở tài liệu HTML và bạn sẽ thấy.

5/5 – (1 phiếu bầu)

Tiếp tục đọc trong bộ truyện