tìm hiểu về CSS framework ppt
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (774.15 KB, 17 trang )
CSS FRAMEWORK
TRƯỜNG ĐẠI HỌC KINH TẾ - LUẬT
KHOA HỆ THỐNG THÔNG TIN
Đề Tài:
Nhóm 6
GVHD: Phạm Công Thành
1
Nội dung trình bày:
I. CSS framework là gì?
II.Một số Grid Layout Framework.
III.Foundation.
2
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.
3
I. CSS framework là gì?
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 phần nội dung 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 nội dung trang web hiển thị đúng trên tất cả các trình duyệt.
4
I. CSS framework là gì?
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.
- Bình thường hoá cơ sở code/class.
- Tiến trình công việc trong một nhóm trôi chảy hơn.
- Đạt được tính tương thích trình duyệt tối ưu.
- Có một code tương đối hoàn chỉnh, cấu tạo tốt.
5
I. CSS framework là gì?
Nhược điểm của CSS Framework
- Bạn cần có thời gian để hiểu đầy đủ về framework.
- Bạn có thể tiếp nối các lỗi của người khác.
- Bạn nhận được một mã nguồn dư thừa.
6
Thế nào là Grid Layour System?
7
•
Là 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í.
•
Layout của trang web được chia ra làm các dòng (row) và cột (colum) thay vì xác định
độ dài, rộng của một phần tử (element) bằng 10px, 20px,
•
Vì xác định độ dài rộng theo cột nên khi phóng to hay thu nhỏ màn hình hoặc sử dụng
smartphone, tablet truy cập thì khả năng hiển thị gọn gàng và đẹp mắt vẫn được duy trì.
Đây cũng chính là khả năng Resposive Web.
8
Thế nào là Grid Layour System?
II. Một số Grid Layout Framework
1. Bootstrap:
Bootstrap là một CSS Framework phổ biến nhất hiện nay do Twitter phát triển.
9
II. Một số Grid Layout Framework
1. Bootstrap:
Ưu điểm:
- Hỗ trợ khả năng Responsive
- Đượ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
- Được cập nhật phiên bản thường xuyên
- Bootstrap rất thân thiết với google
10
II. Một số Grid Layout Framework
1. 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 doBootstrap 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.
11
II. Một số Grid Layout Framework
2. Foundation
12
II. Một số Grid Layout Framework
2. Foundation
Foundation là một framework hoàn toàn hỗ trợ cho Reponsive.
Giúp cho nhà phát triển và người thiết kế tạo ra những website đẹp và có ngữ nghĩa rõ ràng.
Foundation sử dụng một cách thức tiếp cận di động hóa (Mobile First).
13
II. Một số Grid Layout Framework
3. YAML
- Cung cấp bộ công cụ form với nhiều các chủ đề được hỗ trợ
- Tiêu chuẩn web và khả năng tiếp cận
- Tập trung vào các tiêu chuẩn web và quyền truy cập
- Xây dựng khối phù hợp cho tạo mẫu nhanh
- Tương tác tốt với HTML5 và CSS3
- Framework core rất nhẹ (5,9 KB )
- Hỗ trợ trong các trình duyệt Chrome, Firefox , Opera,
14
II. Một số Grid Layout Framework
4. Skeleton
15
II. Một số Grid Layout Framework
5. Gumby
Gumby Framework dựa trên 960 grid.
Được xây dựng bởi Compass và Sass.
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.
16
Bảng so sánh
Name License
Fixed, uid or
elastic
Units
( px, em,
%)
Features # of
columns
Bootstrap
!!"!#$%"$&'$'(
(')(%
Foundation *!"!"!#$%"
$&)(%
!
YAML ++, (
$ !"($#$%"(/#
(!(""!"!%(!,%(
%(,$#$
!
Gumby Framework $&!%"012$(34!"!#$
%")(%(("$
5'!
Skeleton ( 6 *728%(911!("-"
#:5"!$
17
