Friday, 27 December 2013 08:00

Chia cột trong CSS nhanh gọn lẹ với Semantic.gs

Written by 
Rate this item
(2 votes)

Thực tế dựa theo kinh nghiệm đã trải qua của mình, thì phần chia cột cho website trong CSS là bước mình thấy buồn nhạt nhất vì chúng ta phải làm đi làm lại một động tác với nhiều đoạn CSS na ná nhau.

Chính vì lẽ đó, mình đã chuyển qua dùng các CSS Grid System từ lâu nhằm giảm bớt khâu này, vừa nhanh tiện lợi mà lại vừa tối ưu, đỡ phải gặp lỗi linh tinh.

Nếu bạn là người lần đầu tiên nghe đến CSS Grid System thì có thể tham khảo bài Tổng quan 960Grid trong phần tiếp theo để hiểu nhiệm vụ các các grid system này là gì.

Giới thiệu Semantic Grid

Semantic.gs là một grid system dựa trên cấu trúc của 960Grid – một grid system quá nổi tiếng và lâu đời. Sở dĩ trong serie này mình chọn dùng Semantic.gs thay cho 960.gs là vì nó hỗ trợ riêng cho LESS, SASS và hỗ trợ Responsive rất chuẩn, cách sử dụng lại đơn giản.
Nếu những ai mới tìm hiểu CSS thì có thể hơi rối với LESS vì có thể chưa quen, nhưng mình cũng không bao giờ muốn mọi việc trở nên phức tạp hơn mà mình cố tình mang LESS vào đây cũng có nguyên do.

Thứ nhất, nếu bạn sử dụng grid system bằng LESS thì công đoạn chia cột trong CSS sẽ đơn giản và nhanh hơn nhiều. Vì khi làm việc với một grid system hay một CSS Framework bất kỳ, bạn sẽ biết rằng chúng ta sẽ cần chèn các class riêng của nó vào giao diện HTML. Điều này sẽ không tốt chút nào với các cấu trúc website phức tạp vì nhìn đâu cũng ra class của framework, và đó cũng là lý do nhiều người quay lưng với CSS Framework.

Còn nếu bạn sử dụng LESS hay SASS thì công việc này đơn giản hơn, không cần thêm class linh tinh vào HTML mà chỉ cần viết CSS bằng phương pháp kế thừa (extend) các thuộc tính có sẵn trong các CSS Processor (ám chỉ LESS, SASS,…) là xong.

Để dễ hiểu, mình có thể minh chứng thêm bằng ví dụ nhỏ dưới đây. Bây giờ mình có một thẻ đoạn HTML như sau:



Sau đó mình sẽ viết CSS bằng LESS như thế này:

Code CSS viết bằng LESS để chia cột trong Semantic.gs

.right {
 .column(6);
 background: green;
 padding: 25px;
 color: #fff;
}
.left {
 .column(6);
 background: red;
 padding: 25px;
 color: #fff;
}

Các thuộc tính bình thường kia chắc bạn cũng hiểu rồi, ở đây chúng ta quan tâm đến đoạn .column(). Đoạn này có nghĩa là nó sẽ cho phép class được chọn thừa hưởng thuộc tính chia cột với tham số là 6. Bởi vì trong Semantic hỗ trợ tham số từ 1 đến 12 tượng trưng cho số cột trong grid system. Khi chạy lên trình duyệt thì nó sẽ ra kết quả như sau:


Và đây là code CSS mà LESS xuất ra, nhìn phát hiểu ngay:

.right {
 display: inline;
 float: left;
 width: 27.05902083333333em;
 margin: 0 0.5882395833333333em;
 background: green;
 padding: 25px;
 color: #fff;
}
.left {
 display: inline;
 float: left;
 width: 27.05902083333333em;
 margin: 0 0.5882395833333333em;
 background: red;
 padding: 25px;
 color: #fff;
}

Oke, nếu bạn đặt ra câu hỏi là nó clear CSS bằng cách nào khi chúng ta float nhiều thành phần trên website? Ok, mình thử một ví dụ mới thế này.

Rồi mình sẽ có một đoạn CSS như sau viết bằng LESS để chia cột.

.wrapper {
 width: @total-width; // @total-width là một biến được định sẵn giá trị = 960px
 overflow: hidden;
 margin: 0 auto; // Căn giữa giao diện
 text-align: center;
}
.container {
 .column(12); // Thiết lập tổng 12 cột cho khu vực .container
 
.content {
 .row(12); // .row() sẽ bao gồm các thuộc tính clear CSS và tối ưu để lồng nhiều cột.
 color: #fff;
 
.content-left {
 .column(6,12); // Cho .content-left được hưởng 6/12 cột
 background: green;
 color: #fff;
 }
 
.content-right {
 .column(6,12); // Cho .content-right được hưởng 6/12 cột
 background: red;
 color: #fff;
 }
 }
 .box {
 .row(12); // Thiết lập 12 cột cho khu vực .box
 .box1, .box2, .box3, .box4 {
 .column(3,12); // Cho tất cả box bên trong hưởng 3/12 cột
 background: gray;
 padding: 2.5em 0;
 margin-top: 35px;
 text-align: center;
 }
 }
}

Okay, ta có kết quả trông như thế này nè…

Quá đẹp cho đội bán dép luôn  :* . Code CSS của đoạn trên là đây, bạn xem kỹ sẽ hiểu được ý nghĩa của hệ thống grid Semantic.

Code CSS của đoạn chia cột phức tạp

body {
 width: 100%;
 *zoom: 1;
}
body:before,
body:after {
 content: "";
 display: table;
}
body:after {
 clear: both;
}
.wrapper {
 width: 56.471em;
 overflow: hidden;
 margin: 0 auto;
 text-align: center;
}
.container {
 display: inline;
 float: left;
 width: 55.29452083333333em;
 margin: 0 0.5882395833333333em;
}
.container .content {
 display: block;
 width: 57.647479166666656em;
 margin: 0 -0.5882395833333333em;
 *zoom: 1;
 color: #fff;
}
.container .content:before,
.container .content:after {
 content: "";
 display: table;
}
.container .content:after {
 clear: both;
}
.container .content .content-left {
 display: inline;
 float: left;
 width: 27.05902083333333em;
 margin: 0 0.5882395833333333em;
 background: green;
 color: #fff;
}
.container .content .content-right {
 display: inline;
 float: left;
 width: 27.05902083333333em;
 margin: 0 0.5882395833333333em;
 background: red;
 color: #fff;
}
.container .box {
 display: block;
 width: 57.647479166666656em;
 margin: 0 -0.5882395833333333em;
 *zoom: 1;
}
.container .box:before,
.container .box:after {
 content: "";
 display: table;
}
.container .box:after {
 clear: both;
}
.container .box .box1,
.container .box .box2,
.container .box .box3,
.container .box .box4 {
 display: inline;
 float: left;
 width: 12.941270833333332em;
 margin: 0 0.5882395833333333em;
 background: gray;
 padding: 2.5em 0;
 margin-top: 35px;
 text-align: center;
}

Như vậy, chúng ta có thể kết luận ngắn gọn về quy tắc sử dụng grid của Semantic.gs là như sau:

    Viết .column(n) vào class mà chúng ta muốn chia cột, trong đó n là số tự nhiên từ 1 đến 12, tương ứng với số cột. (ví dụ 1)
    Nếu bạn có một khu vực chứa nhiều hơn một đối tượng cần chia cột thì viết thêm .row(n) để thiết lập hàng cho nó, n cũng là số tự nhiên từ 1 tới 12. Sau đó, các khu vực con bên trong nó sẽ phải khai báo .column(n,n của row) để chia cột (ví dụ 2).

Bạn đã hiểu chưa nào? Nếu vẫn chưa hiểu, mời bạn vào trang chủ http://semantic.gs/ để xem các hướng dẫn chi tiết hơn nhé vì trong đó đã có hướng dẫn ngay trang chủ rất dễ thấy.

Nhìn chung thì Semantic.gs rất đơn giản và dễ sử dụng nên có thể sẽ hợp hơn cho những ai mới tập chia cột hoặc mới tìm hiểu LESS. Nếu bây giờ bạn cũng chưa rành qua LESS thì mình cũng khuyên bạn nên tìm hiểu qua luôn đi vì dùng CSS Processor cũng có nhiều cái rất thú vị, quan trọng là giúp bạn đỡ nhàm chán hơn khi viết CSS.

Nếu bạn còn thắc mắc nào về Semantic.gs cần giải đáp thì hãy comment phía dưới nhé.

Tìm ở Google

    css less
    menu trong phan noi dung lam bang css
    nang cao
    thêm cột trong wordpress
    cách chia cột css
    code css content phức tạp
    huong dan thiet ke web tapbang wordpress
    thuoc tinh row(12) trong css

Read 4658 times Last modified on Friday, 27 December 2013 08:29