lab 1

8 downloads 110096 Views 1MB Size Report
Twitter Bootstrap. HTML + CSS + ... Download Bootstrap http://getbootstrap.com ... Bootstrap Template http://twitter.github.com/bootstrap/getting-started.html ...
IAT334 Interface Design D101 & D104 Labs Spring 2013 - Week 1

Diliara [dilara] Nasirova

WEEK OF 1/9/2013

1

Responsive Design • What is it and why should we care about it? • CSS3 media queries: use different CSS styles based on the screen size • Fluid grid: %-based or EM-based sizes allows flexible design • Flexible images: images resize as part of the design • Together: • one codebase across all devices • UI adapts to the screen at hand

Responsive Design Examples

http://blenz.ca

Responsive Design Examples

http://starbucks.ca/

Responsive Design Examples

http://timhortons.ca

Twitter Bootstrap HTML + CSS + JavaScript = Responsive Design Framework

Download Bootstrap http://getbootstrap.com

css (bootstrap.min.css)

WEEK OF 1/9/2013

img (glyphicons)

js (bootstrap.min.js)

11

Make an HTML file 1. 2.

Create HTML 5 document Change Title

3. 4. 5. 6.

Attach 2 CSS files Add jQuery Link Attach JavaScript file Add Responsive Design metatag

Make an HTML file Bootstrap Template http://twitter.github.com/bootstrap/getting-started.html

Make an HTML file Responsive Design http://twitter.github.com/bootstrap/scaffolding.html

How it Works 12-column grid .container-fluid .span12

.span4

• •

Relies on you making divs with certain classes. Bootstrap has many built-in components whose styles can be applied as well. WEEK OF 1/9/2013

.span4

.span3

.span9

.span1

.span11

.span4

15

How it Works Bootstrap Base CSS http://twitter.github.com/bootstrap/base-css.html

WEEK OF 1/9/2013

16

How it Works Bootstrap Scaffolding http://twitter.github.com/bootstrap/scaffolding.html

WEEK OF 1/9/2013

17

Practice

WEEK OF 1/9/2013

18

Explore! Bootstrap Components Full list of all of the built-in components: http://twitter.github.com/bootstrap/components.html

WEEK OF 1/9/2013

19

Recreate this design .hero-unit



.btn .btn-primary .btn-large .span4

.span8





.btn

Useful Resources • Examples of websites built with bootstrap: • www.builtwithbootstrap.com

• W3C Validator: • http://validator.w3.org

• Free Graphics: • http://subtlepatterns.com

• Firebug: • http://getfirebug.com

WEEK OF 1/9/2013

21