Introduction to Foundation 5 - Responsive front-end framework

The most advanced front-end framework lets you build across devices.

Trong các dự án, với những yêu cầu làm Prototype cho khách hàng, hay đơn giản không có yêu cầu cụ thể về Design từ phía khách hàng, chúng ta đã khá quen thuộc với sự hỗ trợ về mặt front-end của thư viện Boostrap. Đây là một thư viện mã nguồn mở được tạo ra bởi các Developer và các Designer của Twitter giúp đỡ chúng ta khá nhiều trong việc phát triển giao diện người dùng (UI/UX) của ứng dụng.

Tuy nhiên hôm nay, tôi muốn giới thiệu với các bạn về Foundation - bộ thư viện phát triển giao diện ứng dụng người dùng được phát triển bởi ZURB, hiện tại đang được sử dụng trong khá nhiều các website lớn như Facebook, Mozilla, Ebay, Yahoo!

Trước hết hãy cùng nhau làm quen với một số khái niệm cơ bản khi bước đầu tiếp cận với Foundation:

Foundation là gì?

• Foundation (theo như quảng cáo trên trang của họ) là một front-end framework đầu tiên và tiên tiến nhất thế giới, giúp chúng ta dễ dàng xây dựng các bản prototype, các sites và các ứng dụng (apps) hoạt động trên hầu hết các thiết bị (từ các màn hình loại nhỏ như smartphone tới các màn hình cỡ trung và lớn như PC và TV) với bộ thư viện mà họ cung cấp.
• Foundation hướng tới kiến trúc mobile-first, tức là ban đầu bạn sẽ phải thiết kế ứng dụng cho các thiết bị có màn hình nhỏ đầu tiên, sau đó mở rộng ra những loại kích cỡ màn hình lớn hơn. Tuy nhiên bạn cũng không bắt buộc phải đi theo kiến trúc đó, chỉ là họ khuyên nên làm theo kiến trúc này sẽ đạt được hiệu quả tốt về thiết kế.

Front-end framework là gì?

• Tương tự như các frameworks dùng để xây dựng giao diện ứng dụng native (kiểu Xcode cho iOS), Foundation là một framework để xây dựng giao diện front-end, giao diện người dùng của website hoặc các ứng dụng web. Foundation hoạt động trên browser, bởi vậy chúng ta có thể chủ động thiết kế các View riêng lẻ mà không cần quan tâm đến vấn đề logic, hay Server xử lý ra sao.

Các kỹ thuật sử dụng trong Foundation

• Foundation được xây dựng và đóng gói với bộ HTML, CSS và Javascript, cung cấp cho người dùng các thành phần cơ bản nhất của ứng dụng Web. Ngoài ra các kỹ thuật như jQuery, HTML5 Boilerplate và Normalizr cũng được sử dụng để hỗ trợ thêm sức mạnh cho Foundation.
• Kết hợp lại chúng ta sẽ có một bộ thư viện gồm các thành phần (components) và các plugins giúp làm việc dễ dàng hơn với các loại trình duyệt (browsers) và các loại thiết bị (devices) khác nhau.

Vì sao nên sử dụng Foundation

• Foundation được phát triển và hỗ trợ bởi ZURB - công ty sử dụng framework này cho hầu hết các dự án của họ từ những startup nhỏ tới các doanh nghiệp lớn. Foundation đã được dùng và kiểm thử trong nhiều năm.
• Hiện tại Foundation đã ra phiên bản 5 và nhiều lần release với những cải tiến đáng kể để chắc chắn rằng nó có thể hoạt động tốt và tương thích với nhiều môi trường khác nhau.

Download

Bạn có thể download từ link sau: Download

Với 3 lựa chọn:

• Download Everything - Trọn bộ framework (gồm các components và plugins).
• Download Essentials - Light version của framework bao gồm các thành phần: grid, typography, interchange, buttons và Reveal.
• Custom Download - Tùy chọn những thành phần muốn tích hợp vào hệ thống, đồng thời có thể chủ động định nghĩa màu sắc (color), độ rộng cột (column size) hay font size, ...

Ngoài ra, nếu bạn quen và thích thú làm việc với SASS, chúng ta cũng có thể download và config từ link sau: Foundation with SASS.

Compatibility

Hãy cùng xem Foundation tương thích với các Browsers thế nào qua hình ảnh sau:

Ta có thể thấy Foundation tương thích với hầu hết các trình duyệt và các thiết bị. Tuy nhiên nếu bạn mong muốn ứng dụng của mình hoạt động với IE7 hoặc IE8, bạn sẽ phải cân nhắc trong việc sử dụng thư viện Foundation, hoặc chúng ta cần thêm thư viện hỗ trợ cho IE7 hoặc IE8 để làm việc cùng Foundation.

Cấu trúc thư mục

Sau khi download và giải nén, tổng quan cấu trúc thư mục của Foundation gồm các thư mục và các files như sau:

css/
	foundation.css
    foundation.min.css
    normalize.css
img/
js/
	foundation/
    vendor/
    foundation.min.js
human.txt
robots.txt
index.html

• File human.txt và robots.txt đơn giản là những file chú thích (notes) cho người dùng và cho máy tìm kiếm (search engines), chúng ta cũng không cần quá quan tâm đến 2 files này.
• Thư mục CSS chứa tất cả các file CSS cần thiết của Foundation như foundation.css, foundation.min.css và normalize.css, bạn chỉ cần import vào là có thể sử dụng được các style mà Foundation cung cấp.
• Thư mục JS chứa file chính foundation.min.js và 2 thư mục con foundation và vendor.
  • Thư mục foundation chứa các plugins hỗ trợ (mỗi plugin một file độc lập), trong từng View bạn muốn sử dụng plugin nào chỉ cần import riêng file js của plugin đó mà không nhất thiết import tất cả các plugin.
  • Thư mục vendor chứa một số file trợ giúp cho hoạt động của Foundation như jQuery, modernizr, ...
• Thư mục img chứa các file hình ảnh phục vụ cho việc thiết kế giao diện ứng dụng.

Grid System

Grid System trước đây thường được dùng để thiết kế chủ yếu cho các tạp chí, và ý tưởng này đã được đưa vào công việc thiết kế giao diện Web với sự hỗ trợ khá mạnh mẽ từ CSS. Ta có thể hiểu hết sức đơn giản về grid system đó là hệ thống giúp ta phân chia giao diện (layout) thành nhiều lưới (grids), mỗi grid chiếm một khoảng diện tích nhất định và ta có thể đặt nội dung hiển thị (HTML) vào các grid đó.

Cũng tương tự Bootstrap, Foundation cung cấp cho người dùng hệ thống grid gồm 12 cột (column), hỗ trợ luôn nested grid (tức là hệ thống grid con trong hệ thống grid cha đã chia).

Foundation Grid sẽ tự động tăng và giảm kích thước tùy theo kích cỡ trình duyệt, định nghĩa trước (pre-define) kích thước grid cho một số màn hình và thiết bị chính.

Cách sử dụng grid_system cơ bản nhất đó là bạn bọc các thành phần muốn chia cột vào một thẻ div cha với class row, đối với mỗi thành phần con chúng ta cần thêm class column hoặc columns (tùy theo số lượng cột được chia cho các thành phần con), cuối cùng là định nghĩa độ rộng cho cột với các class như: small-#, medium-# và large-# (chỗ này ý tưởng cũng giống hệt Bootstrap chỉ có tên class khác đi chút).

Code

<div class="row">
    <div class="small-4 large-6 columns">6</div>
    <div class="small-8 large-6 columns">6</div>
</div>
<div class="row">
    <div class="small-3 large-5 columns">5</div>
    <div class="small-9 large-7 columns">7</div>
</div>
<div class="row">
    <div class="small-4 columns">4</div>
    <div class="small-8 columns">8</div>
</div>
<div class="row">
    <div class="large-4 columns">4</div>
    <div class="large-4 columns">4</div>
    <div class="large-4 columns">4</div>
</div>
<div class="row">
    <div class="small-2 large-3 columns">3</div>
    <div class="small-4 large-6 columns">6</div>
    <div class="small-8 large-3 columns">3</div>
</div>
<div class="row">
    <div class="small-2 columns">2</div>
    <div class="small-8 columns">8</div>
    <div class="small-2 columns">2</div>
</div>

Output

Hệ thống grid của Foundation có các tính năng nổi bật như:

• Nesting: lồng grid trong grid.

  Code

    <div class="row">
        <div class="small-8 columns">8
            <div class="row">
                <div class="small-8 columns">8 Nested
                    <div class="row">
                        <div class="small-8 columns">8 Nested Again</div>
                        <div class="small-4 columns">4</div>
                    </div>
                </div>
                <div class="small-4 columns">4</div>
            </div>
        </div>
        <div class="small-4 columns">4</div>
    </div>

**Output**

![foundation_grid_nested.png](/uploads/8f56d126-3073-4847-917f-4da12eecb67f.png)

• Offsets: Tạo ra các khoảng trắng giữa các cột (column) trong một hàng (row) với các tên class kiểu large-offset-1 hay small-offset-3.

  Code

    <div class="row">
        <div class="large-1 columns">1 </div>
        <div class="large-11 columns">11 column</div>
    </div>
    <div class="row">
        <div class="large-1 columns">1 </div>
        <div class="large-10 large-offset-1 columns">10 column, offset 1</div>
    </div>
    <div class="row">
        <div class="large-1 columns">1 </div>
        <div class="large-9 large-offset-2 columns">9 column, offset 2</div>
    </div>
    <div class="row">
        <div class="large-1 columns">1 </div>
        <div class="large-8 large-offset-3 columns">8 column, offset 3</div>
    </div>

**Output**

![foundation_grid_offset.png](/uploads/9ca8629c-15f6-4a39-8273-160ac32e6a23.png)

• Pushing/Pulling: cho phép thay đổi thứ tự sắp xếp hiển thị của các cột trong hàng bằng cách sử dụng các class kiểu small-push-#, small-pull-# (tương tự với medium và large)

  Code

    <div class="row">
        <div class="small-6 small-push-6 columns">6 First</div>
        <div class="small-6 small-pull-6 columns">6 Last</div>
    </div>
    <div class="row">
        <div class="large-8 large-push-4 columns">8 First</div>
        <div class="large-4 large-pull-8 columns">4 last</div>
    </div>
    <div class="row">
        <div class="medium-9 medium-push-3 columns">9 First</div>
        <div class="medium-3 medium-pull-9 columns">3 Last</div>
    </div>
    <div class="row">
        <div class="small-4 small-push-8 large-8 medium-push-4 columns">8 First</div>
        <div class="small-8 small-pull-4 large-4 medium-pull-8 columns">4 last</div>
    </div>

**Output**

![foundation_grid_ordering.png](/uploads/9e7b7e0c-bed4-47f6-84e0-1ac617c656a1.png)

• Block Grid: Foundation đưa ra khái niệm block grid giúp chúng ta có thể chia cột cho một list (ul > li) bằng cách sử dụng các class small-block-grid-#, medium-block-grid-#, large-block-grid-#. # khi được thay bằng số cụ thể chính là số phần tử (item) trên một hàng. Ví dụ : small-block-grid-2 có nghĩa với màn hình nhỏ, ta sẽ có 2 phần tử li trên một hàng.

  Code

    <ul class="small-block-grid-3 medium-block-grid-3">
        <li><img src="img/1.jpg" alt="image1"></li>
        <li><img src="img/2.jpg" alt="image2"></li>
        <li><img src="img/3.jpg" alt="image3"></li>
    </ul>

**Output**

![foundation_grid_block.png](/uploads/bce56662-23b0-429f-bf26-124678f34754.png)

Các thành phần (Elements) cơ bản

Trong phần này tôi sẽ không đi sâu vào việc với thiệu chi thiết các thành phần mà Foundation cung cấp. Các bạn vui lòng tham khảo trong Document của Foundation ở phần Reference Link. Tôi chỉ giới thiệu qua về một số thành phần cơ bản cung cấp cho chúng ta những công cụ gì:

1. Utility Classes: cung cấp các class phục vụ cho việc hiển thị cơ bản như .left, .right, .clearfix, .text-left, .text-justify, .radius,...

2. Navigation: Cung cấp các thể loại Menu, Breadcums hay Pagination.

3. Media:

   • Orbit Slider: phục vụ việc tạo slider ảnh.
   • Clearing Lightbox: tạo gallery.
   • Flex Video: scale các video nhúng từ Youtube hoặc Vimeo theo đúng định dạng của thiết bị.

4. Button: phần này cũng tương tự như Bootstrap, cũng có button, button group, button dropdown.

5. Typography: bao gồm labels màu sắc đủ kiểu, inline lists, một số kiểu header (h1, h2, h3,...), một số dạng list dữ liệu (ul > li). Ngoài ra thì có thêm tính năng Print Styles với các class hỗ trợ .show-for-print, .hide-for-print.

6. Modal: hỗ trợ các thể loại Modal Popup, các Alert thông báo message và Tooltip.

7. Content: hỗ trợ trình bày nội dung trang với dropdown list, các thể loại tables, tabs, accordion menu và có thêm cả pricing tables.

Simple demo - Tourist Spot

Phần này chúng ta sẽ làm quen hơn với Foundation thông qua việc xây dựng một ứng dụng demo nho nhỏ có tên là Tourist Spots. Trong demo này có sử dụng các thành phần sau của Foundation:

1. Grid
2. Orbit
3. Pricing Table
4. Accordion
5. Section Tab
6. Form
7. Reveal

Bạn có thể xem demo tại đây.

Các bước hướng dẫn chi tiết tại đây.

So sánh Foundation và Bootstrap

Dưới đây là một vài chi tiết so sánh giữa Foundation và Bootstrap, hy vọng có thể mang lại thông tin đối sánh cho các bạn trong việc lựa chọn thư viện nào cho Project của mình.

Vấn đề về Media Queries và Grid System :

• Bootstrap: sử dụng min-awidth cho media queries

  Screens	Viewport Size	Container Width	Class Prefix
  Extra small screens	< 768px	auto	.col-xs-*
  Small screens	≥ 768px	750px	.col-sm-*
  Medium screens	≥ 992px	970px	.col-md-*
  Large screens	≥ 1200px	1170px	.col-lg-*

• Foundation: sử dụng max-awidth cho media queries

  Screens	Viewport Size	Class Prefix (Default Grid)	Class Prefix (Block Grid)
  Small screens	≤ 40em (640px)	.small-* .column(s)	.small-block-grid-*
  Medium screens	≥ 40.063em (641px)	.medium-* .column(s)	.medium-block-grid-*
  Large screens	≥ 64.063em (1025px)	.large-* .column(s)	.large-block-grid-*
  XLarge screens	≥ 90.063em (1441px)	Not Activated	Not Activated
  XXLarge screens	≥ 120.063em (1921px)	Not Activated	Not Activated

  Mặc định những kích cỡ màn hình cỡ XLarge hoặc XXLarge của Foundation không được kích hoạt sử dụng, chúng ta có thể kích hoạt bằng cách bỏ comment trong file css.

Kết luận

Trong bài viết tôi đã trình bày một số khái niệm và tính năng cơ bản mà Foundation cung cấp, đồng thời qua việc so sánh nho nhỏ giữa Foundation và Bootstrap hy vọng mang lại cho các bạn cái nhìn tổng quan nhất về hai bộ thư viện này.

Tuy nhiên có một câu hỏi mà tôi chưa trả lời được trong bài viết này đó là Với dự án thế nào thì chọn front-end framework nào? Foundation hay Bootstrap hay framework nào khác? Và tại sao lại chọn như vậy?. Trong tương lai khi có nhiều kinh nghiệm hơn về front-end tôi cũng rất mong trả lời được câu hỏi này, hiện tại chỉ dừng ở mức sử dụng.

Mỗi front-end framework lại có điểm mạnh và điểm yếu riêng, có thể nếu bạn thích làm việc với pixels bạn nên chọn Bootstrap, còn nếu bạn thích làm việc với em bạn có thể chọn Foundation. That's simple and just for fun (yaoming)

Reference Link

1. Foundation Homepage
2. Why Foundation
3. Introduction of Zurb Foundation
4. Foundation - Documents
5. Foundation - Tourist Spots Tutorial
6. Bootstrap vs. Foundation: Which Framework is Better?
7. The 5 Most Popular Frontend Frameworks of 2014 Compared