Giới thiệu 960 Grid – CSS Framework
- February 11, 2011
- 22 comments
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.
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:
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. <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>
<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>
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_12 và push_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 -->
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>
<div id="bigBox" class="grid_12"> <div class="grid_3 alpha suffix_5">grid_3</div> <div class="grid_3">grid_3</div> </div>
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>
<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>
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ày1. 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 độ
- 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.
<!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 © izwebz. All rights reserved</p> </div> </div><!--end #container --> </body> </html>
Không có nhận xét nào:
Đăng nhận xét