Home
The 960 Grid System Made Easy

Thiết kế dựa trên Grid-Based (lưới)

Trước khi chúng tôi nhận được vào các chi tiết cụ thể của 960 Grid Sys­tem, chúng ta hãy thảo luận ngắn dựa trên thiết kế dạng lưới. Ý tưởng này không phải bắt nguồi từ web. Thực tế, nó đã có từ lâu và dựa trên nguyên tắc cơ bản là canh đều.

Hãy xem xét hai bố cục trang đại diện trong hình dưới đây.

screenshot

Mặc dù cả hai hình ảnh này chỉ đơn giản là một tập hợp của hình chữ nhật, bố trí ở đầu trang có vẻ tốt hơn so với phía dưới.

Hình ảnh dưới là mô hình không rõ ràng, không trình tự, hoặc mục tiêu cụ thể, nó chỉ trông giống như một hình dạng ngẫu nhiên.

Thiết kế dựa trên lưới là một trong những cách đơn giản và hữu dụng nhất để tạo ra trật tự trên một trang. Nó có vẻ lạnh lùng và cứng nhắc, nhưng hãy nhớ rằng cách thiết kế này là cực kỳ hiệu quả, và thậm chí khá linh hoạt.

Tại sao tôi cần thiết kế trên hệ thống lưới?

The 960 Grid Sys­tem và các công cụ khác cung cấp một cách nhanh chóng và dễ dàng hệ thống lưới bằng cách sử dụng CSS. Nó đã được thử qua các trình duyệt và tối ưu hóa độ rộng cột để bạn thiết kế nội dung.

960 Grid System

screenshot

960 Grid Sys­tem là cách đơn giản để web­sites và sử dụng lưới cho độ rộng là 960 pixel.

Lý do chính để sử dụng kích cỡ 960 pixel là nó tương thích với hầu hết độ rộng của màn hình người sử dụng.

960 GS có 2 phần: 12-column grid (lưới 12 cột) và 16-column grid (lưới 16 cột)

Trong phiên bản 12 cột, cột hẹp nhất là 60 pixel. Mỗi cột sau rộng hơn 80 pixel

Giá trị các cột sẽ là: 60, 140, 220, 300, 380, 460, 540, 620, 700, 780, 860 và 940.

screenshot

Tương tự, trong 16 cột, cột hẹp nhất là 40 pix­els wide. Mỗi cột sau rộng hơn 60 pixel.

Giá trị các cột sẽ là: 40, 100, 160, 220, 280, 340, 400, 460, 520, 580, 640, 700, 760, 820, 880 và 940.

screenshot

CSS Classes

Khi bạn nhìn vào biểu đồ trên, hãy xem xét mỗi một thanh màu xanh đen nằm ngang như một lớp CSS trong các hệ thống lưới 960 GS.

Để tạo một đối tượng trong bố cục của bạn đó, bạn chỉ cần gán class đó cho thẻ div!

Các Class đặt tên theo kích thước của chúng với grid_1 hẹp nhất và grid_12 là class là rộng nhất ( grid_16 là rộng nhất trong phiên bản 16-cột).

Vì vậy, hãy nghĩ đến cách bố trí thiết kế bằng CSS tương ứng độ rộng thay vì là pixel.

screenshot

Ví dụ, sử dụng phiên bản 12-cột, nếu bạn có 3 thẻ divs của văn bản và bạn muốn được hiển thị theo bố trí 3-cột, chỉ cần gán class grid_4 cho mỗi cột với tổng số 12 (4+4+4=12).

screenshot

Tương tự, gán grid_4 CSS class cho phiên bản 16-cột để dễ dàng tạo thiết kế 4 cột (4+4+4+4=16).

screenshot

Để chắc chắn, bạn nên đặt các cột của mình trong thẻ div có class container_12 (tương tự với hệ thống cột 16)

hãy xem xét hai ví dụ hình dưới đây. Ví dụ đầu tiên là bố trí thiết kế 4-cột bằng cách sử dụng grid_3 .

Tuy nhiên, trong phiên bản thứ hai, tôi đã đẩy cột đầu tiên và kéo cột cuối cùng, kết quả là vị trí của nó thay đổi.

screenshot

Hãy ghi nhớ rằng bạn có thể đẩy các cột xa như bạn muốn. Nếu tôi đã muốn đẩy xa thêm hai cột trên, tôi sẽ gán class push_2

Việc đẩy / kéo có ý nghĩa lớn đối với cách nội dung trong tài liệu HTML.

Đầu tiên bạn muốn để logo tay trái, và sau đó bạn lại thực sự muốn nó xuất hiện ở trung tâm của trang.

Trước khi pushing/pulling:

screenshot

Bạn dùng đoạn code HTML sau:

	<div>
		<p>logo</p>
	</div>

	<div>
		<p>text column</p>
	</div>

	<div>
		<p>text column</p>
	</div>

	<div>
		<p>big box</p>
	</div>

Đây là kết quả

Sau khi pushing/pulling:

screenshot

Những khoảng không mở

Nếu bạn muốn tạo ra không gian mở (một thiết kế tốt luôn có không gian mở). Để thực hiện điều này, áp dụng prefix và suffix class. Nó giống với push và pull class.

screenshot

Như bạn thấy, ví dụ trên sử dụng một suffix_3 class để tạo ra một không gian trống bằng độ rộng của ba cột.

Ghi nhớ

Bạn luôn phải nhớ là sử dụng class alpha (“đầu tiên”) và omega (“cuối”) cho bất kỳ một dịnh dạng cột nào. Class alpha dùng cho cột đầu tiên và class omega là cho cột cuối cùng. Về cơ bản, các class này cung cấp một số tính năng để có thể kết hợp hoặc lồng với các lưới khác.

Xem lại

Với những kiến thức này, bạn sẽ sử dụng 960 Grid Sys­tem thành thạo hơn

5 khái niệm cần nhớ:

  1. Sử dụng class container_12 cho phiên bản 12 cột và class container_16 cho phiên bản 16 cột.
  2. Sử dụng grid_1, grid_2, grid_3, etc. để định độ rộng cho cột. Nếu bạn muốn lấp đầy trang theo chiều ngang, Hãy nhố tăng giá trị nó lên 12 hay 16 (i.e. grid_4 + grid_2 + grid_6 = 12).
  3. Dùng class push và pull thay đổi vị trí của một thành phần trong trang.
  4. Dùng class prefix và suffix để tạo không giản mở cho thiết kế của bạn.
  5. Dùng class alpha và omega để có thể kết hợp hoặc lồng các lưới với nhau.

Tài liệu 960 Grid System

Một vài công cụ và tài liệu tham khảo

Fluid 960 Grid System

Một phiên bản của 960 GS! Fluid giúp bố trí bố trí nội dung trong Trang. Điều này có thể làm ra một số mã phức tạp, Sử dụng hệ thống năng đồng nghĩa với việc bạn đã giải quyết những phần khó nhất cho một thiết kế.

screenshot

The 1KB CSS Grid

Một phiên bản đơn giản và dễ hiểu của 960 GS,. Nó rất dễ chỉnh sửa.

screenshot

Vari­able Grid System

Một lưới CSS đơn giản và linh hoạt dựa trên 960 Grid System.

screenshot

Grid-Based Design Gallery

Nếu bạn đang hoài nghi về 960 Grid và hệ thống lưới, hãy kiểm tra thiết kế bộ sưu tập này.screenshot

Typogrid­phy

screenshot

Tiny Fluid Grid

screenshot

Dịch và biên tập từ: Sixrevisions

Xem bài viết gốc



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s