tìm hiểu CSS framework Môn Lập Trình Web 1

CSS FRAMEWORK
I. CSS Framework là gì?
Hiểu theo từ framework thì nó là bộ công cụ giúp design trang web bằng css
nhanh hơn. Nghĩa là là nó được trừu tượng hóa lên một mức cao hơn. Thay vì bạn
phải hiểu rõ về các bộ chọn, các thuộc tính và giá trị trong CSS để style cho trang web
của mình, thì bạn chỉ cần biết các thành phần có trên trang web như form, navbar,
tooltip, dropdown-menu, modal, button,… và add nó vào trang HTML của mình một
cách thích hợp.
 LỢI ÍCH THIẾT KẾ
• Tính đồng nhất và tính nhất quán trong vị trí phần tử HTML , do đó làm giảm CSS
lỗi mã hóa .
• Dễ dàng hơn để áp dụng "quy tắc một phần ba " và " phần vàng " để thiết kế.
• Giảm nhu cầu sử dụng bảng HTML lồng nhau.
• Lồng các lưới phụ cho thiết kế rất phức tạp.
• Dễ dàng tạo bố trí không đối xứng.
• Hỗ trợ trình duyệt.
• Giảm nỗ lực để tạo ra bố trí trang web ‘mượt’ hơn, so với mã hóa CSS cần thiết từ
đầu.
• Giảm nỗ lực trong tương lai nếu bạn cần phải đặt lại vị trí các yếu tố hoặc thay đổi
đặc tính cho các yếu tố với lượng lớn.
 Một số CSS Framework thông dụng:
• Blueprint CSS Grid Framework
• Twitter Booststrap
• PureCSS
• Skeleton
• YAML, YAML Builder
• 960 CSS Grid System
• CSS Boilerplate
• Sparkl
II. Một số CSS Framework
Có bao giờ bạn phải viết HTML/CSS rồi ngồi suy nghỉ “Tại sao mình phải viết

đi viết lại nhưng class giống nhau như thế này ?” hay “Mình sẽ làm 1 css framework
để về sau sử dụng lại.” Rồi chợt nhận ra là mọi chuyện không đơn giản như vậy class
bạn viết ra ở web này rùi lại hì hục sửa ở web khác , nhiều lúc ngồi sửa còn lâu hơn là
viết mới.
Hôm nay mình sẽ giới thiệu cho các bạn cách để giải quyết vấn đề trên. Đó là
sử dụng Twitter Bootstrap, PureCSS, Skeleton,…
1. Twitter Booststrap
a. Giới thiệu
Bootstrap là một CSS Framework phổ biến nhất hiện nay do Twitter phát triển.
Twitter Bootstrap bao gồm các mã CSS + HTML cơ bản cho typography,
forms, buttons, tables, grids, navigation, và nhiều thành phần khác của website.
Twitter Bootstrap cung cấp lưới cố định (fixed) rộng 940px và 12 cột. Tất
nhiên là cũng có giải pháp cho việc dùng layout dạng động (fluid).
Style của các phần tử HTML trong Twitter Bootstrap khá đơn giản và thanh
lịch. Ví dụ như phần đổ bóng trong input, highlight của bảng biểu, các mã CSS hiển
thị cảnh báo, tabs, phân trang…
b. Tại sao lại sử dụng Twitter Booststrap?
Như đã giới thiệu ở trên , Twitter Bootstrap giúp chúng ta giảm thiểu thời gian
thiết kết HTML và CSS. Twitter Bootstrap định nghĩa sẳn các class CSS công việc
của chúng ta chỉ là sử dụng các class đó vào mục đích của mình.Twitter Bootstrap còn
hổ trợ Responsive design một cách làm giao diện đa thiết bị rất được ưu chuộng trong
thời gian gần đây.
Ưu điểm của bootstrap:
• Hỗ trợ khả năng Responsive: tức là trang web sẽ tự động co giãn theo
kích thước của cửa sổ trình duyệt.
• Tương thích tốt với thiết bị cỡ nhỏ: với sự phổ biến của smartphone
hiện nay, đây là một yếu tố quan trọng. Không cần phải design một bản riêng
cho mobile, với bootstrap bạn chỉ cần thiết kế một lần cho mọi thiết bị.
• Được tích hợp với thư viện jQuery và tương tác tốt với chuẩn HTML5
và CSS3.

Ngoài ra Bootstrap còn được cập nhật phiên bản thường xuyên, hệ thống tài
liệu hướng dẫn chi tiết, thân thiện với các công cụ tìm kiếm, tương thích trên
nhiều trình duyệt, nhiều theme khác nhau.
c. Sử dụng Twitter Booststrap.
Cài đặt, đưa bootstrap vào HTML
Đầu tiên ta cần một bản Bootstrap. Tải Bootstrap từ địa chỉ
sau: />File .zip bạn vừa tải về sẽ giống như sau, gồm 3 thư mục css, js, và fonts.
Tạo một thư mục mới, và giải nén file .zip vừa tải về vào thư mục
này. Tạo một file test.html với nội dung như sau:
Mở thư index.html này bằng trình duyệt. Và bạn sẽ thấy được thành quả ban đầu khi
dùng Bootstrap.
 Các lựa chọn cho Grid
Bảng sau sẽ cho thấy hệ Grid của Bootstrap hoạt động trên các thiết bị khác nhau.
Tài liệu tham khảo về
Bootstrap:
/>2. PureCSS
a. Giới thiệu
PureCSS là tập hợp các mo đun có thể sử dụng trong tất cả các dự án web bao
gồm các mô đun:
o Grids
o Forms
o Buttons
o Tables
o Menus
b. Cài đặt
- Để sử dụng các bạn tải bộ công cụ Purecss tại web: hoặc
thêm link sau vào phần <head> của trang web.
<link rel="stylesheet" href=" />- Bạn có thể thêm thẻ Viewport Meta vào phần <head> của trang web để có thể tự
chỉnh độ rộng và dài cho phù hợp với màn hnhf trình duyệt trên mobile hoặc
laptop…

- < meta name= "viewport" content= "width=device-width, initial-scale=1" >
c. Các mô đun:
• Grids:
Pure Grids rất dễ sử dụng và rất mạnh. Có 1 và khái niệm về Grids cần phải nhớ:
+ Grid classes vs. unit classes
+ độ rộng của mỗi grids là những nhóm riêng
+ những tập hợp con của 1 lưới phải là những unit
+ Nội dung cần được thêm vào bên trong grid unit
 VD: đây là 1 grid với 3 cột
<div class="pure-g">
<div class="pure-u-1-3"><p>Thirds</p></div>
<div class="pure-u-1-3"><p>Thirds</p></div>
<div class="pure-u-1-3"><p>Thirds</p></div>
</div>
Kích thước Grid Unit
Pure CSS cung cấp cả nền lưới 5 tầng và 24 tầng
Link tham khảo thêm: />Ngoài ra còn có Pure Grids Rework Plugin đang được sử dụng ngày nay. Công cụ này
cho phép người sử dụng có thể tùy chỉnh kích thước của Grid Unit
Pure Responsive Grids
Pure có hệ thống Responsive Grid đầu tiên trên điện thoại. Nó chính là 1 loại grids có
tính linh hoạt và thiết thực được xây dựng dựa trên Grid gốc ban đầu.
Grid trong trang của bạn
Do media queries không thể bị viết trùng nên chúng tôi không gộp hệ thống grid trong
thành phần của pure.css. Bạn cần phải gọi chúng thành từng file riêng biệt. Bạn có thể
làm bằng cách thêm link sau vào trang của bạn:
<! [if lte IE 8]>
<link rel="stylesheet" href=" />ie-min.css">
<![endif] >
<! [if gt IE 8]><! >
<link rel="stylesheet" href=" />min.css">

<! <![endif] >
Pure's Regular Grid vs. Responsive Grid
Cách tốt nhất để hiểu sự khác biệt giữa 2 loại Grids này là thông qua ví dụ:
+ Đoạn mã sau cho thấy cách viết của Regular Grid
<div class="pure-g">
<div class="pure-u-1-3"> </div>
<div class="pure-u-1-3"> </div>
<div class="pure-u-1-3"> </div>
</div>
 Chúng luông hiển thị width = 33.33% trên bất cứ thiết bị nào
+ Kế tiếp là Responsive Grids
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-3"> </div>
<div class="pure-u-1 pure-u-md-1-3"> </div>
<div class="pure-u-1 pure-u-md-1-3"> </div>
</div>
 Hiển thị 100% width trên màn hình nhỏ - tuy nhiên là 33.33% trên màn hình vừa
và lớn.
• Form:
Form mặc định
Stacked Form
Code:
<form class="pure-form pure-form-stacked">
<fieldset>
<legend>A Stacked Form</legend>
<label for="email">Email</label>
<input id="email" type="email" placeholder="Email">
<label for="password">Password</label>
<input id="password" type="password" placeholder="Password">
<label for="state">State</label>

<select id="state">
<option>AL</option>
<option>CA</option>
<option>IL</option>
</select>
<label for="remember" class="pure-checkbox">
<input id="remember" type="checkbox"> Remember me
</label>
<button type="submit" class="pure-button pure-button-primary">Sign in</button>
</fieldset>
</form>
Aligned Form
Code:
<form class="pure-form pure-form-aligned">
<fieldset>
<div class="pure-control-group">
<label for="name">Username</label>
<input id="name" type="text" placeholder="Username">
</div>
<div class="pure-control-group">
<label for="password">Password</label>
<input id="password" type="password" placeholder="Password">
</div>
<div class="pure-control-group">
<label for="email">Email Address</label>
<input id="email" type="email" placeholder="Email Address">
</div>
<div class="pure-control-group">
<label for="foo">Supercalifragilistic Label</label>
<input id="foo" type="text" placeholder="Enter something here ">

</div>
<div class="pure-controls">
<label for="cb" class="pure-checkbox">
<input id="cb" type="checkbox"> I've read the terms and conditions
</label>
<button type="submit" class="pure-button pure-button-
primary">Submit</button>
</div>
</fieldset>
</form>
Ngoài ra còn nhiều loại Form khác, link tham khảo thêm: />• Buttons:
Ta thảm khảo qua các cách tạo ra 1 vài button điển hình như sau:
+ Disabled Button:
<a class="pure-button pure-button-disabled" href="#">A Disabled Button</a>
<button class="pure-button pure-button-disabled">A Disabled Button</button>
+ Active Button:
<a class="pure-button pure-button-active" href="#">An Active Button</a>
<button class="pure-button pure-button-active">An Active Button</button>
+ Primary Button: nút đại diện cho hoạt động chính
<a class="pure-button pure-button-primary" href="#">A Primary Button</a>
<button class="pure-button pure-button-primary">A Primary Button</button>
Bạn có thể tham khảo cách tùy chỉnh các Buttons (về cả màu sắc lẫn kích thước) theo
link sau: />• Tables
Trong Pure CSS, ta có tất cả 4 loại Tables:
+ Default Table: tạo ra bằng cách thêm vào classname pure-table
VD: <table class="pure-table">
<thead>
<tr>
<th>#</th>
<th>Make</th>

<th>Model</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Honda</td>
<td>Accord</td>
<td>2009</td>
</tr>
+ Bordered Table: tạo ra dòng kẻ ngang lẫn kẻ dọc cho các ô trong bảng, tạo ra bằng cách
thêm vào classname pure-table-bordered (thay vào đoạn code trên)
+ Horizontal Border Tables: bảng chỉ có kẻ ngang, tạo ra bằng cách thêm vào classname
pure-table-bordered (thay vào đoạn code trên).
• Menus:
+ Horizontal Menu: chức năng là dàn hàng ngang các yếu tố trong loại menu này
+ Menu with Headings: Menu có thêm Headings và định vị Headings trong các yếu tố
Code tạo Menu:
<div class="pure-menu pure-menu-open pure-menu-horizontal">
<a href="#" class="pure-menu-heading">Site Title</a>
<ul>
<li class="pure-menu-selected"><a href="#">Home</a></li>
<li><a href="#">Flickr</a></li>
<li><a href="#">Messenger</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Finance</a></li>
</ul>
</div>
+ Ngoài ra còn có Vertical Menu, Dropdowns in Menu và Menu with Disabled Item, có

thể xem thêm và tham khảo tại link sau: />3. Skeleton
a. Giới thiệu
Skeleton là một bộ sưu tập nhỏ các tập tin CSS có thể giúp phát triển nhanh
chóng các trang web trông đẹp ở kích thước bất kỳ, có thể là một chiếc màn hình máy
tính xách tay 17” hoặc một chiếc iPhone.
Lợi ích:
 Responsive Grid dành cho điện thoại.
 Hoạt động nhanh chóng.
 Phù hợp với nhiều phong cách thiết kế.
b. Cài đặt.
Ở đây chúng ta sử dụng ví dụ demo của trang skeleton:
Download theo đường dẫn: />Tên file: ‘dhg-Skeleton-7ab6820.tar.gz’
Skeleton tải về là một file zip (~ 25KB) có chứa tất cả các nền tảng CSS để bắt
đầu bất kỳ dự án web.
Nội dung của Skeleton bao gồm:
 Index.html: trang html cơ sở bao gồm
 Stylesheets (folder)
o Base.css: kiểu cơ bản của skeleton.
o Skeleton.css: The glorious Skeleton grid.
o Layout.css: tập tin không có kiểu cụ thể nhưng rất hữu dụng để truy
vấn.
 Images (folder)
o Favicon.ico: tiêu chuẩn khoảng 16x16 favicon
o Apple-touch-icon (x3): Tất cả kích thước dành cho các thiết bị cảm
ứng của Apple iPhone 3, iPad and iPhone 4 với màn hình Retina.
Giải nén file ‘dhg-
Skeleton-7ab6820.tar.gz’
bằng 7-zip or Winrar.
Copy file vào folder chứa
website mà chúng ta cần

sử dụng:
Chạy file index.html.
Enjoy!!
c. Công dụng của Skeleton:
• The Grid ( Lưới )
Mạng lưới cơ sở của Skeleton là một biến thể của hệ thống lưới 960. Cú
pháp đơn giản và nó có hiệu quả, nhưng phần tuyệt vời là nó cũng có sự linh hoạt
để hoạt động vững vàng. Tiếp đó, thay đổi kích thước trình duyệt web và xem
cách bố trí phản ứng.
• Typography
Các kiểu chữ của Skeleton được thiết kế để tạo ra một hệ thống phân cấp mạnh mẽ
với phong cách cơ bản. Các phông chữ chính là Helvetica Neue, nhưng phông chữ
chồng có thể dễ dàng thay đổi chỉ với một vài điều chỉnh. Đoạn văn thường được
đặt trong một khoảng từ 14px với chiều cao 21px.
• Forms
Forms có thể là một trong những khó khăn lớn nhất đối với các nhà phát triển web,
nhưng chỉ cần sử dụng những phương thức đơn giản và bạn sẽ thành công.