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

Thay vì bạnphải hiểu rõ về các bộ chọn, các thuộc tính và giá trị trong CSS để style cho trang webcủ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

Trang 1

CSS FRAMEWORK

Hiểu theo từ framework thì nó là bộ công cụ giúp design trang web bằng cssnhanh 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ạnphải hiểu rõ về các bộ chọn, các thuộc tính và giá trị trong CSS để style cho trang webcủ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ộtcá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 CSSlỗ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

Trang 2

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 classbạ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

Trang 3

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ấtnhiê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à thanhlịch Ví dụ như phần đổ bóng trong input, highlight của bảng biểu, các mã CSS hiểnthị 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 gianthiết kết HTML và CSS Twitter Bootstrap định nghĩa sẳn các class CSS công việccủ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 trongthời gian gần đây

Ưu điểm của bootstrap:

kích thước của cửa sổ trình duyệt

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ị

Trang 4

• Đượ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àiliệ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: http://getbootstrap.com/

Trang 5

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:

Trang 6

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

Trang 7

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:

Trang 8

- 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-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

Trang 9

Link tham khảo thêm: http://purecss.io/grids/

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]>

Trang 10

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>

 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

Trang 11

Trang 12

Stacked Form

Trang 13

<legend>A Stacked Form</legend>

<label for="email">Email</label>

<label for="password">Password</label>

Trang 14

<label for="state">State</label>

</select>

<input id="remember" type="checkbox"> Remember me

Trang 15

<label for="name">Username</label>

<label for="password">Password</label>

Trang 16

<label for="email">Email Address</label>

</div>

<label for="foo">Supercalifragilistic Label</label>

<input id="cb" type="checkbox"> I've read the terms and conditions </label>

Trang 17

<button type="submit" class="pure-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>

Trang 18

<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: http://purecss.io/buttons/

• 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">

Trang 20

• 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:

<a href="#" class="pure-menu-heading">Site Title</a>

<ul>

<li><a href="#">Flickr</a></li>

<li><a href="#">Messenger</a></li>

Trang 21

<li><a href="#">Sports</a></li>

<li><a href="#">Finance</a></li>

Ở đây chúng ta sử dụng ví dụ demo của trang skeleton:

Download theo đường dẫn: http://www.getskeleton.com/#download

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

Trang 22

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 để truyvấ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 Skeleton-7ab6820.tar.gz’

c. Công dụng của Skeleton:

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

Trang 23

để hoạt động vững vàng Tiếp đó, thay đổi kích thước trình duyệt web và xemcách bố trí phản ứng.

Trang 24

• 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

Trang 25

• 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

Trang 27

• Support for Skeleton

Skeleton đã được sử dụng trên nhiều thiết bị và trình duyệt:

 Chrome (Mac/PC)

 Firefox 4.0, 3.6, 3.5, 3.0 (Mac/PC)

 Safari

 IE9, IE8, IE

Định dạng
Số trang	27
Dung lượng	1,19 MB