Home > Wordpress > 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

Semantic Grid

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

Theo ThachPham Blog

About Huy Nguyễn

Chào mọi người, mình là Huy. Mình thích rất nhiều thứ liên quan đến máy tính, thích web thích lập trình, thích thiết kế ... :3. Thích nhiều thứ, hiện tại mình đang tìm hiểu về Wordpress bạn nào có hứng thú thì trao đổi thêm vs mình nha.

Leave a Reply

%d bloggers like this: