2. 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
8. Make an HTML file
1. Create HTML 5 document
2. Change Title
3. Attach 2 CSS files
4. Add jQuery Link
5. Attach JavaScript file
6. Add Responsive Design metatag
9. Make an HTML file
Bootstrap Template
http://twitter.github.com/bootstrap/getting-started.html
10. Make an HTML file
Responsive Design
http://twitter.github.com/bootstrap/scaffolding.html
11. How it Works
12-column grid
WEEK OF 1/9/2013 15
.span12
.span4 .span4 .span4
.span3 .span9
.container-fluid
.span1 .span11
• Relies on you making divs with
certain classes.
• Bootstrap has many built-in
components whose styles can
be applied as well.
12. How it Works
Bootstrap Base CSS
http://twitter.github.com/bootstrap/base-css.html
WEEK OF 1/9/2013 16
13. How it Works
Bootstrap Scaffolding
http://twitter.github.com/bootstrap/scaffolding.html
WEEK OF 1/9/2013 17