Tìm hiểu về Zurb Foundation 3

Kể từ khi Twitter open source Twitter Bootstrap – frontend framework làm nên giao diện hiện tại của Twitter trên Github, dự án này đã nhận được sự ủng hộ rất rộng rãi từ cộng đồng, nhanh chóng trở thành project được quan tâm nhất trên Github với số lượng watch và fork khổng lồ (32.5k – 6.5k). Bootstrap đã trở nên phổ biến đến mức gần như tất cả các dự án nguồn mở hay web application mới đều sử dụng nó. Hôm nay mời các bạn cùng CHST tìm hiểu về một frontend framework khác – Zurb Foundation, có thể coi là sự thay thế đáng giá cho Bootstrap.

Zurb Foundation

Nếu bạn chưa biết về Foundation, thì đây là một Frontend Framework tương tự như Bootstrap – tập hợp một style và component có sẵn, có thể sử dụng trực tiếp hay làm nền tảng trong một dự án Web Application. Ngoài Foundation và Bootstrap, cũng có các Frontend Framework khác như Skeleton, tuy nhiên về sự đồ sộ về code base và các component đi kèm, cũng như sự phổ biến trong cộng đồng thì chỉ có Foundation là có thể so sánh được với Bootstrap.

Giống với Bootstrap, Foundation cũng gồm những thành phần cơ bản cần thiết nhất cho mỗi trang web: Grid System, Typography, Table, Form, Navigation, Label, và một số jQuery plugins. Bootstrap có vẻ đầy đủ hơn, bao gồm nhiều dạng form, figure, cũng như các jQuery plugin cho Dialog, Tab, Popup…, tuy nhiên với yêu cầu của một dự án web design thì những thành phần này rất ít khi cần dùng đến, và sự khác biệt là không nhiều. Sau đây là một số điểm khác biệt đáng chú ý của Foundation.

Foundation vs. Bootstrap

SASS và Less

SASSLess và hai CSS Preprocessor phổ biến nhất hiện nay. Về tính năng, cách sử dụng của hai preprocessor này khá giống nhau, và việc so sánh nằm ngoài phạm vi của bài viết này; Tuy nhiên việc được xây dựng dựa trên SASS (thay vì Less như Bootstrap) khiến Foundation tận dụng được lợi thế của Compass framework, và dễ dàng tích hợp vào các project Rails hơn nhiều so với Bootstrap. Các bạn có thể tham khảo thêm phiên bản gem của Foundation: Foundation Gem.

Lightweight

Như đã nói ở trên Bootstrap có bộ thành phần rất đồ sộ, tuy nhiên không phải tất cả đều cần thiết đối với một dự án web design. Điều này cũng phần nào phản ánh được mục tiêu của Twitter khi open source Bootstrap: “Giúp các startup xây dựng web application trong thời gian nhanh nhất và ít tốn kém nhất”. Trong khi đó Foundation nhẹ nhàng hơn rất nhiều, với chỉ hai component đơn giản là Orbit (slideshow) và Reveal (dialog) nhưng lại cực kỳ cần thiết. Phía sau Foundation là Zurb, một studio thiên về web design thay vì web application, và phylosophy của Foundation là “để sử dụng trong quá trình prototype”, Zurb khuyến khích designers tùy biến và xây dựng design của riêng họ.

CSS3 Layout và Responsive Design

Mặc định Bootstrap không hỗ trợ Responsive Web Design, cũng giống như từ phiên bản 1.0. Bạn có thể include thêm file ‘bootstrap-responsive.css’ đi kèm để có thể sử dụng reponsive grid; tuy nhiên ai cũng hiểu rằng điều này sẽ tăng thêm những gánh nặng không cần thiết cho client cũng như ảnh hưởng tương đối nhiều tới tốc độ tải trang và UX. Trái lại, Foundation đã hỗ trợ responsive grid ngay từ phiên bản đầu tiên, và ở phiên bản 3.0 mới ra mắt hôm qua, Foundation đã đi một bước táo bạo là từ bỏ responsive grid xây dựng dựa trên các số đo tỉ lệ % mà dựa vào một thuộc tính CSS3: box-sizing, và từ bỏ hỗ trợ cho trình duyệt IE phiên bản 7 và 8. Chi tiết về những ưu điểm của box-sizing xin dành bạn đọc tự tìm hiểu.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s