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