Thứ Ba, 22 tháng 3, 2011

Giới thiệu 960 Grid – CSS Framework

Giới thiệu 960 Grid – CSS Framework

960 Grid là một CSS Framework, mục đích của nó là giúp những người thiết kế web có thể tiết kiệm thời gian, công sức cho những công việc phải lặp đi lặp lại. Tuy đây là một framework rất phổ biến nhưng lại thiếu trầm trọng tài liệu hướng dẫn. Nếu đây là lần đầu tiên bạn mới làm quen với 960 Grid, thì bạn không khỏi bối rối khi xem mã của nó. Trong bài này chúng ta sẽ khám phá những tính năng của 960 Grid và cách sử dụng nó.

Trước đây tôi luôn nghĩ là những CSS Framework không thực sự cần thiết bởi vì CSS rất đơn giản và trực quan. Chúng ta không cần phải nhờ đến sự hỗ trợ của framework để hoàn thành giao diện một trang web. Cho đến khi có nhiều người email về hỏi cách sử dụng 960 Grid, qua tìm hiểu sơ qua về framework này, thì tôi biết rằng …. rất có thể tôi đã sai lầm khi nghĩ về các CSS Framework.
Đã bao nhiêu lần bạn phải float một cột sang trái, một cột sang phải, float logo sang trái, navigation sang phải, tính toán kích thước của từng thành phần để khỏi bị vỡ giao diện v.v..? Tôi cũng vậy và còn nhiều designer khác cũng thế. 960 Grid ra đời để giúp bạn giản lược những bước này và cho phép bạn bắt tay ngay vào phần trình bày nội dung.
960 Grid hoạt động như thế nào
960 Grid được thiết kế dựa trên một mạng lưới tọa độ. Các thành phần của trang web sẽ được sắp xếp nằm trong những mạng lưới này và toàn bộ trang web có chiều rộng là 960 Pixel. Sở dĩ nó là 960 mà không phải là những số khác là vì kích thước này phù hợp với đa số các độ phân giải màn hình và cũng rất dễ để chia đều cho các cột. Các cột có margin là 20px, đây cũng là kích thước margin phổ biến nhất để nội dung nhìn thoáng đãng và không bị rối.
960 grid
960 Grid có 3 mạng lưới chính, giao diện 12 cột, 16 cột và 24 cột. Tuy số lượng cột khác nhau nhưng kích thước không vượt quá 960 Pixel. Trong đa số các trường hợp, bạn có thể sử dụng giao diện 12 cột để thiết kế. Nhưng nếu bạn muốn có mạng lưới nhỏ hơn để tinh chỉnh các thành phần phức tạp hơn, thì bạn có thể sử dụng giao diện 16 và 24 cột. Trong bài này chúng ta sẽ nghiên cứu về giao diện 12 cột, cách áp dụng cho 2 giao diện còn lại hoàn toàn tương tự.
Cách sử dụng 960 Grid
Trước khi bạn có thể sử dụng được 960 Grid, bạn phải download CSS Framework này về đã. Sau khi download và giải nén bạn sẽ có một số thư mục như hình dưới:
960 grid
Trong bài này bạn chỉ cần quan tâm đến thư mục code. Trong đây sẽ có những file CSS như: reset.css, text.css và 960.css. Quan trọng nhất là file 960.css. Hai file kia bạn có thể giữ hoặc xóa tùy ý, nó chỉ có tác dụng reset thôi. Đa phần thì bạn nên giữ lại vì nó chứa những kiểu reset tốt nhất cho trang web.
Bạn cũng nên lưu ý nó có hai phiên bản: một đã nén với dung lượng nhỏ hơn còn một phiên bản chưa nén để chúng ta có thể làm việc với nó. Nếu bạn muốn làm trên trang web thật, thì hãy dùng phiên bản đã nén để giảm dung lượng xuống. Còn nếu bạn đang tập làm thì dùng phiên bản chưa nén để có thể xem code bên trong như thế nào.
Để sử dụng 960 Grid, bạn cần chèn đoạn mã sau vào phần <head> của tài liệu HTML, như cách chúng ta liên kết đến các file CSS thông thường.
<head>
 <meta charset='UTF-8' />
 <title>Izwebz - 960 Grid System Intro</title>
 <link rel='stylesheet' href='css/reset.css' />
 <link rel='stylesheet' href='css/960.css' />
 <link rel='stylesheet' href='css/style.css' />
</head>
Thường thì bạn nên giữ nguyên file 960.css mà không cần thay đổi gì cả. Bạn chèn thêm một file style.css vào và bạn có thể thêm những dòng code của mình vào file này.
Làm việc với 960 Grid System
Khi bạn xem biểu đồ dưới đây, hãy tưởng tượng mỗi một hộp sẽ là một CSS Class trong hệ thống 960 Grid. Để tạo một đối tượng với kích thước bằng các cột này, bạn chỉ cần gán một class tương ứng cho nó. Những CSS Class này được đặt tên theo thứ tự từ grid_1 cho đến grid_12. Class grid_1 sẽ là cột có kích thước nhỏ nhất và grid_12 sẽ là cột có kích thước lớn nhất.
960 grid
Trong giao diện 12 cột mà chúng ta sẽ sử dụng trong bài này, mỗi cột có kích thước là 60px và sẽ tăng dần lên 80px cho mỗi cột kế tiếp. Do vậy nếu bạn muốn một đối tượng có kích thước là 380px thì bạn sẽ phải dùng 5 cột và trong mã HTML bạn sẽ khai báo như sau.
<div class="grid_5"></div>
Với sự trợ giúp của những class này, bạn có thể dựng một giao diện phức tạp chỉ trong vòng một thời gian rất ngắn. Để cho đối tượng có chiều rộng tối đa là 940 Pixel, thì bạn chỉ cần khai báo cho đối tượng đó có class là grid_12 trong tài liệu HTML.
<div id="bigBox" class="grid_12">
 <p>Big box</p>
</div>
960 grid
Để ba cột còn lại nằm song song với nhau thì bạn cần viết mã HTML như sau:
<div id="wrapper" class="container_12">
   <div id="first" class="grid_4">Cột 1</div>
   <div id="second" class="grid_4">Cột 2</div>
   <div id="third" class="grid_4">Cột 3</div>
</div>
960 grid
Ở đây bạn chú ý rằng để hệ thống này hoạt động đúng đắn, bạn phải tạo một thẻ <div class=”container_12″> bao quanh lấy các thành phần khác. Sau đó bạn sẽ đặt tên các class theo số lượng cột mà bạn muốn.
Push và Pull
Nếu bạn xem trong file 960.css khi tải về, bạn sẽ thấy có 2 class là .pull_1 đến .pull_12push_1 đến push_12. Hai Class này được sử dụng để thay đổi vị trí của các thành phần trên trang theo chiều ngang. Ví dụ dưới đây ta có một giao diện 3 cột, vì một lý do nào đó bạn muốn đẩy cột bên tay trái vào trong 1 cột và kéo cột bên tay phải vào trong 2 cột bạn có thể khai báo HTML như sau:
<div id="container" class="container_12">
 <div id="first" class="grid_4 push_1">Push me if you can</div>
 <div id="second" class="grid_4">I am out of this</div>
 <div  id="third" class="grid_4 pull_2">Pull me if you can</div>
</div><!--end #container -->
960 grid
Như bạn thấy trên hình cột màu xanh dương bị đẩy sang bên tay trái 1 cột tương ứng với push_1 (ô màu hồng). Còn cột màu xanh lá cây bị kéo lại 2 ô do tác động của class pull_2.
Suffix và Prefix
Để tạo ra khoảng trống lớn giữa hai thành phần bạn có thể sử dụng hai class là Suffix và Prefix. Để tạo ra khoảng trống bằng 2 cột đằng sau một thành phần dùng Class suffix_2, hoặc tạo ra một khoảng trống bằng 4 cột ở trước một thành phần dùng prefix_4.
Ví dụ ta có 2 thẻ div như sau:
<div id="bigBox" class="grid_12">
 <div class="grid_3">grid_3</div>
 <div class="grid_3">grid_3</div>
</div>
960 grid
Bây giờ bạn muốn đẩy thẻ div thứ hai sang bên tay phải, bạn có thể làm như sau:
<div id="bigBox" class="grid_12">
 <div class="grid_3 alpha suffix_5">grid_3</div>
 <div class="grid_3">grid_3</div>
</div>
960 grid
Khi bạn thêm Class suffix_5 vào thẻ div đầu tiên, nó sẽ đẩy thẻ div thứ 2 lùi sang phải 5 ô. Bạn có thể thử với prefix sẽ cho kết quả ngược lại.
Alpha và Omega
Đây là 2 Class đặc biệt của 960 Grid dùng để loại bỏ đường biên margin của đối tượng đầu và cuối. Ví dụ bạn có mã HTML như sau:
<div id="bigBox" class="grid_12">
 <div class="grid_3">grid_3</div>
 <div class="grid_3">grid_3</div>
 <div class="grid_3">grid_3</div>
 <div class="grid_3">grid_3</div>
</div>
Khi xem trên trình duyệt bạn sẽ bị như hình dưới. Vấn đề ở đây là do chúng ta lồng 4 thẻ div vào trong một thẻ <div>id=”bigBog” class=”grid_12″</div> và tất nhiên giá trị Margin của nó vẫn còn và làm tăng kích thước của 4 thẻ này lên làm 20px (margin trái + margin phải 10+10 = 20). Đây chính là lý do mà bạn thấy ở hình dưới.
<div id="bigBox" class="grid_12">
 <div class="grid_3">grid_3</div>
 <div class="grid_3">grid_3</div>
 <div class="grid_3">grid_3</div>
 <div class="grid_3">grid_3</div>
</div>
960 grid
Để khắc phục bạn có thể sử dụng hai Class đặc biệt là Alpha và Omega.
<div id="bigBox" class="grid_12">
 <div class="grid_3 alpha">grid_3</div>
 <div class="grid_3">grid_3</div>
 <div class="grid_3">grid_3</div>
 <div class="grid_3 omega">grid_3</div>
</div>
960 grid
Với hai Class là alphaomega được thêm vào, bạn sẽ thấy đường biên của hai phần tử đầu và cuối bị mất đi và giao diện của chúng ta hoạt động bình thường.
Tóm tắt
Bài này không quá dài nhưng lại chứa rất nhiều thông tin cho một lần đọc, do vậy cho những ai ngại đọc, đây là những ý chính của bài này
1. Sử dụng Class container_12 hoặc container_16 cho thẻ div bao quanh với những giao diện 12 hoặc 16 cột.
2. Sử dụng Class grid_1 cho đến grid_12 để xác lập độ rộng của từng cột. Nếu bạn muốn cột đó có độ rộng tối đa là 960 Pixel thì cho nó class là grid_12
3. Sử dụng Class Push và Pull để định vị từng phần tử riêng lẻ trên trang mà không cần quan tâm đến vị trí của nó trong tài liệu HTML.
4. Sử dụng Prefix và Suffix để tạo khoảng trắng trước và sau phần tử.
5. Sử dụng Alpha và Omega để loại bỏ đường biên của phần tử đầu và phần tử cuối.
Điểm mạnh và mặt hạn chế của 960 Grid
Như bất cứ cái gì cũng có 2 mặt, 960 Grid cũng có những điểm mạnh và mặt hạn chế như sau. Bạn có thể tham khảo và quyết định xem mình có nên sử dụng CSS framework không.
Điểm mạnh
  • Tiết kiệm thời gian
  • Tương thích nhiều trình duyệt phổ biến
  • Thiết kế theo chuẩn tọa độ
Mặt han chế
  • Phải có kiến thức trên mức cơ bản về CSS.
  • Phụ thuộc vào Framework khiến bạn mất tự do.
  • Thêm nhiều class “vớ vỉn” vào mã HTML.
  • Mất thời gian để học về hệ thống framework đó.
  • Kích thước trang web không thể vượt quá 960 Pixel.
Đây là đoạn mã HTML để tạo ra một trang web 2 cột đơn giản sử dụng 960 Grid
<!DOCTYPE html>
<html>
<head>
 <meta charset='UTF-8' />
 <title>Izwebz - 960 Grid System Intro</title>
 <link rel='stylesheet' href='css/reset.css' />
 <link rel='stylesheet' href='css/960.css' />
 <link rel='stylesheet' href='css/style.css' />
</head>

<body>

<div id="container" class="container_12">
 <div id="header" class="grid_12">This is a header</div>
 <div id="sidebar" class="grid_3"><h1>This is the sidebar</h1></div>
 <div id="mainContent" class="grid_9 omega"><p>This is the content</p></div>
 <div id="footer" class="grid_12">
  <p>Copyright &copy; izwebz. All rights reserved</p>
 </div>
</div><!--end #container -->

</body>

</html>
Bạn có sử dụng 960 Grid chưa?
Bạn có sử dụng CSS framework nào không? theo bạn CSS framework có cần thiết không? với tôi, sau một thời gian làm quen với 960 Grid, tôi thấy được những tính năng vượt trội của nó và có thể sẽ sử dụng nó ở những Project sắp tới.

Không có nhận xét nào:

Đăng nhận xét