CSS framework là gì? Cách sử dụng CSS framework đúng

CSS framework là gì?

Css framework là tập hợp các thư viện được xem như là một công cụ thiết kế web ra đời nhằm để giúp người lập trình tạo nên giao diện một cách nhanh chóng, đẹp mắt cũng như thân thiện với tất cả mọi loại thiết bị hiển thị, tiết kiệm được khá nhiều thời gian và hạn chế những lỗi phát sinh cho người lập trình front-end. Css framework được xem như là phần vỏ quần áo bên ngoài trang trí cho khung xương html đã dựng lên. Css tạo ra một số tính năng như class hay là các id nhất định để người lập trình có thể áp dụng vào các element html cần được áp dụng.

<h1 style="color: red; text-align: justify;">Hello word</h1>

Hiện nay CSS framework được chia thành hai loại phổ biết như sau

Gird CSS: Với framework này được thiết lập các tính năng có sẵn giúp người lập trình có thể chia cột bố trí website một cách nhanh chóng. Các cột được chia trong một hàng từ 12 cột tùy thuộc vào người lập trình muốn xây dựng để phù hợp với yêu cầu dự án. Ví dụ đối với Css bootstrap framework thì chúng ta có thể chia theo 12 cột và có thể tùy biến trong khi lập trình. dễ dàng tùy biến các số lượng cột và các thành phần.
Ví dụ:

<div class="container">
 <div class="row">
   <div class="col-sm-3 col-xs-6 "> cột của bootstrap</div>
   <div class="col-sm-3 col-xs-6 "> cột của bootstrap</div>
   <div class="col-sm-3 col-xs-6 "> cột của bootstrap</div>
   <div class="col-sm-3 col-xs-6 "> cột của bootstrap</div>
  </div>
</div>

CSS UI: là framework đã tập hợp các thư viện đầy đủ các thành phần, hầu như là có sẵn như thiết kế các button, menu, form search, các font chứ.... Với những class được hổ trợ sẵn dễ dàng cho người lập trình có tích hợp và sử dụng. Người lập trình chỉ cần gọi ra và tùy chỉnh lại cho phù hợp với nhu cầu sử dụng. framework giúp người dùng tạo ra được giao diện web một cách nhanh chóng, tiết kiệm thời gian. Ví dụ như sử dụng ta có thể sử dụng thư viện "slicknav" để tạo ra menu ở giao diện mobie một cách nhanh chóng, hay font awesome để tạo các icon phù hợp trong dự án. Là loại có phần nặng hơn một phần nhỏ đối với các loại css framework Gird

Cách sử dụng CSS:

Để sử dụng được css vào dự án chúng ta cần thực hiện theo phương pháp thông dụng sau.

1. Chúng ta xác định và chọn css framework phù hợp đối với dự án cần thực hiện, tải css framework đã chọn về theo dạng file .css hay nhẹn hơn .min.css. Tùy theo framework có các file javascript (nếu có) tùy thuộc vào css framework mà người lập trình chọn trong quá trình làm dự án.
2. Tiếp đến muốn sử dụng các thành phần của css framework thì ta phải tiến hành nhúng các file của css framework mà đã tải về trước đó với việc sử dụng cú pháp dùng thẻ <link> để gọi các file ra sử dụng
Ta sử dụng bằng cách:
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
3. Tiếp đến chúng ta thực hiện áp dụng các class của css framework vào trong các thành phần html muốn áp dụng và tạo nên giao diện cần thực hiện Ta sử dụng bằng cách:

<div class="container">
  <div class="row">
   <div class="col-sm-12 col-xs-12 ">12 cột của bootstrap</div>
  </div>
</div>

Ngoài ra bên cạnh đó thì ta có thể sử dụng việc add các css framework vào trong dự án qua các link cdn.Tuy nhiên phương pháp thực hiện này gặp một số vấn đề như trang web cdn trỏ về bị gián đoạn hay mạng bị mất thì chúng ta không thể load được. ảnh hưởng đến cấu trúc css của web site mà chúng ta sử dụng css framework thông qua link ngoài. Để khắc phục chúng ta có thể tải về và add theo các bước thông thường như ở trên.

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

(Xem thêm: Cách chèn CSS vào HTML)

Các CSS Framework phổ biến nhất hiện nay

Hiện nay có các framework phổ biến được liệt kê ở dưới:

• 1. Bootstrap: là một trong những framework được cho là phổ biến nhất hiện nay được sử dụng rộng rãi. Ưu điểm: tạo giao diện nhanh, tiết kiệm thời gian, hổ trợ đa trình duyệt và đa thiết bị. Dễ dàng tìm kiếm và thêm các plugin. Nhiều cộng đồng để học hỏi. mặc dù rất phổ biến nhưng bootstrap cũng có nhưng mặc không được tốt, nhưng vì quá nổi tiếng và sự hổ trợ tốt nên việc sử dụng được dễ dàng hơn.
• 2. Foundation: Kế bootstrap foundation là framework được đánh giá là phổ biến thứ hai. Được sử dụng bởi các đối tác lơn như Facebook, mozilla... Ưu điểm: Hổ trợ đa trình duyệt, đa thiết bị, khả năg tùy biến linh hoạt, có hổ trợ các template khởi đầu, hổ trợ mobie app, hổ trợ các hiệu ứng javascript đẹp mắt, thiết kế mẫu email, hỗ trợ việc add on, dễ dàng tìm hiểu.... Là một trong những framework được xem là cạnh tranh với bootstrap hiện tại, đang được nhiều lập trình viên sử dụng và cộng đồng ngày càng mở rộng.
• 3. Semantic UI: được phát triển với mong muốn giúp xây dựng website được dễ hiểu hơn, trực quan hơn. Tương đối nhẹ, cũng có nhưng hổ trợ tương tự như bootstrap hoặc foundation. Cũng là một trong số css framework đáng chú ý trong danh sách các framework css
• 4. Pure: Pure được phát triển bởi Yahoo là Framework nhẹ nhất trong list này, theo cấu trúc module và component để có thể tháo lắp khi cần. Một Frameworks rất tốt để phát triển các dự án từ nhỏ đến lớn đều hợp. Có thể tích hợp và sử dụng một phần của framework trong dự án và tránh việc đè chồng, làm dư thừa dữ liệu.
• 5. UIkit:UIkit là một bộ sưu tập các component đã được biến thể nhằm mục đích tinh gọn và dễ sử dụng cho lập trình viên. là framework ít người biết đến nhưng với những tính năng tương tự các framework thì có thể là phương án thay thế hoặc là những người dùng muốn tìm hiểu thêm về framework này.

Có rất nhiều các framework phổ biến hiện nay. Nhưng quan trọng là chúng ta nên chọn cái nào để phát triển. Tùy thuộc vào yêu cầu của khách hàng hay là dự án, hay có thể bạn quan tâm tới những việc như, framework nào có sự hổ trợ tốt nhất, tài liệu về nó có nhiều không, framework có thật sự phát triển và phổ biến nhất, css framework có còn đang phát triển để hoàn thiện nhất. Framework đó có đang đáp ứng được những nhu cầu phát triển của các công nghệ hiện tại và sau này không.