Trang chủ Web DevelopmentHTML/CSS Chia cột trong CSS nhanh gọn lẹ với Semantic.gs

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

bởi Thạch Phạm
0 bình luận 4,5K views

Tham gia nhóm hỗ trợ WordPress

Tham gia nhóm Hỗ trợ Server - Hosting & WordPress để cùng nhau hỏi đáp và hỗ trợ các vấn đề về WordPress, tối ưu máy chủ/server.

Tham gia ngay

Semantic Grid

Vậy là serie Lập trình theme WordPress của mình cũng đã gần tới một bước khá quan trọng ban đầu đó là viết CSS cho giao diện. 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 để hiểu nhiệm vụ các các grid system này là gì.

Khuyến mãi Black Friday

Để giúp mọi người làm nhanh hơn và đỡ phải mệt mỏi trong việc dàn trang website bằng CSS nên trong serie Lập trình theme WordPress sẽ được mình hướng dẫn bằng một grid system với tên gọi là Semantic Grid (Semantic.gs). Bài này được xem là bài hướng dẫn Semantic cơ bản để bạn có thể nắm bắt và ứng dụng trong phần 5 của serie kia.

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.

Semantic.gs hỗ trợ cả LESS lẫn SASS và Stylus

Mình đề cập đến LESS trong bài này vì cách sử dụng đơn giản, không cần thông qua lệnh Ruby như SASS.

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:

Chia cột CSS bằng Semantic

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

.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:

Kết quả chia cột bằng Semantic

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.

Chia cột giao diện phức tạp bằng Semantic

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è…

Chia cột phức tạp bằng Semantic và LESS

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.

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:

  1. 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)
  2. 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é.

5/5 - (1 bình chọn)
0 bình luận

Có thể bạn quan tâm

Hiện tại blog tạm đóng bình luận vì mình cần tập trung thời gian vào cập nhật bài viết. Bình luận sẽ mở ra cho đến khi mình sẵn sàng.