Responsive Design
One website - many devices
How do we make the same website look good on a phone, tablet, laptop, and big desktop?
Design
Not just 1 design anymore.
Many, many iterations.
Easy to get confused.
Breakpoints/Media Queries
Media Query examples
@media (min-width: 320px) { ... }
@media (min-width: 320px) and (orientation: landscape) { ... }
@media (max-width: 960px) { ... }
tl;dr
Responsive design is HARD and CONFUSING on your own.
Enter CSS Frameworks...Bootstrap is the most popular.
Installing Bootstrap - #1
Download all the files and host locally
Installing Bootstrap - #2
Installing Bootstrap - #2
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Installing Bootstrap - #3
Meteor makes it easy.
Containers
Grid System
12 point system.
col-xs-*
col-sm-*
col-md-*
col-lg-*
Grid System example
https://csci16.hellometeor.com/bootstrap-in-action.html
Create new folder “bootstrap-in-action” and “index.html” file.
Download HTML & change around columns.
Play around with col-xs, col-sm, col-md, col-lg options. (Remember, grid of 12!)
Bootstrap Nav Bars
Try removing “navbar-right” from your code. What happens?
http://getbootstrap.com/components/#navbar
Play around with other navbar options Bootstrap gives us.
Another example: https://getbootstrap.com/examples/navbar/
In a Meteor App
Remember: use Atmosphere package to install.
Do NOT need to inline add bootstrap code for css & js
Responsive Design Tip
Think VERTICAL for small screens.
Think HORIZONTAL for larger screens.
What next?
Might want to link dropdowns to new pages. Use routes.