Trường đại học Kinh Tế - Luật
Khoa Hệ Thống Thông Tin
Đề tài thuyết trình:
CSS FRAMEWORK
Danh Sách Nhóm:
1. Lê Viết Tuấn K124061063
2. Hồ Tuấn Sáng K124061024
3. Võ Hoàng Gia Bảo K124062283
4. Nguyễn Thị Thu Trúc K124061059
5. Nguyễn Thị Bích Thủy K124061037
6. Trương Thị Thảo K124062311
I. CSS framework là gì?
CSS framework có thể coi là một mã nguồn mở, bao gồm các đoạn mã CSS
được viết sẵn giúp người sử dụng thiết kế trang web dễ dàng, nhanh chóng và
ít bị lỗi. ( />- Mã nguồn CSS giúp tạo nên một mạng lưới cho phép các người thiết kế có
thể định vị các thành phần khác nhau để thiết kế các trang web một cách
đơn giản và linh hoạt
- Định dạng các kiểu chữ cho các thành phần của HTML
- Là giải pháp cho các trường hợp các trình duyệt không tương thích, giúp
cho trang web hiển thị đúng trên tất cả các trình duyệt.
- Các ưu điểm của framework CSS
• Tăng năng suất và tránh các lỗi thông thường.
Nếu bạn phát triển vài trang có bản chất tương tự, một đoạn trích code
CSS có thể làm tăng năng suất của bạn một cách bất ngờ, giúp bạn tránh
được các lỗi thông thường và đơn giản hoá việc xử lí code CSS.
• Bình thường hoá cơ sở code/class.
Bạn có một code CSS và (X)HTML-markup mặc định thông thường, vì vậy
bạn luôn dùng cùng ID và class name trong các dự án khác nhau. Sự nhất
quán code trong suốt nhiều dự án giúp bạn dễ dàng duy trì một trang web
thay vì phải đào sâu nghiên cứu mã nguồn của mỗi dự án để hiểu bạn đã
thực sự xây dựng một trang web như thế nào.

• Tiến trình công việc trong một nhóm trôi chảy hơn.
Nếu một framework CSS được lưu trữ cẩn thận, nó có thể được dùng
trong nội bộ một nhóm như một điểm chung; do vậy, bạn có thể tránh các
hiểu lầm và đảm bảo cho một tiến trình làm việc tối ưu. Nó giúp bạn tránh
các lỗi, hoàn thành đúng kế hoạch mà vẫn đảm bảo chất lượng sản phẩm
và không vượt quá kinh phí.
• Đạt được tính tương tích trình duyệt tối ưu.
Vì framework CSS của bạn là “bulletproof” nên bạn không cần phải lo lắng
đến các vấn đề về tính tương thích trình duyệt và có thể bắt đầu mã hoá
ngay lập tức.
• Có một code hoàn chỉnh, cấu tạo tốt.
CSS Framework cung cấp cho bạn một nền tảng xuyên suốt cho mọi trang
web; nhờ đó bạn có cách tạo kiểu cơ bản cho mọi yếu tố html trong phần
đầu của các dự án. Bạn đã từng quên code hay abbr? Đó chính là mấu
chốt.
- Nhược điểm của CSS Framework
• Bạn cần có thời gian để hiểu đầy đủ về framework.
“Thông thường đối với những người sử dụng, thời gian cần thiết để
hiểu về cấu trúc của framework lớn hơn nhiều công việc mã hoá từ
đầu.
• Bạn cần có một hiểu biết cụ thể về cấu trúc code.
Khi sử dụng framework CSS bên ngoài bạn vẫn cần một hiểu biết kĩ
càng về code của mình. Bạn cần biết chính xác thực tế framework của
bạn được tạo dựng như thế nào. “Bằng cách tạo dựng một trang từ
đầu, bạn có thể tăng hiểu biết về cấu trúc trang, điều mà bạn không
thể học được từ bất cứ tài liệu nào”.
• Bạn có thể tiếp nối các lỗi của người khác.
Nếu dùng framework CSS bên ngoài, có thể bạn sẽ gặp rắc rối trong
việc phải tốn nhiều thời gian để sửa các lỗi của một ai đó, có khi còn
mất thời gian hơn nhiều so với việc sửa lỗi của chính mình.

• Bạn phát triển trang dựa trên một framework chứ không phải là một
kiến thức vững chắc về CSS.
“Một vấn đề lớn của framework là khi các nhà thiết kế gắn mình với
một framework tương phản với code cơ bản. Hiểu biết đạt được trong
trường hợp này bao quanh một framework cụ thể, điều này sẽ cực kì
hạn chế các nhà thiết kế.”
• Bạn nhận được một mã nguồn phồng lên.
“Cho dù nó thuộc framework language phía máy chủ hay thư viện
JavaScript, vẫn có một tỉ lệ lớn code không bao giờ được thực hiện.
While not a major issue server side, this can greatly degrade the
performance of a client side framework such as a JavaScript library.”
• Không thể đóng khung CSS về mặt ngữ nghĩa.
“CSS và (X)HTML có liên quan chặt chẽ với nhau. (X)HTML về bản chất
là một ngôn ngữ không thể bao trong kiểu của một framework. Mỗi dự
án có một đặc điểm riêng biệt trong cấu trúc tài liệu, các class và ID.
Một framework CSS loại bỏ một cách tiêu cực phần lớn giá trị về mặt
ngữ nghĩa khỏi markup của một tài liệu. Và theo ý kiến của tôi thì nên
tránh điều này.”
Grid Layout System:
Grid System là cách thuật ngữ ý chỉ cách bố trí nội dung trên giấy, chúng ta
thường gặp trên các tờ báo hoặc tạp chí.
Điều này có ý nghĩa rằng layout của trang web chúng ta sẽ được chia ra làm
các dòng (row) và cột (colum). Và thay vì ta xác định độ dài, rộng của một phần tử
(element) bằng 10px, 20px, thì giờ ta chuyển sang xác định xem phần tử đó
chiếm bao nhiêu cột.
Do các c t trong Grid System u t l % v i nhau. Nên khi kích ộ đề ỉ ệ ớ
th c màn hình thu nh . Ví d nh t 1366px trên desktop, sang ướ ỏ ụ ư ừ
màn hình nh kho ng 320px trên chi c i n tho i. thì 320px ó v n ỏ ả ế đệ ạ đ ẫ
c chia u ra thành 12 c t. Các element mà b n b trí trên grid đượ đề ộ ạ ố
system v n s chi m s l ng c t nh ban u. V y nên t l c a ẫ ẽ ế ố ượ ộ ư đầ ậ ỉ ệ ủ

layout luôn cân i.đố
II. Một số CSS Framework có hỗ trợ Grid Layout:
1. Bootstrap:
- Bootstrap là một CSS Framework phổ biến nhất hiện nay do Twitter phát
triển.
- Ưu điểm:
• 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 (lên Google
và gõ “Bootstrap themes“),….
• Điều đặc biệt hơn, bootstrap rất thân thiết với google. Các bot + engine
tìm kiếm của google rất ưu ái đối với những SEOer thiết kế website
bằng bootstrap.
- Nhược điểm:
• Thêm quá nhiều class không cần thiết.
• Dễ bị trùng phong cách, cũng do Bootstrap quá phổ biến nên giờ phần
lớn nhìn rất chán vì nó na ná nhau.
• Nặng hơn so với các framework khác.
2. Foudation
Framework Foundation được thực hiện bởi Zurb và nó được phát hành
vào năm 2011.
- Ưu điểm:

+ 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 là một framework hoàn toàn hỗ trợ cho Reponsive (ngay từ
phiên bản 2.0), giúp cho nhà phát triển và thiết kế tạo ra những website
đẹp và toàn toàn reponsive với code ngữ nghĩa. Foundation sử dụng một
cách thức tiếp cận di động hóa (Mobile First), giúp cho mọi người có thể
thiết kế một trang web mà hoạt động tốt trên cả thiết bị máy tính thường
và các thiết bị di động màn hình nhỏ hoặc lớn hơn.
3. YAML
YAML ( Yet Another Giao diện multicolumn ) là một khuôn khổ CSS mô-
đun cho các trang web thực sự linh hoạt , dễ tiếp cận và đáp ứng. Nó dựa
trên Sass và có một khuôn khổ cốt lõi rất mỏng mà trọng lượng chỉ gần
bằng 6kB.YAML là tập trung vào thiết bị thiết kế màn hình độc lập và cung
cấp các mô-đun chống đạn bố trí linh hoạt. Đây là một điểm khởi đầu hoàn
hảo và chìa khóa để thiết kế thật sự đáp ứng.
- Ưu điểm:
• Hệ thống lưới điện linh hoạt chống đạn
• Hình thức linh hoạt công cụ với chủ đề hỗ trợ
• Tập trung vào các tiêu chuẩn web và khả năng tiếp cận
• Kiểu chữ tối ưu hóa cho tất cả các yếu tố tiêu chuẩn
• Khối xây dựng phù hợp cho tạo mẫu nhanh
• Cũng tương tác tốt cho HTML5 và CSS3
• Lõi khuôn khổ rất mỏng (5,9 MB )
• YAML được kiểm tra và hỗ trợ trong các trình duyệt hiện đại như
Chrome, Firefox , Opera, Safari và Internet Explorer.

4. Skeleton
Skeleton là một framework nhỏ gọn, thân thiện với nhà phát triển mobile,
được xaay dựng dựa trên 960 grid.
- Ưu điểm:
• Skeleton giúp phát triển nhanh chóng, giúp thực hành CSS tốt, có
một mạng lưới được cấu trúc tốt, tổ chức file một cách độc lập.
• Đẹp, nhẹ, cách sử dụng dễ dàng, ngoài ra skeltton còn cung cấp một
nền tảng độc lập nhưng vẫn giúp người sử dụng có thể thiết kế theo
phong cách của mình
5. Gumby
Gumby Framework dựa trên 960 grid, đáp ứng bao gồm nhiều loại lưới với
các biến thể các cột khác nhau cho phép bạn linh hoạt trong suốt quá trình
thực hiện dự án.
Được xây dựng bởi Compass và Sass. Nền tảng của nó là một mạng lưới lai
cho phép bạn tạo bố cục bằng cách xác định những gì lưới để sử dụng, bất cứ
nơi nào bạn muốn trên trang web. Việc xây dựng trong giao diện người dùng
bao trùm các xu hướng thiết kế mới nhất và cho phép bạn lựa chọn và kết
hợp thiết kế phẳng với nhiều phong cách thiết kế. Sử dụng các dấu ấn,tích
hợp biểu tượng Entypo trong dự án web bất kì- chúng có độ phân giải độc lập.
Nhược điểm lơn nhất của gumby là chỉ hỗ trợ cho các trình duyệt chorme,
Firefox, Opera, Internet Explorer 8-10.
Name License
Fixed,
fluid or
elastic
Units
( px,
em,
%)
Features # of

colum
ns
Bootstra
p
MIT
License
(Apache
License
fixed,
fluid,
respo
nsive
px, % Layout, typography, forms, buttons,
navigation, media queries + more,
+ .less files + js libraries
12
v2.0
prior to
3.1.0)
Foundati
on
MIT
License
fluid px, % Responsive Layout, source ordering,
typography, forms, buttons,
navigation, media queries, js
libraries
Any
YAML CC-BY
2.0

fixed,
elasti
c,
fluid
px,
em,
%
Layout, grids, columns, forms,
buttons, progressive linearization for
responsive layouts, float handling,
navigation, typography, accessibility,
add-ons (accessible tabs, rtl-support,
microformats)
any
Gumby
Framewo
rk
MIT
License
fluid %,
px
responsive, media queries, hybrid
grid PSD templates, UI kit,
typography forms, buttons,
navigation, js libraries, vertical
alignment
12, 16
+ any
Skeleton MIT
license

respo
nsive
Responsive Grid Down To Mobile,
Fast to Start, Style Agnostic. Base
grid is a variation of the 960 grid
system.
12
Chọn framework phù hợp với trang web là không hề đơn giản, vì nhiều lý do:
1. Mỗi trang web là khác nhau và đòi hỏi phải có đặc điểm khác nhau. Sử dụng
một framework hoàn chỉnh cho một trang web đơn lẻ có thể đưa ra một kết
quả đầy đủ, nhưng chắc chắn sẽ tốn nhiều tài nguyên.
2. Hiện nay không có nhiều khác biệt đáng kể giữa các framework: chúng đều
rất đầy đủ và dễ sử dụng.
Tuy nhiên, cần lưu ý khi lựa chọn một framework thích hợp:
Tốc độ cài đặt: một số Framework rất đơn giản để cài đặt và sử dụng. Một số
khác đòi hỏi nhiều thời gian để cấu hình.
Dễ hiểu: một số framework thì khó hiểu, phức tạp.
Lựa chọn: một số framework phức tạp hơn nhưng lại cung cấp nhiều tùy chọn
cấu hình, widget và các tùy chọn giao diện.
Tích hợp với các hệ thống khác.
Hỗ trợ dài hạn tốt nhất: Một số dự án kỹ thuật số thiếu tính liên tục trong thời
gian và dừng việc cập nhật framework và dịch vụ hỗ trợ. Tốt hơn nên lựa chọn
các framework luôn được đảm bảo hỗ trợ đầy đủ, liên tục bởi các công ty
cung câp sản phẩm chuyên nghiệp Ưu và nhược điểm của việc sử dụng các
khuôn khổ
Hết