tìm hiểu về CSS framework ppt

Một số Grid Layout Framework... 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, nha

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

Nội dung trình bày:

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

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.

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?

• 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í.

độ dài, rộng của một phần tử (element) bằng 10px, 20px,

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

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

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)

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

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, fluid or

elastic

Units ( px, em,

%)

Features # of

columns

Bootstrap MIT License

(Apache License v2.0 prior to 3.1.0)

fixed, fluid, responsive

px, % Layout, typography, forms, buttons, navigation, media queries + more, + less

files + js libraries

12

Foundation MIT License fluid px, % Responsive Layout, source ordering, typography, forms, buttons, navigation,

media queries, js libraries

Any

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 Framework MIT License fluid %, px responsive, media queries, hybrid grid PSD templates, UI kit, typography forms,

buttons, navigation, js libraries, vertical alignment

12, 16 + any