Sass-based grid framework - Susy

Nếu là một designer hẳn bạn sẽ biết grid layout luôn là người bạn tốt của chúng ta. Grid layout giúp việc thiết kế, cấu trúc một trang web dễ dàng và hiệu quả hơn cũng như thân thiện với người dùng. Tuy nhiên các vấn đề về sắp xếp làm sao để các thành phần không chèn, đè lên nhau lại là cả vấn đề khác, để giải quyết được cần nhiều thời gian coding cũng như kinh nghiệm của designer.

Hẳn các bạn đang nghĩ đến sử dụng 1 framework CSS hỗ trợ grid nào đó như Bootstrap. Tuy nhiên việc sử dụng Bootstrap cũng có những điểm không lợi, ví dụ như phải nhớ toàn bộ các class của framework đó và add toàn bộ các loại class vào file HTML, nhìn thật là rắc rối, thậm chí không tốt cho performance.

Trong bài viết trước tôi đã đưa phương pháp liên quan đến Flexbox. Flexbox mới và khá hấp dẫn, giải quyết hầu hết các vấn đề gặp phải. Tuy nhiên để làm quen với Flexbox cũng khá tốn thời gian khi phải nhớ các thuộc tính CSS cũng như nguyên tắc mới. Thêm nữa Flexbox lại khá kén trình duyệt, điển hình là không hỗ trợ IE8.

Vì vậy để giải quyết các vần đề nêu trên, Một Sass-based grid framework ra đời, có tên là Susy. Susy được phát triển bởi Eric M. Suzanne cùng sự hỗ trợ của Chris Eppstein (người sáng lập Compass, đồng sáng lập Sass). Vì vậy Susy được biết đến rộng rãi trong cộng đồng Sass Nó rất nhẹ, hiệu quả khi sử dụng các Mixin của Sass. Nó không hề cố định số lượng column như Bootstrap (12 columns), bạn có thể tùy chọn 5, 16, 50 columns.

Susy được phát triển bởi Eric M. Suzanne với sự hỗ trợ của Chris Eppstein (người sáng lập Compass và đồng sáng lập Sass), vì vậy Susy được biết đến rộng rãi trong cộng đồng Sass.

Ngoài Susy cũng có một số framework khác như Zen Grids, Jett, Singylarity cũng sử dụng Sass mixin thay bì thêm class vào HTML. Nhưng trong bài viết này tôi chọn Susy vì nó có một cộng đồng đang phát triển và tài liệu hướng dẫn hữu ích.

Điểm mạnh

Dễ học

Nếu bạn đã dùng các framework khác như Bootstrap thì hiển nhiên là bạn quá quen với Sass, ví vậy khá dễ học Susy. Cho dù bạn không biết Sass đi nữa thì Susy không đòi hỏi các chiến thức chuyên sâu về Sass.

Dễ phát triển

Không giống những framework khác, Susy không có những style CSS mặc định và bạn cần overwrite. Thực ra Susy sẽ tính toán các style đấy giúp bạn. Điều này bạn sẽ hiểu rõ hơn ở những ví dụ phía dưới.

Điểm yếu

Tạm thời, chưa thấy điểm yếu nào. Có thể ở bài viết sau, tôi sẽ so sánh rõ hơn giữa các framework để tìm ra điểm yếu của Susy.

Susy được thiết kế để sử dụng với Compass. Tuy nhiên bạn cũng có thể không cần Compass, Susy phù hợp với bất kì Sass workflow nào, ví dụ như Rails asset.

Cài đặt Susy

$ gem install susy

Sau đó thêm @import "susy"; vào project của bạn (vì dụ như style.scss).

Default config cho Susy

Sau khi thực hiện các bước cài đặt cơ bản cho project. Chúng ta bắt đầu làm layout đầu tiên. Nhưng trước tiên cần cài đặt thông số mặc định cho Susy.

@import "susy"

/* Changing Susy default global settings */
$susy: (
  /* Tells Susy to use 12 columns */
  columns: 12,
  /* Tells Susy that the container has a max-awidth of 1120px */
  container: 1120px,
  /* Tells Susy to use border-box */
  global-box-sizing: border-box
);
/* Makes border-box properties */
@include border-box-sizing;

Phần cấu hình trên sẽ định nghĩa các "global setting" cho các grid của bạn, Bạn có thể xem thêm ở Susy documentation.

Basic layout

Chúng ta bắt đầu với HTML như sau:

<main class="wrapper">
  <header></header>
  <article></article>
  <aside></aside>
  <footer></footer>
</main>

Như đã nhắc đến phần trước, Susy phụ thuộc hoàn toàn vào CSS và Sass, vì vậy bạn không cần thêm gì nữa vào HTML của bạn. Bạn có thể sử dụng @include để thêm mixin vào Sass của bạn. Như đã thấy trên hình thì chúng ta cần header và footer chiếm 100% chiều rộng của container, vì vậy chúng ta không cần phải làm gì ở đây cả. Chúng ta cần article vá aside chiếm lần lượt 8 và 4 column. Để thực hiện điều này chúng ta sử dụng span mixin:

article {
  @include span(8 of 12);
 /* More styles here */
}

aside {
  @include span(4 of 12 last);
 /* More styles here */
}

Sau khi được compile sẽ ra code CSS như thế này:

article {
  awidth: 66.10169%;
  float: left;
  margin-right: 1.69492%;
}

aside {
  awidth: 32.20339%;
  float: right;
  margin-right: 0;
}

Bạn có thể thấy Susy đã tính toán các độ rộng của column cũng như các khoảng phân cách giữa các column (gutter) cho bạn.

Tuy nhiên các dòng vẫn đang dính vào với nhau. Tường thì chúng ta sẽ dùng tạm 1 margin nào đó phù hợp với màn hình của mình, ví dụ margin-bottom: 10px, nhưng sẽ khá xấu khi thay đổi kích thước màn hình. Susy hỗ trợ một function có tên là gutter để tạo 1 margin bằng đúng khoảng cách giữa các column cho bạn.

header, article, aside {
  margin-bottom: gutter();
}

Cuối cùng, chúng ta cần thêm container mixin vào wrapper của chúng ta để cho các thành phần bên trong nhận 100% awidth của container và nằm chính giữa container.

main.wrapper {
  @include container;
}

Đơn giản, phải không?

Tạo một galery

Gallery mixin là một thứ vô cùng hữu dụng đối với desginer. Theo như tài liệu của Susy thì function gallery "là shortcut để tạo 1 layout dạng gallery, nơi mà nhiều thành phần được sắp xếp liền nhau và cách đều nhau"

Ví dụ ta muốn tạo 1 gallery như sau

Chúng ta tạo 1 mockup html như sau:

<main>
  <header></header>
  <article>
    <ul class="gallery">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </article>
  <aside></aside>
  <footer></footer>
<main>

Chúng ta giữ nguyên SCSS như ví dụ trước và thêm phần gallery như sau:

ul.gallery {
  padding: span(1 of 8);
  list-style: none;
}

.gallery li {
  @include gallery(2 of 6);
  margin-bottom: gutter(6);

  &:nth-last-child(-n + 3) {
    margin-bottom: 0;
  }
}

Như ta thấy ở đây thì:

• Chúng ta sử dụng span(1 of 8) để thêm padding xung quanh gallery và padding này sẽ chiếm như 1 column trong 8 columns của mình. Vì vậy, chúng ta còn lại 6 columns cho các thành phần bên trong gallery.

• Sử dụng gallery mixin cho thẻ li (@include gallery(2 of 6)) để Susy biết chúng ta muốn 1 thành phần sẽ chiếm 2 trong số 6 cột còn lại, cũng có nghĩa là 1 dòng sẽ có 3 thành phần.

• Sử dụng function gutter (margin-bottom: gutter(6)) để thêm margin vào dưới các dòng và đánh dấu sẽ không thêm margin này vào dòng cuối.

Ngoài ra vì là các thành phần floating nên chúng ta cần clearfix. Ở đây, tôi dùng Compass clearfix.

ul.gallery {
  @include clearfix;
}

Responsive Web Design với Susy

Cỏ thể bạn đang thắc mắc là các ví dụ trên chưa thoả mãn các vấn đề liên quan đến responsive. Như đã nói, Susy là một công cụ mạnh mẽ cho design responsive, chúng ta cùng đến với một ví dụ để xem cách Susy xử lý responsive như thế nào.

Trong ví dụ này, chúng ta sẽ dùng media query trong Sass cùng với Susy layout mixin để tinh chỉnh các breakpoint. Chúng ta có thể định nghĩa các layout khác giống như "global setting" và gọi chúng với các mixin trong Scss. Điều này rất phù hợp với việc phân chia cho các breakpoint. Ví dụ chúng ta cần 1 layout 16 columns với các thành phần dính liền.

$map-large: (
  columns: 16,
  container: auto,
  gutters: 0,
  global-box-sizing: border-box
);

Trong ví dụ này, chúng ta sẽ tạo một gallery cho cả mobile và desktop bình thường. Với mobile có chiều rộng nhỏ hơn 480px thì chỉ hiển thị 2 ảnh trên cùng 1 dòng, nhỏ hơn 700px là 3 ảnh. Và vì chúng ta để cấu hình mặc định là 12 columns nên gallery sẽ định set lần lượt là 6 và 4 trong tổng số 12 columns.

li {
  @media (min-awidth: 480px) {
    @include gallery(6);
    margin-bottom: gutter();
  }
  @media (min-awidth: 700px) {
    @include gallery(4);
    margin-bottom: gutter();
  }
}

Với màn hình 700px, sẽ hiển thị như sau:

Với màn hình desktop (>1100px), chúng ta muốn có 1 sidebar(header) và gallery sẽ hiển thị 4 ành 1 dòng. Ở đây tôi sử dụng 1 layout 16 columns. Sidebar sẽ chiếm 4 trong 16 và thành phần gallery sẽ chiếm 3 trong 12 columns còn lại.

@media (min-awidth: 1100px) {
  @include layout($map-large);

  header {
    @include span(4);
  }

  main {
    @include span(12 last);
  }

  li {
    @include gallery(3 of 12);
    margin-bottom: 0;
  }
}

Kết quả thu được như sau:

Các bạn có thể tìm hiểu thêm ở đây

Susy là một framework khá thú vị, khá hiệu quả và dễ dùng. Trong bài viết tiếp theo, tôi sẽ đưa ra đánh giá, so sánh giữa các CSS framework hiện nay.

Cám ơn các bạn đã xem.